/**
 * 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%;
}

body {
	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: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);
}

/* Fundamentos/Botão · color=success (WhatsApp, 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);
	}

	.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). */