/* ==========================================================================
   L'Essenza Casa — CSS base
   Presente em todas as páginas: tokens, fontes, tipografia, layout,
   cabeçalho, rodapé, botões e formulários.
   CSS de páginas específicas fica em arquivos próprios, carregados sob demanda.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fontes (hospedadas no tema; troca centralizada aqui e em inc/assets.php)
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Jost";
	src: url("../fonts/jost-latin-300-normal.woff2") format("woff2");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Jost";
	src: url("../fonts/jost-latin-400-normal.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Jost";
	src: url("../fonts/jost-latin-500-normal.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
	/* Paleta oficial (Manual de Identidade — CohrDesign) */
	--marfim: #EDE9E2;
	--pedra: #D6CDC4;
	--grafite: #433F3A;
	--conhaque: #95633E;
	--terracota: #A45C38;
	--caramelo: #B98968;

	/* Derivadas funcionais (não são cores de marca; servem a contraste e superfície) */
	--marfim-claro: #F5F2EC;       /* superfícies elevadas sobre o marfim */
	--branco-quente: #FBF9F5;      /* texto sobre terracota: contraste 4,8:1 */
	--terracota-escuro: #8C4C2D;   /* estado hover/pressionado do botão */
	--linha: rgba(67, 63, 58, 0.16);
	--linha-forte: rgba(67, 63, 58, 0.32);
	--linha-clara: rgba(237, 233, 226, 0.18);

	/* Tipografia */
	--fonte-titulo: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
	--fonte-texto: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;

	/* Escala em quarta justa (1,333), fluida entre celular e desktop */
	--fs-legenda: 0.8125rem;
	--fs-pequeno: 0.9063rem;
	--fs-texto: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
	--fs-h5: clamp(1.25rem, 1.18rem + 0.3vw, 1.375rem);
	--fs-h4: clamp(1.5rem, 1.38rem + 0.5vw, 1.777rem);
	--fs-h3: clamp(1.875rem, 1.66rem + 0.9vw, 2.369rem);
	--fs-h2: clamp(2.25rem, 1.88rem + 1.6vw, 3.157rem);
	--fs-h1: clamp(2.75rem, 2.1rem + 2.8vw, 4.209rem);
	--fs-display: clamp(3.25rem, 2.2rem + 4.6vw, 5.61rem);

	/* Espaçamento (base 8) */
	--esp-1: 0.5rem;
	--esp-2: 1rem;
	--esp-3: 1.5rem;
	--esp-4: 2rem;
	--esp-5: 3rem;
	--esp-6: 4rem;
	--esp-7: 6rem;
	--esp-8: clamp(5rem, 3rem + 7vw, 9rem); /* respiro entre seções */

	/* Layout */
	--largura-max: 82.5rem;  /* 1320px */
	--largura-texto: 40rem;  /* ~70 caracteres por linha */
	--margem: clamp(1.25rem, 0.6rem + 3.2vw, 4rem);
	--altura-cabecalho: 4.5rem;

	/* Assinatura: canto chanfrado, do octógono do símbolo LE */
	--chanfro: 0.625rem;

	/* Movimento */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--tempo: 240ms;
}

@media (min-width: 64em) {
	:root {
		--altura-cabecalho: 5.5rem;
	}
}

/* --------------------------------------------------------------------------
   3. Reset enxuto
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: var(--altura-cabecalho);
}

body {
	margin: 0;
	background: var(--marfim);
	color: var(--grafite);
	font-family: var(--fonte-texto);
	font-size: var(--fs-texto);
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img,
picture,
video,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol {
	margin: 0;
}

/* --------------------------------------------------------------------------
   4. Tipografia
   -------------------------------------------------------------------------- */
h1, h2, h3, h4,
.titulo-display {
	font-family: var(--fonte-titulo);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.005em;
	text-wrap: balance;
	color: var(--grafite);
}

.titulo-display { font-size: var(--fs-display); line-height: 1.02; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.15; }
h4 { font-size: var(--fs-h4); line-height: 1.2; }

h5, h6 {
	font-family: var(--fonte-texto);
	font-size: var(--fs-h5);
	font-weight: 400;
	line-height: 1.35;
}

p {
	text-wrap: pretty;
}

.texto-introducao {
	font-size: var(--fs-h5);
	font-weight: 300;
	line-height: 1.55;
	max-width: 34em;
}

.texto-pequeno {
	font-size: var(--fs-pequeno);
	line-height: 1.55;
}

/* Rótulo em caixa alta espaçada: o mesmo recurso da embalagem
   ("VETIVER ÂMBAR", "CASA"). Usado com parcimônia: nomes de fragrância e categorias. */
.rotulo {
	font-family: var(--fonte-texto);
	font-size: var(--fs-legenda);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* Fio fino, como o filete entre nome e fragrância nos rótulos do produto */
.filete {
	display: block;
	width: 3rem;
	height: 1px;
	margin: var(--esp-3) 0;
	background: var(--caramelo);
	border: 0;
}

/* Conteúdo editorial (páginas, posts, textos institucionais) */
.conteudo > * + * {
	margin-top: 1.25em;
}

.conteudo h2,
.conteudo h3 {
	margin-top: 2em;
}

.conteudo ul,
.conteudo ol {
	padding-left: 1.25em;
}

.conteudo li + li {
	margin-top: 0.4em;
}

/* Links: texto em grafite, sublinhado em conhaque (contraste garantido) */
a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-color: var(--conhaque);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: text-decoration-color var(--tempo) var(--ease), color var(--tempo) var(--ease);
}

a:hover {
	color: var(--conhaque);
}

/* Foco visível em todos os elementos interativos */
:focus-visible {
	outline: 2px solid var(--conhaque);
	outline-offset: 3px;
}

::selection {
	background: var(--pedra);
	color: var(--grafite);
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: calc(var(--largura-max) + var(--margem) * 2);
	margin-inline: auto;
	padding-inline: var(--margem);
}

.container--texto {
	max-width: calc(var(--largura-texto) + var(--margem) * 2);
}

.site-main {
	padding-block: var(--esp-6) var(--esp-8);
	min-height: 60vh;
}

.secao {
	padding-block: var(--esp-8);
}

.secao--pedra {
	background: var(--pedra);
}

.secao--grafite {
	background: var(--grafite);
	color: var(--marfim);
}

.secao--grafite h1,
.secao--grafite h2,
.secao--grafite h3,
.secao--grafite h4 {
	color: var(--marfim);
}

.cabecalho-pagina {
	margin-bottom: var(--esp-6);
}

.cabecalho-pagina h1 {
	max-width: 16em;
}

/* Moldura chanfrada para imagens (assinatura da marca) */
.moldura {
	clip-path: polygon(
		var(--chanfro) 0, calc(100% - var(--chanfro)) 0,
		100% var(--chanfro), 100% calc(100% - var(--chanfro)),
		calc(100% - var(--chanfro)) 100%, var(--chanfro) 100%,
		0 calc(100% - var(--chanfro)), 0 var(--chanfro)
	);
}

/* Acessibilidade: conteúdo só para leitores de tela */
.screen-reader-text,
.so-leitor {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Pular para o conteúdo */
.pular-conteudo {
	position: absolute;
	top: 0;
	left: var(--margem);
	z-index: 1000;
	padding: var(--esp-1) var(--esp-2);
	background: var(--grafite);
	color: var(--marfim);
	transform: translateY(-120%);
	transition: transform var(--tempo) var(--ease);
}

.pular-conteudo:focus {
	transform: translateY(0.5rem);
}

/* --------------------------------------------------------------------------
   6. Botões
   -------------------------------------------------------------------------- */
.botao,
.button,
button[type="submit"],
input[type="submit"] {
	--chanfro-botao: 0.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--esp-1);
	min-height: 3.25rem;
	padding: 0.85rem 2rem;
	border: 0;
	background: var(--terracota);
	color: var(--branco-quente);
	font-family: var(--fonte-texto);
	font-size: var(--fs-pequeno);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.2;
	clip-path: polygon(
		var(--chanfro-botao) 0, calc(100% - var(--chanfro-botao)) 0,
		100% var(--chanfro-botao), 100% calc(100% - var(--chanfro-botao)),
		calc(100% - var(--chanfro-botao)) 100%, var(--chanfro-botao) 100%,
		0 calc(100% - var(--chanfro-botao)), 0 var(--chanfro-botao)
	);
	transition: background-color var(--tempo) var(--ease);
}

.botao:hover,
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
	background: var(--terracota-escuro);
	color: var(--branco-quente);
}

/* O chanfro corta o contorno de foco; o foco usa sombra interna visível */
.botao:focus-visible,
.button:focus-visible,
button[type="submit"]:focus-visible,
input[type="submit"]:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 2px var(--branco-quente), inset 0 0 0 4px var(--grafite);
}

/* Secundário: contorno chanfrado, para ações de menor peso.
   A borda é o fundo do botão; uma camada interna com o mesmo chanfro,
   1px menor, cobre o miolo com a cor da seção. Assim a linha acompanha
   os cantos cortados sem falhas. */
.botao--secundario {
	--cor-borda: var(--grafite);
	--fundo-secao: var(--marfim);
	position: relative;
	isolation: isolate;
	background: var(--cor-borda);
	color: var(--grafite);
}

.botao--secundario::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: -1;
	background: var(--fundo-secao);
	clip-path: polygon(
		calc(var(--chanfro-botao) - 0.4px) 0, calc(100% - var(--chanfro-botao) + 0.4px) 0,
		100% calc(var(--chanfro-botao) - 0.4px), 100% calc(100% - var(--chanfro-botao) + 0.4px),
		calc(100% - var(--chanfro-botao) + 0.4px) 100%, calc(var(--chanfro-botao) - 0.4px) 100%,
		0 calc(100% - var(--chanfro-botao) + 0.4px), 0 calc(var(--chanfro-botao) - 0.4px)
	);
	transition: opacity var(--tempo) var(--ease);
}

.botao--secundario:hover {
	background: var(--cor-borda);
	color: var(--marfim);
}

.botao--secundario:hover::before {
	opacity: 0;
}

.secao--pedra .botao--secundario {
	--fundo-secao: var(--pedra);
}

.secao--grafite .botao--secundario {
	--cor-borda: var(--marfim);
	--fundo-secao: var(--grafite);
	color: var(--marfim);
}

.secao--grafite .botao--secundario:hover {
	color: var(--grafite);
}

/* Link de ação: texto com filete, sem caixa */
.botao--texto {
	padding: 0;
	min-height: auto;
	background: none;
	color: var(--grafite);
	clip-path: none;
	border-bottom: 1px solid var(--conhaque);
	padding-bottom: 0.3em;
}

.botao--texto:hover {
	background: none;
	color: var(--conhaque);
}

/* --------------------------------------------------------------------------
   7. Formulários
   -------------------------------------------------------------------------- */
label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--fs-pequeno);
	font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
	width: 100%;
	min-height: 3.25rem;
	padding: 0.8rem 1rem;
	background: var(--marfim-claro);
	border: 1px solid var(--linha-forte);
	border-radius: 2px;
	transition: border-color var(--tempo) var(--ease);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--grafite);
}

::placeholder {
	color: rgba(67, 63, 58, 0.55);
}

/* --------------------------------------------------------------------------
   8. Cabeçalho
   -------------------------------------------------------------------------- */
.cabecalho {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--marfim);
	transition: box-shadow var(--tempo) var(--ease);
}

/* Administrador logado: a barra preta do WordPress é fixa no topo (32px no desktop,
   46px em telas médias; abaixo de 600px ela rola junto com a página). */
.admin-bar .cabecalho {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .cabecalho {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .cabecalho {
		top: 0;
	}
}

/* Fio inferior aparece só depois que a página rola */
.cabecalho.esta-rolado {
	box-shadow: 0 1px 0 var(--linha);
}

.cabecalho__interno {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: var(--altura-cabecalho);
}

.cabecalho__logo {
	grid-column: 2;
	display: block;
	text-decoration: none;
}

.cabecalho__logo img {
	width: 9.5rem;
	height: auto;
}

@media (min-width: 64em) {
	.cabecalho__logo img {
		width: 12.7rem;
	}
}

/* Navegação principal (desktop): dividida em volta do logotipo, como no manual */
.navegacao {
	display: none;
}

.navegacao--esquerda {
	grid-column: 1;
	grid-row: 1;
}

.navegacao--direita {
	margin-right: var(--esp-2);
}

.navegacao .menu {
	display: flex;
	flex-wrap: nowrap;
	gap: 1.5rem;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.navegacao a {
	display: inline-block;
	padding-block: 0.5rem;
	font-size: var(--fs-legenda);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	background-image: linear-gradient(var(--conhaque), var(--conhaque));
	background-repeat: no-repeat;
	background-position: 0 85%;
	background-size: 0 1px;
	transition: background-size var(--tempo) var(--ease), color var(--tempo) var(--ease);
}

.navegacao a:hover,
.navegacao .current-menu-item > a,
.navegacao .current-menu-ancestor > a {
	color: var(--grafite);
	background-size: 100% 1px;
}

@media (min-width: 64em) {
	.navegacao {
		display: block;
	}
}

/* Utilitários: busca, conta, sacola */
.cabecalho__acoes {
	grid-column: 3;
	grid-row: 1;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.25rem;
}

.acao-icone {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--grafite);
	text-decoration: none;
	border-radius: 50%;
	transition: background-color var(--tempo) var(--ease);
}

.acao-icone:hover {
	background: var(--marfim-claro);
	color: var(--grafite);
}

/* Conta e busca ficam no menu mobile em telas pequenas */
.acao-icone--conta,
.acao-icone--busca {
	display: none;
}

@media (min-width: 40em) {
	.acao-icone--conta,
	.acao-icone--busca {
		display: inline-flex;
	}
}

.sacola-contador {
	position: absolute;
	top: 0.35rem;
	right: 0.2rem;
	display: grid;
	place-items: center;
	min-width: 1.15rem;
	height: 1.15rem;
	padding: 0 0.25rem;
	background: var(--terracota);
	color: var(--branco-quente);
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1;
	border-radius: 999px;
}

.sacola-contador[data-count="0"] {
	display: none;
}

/* Botão do menu mobile */
.botao-menu {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	margin-left: -0.6rem;
}

@media (min-width: 64em) {
	.botao-menu {
		display: none;
	}
}

/* Busca expansível */
.busca-cabecalho {
	border-top: 1px solid var(--linha);
	padding-block: var(--esp-3);
}

.busca-cabecalho[hidden] {
	display: none;
}

.form-busca {
	display: flex;
	gap: var(--esp-1);
	max-width: 40rem;
	margin-inline: auto;
}

.form-busca input[type="search"] {
	flex: 1;
}

/* --------------------------------------------------------------------------
   9. Menu mobile (painel em tela cheia)
   -------------------------------------------------------------------------- */
.menu-mobile {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	padding: var(--esp-2) var(--margem) var(--esp-5);
	background: var(--marfim);
	overflow-y: auto;
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--tempo) var(--ease), visibility 0s linear var(--tempo);
}

.menu-mobile.esta-aberto {
	visibility: visible;
	opacity: 1;
	transition: opacity var(--tempo) var(--ease), visibility 0s;
}

.menu-mobile__topo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: calc(var(--altura-cabecalho) - var(--esp-2));
}

.menu-mobile__topo img {
	width: 8rem;
}

.menu-mobile .menu {
	margin-top: var(--esp-5);
	padding: 0;
	list-style: none;
}

.menu-mobile .menu a {
	display: block;
	padding-block: 0.65rem;
	font-family: var(--fonte-titulo);
	font-size: var(--fs-h3);
	font-weight: 500;
	line-height: 1.1;
	text-decoration: none;
	border-bottom: 1px solid var(--linha);
}

.menu-mobile__secundario {
	display: flex;
	flex-direction: column;
	gap: var(--esp-2);
	margin-top: auto;
	padding-top: var(--esp-5);
}

.menu-mobile__secundario a {
	display: inline-flex;
	align-items: center;
	gap: var(--esp-1);
	text-decoration: none;
}

/* Administrador logado: o painel começa abaixo da barra preta do WordPress */
.admin-bar .menu-mobile {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .menu-mobile {
		top: 46px;
	}
}

/* Busca dentro do painel: alinhada à esquerda, na largura dos itens do menu */
.menu-mobile .form-busca {
	max-width: none;
	margin-inline: 0;
}

.menu-mobile .form-busca input[type="search"] {
	min-width: 0;
}

/* Evita rolagem da página atrás do menu aberto */
body.menu-aberto {
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   10. Rodapé
   -------------------------------------------------------------------------- */
.rodape {
	background: var(--grafite);
	color: var(--marfim);
	padding-top: var(--esp-7);
	font-size: var(--fs-pequeno);
}

.rodape a {
	color: var(--marfim);
	text-decoration-color: transparent;
}

.rodape a:hover {
	color: var(--marfim);
	text-decoration-color: var(--caramelo);
}

.rodape :focus-visible {
	outline-color: var(--caramelo);
}

.rodape__topo {
	display: grid;
	gap: var(--esp-6);
	padding-bottom: var(--esp-6);
}

@media (min-width: 56em) {
	.rodape__topo {
		grid-template-columns: 1.3fr repeat(3, 1fr);
		gap: var(--esp-5);
	}
}

.rodape__marca img {
	width: 9rem;
}

.rodape__slogan {
	margin-top: var(--esp-3);
	font-family: var(--fonte-titulo);
	font-size: var(--fs-h5);
	font-weight: 400;
	line-height: 1.3;
	color: var(--pedra);
	max-width: 14em;
}

.rodape__titulo {
	margin-bottom: var(--esp-2);
	color: var(--caramelo);
}

.rodape .menu {
	display: grid;
	gap: 0.55rem;
	padding: 0;
	list-style: none;
}

.rodape__base {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--esp-2);
	padding-block: var(--esp-3);
	border-top: 1px solid var(--linha-clara);
	font-size: var(--fs-legenda);
	color: var(--pedra);
}

.rodape__base p {
	max-width: 48em;
}

/* --------------------------------------------------------------------------
   11. Página 404 e estados vazios
   -------------------------------------------------------------------------- */
.estado-vazio {
	max-width: 36rem;
	padding-block: var(--esp-7);
}

.estado-vazio p {
	margin-top: var(--esp-3);
}

.estado-vazio .botao {
	margin-top: var(--esp-4);
}

/* --------------------------------------------------------------------------
   12. Movimento reduzido: sem transições para quem pediu menos movimento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}