/* frontend.min.css */
.paghiper-pix-code{cursor:pointer}.paghiper-pix-code p{display:block;margin-bottom:.5em;cursor:pointer}.paghiper-pix-code p button{border:unset;display:inline-block;cursor:pointer;padding:.25em .4em;font-size:75%;font-weight:700;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;color:#fff;background-color:#17a2b8;text-transform:uppercase}.paghiper-pix-code .textarea-container{background-color:#e2e3e5;border:1px solid #dee2e6!important;padding:.75rem 1.25rem;margin-bottom:1rem;border-radius:.25rem;cursor:pointer}.paghiper-pix-code .textarea-container textarea{color:#333;width:100%;background:0 0;border:none;overflow:hidden;pointer-events:none;line-break:anywhere}.pix-container{display:flex;flex-direction:row;margin:2em 0 4em}.pix-container .qr-code{flex-grow:1}.pix-container .instructions{display:flex;flex-direction:column;justify-content:center}.woo_paghiper_digitable_line{text-align:center}.woo_paghiper_digitable_line ul{text-align:left;list-style-type:none!important;padding:2em 0!important;margin:0!important;max-width:400px}.woo_paghiper_digitable_line ul li{margin-bottom:1.5em!important;padding-left:65px;position:relative;line-height:1.5em;min-height:50px;display:flex;flex-direction:column;justify-content:center}.woo_paghiper_digitable_line ul li:before{content:"";position:absolute;display:block;width:50px;height:50px;border-radius:40px;left:0;top:50%;transform:translateY(-50%);background-size:contain;box-shadow:0 2px 4px rgba(0,0,0,.15)}.woo_paghiper_digitable_line ul li:first-child:before{background-image:url("https://dev.kgepel.com.br/wp-content/plugins/woo-boleto-paghiper/assets/css/../images/ico_1-app.png")}.woo_paghiper_digitable_line ul li:nth-child(2):before{background-image:url("https://dev.kgepel.com.br/wp-content/plugins/woo-boleto-paghiper/assets/css/../images/ico_2-qr.png")}.woo_paghiper_digitable_line ul li:last-child:before{background-image:url("https://dev.kgepel.com.br/wp-content/plugins/woo-boleto-paghiper/assets/css/../images/ico_3-ok.png")}@media only screen and (max-width:600px){.woo_paghiper_digitable_line+.woocommerce-message{display:flex;flex-direction:column;text-align:center}.woo_paghiper_digitable_line+.woocommerce-message a.button-primary{order:2;margin-top:20px}}.payment_method_paghiper_billet img,.payment_method_paghiper_pix img{max-height:40px}.paghiper-hidden{display:none!important}.wc-block-components-form div.paghiper-taxid-fieldset label{line-height:1}.wc-block-components-form div.paghiper-taxid-fieldset input[type=text]{transition:background .15s ease,border .15s ease,box-shadow .15s ease,color .15s ease;border:1px solid #e6e6e6;box-shadow:0 1px 1px rgba(0,0,0,.03),0 3px 6px rgba(0,0,0,.02)}.wc-block-components-form div.paghiper-taxid-fieldset input[type=text]:focus{outline:0;border-color:hsla(210,96%,45%,.5);box-shadow:0 1px 1px rgba(0,0,0,.03),0 3px 6px rgba(0,0,0,.02),0 0 0 3px hsla(210,96%,45%,.25),0 1px 1px 0 rgba(0,0,0,.08)}.wc-block-components-form div.paghiper-taxid-fieldset input[type=text].invalid{border-color:#df1b41;box-shadow:0 1px 1px rgba(0,0,0,.03),0 3px 6px rgba(0,0,0,.02),0 0 0 1px #df1b41}.wc-block-components-form div.paghiper-taxid-fieldset .wc-block-components-validation-error{font-size:.93rem;color:#df1b41}
/* brands.css */
.tax-product_brand .brand-description{overflow:hidden;zoom:1}.tax-product_brand .brand-description img.brand-thumbnail{width:25%;float:right}.tax-product_brand .brand-description .text{width:72%;float:left}.widget_brand_description img{box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0 0 1em}ul.brand-thumbnails{margin-left:0;margin-bottom:0;clear:both;list-style:none}ul.brand-thumbnails:before{clear:both;content:"";display:table}ul.brand-thumbnails:after{clear:both;content:"";display:table}ul.brand-thumbnails li{float:left;margin:0 3.8% 1em 0;padding:0;position:relative;width:22.05%}ul.brand-thumbnails.fluid-columns li{width:auto}ul.brand-thumbnails:not(.fluid-columns) li.first{clear:both}ul.brand-thumbnails:not(.fluid-columns) li.last{margin-right:0}ul.brand-thumbnails.columns-1 li{width:100%;margin-right:0}ul.brand-thumbnails.columns-2 li{width:48%}ul.brand-thumbnails.columns-3 li{width:30.75%}ul.brand-thumbnails.columns-5 li{width:16.95%}ul.brand-thumbnails.columns-6 li{width:13.5%}.brand-thumbnails li img{box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0}@media screen and (max-width:768px){ul.brand-thumbnails:not(.fluid-columns) li{width:48%!important}ul.brand-thumbnails:not(.fluid-columns) li.first{clear:none}ul.brand-thumbnails:not(.fluid-columns) li.last{margin-right:3.8%}ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(odd){clear:both}ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(even){margin-right:0}}.brand-thumbnails-description li{text-align:center}.brand-thumbnails-description li .term-thumbnail img{display:inline}.brand-thumbnails-description li .term-description{margin-top:1em;text-align:left}#brands_a_z h3:target{text-decoration:underline}ul.brands_index{list-style:none outside;overflow:hidden;zoom:1}ul.brands_index li{float:left;margin:0 2px 2px 0}ul.brands_index li a,ul.brands_index li span{border:1px solid #ccc;padding:6px;line-height:1em;float:left;text-decoration:none}ul.brands_index li span{border-color:#eee;color:#ddd}ul.brands_index li a:hover{border-width:2px;padding:5px;text-decoration:none}ul.brands_index li a.active{border-width:2px;padding:5px}div#brands_a_z a.top{border:1px solid #ccc;padding:4px;line-height:1em;float:right;text-decoration:none;font-size:.8em}
/* tema.css */
/**
 * Base do tema. Só tokens (--wp--preset--* / --wp--custom--*): nenhuma cor fixa.
 * Os tokens vêm do theme.json, com as cores do cliente injetadas do banco.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* Página curta (entrar, 404, carrinho vazio): o conteúdo cresce e o rodapé fica no fim da tela. */
body {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)); /* A barra do WP (logado) empurra o html. */
	margin: 0;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.cdw-trava-rolagem {
	overflow: hidden;
}

img,
svg {
	max-width: 100%;
}

[hidden] {
	display: none !important;
}

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

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cdw-pular {
	position: absolute;
	top: var(--wp--preset--spacing--space-8);
	left: var(--wp--preset--spacing--space-8);
	z-index: calc(var(--wp--custom--z-index--modal) + 1);
	padding: var(--wp--preset--spacing--space-8) var(--wp--preset--spacing--space-16);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand-contrast);
	font-weight: var(--wp--custom--weight--bold);
	text-decoration: none;
	transform: translateY(-200%);
}

.cdw-pular:focus {
	transform: none;
}

.cdw-conteudo {
	flex: 1 0 auto;
}

.cdw-conteudo:focus {
	outline: none;
}

.cdw-container {
	width: 100%;
	max-width: var(--wp--custom--layout--container-max);
	margin-inline: auto;
	padding-inline: var(--wp--custom--layout--container-x);
}

.cdw-pagina {
	padding-block: var(--wp--preset--spacing--space-48);
}

.cdw-pagina__titulo {
	margin: 0 0 var(--wp--preset--spacing--space-24);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-lg);
	font-weight: var(--wp--custom--weight--heavy);
	line-height: var(--wp--custom--line-height--heading-lg);
	letter-spacing: -0.01em;
}

/* Ícone (Fundamentos/Ícone): altura = font-size de quem usa (igual ao glyph do Figma). */
.cdw-icone {
	display: block;
	flex-shrink: 0;
	width: auto;
	height: 1em;
	overflow: visible;
}

/* Botão (Fundamentos/Botão · type=simple) */
.cdw-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--space-8);
	min-height: 50px;
	padding: var(--wp--preset--spacing--space-8) var(--wp--preset--spacing--space-24);
	border: 0;
	border-radius: var(--wp--custom--radius--control);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao),
		box-shadow var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

.cdw-botao .cdw-icone {
	font-size: 16px;
}

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

.cdw-botao--brand:hover {
	background: var(--wp--preset--color--brand-hover);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
}

/* Botão na cor de destaque (Sua Loja › Identidade › Cor de destaque). Ex.: "Confira" da faixa de campanha. */
.cdw-botao--destaque {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
}

.cdw-botao--destaque:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent) 90%, #000);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
}

/* Fundamentos/Botão · color=white (sobre foto ou fundo escuro) */
.cdw-botao--branco {
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
}

.cdw-botao--branco:hover {
	background: var(--wp--preset--color--surface-hover);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
}

/* Fundamentos/Botão · ink ("Escrever avaliação") */
.cdw-botao--ink {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
}

.cdw-botao--ink:hover {
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
}

/* Fundamentos/Botão · contorno (Filtrar / Ordenar do catálogo) */
.cdw-botao--contorno {
	border: 1px solid var(--wp--preset--color--ink);
	background: transparent;
	color: var(--wp--preset--color--ink);
}

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

/* Botão do WhatsApp: o verde do WhatsApp (custom.marcas.whatsapp), igual ao botão flutuante, ao
   ícone dos cards e ao da seção Atendimento. Texto branco (whatsappTexto), decisão do usuário em
   27/10/2026 — o contraste fica em 2:1, abaixo do WCAG (ver PENDENCIAS.md H3). */
.cdw-botao--whatsapp {
	background: var(--wp--custom--marcas--whatsapp);
	color: var(--wp--custom--marcas--whatsapp-texto);
}

.cdw-botao--whatsapp:hover {
	background: var(--wp--custom--marcas--whatsapp-hover);
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
}

/* Fundamentos/Botão · color=success (confirmações) */
.cdw-botao--success {
	background: var(--wp--preset--color--success);
	color: var(--wp--preset--color--surface);
}

.cdw-botao--success:hover {
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.25);
	filter: brightness(0.92);
}

/* ---------- Seção padrão da home ----------
 * Mesmas medidas em todas as seções com título (Figma):
 * desktop padding 48/24 · gap 24 · título Heading Medium 24/1.2 (600) · "Ver todos" Label 16 brand-text + seta 12.
 * mobile (< 782px) padding 32/16.
 */
.cdw-secao__conteiner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-24);
	max-width: var(--wp--custom--layout--container-max);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--space-48) var(--wp--preset--spacing--space-24);
}

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

.cdw-secao__titulo {
	min-width: 0;
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	/* Figma: font-size/heading-md = 24. */
	font-size: 1.5rem;
	font-weight: var(--wp--custom--weight--heavy);
	line-height: 1.2;
}

.cdw-secao__link {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--wp--preset--spacing--space-8);
	padding: 12px 0;
	color: var(--wp--preset--color--brand-text);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
}

.cdw-secao__link .cdw-icone {
	width: 15px;
	font-size: 12px;
}

.cdw-secao__link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Linha que vira rolagem lateral no celular (vídeos, avaliações, blog, Instagram). */
@media (max-width: 781px) {
	.cdw-secao__conteiner {
		padding: var(--wp--preset--spacing--space-32) var(--wp--preset--spacing--space-16);
	}

	/* :is(ul, ol, div) sobe a especificidade: as listas das seções (.cdw-videos__lista etc.) zeram
	   margin e padding e, sem isso, a fileira parava 16 px antes da borda (Figma: vai até a borda). */
	:is(ul, ol, div).cdw-rolagem {
		display: flex;
		margin-inline: calc(-1 * var(--wp--preset--spacing--space-16));
		padding-inline: var(--wp--preset--spacing--space-16);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--wp--preset--spacing--space-16);
		scrollbar-width: none;
	}

	.cdw-rolagem::-webkit-scrollbar {
		display: none;
	}

	.cdw-rolagem > * {
		flex-shrink: 0;
		scroll-snap-align: start;
	}
}

/* Produto/Breadcrumb (catálogo e página de produto): Caption 14 ink-muted, itens separados por "·". */
.cdw-migalhas {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--wp--preset--spacing--space-8);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
}

.cdw-migalhas a {
	color: inherit;
	text-decoration: none;
}

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

/* Produto/Avaliação: cinco estrelas de 16, gap 4; cheias em accent. */
.cdw-estrelas {
	display: flex;
	gap: var(--wp--preset--spacing--space-4);
	color: var(--wp--preset--color--line);
	font-size: 16px;
}

.cdw-estrelas .is-cheia {
	color: var(--wp--preset--color--accent);
}

/* Campo de texto (Formulário/Campo de texto · Tipo=Linha) */
.cdw-campo {
	width: 100%;
	height: 48px;
	padding: 0 var(--wp--preset--spacing--space-16);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
	appearance: none;
}

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

.cdw-campo:focus {
	outline: none;
	border: 2px solid var(--wp--preset--color--focus);
	padding: 0 calc(var(--wp--preset--spacing--space-16) - 1px);
}

/* Aviso de seção sem conteúdo (só administradores veem). */
.cdw-banner-vazio {
	padding: var(--wp--preset--spacing--space-16) var(--wp--preset--spacing--space-24);
	border-bottom: 1px dashed var(--wp--preset--color--line-strong);
	background: var(--wp--preset--color--surface-alt);
	text-align: center;
}

.cdw-banner-vazio a {
	color: var(--wp--preset--color--brand-text);
	font-weight: var(--wp--custom--weight--bold);
}

/* Telas largas: SEM escala, de propósito.
   O Figma desenha a Home em 1200 px ("Tela=Desktop", 276:16522) e o site fica 1:1 com ele em qualquer tela
   (conteúdo centralizado, faixas cheias). Em 02/10/2026 testamos ampliar com `html { zoom }` em degraus
   (1,05x a 1,5x em monitores de 1600 a 3000 px); o usuário preferiu o tamanho do Figma e o bloco foi removido.
   Se um dia quiser ampliar de novo, o caminho é esse (ver a mensagem #14 a #17 do LEIA_ME.md). */

/* Página não encontrada (404.php). Sem Figma próprio: título como Contato/Sobre (40 px, 32 no celular),
   busca com o campo e o botão padrão, atalhos em botões de contorno e categorias em etiquetas. */
.cdw-404 {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-16);
	align-items: flex-start;
	padding-block: var(--wp--preset--spacing--space-64) var(--wp--preset--spacing--space-96);
}

/* Alinhado à esquerda da grade (como o logo), com a largura de leitura limitada. */
.cdw-404 > * {
	max-width: 720px;
}

.cdw-404__codigo {
	margin: 0;
	color: var(--wp--preset--color--brand-text);
	font-size: var(--wp--preset--font-size--overline);
	font-weight: var(--wp--custom--weight--bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cdw-404__titulo {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.5rem;
	font-weight: var(--wp--custom--weight--heavy);
	letter-spacing: -0.02em;
	line-height: 1.1;
	text-wrap: balance;
}

.cdw-404__texto {
	max-width: 60ch;
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.5;
}

.cdw-404__busca {
	display: flex;
	gap: var(--wp--preset--spacing--space-8);
	width: 100%;
	margin-top: var(--wp--preset--spacing--space-16);
}

.cdw-404__busca .cdw-campo {
	flex: 1 1 auto;
	min-width: 0;
	height: 50px;
	border-radius: var(--wp--custom--radius--control);
}

.cdw-404__atalhos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--space-8);
}

.cdw-404__categorias {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-16);
	margin-top: var(--wp--preset--spacing--space-24);
}

.cdw-404__subtitulo {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-sm);
	font-weight: var(--wp--custom--weight--heavy);
	line-height: 1.3;
}

.cdw-404__categorias ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdw-404__categorias a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 var(--wp--preset--spacing--space-16);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--label);
	text-decoration: none;
}

.cdw-404__categorias a:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand-text);
}

@media (max-width: 782px) {
	.cdw-404 {
		padding-block: var(--wp--preset--spacing--space-32) var(--wp--preset--spacing--space-64);
	}

	.cdw-404__titulo {
		font-size: 2rem;
	}

	.cdw-404__busca .cdw-botao {
		padding-inline: var(--wp--preset--spacing--space-16);
	}

	.cdw-404__atalhos .cdw-botao {
		flex: 1 1 auto;
	}
}

/* Tracinho embaixo dos títulos das seções: só aparece quando a loja define a cor
   "titulo-detalhe" no arquivo de cores (o PHP escreve também a altura e o espaço). */
.cdw-secao__titulo,
.cdw-vitrine__titulo,
.cdw-categorias__titulo {
	position: relative;
	padding-bottom: var(--wp--custom--faixa--titulo-detalhe-espaco, 0);
}

.cdw-secao__titulo::after,
.cdw-vitrine__titulo::after,
.cdw-categorias__titulo::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 48px;
	height: var(--wp--custom--faixa--titulo-detalhe-altura, 0);
	border-radius: 2px;
	background: var(--wp--custom--faixa--titulo-detalhe, transparent);
}

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

/* cabecalho.css */
/**
 * Cabeçalho — Figma "linha-principal" (node 128:1367).
 *
 * Medidas do Dev Mode:
 *   linha       padding 16/24 · borda inferior 1px line · fundo surface
 *   logo-e-menu gap 40 · logo 210×70
 *   menu        gap 4 · item padding 8/16 · Label 16/1.5 (500) · chevron 16
 *   item hover  fundo brand-subtle · texto brand · pill · chevron-up
 *   ações       gap 20 · ícone 20px em caixa 25×25 · carrinho 32×32
 *   contador    left 14 · top -2 · min 18×18 · padding 1/5 · 11px · brand / brand-contrast
 *
 * Só tokens: as cores mudam pelo painel Sua Loja.
 */

/* ---------- Estrutura ---------- */

.cdw-cabecalho {
	position: relative;
	z-index: var(--wp--custom--z-index--header);
	background: var(--wp--preset--color--surface);
}

.cdw-cabecalho--fixo {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
}

/* Até 600 px a barra do WordPress rola com a página (não fica fixa): sem desconto no topo. */
@media (max-width: 600px) {
	.cdw-cabecalho--fixo {
		top: 0;
	}
}

.cdw-cabecalho__linha {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

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

.cdw-cabecalho__logo-e-menu {
	display: flex;
	align-items: center;
	gap: 40px;
	min-width: 0;
}

/* ---------- Logo (Fundamentos/Logo do cliente · 210×70) ---------- */

.cdw-cabecalho__logo {
	display: flex;
	flex-shrink: 0;
	width: 210px;
	height: 70px;
}

.cdw-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	/* Figma: pt 21 / pb 24 → arte 1,5px acima do centro. */
	padding-bottom: 3px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cdw-logo__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 210px;
	max-height: 46px;
	object-fit: contain;
}

.cdw-logo__img--padrao {
	width: 198px;
	height: 29px;
}

.cdw-logo__texto {
	font-family: var(--wp--preset--font-family--display);
	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);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- Menu (Menu/Item) ---------- */

.cdw-nav--desktop {
	min-width: 0;
}

.cdw-menu,
.cdw-submenu__lista,
.cdw-submenu__sublista,
.cdw-gaveta__atalhos {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdw-nav--desktop .cdw-menu {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-4);
	white-space: nowrap;
}

.cdw-menu__item {
	position: relative;
}

.cdw-menu__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--space-4);
	margin: 0;
	padding: var(--wp--preset--spacing--space-8) var(--wp--preset--spacing--space-16);
	border: 0;
	border-radius: var(--wp--custom--radius--full);
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	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-menu__chevron {
	font-size: 16px;
	transition: transform var(--wp--custom--motion--duracao-padrao) var(--wp--custom--motion--ease-padrao);
}

/* Estado hover/aberto (Menu/Item · color=ink · hover=true).
 * Texto em brand-text (= brand quando a cor passa 4,5:1; com o azul padrão é
 * idêntico ao Figma). Com uma cor clara de cliente, o texto continua legível. */
.cdw-menu__link:hover,
.cdw-menu__item.is-aberto > .cdw-menu__link,
.cdw-menu__link[aria-current="page"],
.cdw-menu__item.is-atual > .cdw-menu__link {
	background: var(--wp--preset--color--brand-subtle);
	color: var(--wp--preset--color--brand-text);
}

.cdw-menu__item.is-aberto > .cdw-menu__link .cdw-menu__chevron {
	transform: rotate(180deg);
}

@media (hover: hover) {
	.cdw-nav--desktop .cdw-menu__item--pai:hover > .cdw-menu__link {
		background: var(--wp--preset--color--brand-subtle);
		color: var(--wp--preset--color--brand-text);
	}

	.cdw-nav--desktop .cdw-menu__item--pai:hover > .cdw-menu__link .cdw-menu__chevron {
		transform: rotate(180deg);
	}
}

/* ---------- Submenu (desktop): mesmo padrão da lista do Formulário/Select ---------- */

.cdw-nav--desktop .cdw-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--wp--custom--z-index--dropdown);
	/* Ponte invisível entre o item e o painel: o hover não se perde. */
	padding-top: var(--wp--preset--spacing--space-8);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-4px);
	transition:
		opacity var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao),
		transform var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao),
		visibility 0s linear var(--wp--custom--motion--duracao-rapida);
}

.cdw-nav--desktop .cdw-menu__item:nth-last-child(-n+2) > .cdw-submenu {
	left: auto;
	right: 0;
}

.cdw-nav--desktop .cdw-menu__item.is-aberto > .cdw-submenu {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

@media (hover: hover) {
	.cdw-nav--desktop .cdw-menu__item--pai:hover > .cdw-submenu {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}
}

.cdw-nav--desktop .cdw-submenu__painel {
	min-width: 240px;
	padding: var(--wp--preset--spacing--space-8);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--float);
}

.cdw-submenu__ver-tudo,
.cdw-submenu__link,
.cdw-submenu__sublink {
	display: block;
	padding: 12px var(--wp--preset--spacing--space-16);
	border-radius: var(--wp--custom--radius--full);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	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-submenu__ver-tudo {
	color: var(--wp--preset--color--brand-text);
	font-weight: var(--wp--custom--weight--bold);
}

a.cdw-submenu__ver-tudo:hover,
a.cdw-submenu__link:hover,
a.cdw-submenu__sublink:hover,
.cdw-submenu [aria-current="page"] {
	background: var(--wp--preset--color--brand-subtle);
	color: var(--wp--preset--color--brand-text);
}

/* Terceiro nível: o painel vira colunas (grupo = título + links). */
.cdw-nav--desktop .cdw-submenu__lista:has(.cdw-submenu__sublista) {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(180px, auto);
	gap: var(--wp--preset--spacing--space-8) var(--wp--preset--spacing--space-24);
}

.cdw-submenu__item--grupo > .cdw-submenu__link,
.cdw-nav--desktop .cdw-submenu__lista:has(.cdw-submenu__sublista) > .cdw-submenu__item > .cdw-submenu__link {
	font-weight: var(--wp--custom--weight--bold);
}

.cdw-submenu__link--titulo {
	cursor: default;
}

.cdw-submenu__sublink {
	padding-block: 6px;
	color: var(--wp--preset--color--ink-muted);
}

/* ---------- Ações (ícones) ---------- */

.cdw-cabecalho__acoes {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 20px;
}

.cdw-cabecalho__acao {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 25px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-size: 20px;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

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

.cdw-cabecalho__abrir-gaveta {
	display: none;
}

/* Header/Carrinho */
.cdw-carrinho {
	position: relative;
	display: block;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: color var(--wp--custom--motion--duracao-rapida) var(--wp--custom--motion--ease-padrao);
}

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

.cdw-carrinho__icone {
	position: absolute;
	/* Figma: caixa 25×25 em top 4; glyph de 20px centralizado nela. */
	top: 6.5px;
	left: 0;
	font-size: 20px;
}

.cdw-carrinho__contador {
	position: absolute;
	top: -2px;
	left: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	min-height: 18px;
	padding: 1px 5px;
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand-contrast);
	font-size: 11px;
	font-weight: var(--wp--custom--weight--regular);
	line-height: 1.5;
	white-space: nowrap;
}

/* A busca (campo no lugar do menu + sugestões) vive em assets/css/busca.css. */

/* ---------- Gaveta (menu no celular / menu que não cabe) ---------- */

.cdw-gaveta {
	position: fixed;
	inset: 0;
	z-index: var(--wp--custom--z-index--modal);
}

/* A gaveta vive dentro do cabeçalho (z-index 100). Com ela aberta, o cabeçalho sobe acima da
   barra do WordPress (#wpadminbar, 99999) para a gaveta não ficar com o topo escondido. */
.cdw-cabecalho:has(.cdw-gaveta.is-aberta) {
	z-index: 100000;
}

.cdw-gaveta__fundo {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 40%, transparent);
	opacity: 0;
	transition: opacity var(--wp--custom--motion--duracao-padrao) var(--wp--custom--motion--ease-padrao);
}

.cdw-gaveta__painel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: min(360px, 88vw);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--float);
	transform: translateX(-100%);
	transition: transform var(--wp--custom--motion--duracao-padrao) var(--wp--custom--motion--ease-padrao);
}

.cdw-gaveta.is-aberta .cdw-gaveta__fundo {
	opacity: 1;
}

.cdw-gaveta.is-aberta .cdw-gaveta__painel {
	transform: none;
}

.cdw-gaveta__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--space-16);
	padding: var(--wp--preset--spacing--space-8) var(--wp--preset--spacing--space-16);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.cdw-logo--gaveta {
	justify-content: flex-start;
	width: auto;
	height: 56px;
	padding-bottom: 0;
}

.cdw-logo--gaveta .cdw-logo__img {
	max-width: 180px;
	max-height: 32px;
}

.cdw-nav--gaveta {
	padding: var(--wp--preset--spacing--space-8);
}

.cdw-nav--gaveta .cdw-menu__link {
	justify-content: space-between;
	width: 100%;
	min-height: 48px;
	padding: 12px var(--wp--preset--spacing--space-16);
	text-align: left;
}

.cdw-nav--gaveta .cdw-submenu {
	display: none;
	padding: 0 0 var(--wp--preset--spacing--space-8) var(--wp--preset--spacing--space-16);
}

.cdw-nav--gaveta .cdw-menu__item.is-aberto > .cdw-submenu {
	display: block;
}

.cdw-nav--gaveta .cdw-submenu__ver-tudo,
.cdw-nav--gaveta .cdw-submenu__link,
.cdw-nav--gaveta .cdw-submenu__sublink {
	white-space: normal;
}

.cdw-nav--gaveta .cdw-submenu__sublista {
	padding-left: var(--wp--preset--spacing--space-16);
}

.cdw-gaveta__voltar {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-8);
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 12px var(--wp--preset--spacing--space-16);
	border: 0;
	border-radius: var(--wp--custom--radius--full);
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--label);
	font-weight: var(--wp--custom--weight--bold);
	text-align: left;
	cursor: pointer;
}

.cdw-gaveta__voltar .cdw-icone {
	font-size: 16px;
}

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

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

.cdw-gaveta__atalho {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 12px var(--wp--preset--spacing--space-16);
	border-radius: var(--wp--custom--radius--full);
	color: var(--wp--preset--color--ink);
	font-weight: var(--wp--custom--weight--bold);
	text-decoration: none;
}

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

.cdw-gaveta__atalho .cdw-icone {
	font-size: 20px;
}

.cdw-menu__vazio {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption);
}

.cdw-menu__vazio a {
	color: var(--wp--preset--color--brand-text);
}

/* ---------- Modo compacto ----------
 * Celular (< 782px, breakpoint "tablet") OU quando o menu do cliente não cabe
 * na largura (o JS mede e adiciona .is-compacto). */

.cdw-cabecalho.is-compacto .cdw-cabecalho__conteudo {
	padding: 12px var(--wp--preset--spacing--space-16);
}

.cdw-cabecalho.is-compacto .cdw-cabecalho__logo-e-menu {
	gap: 12px;
}

.cdw-cabecalho.is-compacto .cdw-nav--desktop,
.cdw-cabecalho.is-compacto .cdw-cabecalho__acao--desktop {
	display: none;
}

.cdw-cabecalho.is-compacto .cdw-cabecalho__abrir-gaveta {
	display: flex;
}

/* Celular: a caixa visual continua o ícone; a área de toque passa de 25/32 para 44. */
.cdw-cabecalho.is-compacto .cdw-cabecalho__acao,
.cdw-cabecalho.is-compacto .cdw-carrinho {
	width: 44px;
	height: 44px;
}

.cdw-cabecalho.is-compacto .cdw-carrinho__icone {
	top: 12px;
	left: 9.5px;
}

.cdw-cabecalho.is-compacto .cdw-carrinho__contador {
	top: 3.5px;
	left: 23.5px;
}

.cdw-cabecalho.is-compacto .cdw-cabecalho__logo {
	width: auto;
	height: 48px;
}

.cdw-cabecalho.is-compacto .cdw-logo {
	padding-bottom: 0;
}

.cdw-cabecalho.is-compacto .cdw-logo__img {
	max-width: 160px;
	max-height: 28px;
}

.cdw-cabecalho.is-compacto .cdw-logo__img--padrao {
	width: 160px;
	height: auto;
}

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

/* rodape.css */
/**
 * Global/Rodapé — Figma 61:458.
 *
 * Tokens próprios (theme.json › custom.rodape): bg, line, text, textMuted. Trocar os
 * quatro muda o rodapé inteiro (ex.: rodapé escuro) sem tocar neste arquivo.
 *
 * Medidas: borda de cima 1px · padding 64 / container-x · blocos com gap 48
 *   colunas: flex-wrap, gap 40/32 · marca mín. 280 (gap 16) · links mín. 160 (gap 8) · contato mín. 220 (gap 16)
 *   título de coluna: Overline 12 maiúsculo (+8%) · links Caption 14 com área de toque (padding 10 0)
 *   redes: ícone 20 em área de 44, gap 8 · contato: ícone 16 brand-text + Caption 14
 *   faixa pagamento/envio/segurança: borda de cima, padding-top 32, gap 32/48, blocos mín. 220 (gap 16)
 *   pagamento 43,75×30, gap 8 · envio: ícone 20 + Caption 14 · selo 109×44, borda 1px, raio 7
 *   aviso legal: Caption 14 text-muted, largura toda
 *   base: borda de cima, padding-top 24 · texto Caption 14 · links legais sublinhados, gap 4/16 · crédito 207×17.
 * As colunas quebram sozinhas em telas estreitas (flex-wrap).
 */

.cdw-rodape {
	border-top: 1px solid var(--wp--custom--rodape--line);
	background: var(--wp--custom--rodape--bg);
	color: var(--wp--custom--rodape--text-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
}

.cdw-rodape__conteiner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-48);
	max-width: var(--wp--custom--layout--container-max);
	margin: 0 auto;
	padding: var(--wp--preset--spacing--space-64) var(--wp--preset--spacing--space-24);
}

.cdw-rodape ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cdw-rodape a {
	color: inherit;
	text-decoration: none;
}

.cdw-rodape a:hover {
	color: var(--wp--custom--rodape--text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Colunas ---------- */

.cdw-rodape__colunas {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px var(--wp--preset--spacing--space-32);
}

.cdw-rodape__marca {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--space-16);
	min-width: min(280px, 100%);
}

.cdw-rodape__logo {
	/* Figma: caixa do logo 210×70, arte centralizada (mesma do cabeçalho). */
	width: 210px;
	max-width: 100%;
	height: 70px;
}

.cdw-rodape__logo .cdw-logo__texto {
	color: var(--wp--custom--rodape--text);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.25rem;
	font-weight: var(--wp--custom--weight--heavy);
}

.cdw-rodape__descricao {
	margin: 0;
}

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

.cdw-rodape__rede {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--wp--custom--rodape--text) !important;
	font-size: 20px;
}

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

.cdw-rodape__coluna {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-8);
	min-width: min(160px, 100%);
}

.cdw-rodape__coluna--contato {
	gap: var(--wp--preset--spacing--space-16);
	min-width: min(220px, 100%);
}

.cdw-rodape__titulo {
	margin: 0;
	color: var(--wp--custom--rodape--text);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--overline);
	font-weight: var(--wp--custom--weight--regular);
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cdw-rodape__links {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-8);
}

.cdw-rodape__links a {
	display: block;
	padding: 10px 0;
}

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

/* Figma: ícone 20×20 centralizado na altura do texto (no endereço de 2 linhas fica no meio). */
.cdw-rodape__contato {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-4);
	overflow-wrap: anywhere;
}

.cdw-rodape__contato .cdw-icone {
	flex-shrink: 0;
	width: 20px;
	color: var(--wp--preset--color--brand-text);
	font-size: 16px;
}

/* ---------- Pagamento · envio · segurança ---------- */

.cdw-rodape__faixa {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--space-32) var(--wp--preset--spacing--space-48);
	padding-top: var(--wp--preset--spacing--space-32);
	border-top: 1px solid var(--wp--custom--rodape--line);
}

.cdw-rodape__bloco {
	display: flex;
	flex: 1 0 0;
	flex-direction: column;
	gap: var(--wp--preset--spacing--space-16);
	min-width: min(220px, 100%);
}

.cdw-rodape__pagamentos,
.cdw-rodape__selos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--space-8);
}

.cdw-rodape__pagamentos img {
	display: block;
	width: 43.75px;
	height: 30px;
}

.cdw-rodape__envios {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px var(--wp--preset--spacing--space-16);
}

/* Figma: selo de 25 px de altura (ícone numa caixa 25×25, texto centralizado). */
.cdw-rodape__envio {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--space-8);
	min-height: 25px;
	color: var(--wp--custom--rodape--text);
}

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

/* Figma (selo/…): 109,22×43,82 · padding 5,232/10,464 · borda 0,654 #D0D5DD (CINZA/300, não é token
   do tema) · raio 7,396 · arte 88,29×33,36 com raio 8,681, alinhada no topo à esquerda. */
.cdw-rodape__selo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 109.22px;
	height: 43.82px;
	padding: 5.232px 10.464px;
	border: 0.654px solid #d0d5dd;
	border-radius: 7.396px;
	background: var(--wp--preset--color--surface);
}

.cdw-rodape__selo img {
	display: block;
	flex-shrink: 0;
	width: 88.29px;
	max-width: none;
	height: 33.36px;
	border-radius: 8.681px;
	object-fit: cover;
}

/* Figma: só o "Site protegido" (arte mais larga, 3,4:1) fica inteiro dentro da caixa. */
.cdw-rodape__selo img[src*="site-protegido"] {
	object-fit: contain;
}

/* ---------- Base ---------- */

.cdw-rodape__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px var(--wp--preset--spacing--space-16);
	padding-top: var(--wp--preset--spacing--space-24);
	border-top: 1px solid var(--wp--custom--rodape--line);
}

.cdw-rodape__legal {
	display: flex;
	flex: 1 0 0;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--space-4) var(--wp--preset--spacing--space-16);
	min-width: min(340px, 100%);
}

.cdw-rodape__razao {
	min-width: min(280px, 100%);
	margin: 0;
}

/* Figma "links legais": Política de privacidade · Trocas e devoluções, sublinhados. */
.cdw-rodape__legais {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--space-4) var(--wp--preset--spacing--space-8);
}

.cdw-rodape__legais li + li::before {
	content: "·";
	margin-right: var(--wp--preset--spacing--space-8);
}

.cdw-rodape .cdw-rodape__legais a {
	display: inline-block;
	padding-block: 10px; /* Área de toque de 41 px, como os links das colunas. */
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cdw-rodape__aviso {
	margin: 0;
}

.cdw-rodape__credito {
	display: block;
	flex-shrink: 0;
	border-radius: var(--wp--custom--radius--sm);
}

.cdw-rodape__credito img {
	display: block;
	/* Figma: 207,35×17,44. */
	width: 207.35px;
	height: 17.44px;
}

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

/* Mobile (Figma 276:18562): mesmas medidas do desktop — padding 64/24 e blocos com gap 48.
   A área de toque dos links cresce por cima do vão, sem mover o texto. */
@media (max-width: 781px) {
	.cdw-rodape__links a,
	.cdw-rodape .cdw-rodape__legais a,
	.cdw-rodape__contato a,
	.cdw-rodape__credito {
		position: relative;
	}

	.cdw-rodape__links a::after,
	.cdw-rodape .cdw-rodape__legais a::after,
	.cdw-rodape__contato a::after,
	.cdw-rodape__credito::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 44px;
		transform: translate(-50%, -50%);
	}

	/* Os legais ficam lado a lado, com um vão de 20 px: o clique ocupa esse vão. */
	.cdw-rodape .cdw-rodape__legais a::after {
		width: calc(100% + 20px);
	}
}

/* whatsapp-flutuante.css */
/**
 * Botão flutuante do WhatsApp (inc/sua-loja/whatsapp-flutuante.php).
 * Distância das bordas e tamanho são do tema (24px e 56px; 44px e 12px no celular). Saíram do
 * painel em 27/10/2026: em pixel o lojista desencaixava o botão das barras fixas. As variáveis
 * (--cdw-whats-flut-dist e --cdw-whats-flut-tam,
 * em px); o ícone acompanha o tamanho do botão (metade do diâmetro). O resto é fixo aqui.
 */

.cdw-whats-flut {
	position: fixed;
	z-index: 9000;
	bottom: var(--cdw-whats-flut-dist, 24px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--cdw-whats-flut-tam, 56px);
	height: var(--cdw-whats-flut-tam, 56px);
	border-radius: var(--wp--custom--radius--full, 999px);
	background: var(--wp--custom--marcas--whatsapp, #25d366);
	color: var(--wp--custom--marcas--whatsapp-contraste, #fff) !important;
	box-shadow: 0 6px 16px rgba(23, 32, 51, 0.24);
	text-decoration: none !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, visibility 0s linear 0s;
}

/* Com uma gaveta, painel ou janela aberta o botão some: ele ficava por cima da gaveta de filtros
   e cobria o "Limpar filtros" (revisão mobile de 27/10/2026). Vale para:
   - gavetas que travam a rolagem (filtros do catálogo, menu do celular): body.cdw-trava-rolagem;
   - janelas (ordenar, foto ampliada, avaliar): dialog[open];
   - resumo aberto na finalização (celular), sugestões da busca, CATEGORIAS e painéis do topo
     (a prévia do carrinho fica de fora: ela abre só com o mouse). */
body.cdw-trava-rolagem .cdw-whats-flut,
body:has(dialog[open], .cdw-ck__lateral.is-aberto, .cdw-busca-painel:not([hidden]), [data-cdw-categorias]:not([hidden]), .cdw-util__painel:not([hidden]):not(.cdw-previa)) .cdw-whats-flut {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

.cdw-whats-flut--direita {
	right: var(--cdw-whats-flut-dist, 24px);
}

.cdw-whats-flut--esquerda {
	left: var(--cdw-whats-flut-dist, 24px);
}

.cdw-whats-flut:hover,
.cdw-whats-flut:focus-visible {
	transform: scale(1.06);
	box-shadow: 0 8px 20px rgba(23, 32, 51, 0.32);
}

.cdw-whats-flut__icone {
	width: calc(var(--cdw-whats-flut-tam, 56px) * 0.5);
	height: calc(var(--cdw-whats-flut-tam, 56px) * 0.5);
}

/* Não sobrepõe o pop-up de boas-vindas nem o editor de blocos. */
body.wp-admin .cdw-whats-flut {
	display: none;
}

/* Celular com barra fixa no rodapé (compra da página do produto: 74 px; total do carrinho: 72 px):
   o botão sobe para 12 px acima dela — antes ficava por cima do "Comprar". */
@media (max-width: 781px) {
	body.cdw-tem-barra {
		--cdw-whats-flut-barra: 74px;
	}

	body:has(.cdw-pc-barra) {
		--cdw-whats-flut-barra: 72px;
	}

	body.cdw-tem-barra .cdw-whats-flut,
	body:has(.cdw-pc-barra) .cdw-whats-flut {
		bottom: calc(var(--cdw-whats-flut-barra) + 12px);
	}

	/* Menor e mais no canto: não cobre a faixa de vantagens nem os selos do rodapé.
	   A subida acima das barras de compra/carrinho continua na regra de cima (mais específica). */
	.cdw-whats-flut {
		width: 44px;
		height: 44px;
		bottom: 12px;
		transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, bottom 0.2s ease, visibility 0s linear 0s;
	}

	.cdw-whats-flut--direita {
		right: 12px;
	}

	.cdw-whats-flut--esquerda {
		left: 12px;
	}

	.cdw-whats-flut__icone {
		width: 22px;
		height: 22px;
	}
}

/* cookies.css */
/**
 * Aviso de cookies — barra fixa no rodapé do site (inc/cookies.php, assets/js/cookies.js).
 */

.cdw-cookies {
	position: fixed;
	right: 16px;
	bottom: 16px;
	left: 16px;
	z-index: 9999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 760px;
	margin-inline: auto;
	padding: 18px 20px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px;
	background: var(--wp--preset--color--surface);
	box-shadow: 0 10px 30px rgba(23, 32, 51, 0.14);
}

.cdw-cookies__texto {
	flex: 1 1 320px;
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
}

.cdw-cookies__texto a {
	color: var(--wp--preset--color--brand-text);
	font-weight: 600;
	text-decoration: underline;
}

.cdw-cookies__ok {
	flex: none;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.cdw-cookies {
		right: 10px;
		bottom: 10px;
		left: 10px;
		padding: 16px;
	}

	.cdw-cookies__ok {
		width: 100%;
		text-align: center;
	}
}