:root {
	/* =============================================
	   SISTEMA DE CORES — SUPRAMEL
	   =============================================

	   1. IDENTIDADE & CONVERSÃO
	   Guiam o olhar e geram ação de compra. */
	--supramel-color-primary:        #168048; /* Verde âncora — menu, trust badges, selos */
	--supramel-color-accent:         #015E2D; /* Verde escuro — hover de botões, footer, títulos */
	--supramel-color-highlight:      #d2a93f; /* Dourado CTA — "Comprar Agora", estrelas, "Mais Vendido" */
	--supramel-color-highlight-hover:#dfb856; /* Dourado hover — estados de interação para CTAs */

	/* 2. TIPOGRAFIA
	   Conforto visual. Nunca usar preto absoluto #000000. */
	--supramel-color-secondary:      #1D1C1C; /* Quase preto — H1, H2, nomes de produto, preços */
	--supramel-color-text:           #2D333D; /* Cinza escuro — descrições, FAQ, blog, tabelas */
	--supramel-color-text-soft:      #5f6f77; /* Cinza suave — textos secundários */
	--supramel-color-text-placeholder:#6b717a; /* Placeholder e textos utilitários */
	--supramel-color-on-primary:     #ffffff; /* Texto/ícones sobre verde */
	--supramel-color-on-highlight:   #1D1C1C; /* Texto/ícones sobre dourado */
	--supramel-color-footer-text:    #f6f2ee; /* Tom base do conteúdo do footer */

	/* 3. ESTRUTURA — Fundos, Respiros e Bordas
	   Os produtos sempre brilham mais que o fundo. */
	--supramel-color-bg:             #f7f4ec; /* Creme claro — fundo principal da loja */
	--supramel-color-bg-alt:         #f6f2ee; /* Creme alternativo — cards e apoios */
	--supramel-color-surface:        #ffffff; /* Branco puro — cards, seções de quebra visual */
	--supramel-color-warm:           #DAC6AD; /* Bege/marrom — banners secundários */
	--supramel-color-warm-hover:     rgba(218, 198, 173, 0.3); /* Bege translúcido 30% — hover do carrinho */
	--supramel-color-border:         #ddd4c1; /* Bege borda — cards de produto, divisórias */
	--supramel-color-border-input:   #C5CBD4; /* Cinza borda — campos de busca, formulários, frete */
	--supramel-color-bg-top:         #fbf8f1; /* Início do gradiente de fundo global */
	--supramel-color-bg-bottom:      #f4eee1; /* Fim do gradiente de fundo global */
	--supramel-color-surface-soft:   rgba(255, 255, 255, 0.86);
	--supramel-color-surface-muted:  rgba(255, 255, 255, 0.88);
	--supramel-color-surface-strong: rgba(255, 255, 255, 0.9);
	--supramel-color-surface-max:    rgba(255, 255, 255, 0.95);
	--supramel-color-surface-input:  rgba(255, 255, 255, 0.98);
	--supramel-color-border-soft:    rgba(221, 212, 193, 0.8);
	--supramel-color-bg-soft:        rgba(247, 244, 236, 0.8);
	--supramel-color-bg-strong:      rgba(247, 244, 236, 0.96);
	--supramel-color-footer-border:  rgba(246, 242, 238, 0.22);
	--supramel-color-footer-border-strong: rgba(246, 242, 238, 0.14);
	--supramel-color-footer-border-soft:   rgba(246, 242, 238, 0.1);
	--supramel-color-footer-text-soft:     rgba(246, 242, 238, 0.88);
	--supramel-color-footer-text-muted:    rgba(246, 242, 238, 0.82);
	--supramel-color-footer-text-faint:    rgba(246, 242, 238, 0.66);
	--supramel-color-footer-bar-bg:        rgba(0, 0, 0, 0.12);
	--supramel-color-primary-soft:         rgba(22, 128, 72, 0.1);
	--supramel-color-primary-muted:        rgba(22, 128, 72, 0.14);
	--supramel-color-primary-border-soft:  rgba(22, 128, 72, 0.16);
	--supramel-color-highlight-soft:       rgba(210, 169, 63, 0.12);
	--supramel-color-highlight-muted:      rgba(210, 169, 63, 0.16);
	--supramel-color-secondary-muted:      rgba(29, 28, 28, 0.22);
	--supramel-color-shadow-soft:          rgba(36, 50, 58, 0.08);
	--supramel-color-shadow-primary:       rgba(30, 46, 34, 0.09);
	--supramel-color-shadow-highlight:     rgba(210, 169, 63, 0.22);

	/* Alias mantido para compatibilidade interna */
	--supramel-color-accent-strong:  #0a4c2a;

	/* =============================================
	   SISTEMA TIPOGRÁFICO — DESKTOP
	   ============================================= */

	/* Famílias */
	--supramel-font-heading: "Montserrat", sans-serif;
	--supramel-font-body:    "Inter", sans-serif;

	/* H1 — Banner principal (1 por página) */
	--supramel-text-h1-size:        44px;
	--supramel-text-h1-weight:      700;
	--supramel-text-h1-line-height: 1.2em;

	/* H2 — Títulos de seção */
	--supramel-text-h2-size:        32px;
	--supramel-text-h2-weight:      700;
	--supramel-text-h2-line-height: 1.2em;

	/* H3 — Produtos e preços em destaque */
	--supramel-text-h3-size:        24px;
	--supramel-text-h3-weight:      600;
	--supramel-text-h3-line-height: 1.3em;

	/* Body — Descrições, FAQ, blog */
	--supramel-text-body-size:        16px;
	--supramel-text-body-weight:      400;
	--supramel-text-body-line-height: 1.5em;

	/* Botões / CTA */
	--supramel-text-btn-size:           14px;
	--supramel-text-btn-weight:         600;
	--supramel-text-btn-weight-strong:  700;
	--supramel-text-btn-line-height:    1.2em;
	--supramel-text-btn-transform:      uppercase;
	--supramel-text-btn-letter-spacing: 1px;
	--supramel-shadow-button-soft:      0 10px 24px rgba(36, 50, 58, 0.08);

	/* Micro textos — trust badges, rodapé */
	--supramel-text-micro-size:        13px;
	--supramel-text-micro-weight:      400;
	--supramel-text-micro-line-height: 1.4em;

	/* =============================================
	   ESPAÇAMENTO, SOMBRA & FORMA
	   ============================================= */
	--supramel-shadow-soft: 0 18px 45px var(--supramel-color-shadow-soft);
	--supramel-radius-md: 16px;
	--supramel-radius-lg: 28px;
	--supramel-container: 1200px;
	--site-header-height: 88px;
	--supramel-space-xs: 0.5rem;
	--supramel-space-sm: 0.75rem;
	--supramel-space-md: 1rem;
	--supramel-space-lg: 1.5rem;
	--supramel-space-xl: 2.5rem;
	--supramel-space-2xl: 4rem;
	--supramel-space-3xl: 5rem;
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--supramel-color-bg);
	color: var(--supramel-color-text);
	font-family: var(--supramel-font-body);
	font-size: var(--supramel-text-body-size);
	font-weight: var(--supramel-text-body-weight);
	line-height: var(--supramel-text-body-line-height);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--supramel-font-heading);
	color: var(--supramel-color-secondary);
	margin: 0 0 0.75em;
}

h1 {
	font-size: var(--supramel-text-h1-size);
	font-weight: var(--supramel-text-h1-weight);
	line-height: var(--supramel-text-h1-line-height);
}

h2 {
	font-size: var(--supramel-text-h2-size);
	font-weight: var(--supramel-text-h2-weight);
	line-height: var(--supramel-text-h2-line-height);
}

h3 {
	font-size: var(--supramel-text-h3-size);
	font-weight: var(--supramel-text-h3-weight);
	line-height: var(--supramel-text-h3-line-height);
}

/* Mobile — ajustes tipográficos */
@media (max-width: 767px) {
	:root {
		--supramel-text-h1-size: 30px;
		--supramel-text-h2-size: 24px;
		--supramel-text-h3-size: 20px;
		/* Body (16px) e botões (14px) INTOCÁVEIS no mobile */
		--supramel-text-micro-weight: 500; /* Medium para compensar tela pequena */
	}
}

a {
	color: inherit;
	text-decoration: none;
}

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

.site-container {
	width: min(100% - 2rem, var(--supramel-container));
	margin-inline: auto;
}

.site-main {
	min-height: 60vh;
}

.page-shell,
.content-shell {
	padding: var(--supramel-space-xl) 0 var(--supramel-space-2xl);
}

.page-content,
.entry-card,
.archive-header,
.empty-state {
	background: var(--supramel-color-surface);
	border: 1px solid var(--supramel-color-border-soft);
	border-radius: var(--supramel-radius-lg);
	box-shadow: var(--supramel-shadow-soft);
}

.page-content,
.entry-card,
.archive-header,
.empty-state {
	padding: clamp(1.5rem, 2vw, 2.5rem);
}

.entry-title,
.archive-title,
.empty-state__title {
	margin: 0 0 var(--supramel-space-md);
	font-size: clamp(2rem, 4vw, 3.25rem);
	line-height: 1.1;
}

.archive-description,
.empty-state__text {
	color: var(--supramel-color-text-soft);
}

.archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--supramel-space-lg);
	margin-top: var(--supramel-space-xl);
}

.archive-card {
	background: var(--supramel-color-surface);
	border: 1px solid var(--supramel-color-border-soft);
	border-radius: var(--supramel-radius-md);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.archive-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--supramel-shadow-soft);
}

.archive-card__link {
	display: block;
	padding: 1rem;
}

.archive-card__thumb {
	margin-bottom: 1rem;
	border-radius: 14px;
	overflow: hidden;
}

.archive-card__title {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.3;
}

.archive-pagination {
	margin-top: var(--supramel-space-xl);
}

.entry-content > :first-child,
.page-content > :first-child {
	margin-top: 0;
}

.entry-content > :last-child,
.page-content > :last-child {
	margin-bottom: 0;
}

/* ── Generic page (Termos, Política, etc.) ───────────────────── */

.page-shell--generic {
	padding: 2rem 0 5rem;
	background: var(--supramel-color-bg);
	min-height: 60vh;
}

.generic-page {
	max-width: 800px;
	margin: 0 auto;
}

.generic-page__breadcrumb {
	font-size: 0.82rem;
	color: var(--supramel-color-text-soft);
	margin-bottom: 1.5rem;
}

.generic-page__breadcrumb a {
	color: var(--supramel-color-text-soft);
	text-decoration: none;
}

.generic-page__breadcrumb a:hover {
	color: #168048;
}

.generic-page__title {
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	color: var(--supramel-color-secondary);
	margin: 0 0 1.75rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid #e5e1d8;
}

.generic-page__content {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--supramel-color-text);
}


.generic-page__content h2,
.generic-page__content h3,
.generic-page__content h4 {
	color: var(--supramel-color-secondary);
	margin: 2rem 0 0.75rem;
}

.generic-page__content p {
	margin: 0 0 1.1rem;
}

.generic-page__content ul,
.generic-page__content ol {
	padding-left: 1.5rem;
	margin: 0 0 1.1rem;
}

.generic-page__content li {
	margin-bottom: 0.4rem;
}

.generic-page__content a {
	color: #168048;
	text-decoration: underline;
}

.generic-page__content strong {
	font-weight: 700;
	color: var(--supramel-color-secondary);
}

.site-whatsapp-float {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 120;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: #25d366;
	color: #ffffff;
	box-shadow: 0 18px 36px rgba(37, 211, 102, 0.28);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.site-whatsapp-float:hover,
.site-whatsapp-float:focus-visible {
	transform: translateY(-2px) scale(1.03);
	background: #20ba5a;
	box-shadow: 0 22px 42px rgba(37, 211, 102, 0.34);
}

.site-whatsapp-float:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.9);
	outline-offset: 3px;
}

.site-whatsapp-float__icon {
	display: inline-flex;
	width: 34px;
	height: 34px;
}

.site-whatsapp-float__icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

@media (max-width: 767px) {
	.site-whatsapp-float {
		right: 1rem;
		bottom: 1rem;
		width: 58px;
		height: 58px;
	}

	.site-whatsapp-float__icon {
		width: 31px;
		height: 31px;
	}
}