/* cabecalho-utilidades.css */
/**
 * Cabeçalho: menus de utilidades (os dois cabeçalhos) e estrutura de duas linhas.
 * Figma: "Utilidades · exemplos" 144:2140 · Header/Cabeçalho "Duas linhas" 128:1333 (tablet 162:4848, mobile 150:2816)
 *        · "Menu · organização" 148:3024 (painel CATEGORIAS).
 *
 * Medidas do Dev Mode:
 *   Header/Utilidade   ícone 20 em caixa 25 + rótulo 14/1.5 + seta 8 · gap 8 · utilidades a 24
 *   painel             320 de largura · padding 24 · raio card · sombra float · 12 abaixo do gatilho
 *   contato            círculo 36 brand-subtle com ícone 14 brand · rótulo 12 ink-muted · valor 16 ink · linhas a 16
 *   conta              saudação 20/1.3 (600) · texto 14 ink-muted · botões 48 a 12 · links 16 com ícone 14 ink-muted
 *   prévia do carrinho foto 64 raio 8 · nome 14 · detalhe 12 ink-muted · preço 16 (500)
 *   linha principal    padding 16/24 · gap 32 · busca 48 de altura, fundo surface-alt, borda 1 line
 *   linha do menu      57 de altura · padding 8/24 · menu centralizado, gap 8 · CATEGORIAS Label 16 (500) + barras 20
 *   CATEGORIAS         organização do Figma Menu aberto · Painel 130:1376 (colunas · destaque · "Navegue por tudo"),
 *                      com estilo próprio: cartões de categoria com foto, destaque com selo, rodapé leve
 *
 * Só tokens: as cores mudam pelo painel Sua Loja.
 */

/* ---------- Utilidade: gatilho + painel ---------- */

.cdw-util {
	position: relative;
	display: flex;
	align-items: center;
}

.cdw-util__gatilho--rotulo {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-8);
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--body);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-util__gatilho--rotulo > .cdw-icone:first-child {
	flex: none;
	width: 25px;
	font-size: 20px;
}

.cdw-util__gatilho--rotulo .cdw-util__seta {
	font-size: 8px;
	transition: transform var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-util__gatilho--rotulo:hover,
.cdw-util__gatilho[aria-expanded="true"] {
	color: var(--wp--preset--color--brand-text);
}

.cdw-util__gatilho[aria-expanded="true"] .cdw-util__seta {
	transform: rotate(180deg);
}

.cdw-util__gatilho:focus-visible,
.cdw-categorias-gatilho:focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 4px;
	border-radius: var(--wp--custom--radius--sm);
}

.cdw-util__rotulo {
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cdw-util__painel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: var(--wp--custom--z-index--dropdown);
	width: 320px;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 140px);
	padding: var(--wp--preset--spacing--space-24);
	overflow-y: auto;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--float);
	color: var(--wp--preset--color--ink);
	text-align: left;
	white-space: normal;
}

.cdw-util__painel[hidden],
.cdw-previa[hidden],
.cdw-catmenu[hidden] {
	display: none;
}

.cdw-util__titulo {
	margin: 0 0 var(--wp--preset--spacing--space-16);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--line-height--body);
}

.cdw-util__contatos,
.cdw-util__links,
.cdw-previa__itens {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdw-util__contatos {
	gap: var(--wp--preset--spacing--space-16);
}

.cdw-util__contato {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cdw-util__contato-icone {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--brand-subtle);
	color: var(--wp--preset--color--brand-text);
	font-size: 14px;
}

.cdw-util__contato-texto {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cdw-util__contato-rotulo {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--overline);
	line-height: var(--wp--custom--line-height--body);
}

.cdw-util__contato-valor {
	overflow-wrap: anywhere;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

a.cdw-util__contato:hover .cdw-util__contato-valor,
.cdw-util__link:hover,
.cdw-previa__nome:hover {
	color: var(--wp--preset--color--brand-text);
}

.cdw-util__saudacao {
	margin: 0 0 var(--wp--preset--spacing--space-4);
	font-size: var(--wp--preset--font-size--heading-sm);
	font-weight: var(--wp--custom--weight--heavy);
	line-height: var(--wp--custom--line-height--heading-sm);
}

.cdw-util__texto {
	margin: 0 0 var(--wp--preset--spacing--space-16);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--body);
}

.cdw-util__painel .cdw-util__botao {
	display: flex;
	width: 100%;
	margin-top: 12px;
}

.cdw-util__links {
	gap: var(--wp--preset--spacing--space-4);
	margin-top: var(--wp--preset--spacing--space-16);
	padding-top: var(--wp--preset--spacing--space-8);
	border-top: 1px solid var(--wp--preset--color--line);
}

/* Quem já entrou não tem os botões acima: a lista começa logo depois da saudação. */
.cdw-util__saudacao + .cdw-util__links {
	margin-top: 12px;
}

.cdw-util__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: var(--wp--preset--spacing--space-8) 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	text-decoration: none;
}

.cdw-util__link .cdw-icone {
	flex: none;
	width: 20px;
	color: var(--wp--preset--color--ink-muted);
	font-size: 14px;
}

/* Atendimento (Figma 144:2210): divisor e os links de dúvida, ícone ink-muted a 16 do texto. */
.cdw-util__contatos + .cdw-util__links--ajuda {
	margin-top: var(--wp--preset--spacing--space-16);
}

.cdw-util__titulo + .cdw-util__links--ajuda {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.cdw-util__links--ajuda .cdw-util__link {
	gap: var(--wp--preset--spacing--space-16);
}

/* ---------- Prévia do carrinho (abre com o mouse; no toque o ícone vai direto para o carrinho) ---------- */

.cdw-util--carrinho .cdw-previa {
	display: none;
	width: 340px;
}

@media (hover: hover) and (min-width: 782px) {
	/* Ao tirar o mouse, a prévia espera 0,6 s e some em 0,2 s (antes sumia na hora). */
	.cdw-util--carrinho .cdw-previa:not([hidden]) {
		display: block;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.2s ease 0.6s, visibility 0s linear 0.8s;
	}

	.cdw-util--carrinho:hover .cdw-previa:not([hidden]),
	.cdw-util--carrinho:focus-within .cdw-previa:not([hidden]) {
		visibility: visible;
		opacity: 1;
		transition-delay: 0s;
	}

	/* Ponte invisível entre o ícone e o painel: o mouse não "cai" no caminho. */
	.cdw-util--carrinho .cdw-previa::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 12px;
	}
}

.cdw-previa__itens {
	gap: var(--wp--preset--spacing--space-16);
}

.cdw-previa__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.cdw-previa__foto {
	flex: none;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface-alt);
}

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

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

.cdw-previa__nome {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--body);
	text-decoration: none;
}

.cdw-previa__detalhe,
.cdw-previa__mais {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--overline);
	line-height: var(--wp--custom--line-height--body);
}

.cdw-previa__mais {
	margin: var(--wp--preset--spacing--space-8) 0 0;
}

.cdw-previa__preco {
	font-size: var(--wp--preset--font-size--body);
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--line-height--body);
}

/* Frete grátis na prévia: a mesma barra do carrinho (cdw_carrinho_frete_gratis_html()). */
.cdw-previa .cdw-pc-frete {
	margin-top: var(--wp--preset--spacing--space-16);
}

/* Produto/Frete grátis progressivo: 760×72, padding 16, gap 8, trilho de 8. */
.cdw-pc-frete {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-8);
	padding: var(--wp--preset--spacing--space-16);
	border-radius: 36px;
	background: var(--wp--preset--color--surface-alt);
}

.cdw-pc-frete__linha {
	display: flex;
	margin: 0;
	align-items: center;
	gap: var(--wp--preset--spacing--space-8);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
	line-height: 1.5;
}

.cdw-pc-frete__linha .cdw-icone {
	margin-inline: 2px;
	color: var(--wp--preset--color--brand);
	font-size: 16px;
}

.cdw-pc-frete__trilho {
	height: 8px;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--line);
}

.cdw-pc-frete__trilho span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--wp--preset--color--brand);
	transition: width var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

/* Frete conquistado: o cartão pulsa (anel na cor da marca), o ícone bate e um brilho varre o trilho. */
.cdw-pc-frete__trilho span {
	position: relative;
}

@media (prefers-reduced-motion: no-preference) {
	.cdw-pc-frete.is-completo {
		animation: cdw-pc-frete-pulso 1.8s ease-out infinite;
	}

	.cdw-pc-frete.is-completo .cdw-icone {
		animation: cdw-pc-frete-bate 1.8s ease-in-out infinite;
	}

	.cdw-pc-frete.is-completo .cdw-pc-frete__trilho span::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wp--preset--color--surface) 70%, transparent), transparent);
		animation: cdw-pc-frete-varre 2.2s ease-in-out infinite;
	}
}

@keyframes cdw-pc-frete-pulso {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--wp--preset--color--brand) 40%, transparent);
	}

	70%,
	100% {
		box-shadow: 0 0 0 14px color-mix(in srgb, var(--wp--preset--color--brand) 0%, transparent);
	}
}

@keyframes cdw-pc-frete-bate {
	0%,
	60%,
	100% {
		transform: scale(1);
	}

	30% {
		transform: scale(1.3);
	}
}

@keyframes cdw-pc-frete-varre {
	0%,
	15% {
		transform: translateX(-100%);
	}

	85%,
	100% {
		transform: translateX(100%);
	}
}

.cdw-previa__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--space-16);
	margin: var(--wp--preset--spacing--space-16) 0 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.cdw-previa__subtotal strong {
	color: var(--wp--preset--color--ink);
	font-weight: var(--wp--custom--weight--bold);
}

/* Carrinho vazio — Figma Header/Menu de utilidades · Tipo=Carrinho vazio (717:3204):
   360 de largura, padding 24, gap 16, tudo centralizado · ícone 24 ink-muted num círculo de 64
   surface-alt · título Label 16 ink · frase Caption 14 ink-muted (gap 8) · botão brand largura toda. */
.cdw-util--carrinho .cdw-previa--vazia {
	width: 360px;
	text-align: center;
}

@media (hover: hover) and (min-width: 782px) {
	.cdw-util--carrinho .cdw-previa--vazia:not([hidden]) {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--wp--preset--spacing--space-16);
	}
}

.cdw-previa__vazio-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--ink-muted);
	font-size: 24px;
}

.cdw-previa__vazio-titulo,
.cdw-previa__vazio-texto {
	width: 100%;
	margin: 0;
	line-height: var(--wp--custom--line-height--body);
}

.cdw-previa__vazio-titulo {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
}

/* Título e frase ficam a 8 um do outro (o resto do painel tem gap 16). */
.cdw-previa__vazio-texto {
	margin-top: calc(var(--wp--preset--spacing--space-8) - var(--wp--preset--spacing--space-16));
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
}

.cdw-previa--vazia .cdw-util__botao {
	margin-top: 0;
}

/* ---------- Estrutura de duas linhas ---------- */

.cdw-cabecalho--duas-linhas .cdw-cabecalho__conteudo {
	gap: var(--wp--preset--spacing--space-32);
}

.cdw-cabecalho--duas-linhas .cdw-cabecalho__logo-e-menu {
	flex: none;
}

.cdw-cabecalho--duas-linhas .cdw-cabecalho__acoes {
	flex: none;
	gap: var(--wp--preset--spacing--space-24);
}

.cdw-utilidades {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-24);
}

.cdw-cabecalho__conta-compacta {
	display: none;
}

/* Busca sempre visível: o campo ocupa o espaço entre o logo e as utilidades. */
.cdw-busca-caixa {
	position: relative;
	flex: 1;
	min-width: 0;
}

.cdw-cabecalho--duas-linhas .cdw-busca {
	position: static;
	display: flex;
	background: transparent;
}

.cdw-cabecalho--duas-linhas .cdw-busca__fechar {
	display: none;
}

.cdw-cabecalho--duas-linhas .cdw-busca__campo {
	padding: 0 17px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface-alt);
	transition: background-color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-cabecalho--duas-linhas .cdw-busca__campo:focus-within {
	padding: 0 var(--wp--preset--spacing--space-16);
	border: 2px solid var(--wp--preset--color--focus);
	background: var(--wp--preset--color--surface);
}

/* Busca/Sugestões · Tipo=Compacto: 560 de largura, raio 24, sombra float, 5 abaixo do campo,
   alinhado à borda esquerda do campo (antes saía 76 px para a esquerda). */
.cdw-cabecalho--duas-linhas .cdw-busca-painel {
	top: calc(100% + 5px);
	right: auto;
	left: 0;
	z-index: var(--wp--custom--z-index--dropdown);
	width: 560px;
	max-width: calc(100vw - 32px);
	border-radius: var(--wp--custom--radius--container);
	box-shadow: var(--wp--preset--shadow--float);
}

.cdw-cabecalho--duas-linhas .cdw-busca-painel__corpo {
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--space-24);
	padding: var(--wp--preset--spacing--space-24);
}

.cdw-cabecalho--duas-linhas .cdw-busca-painel__termos {
	flex: none;
}

.cdw-cabecalho--duas-linhas .cdw-busca-painel__bloco--recentes {
	display: none;
}

.cdw-cabecalho--duas-linhas .cdw-busca-painel__termos:not(:has(.cdw-busca-painel__chips)) {
	display: none;
}

/* Linha do menu */
.cdw-cabecalho__linha--menu {
	position: relative;
	/* --wp--custom--faixa--menu-*: cores da linha pelo arquivo de cores (Sua Loja › Cores › Avançado). Sem elas, o padrão. */
	background: var(--wp--custom--faixa--menu-fundo, var(--wp--preset--color--surface));
}

.cdw-cabecalho__linha--menu .cdw-nav--desktop .cdw-menu > .cdw-menu__item > .cdw-menu__link,
.cdw-cabecalho__linha--menu .cdw-categorias-gatilho {
	color: var(--wp--custom--faixa--menu-texto, var(--wp--preset--color--ink));
}

.cdw-cabecalho__linha--menu .cdw-nav--desktop .cdw-menu > .cdw-menu__item > .cdw-menu__link:hover,
.cdw-cabecalho__linha--menu .cdw-nav--desktop .cdw-menu > .cdw-menu__item.is-aberto > .cdw-menu__link,
.cdw-cabecalho__linha--menu .cdw-nav--desktop .cdw-menu > .cdw-menu__item > .cdw-menu__link[aria-current="page"],
.cdw-cabecalho__linha--menu .cdw-nav--desktop .cdw-menu > .cdw-menu__item.is-atual > .cdw-menu__link {
	background: var(--wp--custom--faixa--menu-hover-fundo, var(--wp--preset--color--brand-subtle));
	color: var(--wp--custom--faixa--menu-hover-texto, var(--wp--preset--color--brand-text));
}

@media (hover: hover) {
	.cdw-cabecalho__linha--menu .cdw-nav--desktop .cdw-menu__item--pai:hover > .cdw-menu__link {
		background: var(--wp--custom--faixa--menu-hover-fundo, var(--wp--preset--color--brand-subtle));
		color: var(--wp--custom--faixa--menu-hover-texto, var(--wp--preset--color--brand-text));
	}
}

.cdw-cabecalho__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--space-8);
	width: 100%;
	max-width: var(--wp--custom--layout--container-max);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--space-8) var(--wp--preset--spacing--space-24);
}

.cdw-cabecalho--duas-linhas .cdw-nav--desktop .cdw-menu {
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--space-8);
}

.cdw-categorias-gatilho {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-8);
	min-height: 40px;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--space-16);
	border: 0;
	border-radius: var(--wp--custom--radius--full);
	background: transparent;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--line-height--body);
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background-color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao),
		color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-categorias-gatilho .cdw-icone {
	width: 25px;
	font-size: 20px;
}

.cdw-categorias-gatilho:hover,
.cdw-categorias-gatilho[aria-expanded="true"] {
	background: var(--wp--preset--color--surface-alt);
}

.cdw-cabecalho__linha--menu .cdw-categorias-gatilho:hover,
.cdw-cabecalho__linha--menu .cdw-categorias-gatilho[aria-expanded="true"] {
	background: var(--wp--custom--faixa--menu-hover-fundo, var(--wp--preset--color--surface-alt));
	color: var(--wp--custom--faixa--menu-hover-texto, var(--wp--preset--color--ink));
}

/* Painel CATEGORIAS — Figma Menu aberto · Painel (130:1376): colunas de categorias, destaque de
   produto à direita e "Navegue por tudo". Dois desenhos (Sua Loja › Topo do site):
   .cdw-catmenu--lista (padrão, igual ao Figma; regras no bloco "estilo lista" mais abaixo) e
   .cdw-catmenu--fotos (cada categoria é um cartão com foto, nome e quantidade; o destaque é um cartão
   com selo; o rodapé é uma linha leve). As regras sem modificador valem para os dois. */
.cdw-catmenu {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: var(--wp--custom--z-index--dropdown);
	max-height: calc(100vh - 200px);
	overflow-y: auto;
	border-top: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.25);
	animation: cdw-catmenu-entra var(--wp--custom--motion--duracao-padrao) var(--wp--custom--motion--ease-padrao);
}

@keyframes cdw-catmenu-entra {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
}

.cdw-catmenu__corpo {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--space-32);
	width: 100%;
	max-width: var(--wp--custom--layout--container-max);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--space-32);
}

/* ---------- Colunas (uma por categoria) ---------- */

.cdw-catmenu__colunas {
	display: grid;
	flex: 1 1 0;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	align-items: start;
	gap: var(--wp--preset--spacing--space-32) var(--wp--preset--spacing--space-24);
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdw-catmenu__coluna {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.cdw-catmenu__cat {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-4);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cdw-catmenu__cat-foto {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin-bottom: var(--wp--preset--spacing--space-8);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface-alt);
}

.cdw-catmenu__cat-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--motion--duracao-lenta) var(--wp--custom--motion--ease-padrao);
}

/* Categoria sem foto: a inicial, grande e na cor da marca. */
.cdw-catmenu__cat-inicial {
	color: var(--wp--preset--color--brand-text);
	font-family: var(--wp--preset--font-family--display);
	font-size: 2rem;
	font-weight: var(--wp--custom--weight--heavy);
	line-height: 1;
}

.cdw-catmenu__cat-nome {
	overflow: hidden;
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--line-height--body);
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-catmenu__cat-total {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--body);
}

.cdw-catmenu__cat:hover .cdw-catmenu__cat-foto img {
	transform: scale(1.05);
}

.cdw-catmenu__cat:hover .cdw-catmenu__cat-nome {
	color: var(--wp--preset--color--brand-text);
}

.cdw-catmenu__filhas {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdw-catmenu__link {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	text-decoration: none;
	transition: color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-catmenu__link:hover {
	color: var(--wp--preset--color--ink);
}

.cdw-catmenu__tudo {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	color: var(--wp--preset--color--brand-text);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--line-height--body);
	text-decoration: none;
}

.cdw-catmenu__tudo .cdw-icone {
	width: 12px;
	font-size: 12px;
	transition: transform var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-catmenu__tudo:hover .cdw-icone {
	transform: translateX(3px);
}

/* ---------- Destaque de produto ---------- */

.cdw-catmenu__destaque {
	display: flex;
	flex: 0 0 264px;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-4);
	min-width: 0;
	padding: var(--wp--preset--spacing--space-16);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cdw-catmenu__destaque-foto {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	margin-bottom: var(--wp--preset--spacing--space-8);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
}

.cdw-catmenu__destaque-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--wp--custom--motion--duracao-lenta) var(--wp--custom--motion--ease-padrao);
}

/* Selo no canto (mesmo desenho do Produto/Tag dos cards: Overline 12 maiúsculo, pill). */
.cdw-catmenu__destaque-selo {
	position: absolute;
	top: var(--wp--preset--spacing--space-8);
	left: var(--wp--preset--spacing--space-8);
	padding: var(--wp--preset--spacing--space-4) 10px;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
	font-size: var(--wp--preset--font-size--overline);
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cdw-catmenu__destaque-nome {
	display: -webkit-box;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--body);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.cdw-catmenu__destaque-preco {
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--line-height--body);
}

.cdw-catmenu__destaque-preco del {
	margin-right: var(--wp--preset--spacing--space-4);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: var(--wp--custom--weight--regular);
}

.cdw-catmenu__destaque-preco ins {
	text-decoration: none;
}

.cdw-catmenu__destaque-ver {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--wp--preset--spacing--space-8);
	color: var(--wp--preset--color--brand-text);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--line-height--body);
}

.cdw-catmenu__destaque-ver .cdw-icone {
	width: 12px;
	font-size: 12px;
	transition: transform var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-catmenu__destaque:hover .cdw-catmenu__destaque-foto img {
	transform: scale(1.04);
}

.cdw-catmenu__destaque:hover .cdw-catmenu__destaque-ver .cdw-icone {
	transform: translateX(3px);
}

/* ---------- Rodapé do painel ---------- */

.cdw-catmenu__rodape {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--space-16);
	/* Mesma largura do conteúdo (container menos o padding de 32 de cada lado): a linha começa junto com as colunas. */
	width: calc(100% - 2 * var(--wp--preset--spacing--space-32));
	max-width: calc(var(--wp--custom--layout--container-max) - 2 * var(--wp--preset--spacing--space-32));
	margin-inline: auto;
	padding: var(--wp--preset--spacing--space-16) 0;
	border-top: 1px solid var(--wp--preset--color--line);
}

.cdw-catmenu__rodape-texto {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--line-height--body);
}

.cdw-catmenu__faixa {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-8);
	padding: 10px 20px;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--line-height--body);
	text-decoration: none;
	transition: background-color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-catmenu__faixa:hover {
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand-contrast);
}

.cdw-catmenu__faixa .cdw-icone {
	width: 14px;
	font-size: 14px;
}

/* ---------- Painel CATEGORIAS · estilo "lista" (padrão) ----------
 * Figma Menu · organização (148:3024) › Menu aberto · Painel (130:1376):
 *   corpo padding 32, gap 32 · colunas flex 1, gap 32 · em cada coluna gap 16:
 *     nome Overline 12 ink-muted maiúsculo (+0,96) · "Ver tudo em…" Label 16 brand-text · subcategorias Body 16 ink
 *   destaque 240 de largura, gap 8: foto 1:1 raio card · nome Caption 14 ink · preço Label 16 ink
 *   faixa ink de ponta a ponta, padding 16/32, conteúdo à direita: "Navegue por tudo" Label 16 surface + seta 20 */

.cdw-catmenu--lista .cdw-catmenu__colunas {
	/* 180: cabe "Ver tudo em Decoração" numa linha; sem espaço, a coluna desce para a linha de baixo. */
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--wp--preset--spacing--space-32);
}

.cdw-catmenu--lista .cdw-catmenu__coluna {
	gap: var(--wp--preset--spacing--space-16);
}

.cdw-catmenu__nome {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--overline);
	line-height: var(--wp--custom--line-height--body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cdw-catmenu--lista .cdw-catmenu__filhas {
	gap: var(--wp--preset--spacing--space-16);
}

.cdw-catmenu--lista .cdw-catmenu__link {
	display: inline-block;
	color: var(--wp--preset--color--ink);
}

.cdw-catmenu--lista .cdw-catmenu__link:hover {
	color: var(--wp--preset--color--brand-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cdw-catmenu__link--tudo,
.cdw-catmenu--lista .cdw-catmenu__link--tudo {
	color: var(--wp--preset--color--brand-text);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
}

.cdw-catmenu--lista .cdw-catmenu__link:focus-visible,
.cdw-catmenu--lista .cdw-catmenu__destaque:focus-visible,
.cdw-catmenu--lista .cdw-catmenu__faixa:focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm);
}

.cdw-catmenu--lista .cdw-catmenu__destaque {
	flex: 0 0 240px;
	gap: var(--wp--preset--spacing--space-8);
	padding: 0;
	background: transparent;
}

.cdw-catmenu--lista .cdw-catmenu__destaque-foto {
	margin-bottom: 0;
	background: var(--wp--preset--color--surface-alt);
}

.cdw-catmenu--lista .cdw-catmenu__destaque-selo,
.cdw-catmenu--lista .cdw-catmenu__destaque-ver {
	display: none;
}

.cdw-catmenu--lista .cdw-catmenu__rodape {
	justify-content: flex-end;
	width: 100%;
	max-width: none;
	padding: 0;
	border-top: 0;
	background: var(--wp--preset--color--ink);
}

.cdw-catmenu--lista .cdw-catmenu__faixa {
	gap: var(--wp--preset--spacing--space-8);
	padding: var(--wp--preset--spacing--space-16) var(--wp--preset--spacing--space-32);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--label);
}

.cdw-catmenu--lista .cdw-catmenu__faixa:hover {
	background: transparent;
	color: var(--wp--preset--color--surface);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cdw-catmenu--lista .cdw-catmenu__faixa .cdw-icone {
	width: 20px;
	font-size: 20px;
	transition: transform var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-catmenu--lista .cdw-catmenu__faixa:hover .cdw-icone {
	transform: translateX(3px);
}

/* Faixa alinhada à direita do conteúdo (mesmo container das colunas), mas com o fundo de ponta a ponta. */
@media (min-width: 1200px) {
	.cdw-catmenu--lista .cdw-catmenu__faixa {
		margin-right: max(0px, calc((100% - var(--wp--custom--layout--container-max)) / 2));
	}
}

@media (max-width: 1199px) {
	.cdw-catmenu__destaque {
		flex-basis: 232px;
	}
}

/* Tela estreita: o destaque e a frase do rodapé saem para as colunas caberem. */
@media (max-width: 959px) {
	.cdw-catmenu__destaque,
	.cdw-catmenu__rodape-texto {
		display: none;
	}

	.cdw-catmenu__rodape {
		justify-content: flex-end;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cdw-catmenu {
		animation: none;
	}

	.cdw-catmenu__cat-foto img,
	.cdw-catmenu__destaque-foto img,
	.cdw-catmenu__tudo .cdw-icone,
	.cdw-catmenu__faixa .cdw-icone,
	.cdw-catmenu__destaque-ver .cdw-icone {
		transition: none;
	}
}

/* ---------- Telas estreitas ---------- */

/* Tablet (Figma 162:4848): saem os textos; ficam conta e carrinho. */
@media (max-width: 1099px) {
	.cdw-cabecalho--duas-linhas .cdw-util--some-estreito {
		display: none;
	}

	.cdw-cabecalho--duas-linhas .cdw-util__gatilho--rotulo .cdw-util__rotulo,
	.cdw-cabecalho--duas-linhas .cdw-util__gatilho--rotulo .cdw-util__seta {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.cdw-cabecalho--duas-linhas .cdw-cabecalho__conteudo {
		gap: var(--wp--preset--spacing--space-24);
	}

	.cdw-cabecalho--duas-linhas .cdw-busca-painel {
		left: 0;
	}

	.cdw-cabecalho__menu {
		justify-content: flex-start;
	}

	.cdw-cabecalho--duas-linhas .cdw-nav--desktop .cdw-menu {
		justify-content: flex-start;
	}
}

/* Celular (Figma 150:2816): ☰ logo · conta · carrinho; a busca desce para a linha de baixo. */
.cdw-cabecalho--duas-linhas.is-compacto .cdw-cabecalho__conteudo {
	flex-wrap: wrap;
	gap: 12px var(--wp--preset--spacing--space-16);
}

.cdw-cabecalho--duas-linhas.is-compacto .cdw-busca-caixa {
	flex: 1 0 100%;
	order: 3;
}

.cdw-cabecalho--duas-linhas.is-compacto .cdw-busca {
	right: auto;
	left: auto;
}

.cdw-cabecalho--duas-linhas.is-compacto .cdw-utilidades,
.cdw-cabecalho--duas-linhas.is-compacto .cdw-cabecalho__linha--menu {
	display: none;
}

.cdw-cabecalho--duas-linhas.is-compacto .cdw-cabecalho__conta-compacta {
	display: flex;
}

.cdw-cabecalho--duas-linhas.is-compacto .cdw-busca-painel {
	top: calc(100% + 12px);
	right: calc(var(--wp--preset--spacing--space-16) * -1);
	left: calc(var(--wp--preset--spacing--space-16) * -1);
	width: auto;
	max-width: none;
	border-radius: 0;
	box-shadow: var(--wp--preset--shadow--card);
}

/* ---------- Cabeçalho fixo recolhido (assets/js/cabecalho.js) ----------
   Rolando para baixo some a linha de baixo: menu + CATEGORIAS no computador e no tablet (160 → 103 px),
   a busca no celular. Rolando para cima ela volta com um fade curto. */
.cdw-cabecalho--duas-linhas.is-recolhido .cdw-cabecalho__linha--menu,
.cdw-cabecalho--duas-linhas.is-compacto.is-recolhido .cdw-busca-caixa {
	display: none;
}

.cdw-cabecalho--duas-linhas.is-voltou .cdw-cabecalho__linha--menu,
.cdw-cabecalho--duas-linhas.is-compacto.is-voltou .cdw-busca-caixa {
	animation: cdw-cabecalho-volta var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

@keyframes cdw-cabecalho-volta {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cdw-util *,
	.cdw-categorias-gatilho {
		transition-duration: 0s !important;
	}

	.cdw-cabecalho--duas-linhas.is-voltou .cdw-cabecalho__linha--menu,
	.cdw-cabecalho--duas-linhas.is-compacto.is-voltou .cdw-busca-caixa {
		animation: none;
	}
}

/* busca.css */
/**
 * Busca do cabeçalho com sugestões — Figma "Busca · exemplos" (140:1848) e "Header mobile · exemplos" (150:3011).
 *
 * Medidas do Dev Mode:
 *   Busca/Campo            altura 48 · pílula · borda 2 focus · padding 0/16 · gap 8 · lupa 20 · texto 16/1.5
 *   desktop                campo começa depois do logo (24 + 210 + 40) · "Fechar" (xmark 20 + Label 16) a 32 do campo
 *   mobile                 campo ocupa a linha (padding 16, gap 16) · "Cancelar" Label 16 brand, área de toque 48
 *   Busca/Sugestões Largo  corpo padding 32, gap 32 · coluna de termos 360, blocos a 24 · sombra card
 *   Busca/Sugestões Mobile corpo padding 24, gap 24 · sem "recentes"
 *   título do bloco        Overline 12/1.5 maiúsculo ink-muted · 16 até o conteúdo
 *   Busca/Termo            pílula 42 de altura · borda 1 line · padding 8/16 · 16/1.5 · gap 8
 *   recente                relógio 20 em caixa 25 + termo 16 · gap 8 · linhas a 16
 *   Busca/Produto sugerido foto 64 raio 8 · gap 16 · nome Label 16 (500) · preço 16 ink-muted · itens a 8
 *   ver todos              fundo surface-alt · padding 16/32 · à direita · Label 16 brand + seta 20 ink
 *
 * Só tokens: as cores mudam pelo painel Sua Loja.
 */

/* ---------- Campo na linha do cabeçalho ---------- */

.cdw-cabecalho__conteudo {
	position: relative;
}

.cdw-busca {
	position: absolute;
	top: 0;
	bottom: 0;
	/* padding da linha + logo + distância logo→menu */
	left: calc(var(--wp--preset--spacing--space-24) + 210px + 40px);
	right: var(--wp--preset--spacing--space-24);
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-32);
	margin: 0;
	background: var(--wp--preset--color--surface);
}

.cdw-busca[hidden],
.cdw-busca-painel[hidden],
.cdw-busca-painel [hidden] {
	display: none;
}

/* O menu e os ícones continuam ocupando o lugar (o cabeçalho não muda de altura), só saem de cena. */
.cdw-cabecalho.is-buscando .cdw-nav--desktop,
.cdw-cabecalho.is-buscando .cdw-cabecalho__acoes {
	visibility: hidden;
}

.cdw-busca__campo {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--wp--preset--spacing--space-8);
	min-width: 0;
	height: 48px;
	padding: 0 var(--wp--preset--spacing--space-16);
	border: 2px solid var(--wp--preset--color--focus);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	cursor: text;
}

.cdw-busca__campo .cdw-icone {
	flex: none;
	width: 25px;
	font-size: 20px;
}

.cdw-busca__campo input {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	-webkit-appearance: none;
	appearance: none;
}

.cdw-busca__campo input::placeholder {
	color: var(--wp--preset--color--ink-muted);
	opacity: 1;
}

.cdw-busca__fechar {
	display: flex;
	flex: none;
	align-items: center;
	gap: var(--wp--preset--spacing--space-8);
	min-height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--line-height--body);
	cursor: pointer;
	transition: color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-busca__fechar:hover {
	color: var(--wp--preset--color--brand-text);
}

.cdw-busca__fechar .cdw-icone {
	width: 25px;
	font-size: 20px;
}

.cdw-busca__fechar-mobile {
	display: none;
}

/* ---------- Painel de sugestões ---------- */

.cdw-busca-painel {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	max-height: calc(100vh - 140px);
	max-height: calc(100dvh - 140px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--card);
}

.cdw-busca-painel__corpo {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--space-32);
	width: 100%;
	max-width: var(--wp--custom--layout--container-max);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--space-32);
}

.cdw-busca-painel__termos {
	display: flex;
	flex: 0 0 360px;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-24);
	min-width: 0;
}

/* Sem populares e sem recentes, a coluna some e os produtos ocupam a largura toda. */
.cdw-busca-painel__termos:not(:has(.cdw-busca-painel__bloco:not([hidden]))) {
	display: none;
}

.cdw-busca-painel__bloco {
	min-width: 0;
}

.cdw-busca-painel__bloco--produtos {
	flex: 1;
}

.cdw-busca-painel__cabeca {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--space-16);
}

.cdw-busca-painel .cdw-busca-painel__titulo {
	margin: 0 0 var(--wp--preset--spacing--space-16);
	color: var(--wp--preset--color--ink-muted);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--overline);
	font-weight: var(--wp--custom--weight--regular);
	line-height: var(--wp--custom--line-height--body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cdw-busca-painel__limpar {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink-muted);
	font: inherit;
	font-size: var(--wp--preset--font-size--overline);
	line-height: var(--wp--custom--line-height--body);
	text-decoration: underline;
	cursor: pointer;
}

.cdw-busca-painel__limpar:hover {
	color: var(--wp--preset--color--ink);
}

.cdw-busca-painel__chips,
.cdw-busca-painel__recentes,
.cdw-busca-painel__produtos {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdw-busca-painel__chips {
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--space-8);
}

.cdw-busca__termo {
	display: block;
	padding: 8px var(--wp--preset--spacing--space-16);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--full);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	text-decoration: none;
	transition:
		border-color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao),
		background-color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-busca__termo:hover {
	border-color: var(--wp--preset--color--line-strong);
	background: var(--wp--preset--color--surface-hover);
}

.cdw-busca-painel__recentes {
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-16);
}

.cdw-busca__recente {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-8);
	max-width: 100%;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	text-decoration: none;
}

.cdw-busca__recente .cdw-icone {
	flex: none;
	width: 25px;
	font-size: 20px;
}

.cdw-busca__recente span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cdw-busca__recente:hover {
	color: var(--wp--preset--color--brand-text);
}

.cdw-busca-painel__produtos {
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-8);
	transition: opacity var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-busca-painel.is-carregando .cdw-busca-painel__produtos {
	opacity: 0.5;
}

.cdw-busca__produto {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-16);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cdw-busca__produto-foto {
	flex: none;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface-alt);
}

.cdw-busca__produto-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cdw-busca__produto-dados {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-4);
	min-width: 0;
}

.cdw-busca__produto-nome {
	overflow: hidden;
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--line-height--body);
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-busca__produto:hover .cdw-busca__produto-nome {
	color: var(--wp--preset--color--brand-text);
}

.cdw-busca__produto-preco {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.cdw-busca__produto-preco del {
	margin-right: var(--wp--preset--spacing--space-8);
	font-size: var(--wp--preset--font-size--caption);
}

.cdw-busca__produto-preco ins {
	text-decoration: none;
}

.cdw-busca-painel__vazio {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.cdw-busca-painel__rodape {
	background: var(--wp--preset--color--surface-alt);
}

.cdw-busca-painel__todos {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--space-8);
	width: 100%;
	max-width: var(--wp--custom--layout--container-max);
	margin-inline: auto;
	min-height: 57px;
	padding: var(--wp--preset--spacing--space-16) var(--wp--preset--spacing--space-32);
	color: var(--wp--preset--color--brand-text);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--line-height--body);
	text-align: right;
	text-decoration: none;
}

.cdw-busca-painel__todos:hover span {
	text-decoration: underline;
}

.cdw-busca-painel__todos .cdw-icone {
	flex: none;
	width: 25px;
	color: var(--wp--preset--color--ink);
	font-size: 20px;
}

.cdw-busca__termo:focus-visible,
.cdw-busca__recente:focus-visible,
.cdw-busca__produto:focus-visible,
.cdw-busca__fechar:focus-visible,
.cdw-busca-painel__limpar:focus-visible,
.cdw-busca-painel__todos:focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 2px;
}

/* ---------- Cabeçalho compacto: o campo ocupa a linha inteira ---------- */

.cdw-cabecalho.is-compacto .cdw-busca {
	right: var(--wp--preset--spacing--space-16);
	left: var(--wp--preset--spacing--space-16);
	gap: var(--wp--preset--spacing--space-16);
}

.cdw-cabecalho.is-compacto.is-buscando .cdw-cabecalho__logo-e-menu {
	visibility: hidden;
}

/* ---------- Celular ---------- */

@media (max-width: 781px) {
	.cdw-busca__fechar {
		color: var(--wp--preset--color--brand-text);
	}

	.cdw-busca__fechar .cdw-icone,
	.cdw-busca__fechar-desktop {
		display: none;
	}

	.cdw-busca__fechar-mobile {
		display: inline;
	}

	.cdw-busca-painel {
		max-height: calc(100vh - 80px);
		max-height: calc(100dvh - 80px);
	}

	.cdw-busca-painel__corpo {
		flex-direction: column;
		align-items: stretch;
		gap: var(--wp--preset--spacing--space-24);
		padding: var(--wp--preset--spacing--space-24);
	}

	.cdw-busca-painel__termos {
		flex: none;
	}

	.cdw-busca-painel__bloco--recentes {
		display: none;
	}

	/* No celular a coluna só existe se houver populares (recentes não aparecem aqui). */
	.cdw-busca-painel__termos:not(:has(.cdw-busca-painel__chips)) {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cdw-busca *,
	.cdw-busca-painel * {
		transition-duration: 0s !important;
	}
}

/* favoritos.css */
/**
 * Favoritos — coração do card de produto (Figma Card/Produto 217:2222 › imagem › topo › favorito).
 *
 * Medidas do Dev Mode:
 *   favorito  área de toque 44×44, a 4 px do canto superior direito da foto
 *   círculo   36×36 · surface · pílula
 *   ícone     coração 16 (contorno) ink · marcado: coração cheio na cor da marca
 *   desktop   aparece com o mouse sobre o card (ou quando já está marcado); no toque, sempre visível
 *
 * Só tokens: as cores mudam pelo painel Sua Loja.
 */

.cdw-favorito {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-size: 16px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.cdw-favorito__circulo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--surface);
	transition:
		transform var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao),
		background-color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-favorito:hover .cdw-favorito__circulo {
	background: var(--wp--preset--color--surface-hover);
}

.cdw-favorito:active .cdw-favorito__circulo {
	transform: scale(0.92);
}

.cdw-favorito:focus-visible {
	outline: 0;
}

.cdw-favorito:focus-visible .cdw-favorito__circulo {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 2px;
}

.cdw-favorito__cheio,
.cdw-favorito[aria-pressed="true"] .cdw-favorito__vazio {
	display: none;
}

.cdw-favorito[aria-pressed="true"] .cdw-favorito__cheio {
	display: block;
	color: var(--wp--preset--color--brand);
}

.cdw-favorito.is-pulsando .cdw-favorito__circulo {
	animation: cdw-favorito-pulso var(--wp--custom--motion--duracao-lenta) var(--wp--custom--motion--ease-elastica);
}

@keyframes cdw-favorito-pulso {
	0% {
		transform: scale(1);
	}

	40% {
		transform: scale(1.18);
	}

	100% {
		transform: scale(1);
	}
}

/* No card: canto superior direito da foto. */
.cdw-produto__favorito {
	position: absolute;
	top: var(--wp--preset--spacing--space-4);
	right: var(--wp--preset--spacing--space-4);
	z-index: 1;
}

/* Com mouse (desktop), o coração só aparece ao passar no card, ao focar ou se já estiver marcado. */
@media (hover: hover) and (min-width: 782px) {
	.cdw-produto__favorito {
		opacity: 0;
		transition: opacity var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
	}

	.cdw-produto:hover .cdw-produto__favorito,
	.cdw-produto:focus-within .cdw-produto__favorito,
	.cdw-produto__favorito[aria-pressed="true"] {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cdw-favorito,
	.cdw-favorito__circulo {
		transition-duration: 0s !important;
		animation: none !important;
	}
}

/* kgepel.css */
/**
 * Kgepel Papéis — visual da loja (mu-plugin kgepel-visual, só desta loja; não faz parte do tema).
 * Mesmo CSS do protótipo prototipo-kgepel/css/kgepel.css, mais a fonte Lato.
 * As cores gerais (botões, links, textos) estão em Sua Loja › Identidade › Cores.
 */

@font-face {
	font-family: Lato;
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("https://dev.kgepel.com.br/wp-content/mu-plugins/kgepel-visual/css/../fonts/lato-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: Lato;
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("https://dev.kgepel.com.br/wp-content/mu-plugins/kgepel-visual/css/../fonts/lato-latin-700-normal.woff2") format("woff2");
}

@font-face {
	font-family: Lato;
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("https://dev.kgepel.com.br/wp-content/mu-plugins/kgepel-visual/css/../fonts/lato-latin-900-normal.woff2") format("woff2");
}

/* html:root ganha do :root que o WordPress escreve com a fonte e os pesos do tema. */
html:root {
	--wp--preset--font-family--display: Lato, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--wp--preset--font-family--text: Lato, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	/* Lato tem 400, 700 e 900: rótulos em 700 e títulos em 900. */
	--wp--custom--weight--bold: 700;
	--wp--custom--weight--heavy: 900;
}

/**
 * Kgepel Papéis — topbar e cabeçalho do protótipo (carregado depois do CSS do tema).
 *
 *   Topbar ........ verde escuro: cidade e telefone, avisos que se revezam, links rápidos.
 *   Linha principal branca: logo, busca com o botão "Buscar" verde, atalhos com ícone e duas
 *                   linhas separados por fios finos.
 *   Linha do menu . verde; "Todos os papéis" em laranja; "Outlet" é um carimbo pêssego.
 *
 * Cores do logo: verde #0B5E30 · verde escuro #08401F · laranja #EE7F00. Fonte: Lato.
 * Contraste (WCAG AA): branco sobre #08401F = 11,9:1 · branco sobre #0B5E30 = 7,9:1 ·
 * #FFD29A sobre #08401F = 8,5:1 · #FFD29A sobre #0B5E30 = 5,6:1 · #1B1B1F sobre #EE7F00 = 6,3:1.
 */

/* ---------- Topbar verde ---------- */

.kg-topbar {
	position: relative;
	background: #08401F;
	color: #FFFFFF;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.kg-topbar__conteiner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--space-16);
	max-width: var(--wp--custom--layout--container-max);
	min-height: 38px;
	margin: 0 auto;
	padding: 6px var(--wp--preset--spacing--space-24) 8px;
}

.kg-topbar__lado {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0;
}

.kg-topbar__lado--dir {
	justify-content: flex-end;
}

.kg-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #FFFFFF;
	text-decoration: none;
	white-space: nowrap;
}

.kg-topbar__item .cdw-icone {
	color: #FFD29A;
}

.kg-topbar__item:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kg-topbar__item--destaque {
	font-weight: 900;
}

.kg-topbar__avisos {
	display: grid;
	justify-items: center;
	text-align: center;
}

.kg-topbar__aviso {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	transform: translateY(6px);
	transition:
		opacity var(--wp--custom--motion--duracao-padrao) var(--wp--custom--motion--ease-padrao),
		transform var(--wp--custom--motion--duracao-padrao) var(--wp--custom--motion--ease-padrao);
	pointer-events: none;
	white-space: nowrap;
}

.kg-topbar__aviso.is-ativo {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.kg-topbar__aviso strong {
	color: #FFD29A;
	font-weight: 900;
}

.kg-topbar__aviso a {
	color: #FFFFFF;
	font-weight: 700;
	text-underline-offset: 3px;
}

@media (max-width: 1100px) {
	.kg-topbar__conteiner {
		grid-template-columns: 1fr auto;
	}

	.kg-topbar__lado--esq,
	.kg-topbar__lado--dir .kg-topbar__item:not(.kg-topbar__item--destaque) {
		display: none;
	}

	.kg-topbar__avisos {
		justify-items: start;
		text-align: left;
	}
}

@media (max-width: 781px) {
	.kg-topbar__conteiner {
		grid-template-columns: 1fr;
		min-height: 34px;
		padding: 6px var(--wp--preset--spacing--space-16) 8px;
	}

	.kg-topbar__lado--dir {
		display: none;
	}

	.kg-topbar__avisos {
		justify-items: center;
		text-align: center;
	}

	.kg-topbar__aviso {
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kg-topbar__aviso {
		transition: none;
	}
}

/* ---------- Linha principal ---------- */

.cdw-cabecalho {
	box-shadow: 0 1px 0 #E6E0CF, 0 8px 20px rgba(8, 64, 31, 0.06);
}

.cdw-cabecalho--duas-linhas:not(.is-compacto) .cdw-cabecalho__conteudo {
	padding-block: 20px;
}

.cdw-logo__img {
	max-width: 200px;
	max-height: 66px;
}

.cdw-cabecalho.is-compacto .cdw-logo__img {
	max-height: 44px;
}

.cdw-logo--gaveta .cdw-logo__img {
	max-height: 44px;
}

/* Busca: campo branco com fio verde e o botão "Buscar" verde encaixado na ponta. */
.cdw-cabecalho--duas-linhas .cdw-busca {
	gap: 0;
}

.cdw-cabecalho--duas-linhas .cdw-busca__campo,
.cdw-cabecalho--duas-linhas .cdw-busca__campo:focus-within {
	height: 50px;
	padding: 0 118px 0 18px;
	border: 1.5px solid #CFC8B3;
	border-radius: 10px;
	background: #FFFFFF;
}

.cdw-cabecalho--duas-linhas .cdw-busca__campo:hover {
	border-color: #0B5E30;
}

.cdw-cabecalho--duas-linhas .cdw-busca__campo:focus-within {
	border-color: #0B5E30;
	box-shadow: 0 0 0 3px rgba(11, 94, 48, 0.15);
}

.cdw-cabecalho--duas-linhas .cdw-busca__campo > .cdw-icone {
	display: none;
}

.kg-busca__enviar {
	display: flex;
	flex: none;
	align-items: center;
	gap: 8px;
	height: 40px;
	margin: 0 0 0 -110px;
	padding: 0 16px;
	border: 0;
	border-radius: 7px;
	background: #0B5E30;
	color: #FFFFFF;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 900;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.kg-busca__enviar .cdw-icone {
	font-size: 15px;
}

.kg-busca__enviar:hover {
	background: #08401F;
}

.kg-busca__enviar:focus-visible {
	outline: 2px solid #0B5E30;
	outline-offset: 2px;
}

/* Atalhos: ícone verde solto + duas linhas, separados por fios finos. */
.cdw-cabecalho--duas-linhas .cdw-utilidades {
	gap: 0;
}

.cdw-cabecalho--duas-linhas .cdw-utilidades > *,
.kg-orcamento {
	position: relative;
	padding-inline: 18px;
}

.cdw-cabecalho--duas-linhas .cdw-utilidades > * + *::before,
.kg-orcamento::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	height: 30px;
	border-left: 1px solid #E6E0CF;
	transform: translateY(-50%);
}

.cdw-cabecalho--duas-linhas .cdw-util__gatilho--rotulo,
.kg-orcamento {
	gap: 10px;
	color: #1B1B1F;
	font-size: 0.875rem;
	font-weight: 900;
	line-height: 1.2;
}

.cdw-cabecalho--duas-linhas .cdw-util__gatilho--rotulo > .cdw-icone:first-child,
.kg-orcamento > .cdw-icone {
	flex: none;
	width: 24px;
	color: #0B5E30;
	font-size: 22px;
}

.cdw-cabecalho--duas-linhas .cdw-util__gatilho--rotulo:hover,
.cdw-cabecalho--duas-linhas .cdw-util__gatilho[aria-expanded="true"],
.kg-orcamento:hover {
	color: #0B5E30;
}

.cdw-cabecalho--duas-linhas .cdw-util__gatilho--rotulo .cdw-util__rotulo,
.kg-orcamento__texto {
	display: block;
	text-align: left;
}

.kg-util__sub {
	display: block;
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.3;
}

.kg-orcamento {
	display: inline-flex;
	flex: none;
	align-items: center;
	margin-right: 6px;
	text-decoration: none;
	white-space: nowrap;
}

.kg-orcamento:focus-visible {
	outline: 2px solid #0B5E30;
	outline-offset: 3px;
	border-radius: 6px;
}

/* Carrinho: um quadrado verde de cantos suaves; o contador é uma etiqueta laranja. */
.cdw-cabecalho .cdw-carrinho {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: #0B5E30;
	color: #FFFFFF;
	transition: background-color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-cabecalho .cdw-carrinho:hover {
	background: #08401F;
	color: #FFFFFF;
}

.cdw-cabecalho .cdw-carrinho__icone,
.cdw-cabecalho.is-compacto .cdw-carrinho__icone {
	top: 50%;
	left: 50%;
	color: #FFFFFF;
	transform: translate(-50%, -50%);
}

.cdw-cabecalho .cdw-carrinho__contador,
.cdw-cabecalho.is-compacto .cdw-carrinho__contador {
	top: -6px;
	right: -6px;
	left: auto;
	border: 2px solid #FFFFFF;
	background: #EE7F00;
	color: #1B1B1F;
	font-weight: 900;
}

.cdw-cabecalho.is-compacto .cdw-carrinho {
	width: 44px;
	height: 44px;
}

@media (max-width: 1099px) {
	.kg-orcamento {
		display: none;
	}

	.kg-busca__rotulo {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.kg-busca__enviar {
		width: 40px;
		margin-left: -45px;
		padding: 0;
		justify-content: center;
	}

	.cdw-cabecalho--duas-linhas .cdw-busca__campo,
	.cdw-cabecalho--duas-linhas .cdw-busca__campo:focus-within {
		padding-right: 52px;
	}
}

/* ---------- Linha do menu verde ---------- */

.cdw-cabecalho__linha--menu {
	background: #0B5E30;
}

.cdw-cabecalho__menu {
	gap: 4px;
	padding-block: 6px;
}

.cdw-cabecalho__linha--menu .cdw-nav--desktop .cdw-menu {
	gap: 2px;
}

.cdw-cabecalho__linha--menu .cdw-nav--desktop .cdw-menu > .cdw-menu__item > .cdw-menu__link {
	gap: 10px;
	padding: 10px 14px;
	border-radius: 8px;
	background: transparent;
	color: #FFFFFF;
	font-weight: 700;
}

.cdw-cabecalho__linha--menu .cdw-nav--desktop .cdw-menu > .cdw-menu__item > .cdw-menu__link:hover,
.cdw-cabecalho__linha--menu .cdw-nav--desktop .cdw-menu > .cdw-menu__item.is-aberto > .cdw-menu__link,
.cdw-cabecalho__linha--menu .cdw-nav--desktop .cdw-menu > .cdw-menu__item.is-atual > .cdw-menu__link,
.cdw-cabecalho__linha--menu .cdw-nav--desktop .cdw-menu > .cdw-menu__item > .cdw-menu__link[aria-current="page"] {
	background: rgba(255, 255, 255, 0.14);
	color: #FFFFFF;
}

@media (hover: hover) {
	.cdw-cabecalho__linha--menu .cdw-nav--desktop .cdw-menu__item--pai:hover > .cdw-menu__link {
		background: rgba(255, 255, 255, 0.14);
		color: #FFFFFF;
	}
}

/* "Todos os papéis": bloco laranja (texto escuro: branco sobre o laranja não dá leitura). */
.cdw-cabecalho__linha--menu .cdw-categorias-gatilho {
	margin-right: 10px;
	padding: 0 18px;
	border-radius: 8px;
	background: #EE7F00;
	color: #1B1B1F;
	font-weight: 900;
	letter-spacing: 0.02em;
	text-transform: none;
}

.cdw-cabecalho__linha--menu .cdw-categorias-gatilho:hover,
.cdw-cabecalho__linha--menu .cdw-categorias-gatilho[aria-expanded="true"] {
	background: #FF9526;
	color: #1B1B1F;
}

/* "Outlet": carimbo pêssego, torto, com borda dupla. */
.kg-menu__outlet {
	margin-left: 10px;
}

.cdw-cabecalho__linha--menu .cdw-nav--desktop .cdw-menu > .kg-menu__outlet > .cdw-menu__link,
.cdw-cabecalho__linha--menu .cdw-nav--desktop .cdw-menu > .kg-menu__outlet > .cdw-menu__link:hover {
	padding: 6px 8px;
	background: transparent;
}

.kg-carimbo {
	display: inline-block;
	padding: 3px 12px;
	border: 2px solid #FFD29A;
	border-radius: 4px;
	outline: 1px solid #FFD29A;
	outline-offset: 2px;
	color: #FFD29A;
	font-size: 0.8125rem;
	font-weight: 900;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transform: rotate(-4deg);
	transition: transform var(--wp--custom--motion--duracao-padrao) var(--wp--custom--motion--ease-elastica);
}

.cdw-menu__link:hover .kg-carimbo {
	transform: rotate(0deg) scale(1.05);
}

.cdw-cabecalho__linha--menu :focus-visible {
	outline-color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
	.kg-carimbo,
	.kg-busca__enviar,
	.cdw-cabecalho .cdw-carrinho {
		transition: none;
	}
}

/* ---------- Detalhes da home ---------- */

/* Preço por folha. */
.kg-unidade {
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.8125rem;
	font-weight: 400;
}

/* Banner largo (arte com texto): só a imagem, clicável. */
.kg-largo__link {
	display: block;
}

/* Títulos das seções com um tracinho laranja, como o "Papéis" do logo. */
.cdw-vitrine__titulo,
.cdw-categorias__titulo,
.cdw-secao__titulo {
	position: relative;
	padding-bottom: 10px;
}

.cdw-vitrine__titulo::after,
.cdw-categorias__titulo::after,
.cdw-secao__titulo::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 48px;
	height: 4px;
	border-radius: 2px;
	background: #EE7F00;
}

.cdw-categorias--centro .cdw-categorias__titulo::after {
	left: 50%;
	transform: translateX(-50%);
}

/* Fotos dos produtos são quadradas e com fundo claro: sem recorte. */
.cdw-categoria__img {
	object-fit: cover;
}

/* ---------- Rodapé exclusivo ----------
 *
 *   Topo ......... cartão branco de chamadas (com a fita das cores do símbolo em cima) (corte sob medida,
 *                  loja física, horário) com o botão "Pedir orçamento" em laranja.
 *   Corpo ........ verde escuro com o símbolo do logo em marca-d'água no canto, logo em branco,
 *                  títulos em pêssego, links brancos com sublinhado laranja, redes em círculo.
 *   Base ......... faixa mais escura com CNPJ, políticas e o crédito da CDW em branco.
 *
 * Contraste (WCAG AA): branco sobre #08401F = 11,9:1 · #D7E5DC sobre #08401F = 9,2:1 ·
 * #FFD29A sobre #08401F = 8,5:1 · #1B1B1F sobre #EE7F00 = 6,3:1.
 */

.kg-rodape {
	--wp--custom--rodape--bg: #08401F;
	--wp--custom--rodape--line: rgba(255, 255, 255, 0.14);
	--wp--custom--rodape--text: #FFFFFF;
	--wp--custom--rodape--text-muted: #D7E5DC;
	position: relative;
	overflow: hidden;
	border-top: 0;
	isolation: isolate;
}

/* Símbolo do logo, grande e bem apagado, no canto de baixo. */
.kg-rodape__marca-dagua {
	position: absolute;
	right: -90px;
	bottom: -110px;
	z-index: -1;
	width: 460px;
	height: auto;
	max-width: none;
	border-radius: 48px;
	opacity: 0.07;
	transform: rotate(-12deg);
	pointer-events: none;
}

/* Topo: o cartão fica metade sobre a newsletter (mesmo fundo dela), metade sobre o verde. */
.kg-rodape__topo {
	background:
		linear-gradient(to bottom, var(--wp--preset--color--brand-subtle) 0 50%, transparent 50%),
		linear-gradient(to bottom, var(--wp--preset--color--surface) 0 50%, transparent 50%);
}

.kg-rodape__cta {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	align-items: center;
	gap: var(--wp--preset--spacing--space-24);
	width: calc(100% - 2 * var(--wp--preset--spacing--space-24));
	max-width: calc(var(--wp--custom--layout--container-max) - 2 * var(--wp--preset--spacing--space-24));
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	padding: calc(var(--wp--preset--spacing--space-24) + 5px) var(--wp--preset--spacing--space-32) var(--wp--preset--spacing--space-24);
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 18px 40px rgba(8, 64, 31, 0.25);
	color: var(--wp--preset--color--ink);
}

.kg-rodape__cta-item {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--space-16);
}

.kg-rodape__cta-icone {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(11, 94, 48, 0.08);
	color: #0B5E30;
	font-size: 20px;
}

.kg-rodape__cta-titulo {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: 0.9375rem;
	font-weight: 900;
	line-height: 1.3;
}

.kg-rodape__cta-texto {
	margin: 4px 0 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: 0.875rem;
	line-height: 1.45;
}

.cdw-rodape .kg-rodape__cta-botao {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 50px;
	padding: 0 24px;
	border-radius: 999px;
	background: #EE7F00;
	color: #1B1B1F;
	font-size: 1rem;
	font-weight: 900;
	white-space: nowrap;
	transition: background-color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-rodape .kg-rodape__cta-botao:hover {
	background: #FF9526;
	color: #1B1B1F;
	text-decoration: none;
}

.kg-rodape__cta-botao .cdw-icone {
	font-size: 20px;
}

/* Fita com as cores do símbolo do logo no alto do cartão. */
.kg-rodape__cta::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 5px;
	background: linear-gradient(90deg, #E30613 0 25%, #EE7F00 25% 50%, #1B8BC6 50% 75%, #23265A 75% 100%);
}

/* Corpo. */
.kg-rodape .cdw-rodape__conteiner {
	padding-top: var(--wp--preset--spacing--space-48);
}

/* Logo para fundo escuro (Sua Loja › Identidade): texto branco e símbolo laranja, sem filtro. */
.kg-rodape .cdw-rodape__logo .cdw-logo__img {
	max-height: 64px;
}

.kg-rodape .cdw-rodape__descricao {
	max-width: 300px;
}

.kg-rodape .cdw-rodape__titulo {
	color: #FFD29A;
	font-weight: 900;
	letter-spacing: 0.12em;
}

.kg-rodape .cdw-rodape__links a {
	display: inline-block;
	transition: transform var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.kg-rodape a:hover {
	color: #FFFFFF;
	text-decoration-color: #EE7F00;
	text-decoration-thickness: 2px;
}

.kg-rodape .cdw-rodape__links a:hover {
	transform: translateX(3px);
}

.kg-rodape .cdw-rodape__contato .cdw-icone,
.kg-rodape .cdw-rodape__envio .cdw-icone {
	color: #EE7F00;
}

/* Redes: círculos com borda; ao passar o mouse, laranja. */
.kg-rodape .cdw-rodape__rede {
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	font-size: 18px;
	transition:
		background-color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao),
		border-color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.kg-rodape .cdw-rodape__rede:hover {
	border-color: #EE7F00;
	background: #EE7F00;
	color: #1B1B1F !important;
	text-decoration: none;
}

/* Pagamentos e selos em "cartõezinhos" brancos. */
.kg-rodape .cdw-rodape__pagamentos img {
	padding: 2px;
	border-radius: 6px;
	background: #FFFFFF;
}

/* Base mais escura, de ponta a ponta. */
.kg-rodape .cdw-rodape__base {
	position: relative;
	padding-bottom: var(--wp--preset--spacing--space-24);
	border-top: 0;
}

.kg-rodape .cdw-rodape__base::before {
	content: "";
	position: absolute;
	top: 0;
	right: -100vw;
	bottom: calc(var(--wp--preset--spacing--space-64) * -1);
	left: -100vw;
	z-index: -1;
	background: #062F17;
}

.kg-rodape .cdw-rodape__credito img {
	filter: brightness(0) invert(1);
	opacity: 0.85;
}

.kg-rodape .cdw-rodape__credito:hover img {
	opacity: 1;
}

/* Tablet: o cartão de chamadas vira 2 × 2 (o botão ocupa a linha de baixo). */
@media (max-width: 1100px) {
	.kg-rodape__cta {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.cdw-rodape .kg-rodape__cta-botao {
		grid-column: 1 / -1;
		justify-self: start;
	}
}

/* Celular: tudo em coluna, botão na largura toda. */
@media (max-width: 781px) {
	.kg-rodape__cta {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--space-16);
		width: calc(100% - 2 * var(--wp--preset--spacing--space-16));
		padding: calc(var(--wp--preset--spacing--space-24) + 5px) var(--wp--preset--spacing--space-16) var(--wp--preset--spacing--space-24);
	}

	.cdw-rodape .kg-rodape__cta-botao {
		justify-content: center;
		justify-self: stretch;
	}

	.kg-rodape__marca-dagua {
		right: -120px;
		bottom: -80px;
		width: 340px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kg-rodape .cdw-rodape__links a,
	.kg-rodape .cdw-rodape__rede,
	.cdw-rodape .kg-rodape__cta-botao {
		transition: none;
	}

	.kg-rodape .cdw-rodape__links a:hover {
		transform: none;
	}
}

/* =====================================================================
   Corte de papel (plugin corte-de-papel) — campos na ficha do produto.
   O plugin põe estilos fixos nos próprios campos (float, largura, cinza);
   por isso as regras de posição e tamanho vão com !important.
   ===================================================================== */

.cdw-pp-form #_personalizar,
.cdw-pp-form #div1 {
	flex: 0 0 100%;
	max-width: 100%;
}

.cdw-pp-form select#_personalizar {
	width: 100% !important;
	height: 48px;
	padding: 0 40px 0 14px;
	border: 1px solid #CFC8B3;
	border-radius: 10px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B5E30' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
	-webkit-appearance: none;
	appearance: none;
	font: inherit;
	font-weight: 700;
	color: #1B1B1F;
	cursor: pointer;
}

.cdw-pp-form select#_personalizar:focus-visible {
	outline: 2px solid #0B5E30;
	outline-offset: 2px;
}

.cdw-pp-form div#div1 {
	box-sizing: border-box;
	width: 100% !important;
	margin: -4px 0 0;
	padding: 20px;
	background: #F3F8F4;
	border: 1px solid rgba(11, 94, 48, 0.18);
	border-radius: 12px;
	font-size: 15px;
}

.cdw-pp-form div#div1::after {
	display: block;
	clear: both;
	content: "";
}

.cdw-pp-form div#div1 > p:first-child {
	margin: 0 0 16px !important;
	color: #5E6470;
	font-size: 14px !important;
	line-height: 1.5 !important;
}

.cdw-pp-form div#div1 .line,
.cdw-pp-form div#div1 > br {
	display: none !important;
}

/* "Selecione abaixo padrões pré definidos" + botões A4 / A3 / 30,5x30,5 */
.cdw-pp-form div#div1 > div {
	margin-bottom: 6px;
}

.cdw-pp-form div#div1 small {
	display: block;
	margin-bottom: 8px;
	color: #0B5E30;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cdw-pp-form div#div1 button.btnprefolhas {
	display: inline-flex !important;
	align-items: center;
	min-height: 38px;
	margin: 0 8px 8px 0 !important;
	padding: 0 16px !important;
	background: #fff !important;
	border: 1.5px solid #0B5E30 !important;
	border-radius: 999px !important;
	color: #0B5E30 !important;
	font: inherit;
	font-size: 14px !important;
	font-weight: 700;
	line-height: 1 !important;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.cdw-pp-form div#div1 button.btnprefolhas:hover,
.cdw-pp-form div#div1 button.btnprefolhas:focus-visible {
	background: #0B5E30 !important;
	color: #fff !important;
}

/* Altura | Largura | Pedaços lado a lado, com rótulo em cima */
.cdw-pp-form div#div1 p:has(> #_altura),
.cdw-pp-form div#div1 p:has(> #_largura),
.cdw-pp-form div#div1 p:has(> #_folhas) {
	display: block !important;
	float: left !important;
	box-sizing: border-box;
	width: calc((100% - 24px) / 3) !important;
	margin: 8px 12px 0 0 !important;
	padding: 0 !important;
}

.cdw-pp-form div#div1 p:has(> #_folhas) {
	margin-right: 0 !important;
}

.cdw-pp-form div#div1 p:has(> #_altura)::before,
.cdw-pp-form div#div1 p:has(> #_largura)::before,
.cdw-pp-form div#div1 p:has(> #_folhas)::before {
	display: block;
	margin-bottom: 6px;
	color: #1B1B1F;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}

.cdw-pp-form div#div1 p:has(> #_altura)::before { content: "Altura (cm)"; }
.cdw-pp-form div#div1 p:has(> #_largura)::before { content: "Largura (cm)"; }
.cdw-pp-form div#div1 p:has(> #_folhas)::before { content: "Folhas"; }

.cdw-pp-form div#div1 input#_altura,
.cdw-pp-form div#div1 input#_largura,
.cdw-pp-form div#div1 input#_folhas {
	display: block !important;
	float: none !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: 46px !important;
	margin: 0 !important;
	padding: 0 12px !important;
	background: #fff !important;
	border: 1px solid #CFC8B3 !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	color: #1B1B1F;
	font: inherit;
	font-size: 16px !important; /* 16 px: o iPhone não dá zoom ao tocar */
}

.cdw-pp-form div#div1 input#_altura::placeholder,
.cdw-pp-form div#div1 input#_largura::placeholder,
.cdw-pp-form div#div1 input#_folhas::placeholder {
	color: #A29C8C;
	font-size: 14px;
}

.cdw-pp-form div#div1 input#_altura:focus,
.cdw-pp-form div#div1 input#_largura:focus,
.cdw-pp-form div#div1 input#_folhas:focus {
	border-color: #0B5E30 !important;
	outline: 2px solid rgba(11, 94, 48, 0.25);
	outline-offset: 0;
}

/* Botão GERAR PREÇO */
/* padding (e não margin): depois dos campos flutuantes o margin-top some no "clear". */
.cdw-pp-form div#div1 p:has(> #btn_preco_personal) {
	display: block !important;
	clear: both;
	margin: 0 !important;
	padding: 20px 0 0 !important;
}

.cdw-pp-form div#div1 input#btn_preco_personal {
	display: block !important;
	float: none !important;
	width: 100% !important;
	height: 48px !important;
	margin: 0 !important;
	padding: 0 16px !important;
	background: #EE7F00 !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	color: #1B1B1F !important;
	font: inherit;
	font-size: 15px !important;
	font-weight: 900 !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: filter 0.15s;
}

.cdw-pp-form div#div1 input#btn_preco_personal:hover {
	filter: brightness(0.94);
}

.cdw-pp-form div#div1 input#btn_preco_personal:focus-visible {
	outline: 2px solid #0B5E30;
	outline-offset: 3px;
}

/* Preço calculado e aviso de quantidade máxima */
.cdw-pp-form div#div1 #div_preco {
	margin-top: 14px;
	color: #0B5E30;
	font-size: 22px;
	font-weight: 900;
}

.cdw-pp-form div#div1 #div_qty_folhas {
	margin-top: 6px;
	color: #5E6470 !important;
	font-size: 13px !important;
}

/* Celular: os três campos continuam lado a lado, mais justos */
@media (max-width: 480px) {
	.cdw-pp-form div#div1 {
		padding: 16px;
	}

	.cdw-pp-form div#div1 p:has(> #_altura),
	.cdw-pp-form div#div1 p:has(> #_largura),
	.cdw-pp-form div#div1 p:has(> #_folhas) {
		width: calc((100% - 16px) / 3) !important;
		margin-right: 8px !important;
	}

	.cdw-pp-form div#div1 p:has(> #_folhas) {
		margin-right: 0 !important;
	}

	.cdw-pp-form div#div1 input#_altura,
	.cdw-pp-form div#div1 input#_largura,
	.cdw-pp-form div#div1 input#_folhas {
		padding: 0 8px !important;
	}
}

/* =====================================================================
   Cabeçalho — revisão (atendimento, "Tipos de papéis", barra numa linha, celular)
   ===================================================================== */

/* Atendimento no formato do antigo "Peça orçamento": ícone do WhatsApp, duas linhas, sem setinha. */
.cdw-cabecalho--duas-linhas .kg-atendimento .cdw-util__seta {
	display: none;
}

.cdw-cabecalho--duas-linhas .kg-atendimento .cdw-util__gatilho--rotulo > .cdw-icone:first-child {
	font-size: 24px;
}

/* Barra verde de ponta a ponta (não segue o grid da página), centralizada e sempre numa linha só. */
.cdw-cabecalho__linha--menu .cdw-cabecalho__menu,
.cdw-cabecalho--duas-linhas .cdw-cabecalho__linha--menu .cdw-cabecalho__menu {
	flex-wrap: nowrap;
	justify-content: center;
	max-width: none;
	padding-inline: clamp(16px, 2.5vw, 40px);
}

.cdw-cabecalho__linha--menu .cdw-categorias-gatilho {
	flex: none;
	white-space: nowrap;
}

.cdw-cabecalho__linha--menu .cdw-nav--desktop {
	flex: 0 1 auto;
	min-width: 0;
}

.cdw-cabecalho__linha--menu .cdw-nav--desktop .cdw-menu,
.cdw-cabecalho--duas-linhas .cdw-cabecalho__linha--menu .cdw-nav--desktop .cdw-menu {
	flex-wrap: nowrap;
	justify-content: center;
}

.cdw-cabecalho__linha--menu .cdw-nav--desktop .cdw-menu > .cdw-menu__item {
	flex: none;
}

.cdw-cabecalho__linha--menu .cdw-nav--desktop .cdw-menu > .cdw-menu__item > .cdw-menu__link {
	white-space: nowrap;
}

/* O que não cabe na largura sai da barra (assets: js/kgepel-cabecalho.js); está no painel. */
.cdw-cabecalho__linha--menu .cdw-menu > .kg-menu-fora {
	display: none;
}

/* Painel "Tipos de papéis": todas as categorias em colunas, sem buracos entre as alturas. */
.cdw-catmenu--lista .cdw-catmenu__colunas {
	display: block;
	columns: 5 190px;
	column-gap: 32px;
}

.cdw-catmenu--lista .cdw-catmenu__coluna {
	display: flex;
	width: 100%;
	margin-bottom: 28px;
	break-inside: avoid;
	page-break-inside: avoid;
}

.cdw-catmenu--lista .cdw-catmenu__nome {
	color: #0B5E30;
	font-weight: 900;
}

.cdw-catmenu--lista .cdw-catmenu__filhas {
	gap: 10px;
}

.cdw-catmenu--lista .cdw-catmenu__link {
	font-size: 0.9375rem;
}

/* Abaixo de ~1200 px: só os ícones na linha do meio. */
@media (max-width: 1199px) {
	.cdw-cabecalho--duas-linhas .cdw-util__gatilho--rotulo .cdw-util__rotulo,
	.cdw-cabecalho--duas-linhas .cdw-util__gatilho--rotulo .cdw-util__seta {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.cdw-cabecalho--duas-linhas .cdw-utilidades > * {
		padding-inline: 12px;
	}

	.kg-busca__rotulo {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.kg-busca__enviar {
		width: 40px;
		margin-left: -45px;
		padding: 0;
		justify-content: center;
	}

	.cdw-cabecalho--duas-linhas .cdw-busca__campo,
	.cdw-cabecalho--duas-linhas .cdw-busca__campo:focus-within {
		padding-right: 52px;
	}
}

/* O atendimento fica também no tablet (o tema o escondia abaixo de 1100 px). */
@media (max-width: 1099px) {
	.cdw-cabecalho--duas-linhas .kg-atendimento.cdw-util--atendimento {
		display: block;
	}
}

/* Celular: ☰ · logo · busca · carrinho; a busca vira uma linha inteira embaixo; categorias na gaveta. */
.kg-busca-abrir {
	display: none;
}

.cdw-cabecalho.is-compacto .kg-busca-abrir {
	display: flex;
	color: #0B5E30;
}

.cdw-cabecalho.is-compacto .cdw-cabecalho__conta-compacta {
	display: none;
}

.cdw-cabecalho--duas-linhas.is-compacto.is-recolhido.kg-busca-visivel .cdw-busca-caixa {
	display: block;
}

.cdw-cabecalho.is-compacto .cdw-busca-caixa {
	width: 100%;
}

/* Painel "Tipos de papéis": categorias-mães fechadas; clicar abre "Ver tudo" + subcategorias. */
.cdw-catmenu--lista .cdw-catmenu__coluna.kg-cat {
	gap: 0;
	margin-bottom: 0;
	border-bottom: 1px solid #E6E0CF;
}

.kg-cat__pai {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 13px 4px;
	border: 0;
	background: none;
	color: #0B5E30;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 900;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}

.kg-cat__pai:hover {
	color: #EE7F00;
}

.kg-cat__pai:focus-visible {
	outline: 2px solid #0B5E30;
	outline-offset: 2px;
	border-radius: 4px;
}

.kg-cat__seta {
	flex: none;
	transition: transform var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.kg-cat__pai[aria-expanded="true"] .kg-cat__seta {
	transform: rotate(180deg);
}

.cdw-catmenu--lista .kg-cat .cdw-catmenu__filhas {
	gap: 10px;
	padding: 2px 4px 16px;
}

.cdw-catmenu--lista .kg-cat.is-aberta {
	background: #F3F8F4;
	border-radius: 8px;
	border-bottom-color: transparent;
}

.cdw-catmenu--lista .kg-cat.is-aberta .kg-cat__pai,
.cdw-catmenu--lista .kg-cat.is-aberta .cdw-catmenu__filhas {
	padding-inline: 12px;
}

.cdw-catmenu--lista .kg-cat .cdw-catmenu__link--tudo {
	font-weight: 900;
}

@media (prefers-reduced-motion: reduce) {
	.kg-cat__seta {
		transition: none;
	}
}