/*
Theme Name: Folium Studio
Theme URI: https://foliumstudio.com.br
Description: Tema da Folium Studio — papelaria afetiva para universitárias. Editorial botânico: tipografia display expressiva, assimetria e respiro. Tema autônomo, com templates próprios do WooCommerce.
Author: Folium Studio
Version: 3.3.0
Requires at least: 6.5
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: folium
*/

/* ==================================================================
   FONTES
   ================================================================== */

@font-face {
	font-family: "Platypi";
	src: url("assets/fonts/Platypi-VariableFont_wght.woff2") format("woff2-variations");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Platypi";
	src: url("assets/fonts/Platypi-Italic-VariableFont_wght.woff2") format("woff2-variations");
	font-weight: 300 800;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Manrope";
	src: url("assets/fonts/Manrope-VariableFont_wght.woff2") format("woff2-variations");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

/* ==================================================================
   TOKENS
   ================================================================== */

:root {
	--papel:        #FAF8F3;
	--papel-2:      #F1ECE1;
	--papel-3:      #E4DDCD;
	--tinta:        #23281F;
	--tinta-2:      #5F6657;
	--sage:         #8A9A7B;
	--sage-fundo:   #46523B;
	--sage-palido:  #D5DCC9;
	--latao:        #A8814A;
	--blush:        #DCC0B6;

	--display: "Platypi", Georgia, "Times New Roman", serif;
	--corpo:   "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--e1: 0.5rem;
	--e2: 1rem;
	--e3: 1.75rem;
	--e4: 3rem;
	--e5: clamp(3.5rem, 7vw, 6rem);
	--e6: clamp(5rem, 12vw, 9.5rem);

	--medida: 1280px;
	--regua: 1px solid var(--papel-3);
	--curva: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==================================================================
   RESET E BASE
   ================================================================== */

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

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

body {
	margin: 0;
	background: var(--papel);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
	color: var(--tinta);
	font-family: var(--corpo);
	font-size: 1.02rem;
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
	font-family: var(--display);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.022em;
	margin: 0;
}

p { margin: 0 0 var(--e2); }

.sr {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--tinta); color: var(--papel); padding: 0.8rem 1.2rem;
}
.pular:focus { left: 0; }

::selection { background: var(--sage-palido); color: var(--tinta); }

:focus-visible { outline: 2px solid var(--sage-fundo); outline-offset: 3px; }

/* ==================================================================
   PEÇAS RECORRENTES
   ================================================================== */

.rotulo {
	display: block;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--latao);
	margin-bottom: var(--e2);
}

.folha { width: 20px; height: auto; color: var(--sage); }

.botao {
	display: inline-block;
	background: var(--sage-fundo);
	color: var(--papel);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1.15em 2.4em;
	border: 1px solid var(--sage-fundo);
	cursor: pointer;
	transition: background 0.4s var(--curva), color 0.4s var(--curva), transform 0.4s var(--curva);
}

.botao:hover { background: var(--tinta); border-color: var(--tinta); transform: translateY(-2px); }

.botao--linha { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.botao--linha:hover { background: var(--tinta); color: var(--papel); }

/* Entrada suave conforme entra na viewport. */
[data-revela] { opacity: 0; transform: translateY(20px); }

@media (prefers-reduced-motion: reduce) {
	[data-revela] { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
	[data-revela] { transition: opacity 0.9s var(--curva), transform 0.9s var(--curva); }
	[data-revela].is-visivel { opacity: 1; transform: none; }
}

/* ==================================================================
   TOPO
   ================================================================== */

.topo {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--papel);
	border-bottom: var(--regua);
}

.topo__interno {
	max-width: var(--medida);
	margin-inline: auto;
	padding: 1.1rem clamp(1.25rem, 5vw, 3rem);
	display: flex;
	align-items: center;
	gap: var(--e3);
}

.marca {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	margin-right: auto;
}

.marca__folha { width: 22px; flex-shrink: 0; }

.marca__texto { display: flex; flex-direction: column; line-height: 1; }

.marca__nome {
	font-family: var(--display);
	font-size: 1.32rem;
	letter-spacing: 0.02em;
}

.marca__sub {
	font-size: 0.6rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--tinta-2);
	margin-top: 3px;
}

.navegacao__lista {
	display: flex;
	gap: var(--e3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.navegacao__lista a {
	position: relative;
	font-size: 0.83rem;
	letter-spacing: 0.05em;
	text-decoration: none;
	color: var(--tinta-2);
	padding-bottom: 4px;
	transition: color 0.3s var(--curva);
}

.navegacao__lista a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 0; height: 1px;
	background: var(--latao);
	transition: width 0.45s var(--curva);
}

.navegacao__lista a:hover { color: var(--tinta); }
.navegacao__lista a:hover::after { width: 100%; }

.navegacao__botao {
	display: none;
	background: none;
	border: 0;
	padding: 0.4rem;
	cursor: pointer;
}

.navegacao__traco,
.navegacao__traco::before,
.navegacao__traco::after {
	display: block;
	width: 22px; height: 1px;
	background: var(--tinta);
	content: "";
}
.navegacao__traco::before { transform: translateY(-7px); }
.navegacao__traco::after  { transform: translateY(6px); }

.carrinho-link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tinta);
}

.carrinho-link__contador {
	display: grid;
	place-items: center;
	min-width: 21px; height: 21px;
	background: var(--sage-fundo);
	color: var(--papel);
	border-radius: 50%;
	font-size: 0.68rem;
	letter-spacing: 0;
}

@media (max-width: 860px) {
	.navegacao__botao { display: block; order: 2; }
	.navegacao__lista {
		position: absolute;
		left: 0; right: 0; top: 100%;
		flex-direction: column;
		gap: 0;
		background: var(--papel);
		border-bottom: var(--regua);
		padding: var(--e2) clamp(1.25rem, 5vw, 3rem) var(--e3);
		display: none;
	}
	.navegacao[data-aberto="1"] .navegacao__lista { display: flex; }
	.navegacao__lista li { border-bottom: var(--regua); }
	.navegacao__lista a { display: block; padding: 0.95rem 0; font-size: 1rem; }
}

/* ==================================================================
   CAPA
   ================================================================== */

/* A foto ocupa a tela e o texto vive sobre ela. Sem cartão intermediando:
   o cartão branco era muleta, e o registro editorial pede confiança. */
.capa {
	position: relative;
	display: grid;
	margin-bottom: var(--e6);
	background: var(--papel-2);
}

/* O <picture> não pode virar o item do grid, senão o véu e o texto perdem
   a referência de posição. display:contents deixa o <img> como filho direto. */
.capa picture { display: contents; }

.capa__foto {
	grid-area: 1 / 1;
	width: 100%;
	height: min(88vh, 860px);
	object-fit: cover;
	object-position: 72% center;
}

/* Véu de papel sobre o lado do texto.
   Sem ele, o texto escuro cai sobre a parede oliva da foto e some — a foto
   é um fundo que não controlo, então o contraste tem de ser garantido aqui,
   não torcido para dar certo. O degradê termina antes da modelo. */
.capa::before {
	content: "";
	grid-area: 1 / 1;
	z-index: 1;
	background: linear-gradient(
		100deg,
		var(--papel) 0%,
		rgba(250, 248, 243, 0.97) 26%,
		rgba(250, 248, 243, 0.88) 38%,
		rgba(250, 248, 243, 0.35) 48%,
		rgba(250, 248, 243, 0) 58%
	);
}

.capa__texto {
	grid-area: 1 / 1;
	position: relative;
	z-index: 2;
	align-self: center;
	justify-self: start;
	max-width: min(560px, 46vw);
	padding-left: clamp(1.5rem, 7vw, 7rem);
	padding-right: var(--e2);
}

.capa__titulo {
	font-size: clamp(2.7rem, 6.6vw, 5.4rem);
	line-height: 0.98;
	letter-spacing: -0.04em;
	color: var(--tinta);
	margin-bottom: var(--e3);
}

.capa__titulo em { font-style: italic; color: var(--sage-fundo); }

.capa__linha {
	font-size: clamp(1rem, 1.2vw, 1.14rem);
	/* Um passo mais escuro que o corpo padrão: aqui o fundo é foto velada,
	   não papel liso, e o cinza claro não aguentava. */
	color: var(--tinta);
	opacity: 0.82;
	max-width: 40ch;
	margin-bottom: var(--e4);
}

/* Em tela estreita não sobrepõe: empilha.
   Sobrepor texto em pouca largura obriga a cortar a foto num ponto ruim — foi
   o que deixou o rosto solto. Foto inteira em cima, texto embaixo no papel. */
@media (max-width: 820px) {
	.capa {
		display: block;
		margin-bottom: var(--e5);
	}

	.capa::before { display: none; }

	/* A foto mobile já vem enquadrada na modelo — não precisa deslocar o
	   recorte, só respeitar a proporção. */
	.capa__foto {
		height: auto;
		aspect-ratio: 4 / 3;
		object-position: center;
	}

	.capa__texto {
		max-width: none;
		padding: var(--e4) clamp(1.5rem, 6vw, 2.5rem) 0;
	}

	.capa__titulo {
		font-size: clamp(2.15rem, 8.5vw, 3rem);
		line-height: 1.04;
	}

	.capa__linha { max-width: none; }
}

/* ==================================================================
   CTA EM SETA — link sublinhado, não botão sólido
   ================================================================== */

.seta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tinta);
	padding-bottom: 0.55rem;
	border-bottom: 1px solid var(--tinta);
	transition: gap 0.4s var(--curva), color 0.4s var(--curva), border-color 0.4s var(--curva);
}

.seta::after {
	content: "↗";
	font-size: 0.95rem;
	line-height: 1;
	transition: transform 0.4s var(--curva);
}

.seta:hover { gap: 0.95rem; color: var(--sage-fundo); border-color: var(--sage-fundo); }
.seta:hover::after { transform: translate(2px, -2px); }

.seta--claro { color: var(--tinta); border-color: var(--tinta); }

.rotulo--claro { color: var(--latao); }

/* ==================================================================
   EDITORIAL — título no topo, corpo na base, vazio entre os dois
   ================================================================== */

.editorial {
	max-width: var(--medida);
	margin: 0 auto var(--e6);
	padding-inline: clamp(1.25rem, 5vw, 3rem);
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: stretch;
}

@media (min-width: 940px) {
	.editorial { grid-template-columns: 0.9fr 1.1fr; }
}

.editorial__texto {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--e5);
	padding-block: var(--e2);
}

.editorial__titulo {
	font-size: clamp(1.9rem, 4vw, 3.1rem);
	line-height: 1.04;
}

.editorial__base p {
	color: var(--tinta-2);
	max-width: 42ch;
	margin-bottom: var(--e3);
}

.editorial__foto img { width: 100%; height: 100%; object-fit: cover; }

/* ==================================================================
   SEÇÕES
   ================================================================== */

.secao {
	max-width: var(--medida);
	margin: 0 auto var(--e6);
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.secao--topo { margin-top: var(--e5); }

.secao__cabeca {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--e4);
	flex-wrap: wrap;
	border-bottom: var(--regua);
	padding-bottom: var(--e3);
	margin-bottom: var(--e5);
}

.secao__titulo { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.04; }

.secao__nota {
	font-size: 0.9rem;
	color: var(--tinta-2);
	max-width: 36ch;
	margin: 0;
}

.secao__link {
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--latao);
	border-bottom: 1px solid currentColor;
	padding-bottom: 3px;
}

/* ==================================================================
   CATEGORIAS
   ================================================================== */

.vitrine-cat {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(1rem, 2.2vw, 1.75rem);
}

.cat {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	background: var(--papel-2);
}

.cat__foto {
	display: block;
	aspect-ratio: 4 / 5;
	background-size: cover;
	background-position: center;
	transition: transform 1.1s var(--curva);
}

.cat:hover .cat__foto { transform: scale(1.05); }

.cat__legenda {
	position: absolute;
	inset: auto 0 0 0;
	padding: 3rem 1.4rem 1.3rem;
	background: linear-gradient(to top, rgba(30, 34, 26, 0.85), rgba(30, 34, 26, 0));
	color: var(--papel);
	display: block;
}

.cat__nome {
	display: block;
	font-family: var(--display);
	font-size: 1.5rem;
	line-height: 1.14;
}

.cat__meta {
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.82;
	margin-top: 0.3rem;
}

@media (min-width: 940px) {
	.cat--largo { grid-column: span 2; }
	.cat--largo .cat__foto { aspect-ratio: 16 / 10; }
	.cat--largo .cat__nome { font-size: 2.1rem; }
}

/* ==================================================================
   DESTAQUE
   ================================================================== */

.destaque {
	display: grid;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

@media (min-width: 940px) {
	.destaque { grid-template-columns: 1.05fr 0.95fr; }
}

.destaque__midia { position: relative; }

/* Moldura deslocada — gesto de diagramação impressa. */
.destaque__midia::after {
	content: "";
	position: absolute;
	inset: 20px -20px -20px 20px;
	border: 1px solid var(--sage-palido);
	z-index: -1;
}

.destaque__titulo {
	font-size: clamp(1.9rem, 3.8vw, 2.9rem);
	margin-bottom: var(--e1);
}

.destaque__preco {
	font-family: var(--display);
	font-size: 1.65rem;
	color: var(--sage-fundo);
	margin-bottom: var(--e3);
}

.destaque__lista {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--e4);
	border-top: var(--regua);
}

.destaque__lista li {
	display: flex;
	gap: 0.85rem;
	border-bottom: var(--regua);
	padding: 0.85rem 0;
	font-size: 0.93rem;
	color: var(--tinta-2);
}

.destaque__lista li::before { content: "—"; color: var(--latao); flex-shrink: 0; }

/* ==================================================================
   MANIFESTO
   ================================================================== */

.manifesto {
	max-width: 780px;
	margin: 0 auto var(--e6);
	padding-inline: clamp(1.25rem, 5vw, 3rem);
	text-align: center;
}

.manifesto__folha { width: 26px; margin: 0 auto var(--e3); opacity: 0.6; }

.manifesto blockquote {
	font-family: var(--display);
	font-size: clamp(1.5rem, 3.4vw, 2.4rem);
	font-style: italic;
	line-height: 1.3;
	margin: 0 0 var(--e3);
}

.manifesto cite {
	font-family: var(--corpo);
	font-style: normal;
	font-size: 0.68rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--tinta-2);
}

/* ==================================================================
   FAIXA DE PILARES
   ================================================================== */

.faixa {
	background: var(--papel-2);
	padding: var(--e5) clamp(1.25rem, 5vw, 3rem);
	margin-bottom: var(--e6);
}

.faixa__grid {
	max-width: var(--medida);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: clamp(1.75rem, 4vw, 3.5rem);
}

.pilar__num {
	font-family: var(--display);
	font-size: 0.9rem;
	color: var(--latao);
	letter-spacing: 0.1em;
}

.pilar h3 { font-size: 1.18rem; margin: 0.6rem 0 0.45rem; }

.pilar p { font-size: 0.89rem; color: var(--tinta-2); margin: 0; }

/* ==================================================================
   GRADE E FICHA DE PRODUTO
   ================================================================== */

.grade,
ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: clamp(1.75rem, 3.5vw, 3.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

.ficha { position: relative; }

.ficha__foto {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--papel-2);
	margin-bottom: var(--e2);
}

.ficha__foto img {
	width: 100%;
	transition: transform 1.1s var(--curva);
}

.ficha:hover .ficha__foto img { transform: scale(1.04); }

.selo {
	position: absolute;
	top: 0; left: 0;
	background: var(--latao);
	color: var(--papel);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.5em 0.95em;
}

.selo--limitada { background: var(--sage-fundo); }
.selo--esgotado { background: var(--tinta-2); }

.ficha__nome {
	font-size: 1.24rem;
	line-height: 1.24;
	margin-bottom: 0.3rem;
}

.ficha__nome a { text-decoration: none; }
.ficha__nome a:hover { color: var(--sage-fundo); }

.ficha__tag {
	font-size: 0.63rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--latao);
	margin: 0 0 0.35rem;
}

.ficha__preco {
	font-size: 0.98rem;
	color: var(--tinta-2);
	margin: 0 0 var(--e2);
}

.ficha__preco del { opacity: 0.5; margin-right: 0.35rem; }
.ficha__preco ins { text-decoration: none; }

.ficha__acao {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tinta);
	border-bottom: 1px solid var(--papel-3);
	padding-bottom: 4px;
	transition: border-color 0.4s var(--curva), color 0.4s var(--curva);
}

.ficha__acao:hover { color: var(--sage-fundo); border-bottom-color: var(--sage-fundo); }

.ficha-mini__foto { display: block; overflow: hidden; background: var(--papel-2); margin-bottom: var(--e2); }
.ficha-mini__foto img { transition: transform 1.1s var(--curva); }
.ficha-mini:hover .ficha-mini__foto img { transform: scale(1.04); }
.ficha-mini__nome { font-size: 1.15rem; margin-bottom: 0.25rem; }
.ficha-mini__nome a { text-decoration: none; }
.ficha-mini__preco { font-size: 0.92rem; color: var(--tinta-2); margin: 0; }

/* ==================================================================
   PÁGINA DE PRODUTO
   ================================================================== */

.produto {
	max-width: var(--medida);
	margin: var(--e4) auto var(--e6);
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.migalhas {
	display: flex;
	gap: 0.55rem;
	flex-wrap: wrap;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tinta-2);
	margin-bottom: var(--e4);
}

.migalhas a { text-decoration: none; }
.migalhas a:hover { color: var(--tinta); }

.produto__grade {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

@media (min-width: 940px) {
	.produto__grade { grid-template-columns: 1.1fr 0.9fr; }
	.produto__resumo { position: sticky; top: 6rem; }
}

.produto__galeria img { width: 100%; }

.produto__galeria .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.7rem;
	list-style: none;
	margin: 0.7rem 0 0;
	padding: 0;
}

.produto__galeria .flex-control-thumbs img { cursor: pointer; opacity: 0.62; transition: opacity 0.3s; }
.produto__galeria .flex-control-thumbs img:hover,
.produto__galeria .flex-control-thumbs .flex-active { opacity: 1; }

.produto__resumo .product_title {
	font-size: clamp(1.9rem, 3.6vw, 2.8rem);
	margin-bottom: var(--e1);
}

.produto__resumo .price {
	display: block;
	font-family: var(--display);
	font-size: 1.85rem;
	color: var(--sage-fundo);
	margin-bottom: var(--e3);
}

.produto__resumo .price del { opacity: 0.45; font-size: 1.2rem; margin-right: 0.5rem; }
.produto__resumo .price ins { text-decoration: none; }

.woocommerce-product-details__short-description {
	color: var(--tinta-2);
	border-bottom: var(--regua);
	padding-bottom: var(--e3);
	margin-bottom: var(--e3);
}

.ficha__prazo {
	border-left: 2px solid var(--sage-palido);
	padding-left: 1.1rem;
	margin-bottom: var(--e3);
}

.ficha__prazo p {
	font-size: 0.86rem;
	color: var(--tinta-2);
	margin: 0 0 0.3rem;
	line-height: 1.6;
}

.ficha__prazo p:last-child { margin: 0; }

.produto__resumo .quantity input {
	width: 72px;
	padding: 0.85rem 0.5rem;
	border: 1px solid var(--papel-3);
	background: var(--papel);
	font-family: var(--corpo);
	text-align: center;
}

.produto__resumo form.cart {
	display: flex;
	gap: var(--e2);
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: var(--e3);
}

.produto__resumo .single_add_to_cart_button {
	flex: 1 1 auto;
	background: var(--sage-fundo);
	color: var(--papel);
	border: 1px solid var(--sage-fundo);
	font-family: var(--corpo);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 1.25em 2rem;
	cursor: pointer;
	transition: background 0.4s var(--curva);
}

.produto__resumo .single_add_to_cart_button:hover { background: var(--tinta); border-color: var(--tinta); }

.produto__resumo .product_meta {
	font-size: 0.78rem;
	color: var(--tinta-2);
	border-top: var(--regua);
	padding-top: var(--e2);
}

/* Seletor de variação */
.variations { width: 100%; border-collapse: collapse; margin-bottom: var(--e2); }
.variations th { text-align: left; padding: 0.5rem 0; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
.variations td { padding: 0 0 var(--e2); }
.variations select {
	width: 100%;
	padding: 0.85rem 0.9rem;
	border: 1px solid var(--papel-3);
	background: var(--papel);
	font-family: var(--corpo);
	font-size: 1rem;
}

/* ==================================================================
   PERSONALIZAÇÃO
   ================================================================== */

.folium-personalizacao {
	background: var(--papel-2);
	border-top: 2px solid var(--sage-fundo);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	margin-bottom: var(--e3);
	width: 100%;
}

.folium-personalizacao h3 {
	font-size: 1.5rem;
	margin-bottom: 0.35rem;
}

.folium-personalizacao h3::after {
	content: "Cada campo abaixo vira instrução na bancada de produção.";
	display: block;
	font-family: var(--corpo);
	font-size: 0.82rem;
	letter-spacing: 0;
	color: var(--tinta-2);
	margin-top: 0.4rem;
	margin-bottom: var(--e3);
}

.folium-personalizacao .form-row { margin-bottom: var(--e2); }

.folium-personalizacao label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tinta);
}

.folium-personalizacao label small {
	display: block;
	font-size: 0.78rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tinta-2);
	margin-top: 0.2rem;
}

.folium-personalizacao input[type="text"],
.folium-personalizacao select,
.folium-personalizacao textarea {
	width: 100%;
	padding: 0.85rem 0.95rem;
	border: 1px solid var(--papel-3);
	background: var(--papel);
	font-family: var(--corpo);
	font-size: 1rem;
	color: var(--tinta);
	transition: border-color 0.3s var(--curva), box-shadow 0.3s var(--curva);
}

/* O nome é o produto — merece peso tipográfico. */
.folium-personalizacao #folium_nome {
	font-family: var(--display);
	font-size: 1.4rem;
	text-align: center;
	letter-spacing: 0.03em;
	padding: 0.95rem;
}

.folium-personalizacao input:focus,
.folium-personalizacao select:focus,
.folium-personalizacao textarea:focus {
	outline: none;
	border-color: var(--sage-fundo);
	box-shadow: 0 0 0 3px rgba(70, 82, 59, 0.14);
}

.folium-personalizacao .folium-ciencia {
	background: var(--papel);
	border-left: 3px solid var(--latao);
	padding: 1rem 1.1rem;
	margin-top: var(--e3);
}

.folium-personalizacao .folium-ciencia label {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	line-height: 1.55;
	color: var(--tinta-2);
	margin: 0;
}

.folium-personalizacao .folium-ciencia input { margin-top: 0.3rem; flex-shrink: 0; }

.folium-personalizacao abbr.required { color: #A4442C; border: 0; text-decoration: none; }

/* ==================================================================
   CARRINHO / CHECKOUT
   ================================================================== */

.woocommerce-cart .produto,
.woocommerce-checkout .produto,
.woocommerce-account .produto { max-width: var(--medida); }

.frete-barra {
	background: var(--papel-2);
	border-left: 3px solid var(--sage);
	padding: 1.1rem 1.25rem;
	margin-bottom: var(--e3);
}

.frete-barra p { font-size: 0.92rem; margin: 0; }

.frete-barra--ok { border-left-color: var(--latao); }

.frete-barra__trilho {
	height: 4px;
	background: var(--papel-3);
	margin-top: 0.7rem;
	overflow: hidden;
}

.frete-barra__trilho span {
	display: block;
	height: 100%;
	background: var(--sage-fundo);
	transition: width 0.7s var(--curva);
}

.shop_table { width: 100%; border-collapse: collapse; }
.shop_table th {
	text-align: left;
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tinta-2);
	font-weight: 600;
	padding: 0.9rem 0.6rem;
	border-bottom: var(--regua);
}
.shop_table td { padding: 1.1rem 0.6rem; border-bottom: var(--regua); vertical-align: middle; }
.shop_table img { width: 74px; }

.cart_totals, .woocommerce-checkout-review-order {
	background: var(--papel-2);
	padding: var(--e3);
}

.woocommerce-message, .woocommerce-info, .woocommerce-error {
	background: var(--papel-2);
	border-left: 3px solid var(--sage);
	padding: 1rem 1.2rem;
	margin-bottom: var(--e3);
	list-style: none;
	font-size: 0.93rem;
}

.woocommerce-error { border-left-color: #A4442C; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
	width: 100%;
	padding: 0.85rem 0.95rem;
	border: 1px solid var(--papel-3);
	background: var(--papel);
	font-family: var(--corpo);
	font-size: 1rem;
}

.woocommerce form .form-row label {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 0.4rem;
}

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
	display: inline-block;
	background: var(--sage-fundo);
	color: var(--papel);
	border: 1px solid var(--sage-fundo);
	font-family: var(--corpo);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 1.1em 2rem;
	cursor: pointer;
	transition: background 0.4s var(--curva);
}

.woocommerce .button:hover { background: var(--tinta); border-color: var(--tinta); }

/* ==================================================================
   ARTIGO / PÁGINAS
   ================================================================== */

.artigo {
	max-width: 720px;
	margin: var(--e5) auto var(--e6);
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.artigo__cabeca { text-align: center; margin-bottom: var(--e5); }

.artigo__folha { width: 24px; margin: 0 auto var(--e2); opacity: 0.6; }

.artigo__titulo { font-size: clamp(2rem, 4.5vw, 3.1rem); }

.artigo__corpo h2 {
	font-size: 1.55rem;
	margin: var(--e4) 0 var(--e2);
	padding-top: var(--e2);
	border-top: var(--regua);
}

.artigo__corpo h3 { font-size: 1.2rem; margin: var(--e3) 0 0.5rem; }

.artigo__corpo a { color: var(--sage-fundo); text-underline-offset: 3px; }

.artigo__corpo table { width: 100%; border-collapse: collapse; margin: var(--e2) 0 var(--e3); }
.artigo__corpo th {
	text-align: left;
	font-size: 0.68rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--tinta-2);
	padding: 0.7rem 0.5rem;
	border-bottom: var(--regua);
}
.artigo__corpo td { padding: 0.8rem 0.5rem; border-bottom: var(--regua); font-size: 0.93rem; }

.erro {
	max-width: 560px;
	margin: var(--e6) auto;
	padding-inline: 1.5rem;
	text-align: center;
}

.erro__folha { width: 30px; margin: 0 auto var(--e3); opacity: 0.5; }
.erro h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: var(--e2); }
.erro p { color: var(--tinta-2); margin-bottom: var(--e3); }

.vazio { color: var(--tinta-2); }

/* ==================================================================
   RODAPÉ
   ================================================================== */

.rodape {
	background: var(--sage-fundo);
	color: var(--papel);
	padding: var(--e5) clamp(1.25rem, 5vw, 3rem) var(--e4);
}

.rodape__interno {
	max-width: var(--medida);
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
	gap: clamp(2rem, 5vw, 4rem);
}

.rodape__folha { width: 24px; color: var(--blush); margin-bottom: var(--e2); }

@media (min-width: 940px) {
	.rodape__marca { grid-column: span 2; max-width: 36ch; }
}

.rodape__nome { font-family: var(--display); font-size: 1.7rem; margin-bottom: 0.35rem; }

.rodape__lema { font-family: var(--display); font-style: italic; font-size: 1.05rem; opacity: 0.88; margin-bottom: 0.8rem; }

.rodape__texto { font-size: 0.88rem; opacity: 0.78; margin: 0; }

.rodape__coluna h2 {
	font-family: var(--corpo);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0.68;
	margin-bottom: var(--e2);
}

.rodape__coluna ul { list-style: none; margin: 0; padding: 0; }
.rodape__coluna li { margin-bottom: 0.6rem; }

.rodape a {
	text-decoration: none;
	font-size: 0.9rem;
	opacity: 0.86;
	border-bottom: 1px solid transparent;
	transition: opacity 0.3s, border-color 0.3s;
}

.rodape a:hover { opacity: 1; border-bottom-color: var(--blush); }

.rodape__base {
	max-width: var(--medida);
	margin: var(--e5) auto 0;
	padding-top: var(--e3);
	border-top: 1px solid rgba(250, 248, 243, 0.18);
	display: flex;
	justify-content: space-between;
	gap: var(--e3);
	flex-wrap: wrap;
	font-size: 0.78rem;
	opacity: 0.72;
}

.rodape__base p { margin: 0; max-width: 68ch; line-height: 1.6; }

.rodape__assinatura { white-space: nowrap; }