/*
 * Armazém Cerealista Piracicaba · layout v2
 * Tokens e componentes conforme docs/03. Celular primeiro: estilos base valem para 390px;
 * @media (min-width: 768px) e (min-width: 1024px) ajustam para tablet e desktop.
 */

/* ---------- Fonte (hospedada no site; docs/11 decisão 9) ---------- */
@font-face {
	font-family: "Signika";
	src: url("../fonts/signika-latin-wght-normal.woff2") format("woff2-variations"),
		url("../fonts/signika-latin-wght-normal.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
	--verde-marca: #204436;
	--amarelo-marca: #ffca05;

	--bg: #f2f5f3;
	--surface: #ffffff;
	--text: #14211c;
	--muted: #5b6a64;
	--line: #dde4e0;
	--grid: #e3e9e6;
	--input-border: #b9cdc5;

	--pos: #17795a;
	--off: #8a8f8b;
	--amb-bg: #fdf3dc;
	--amb: #8a5a06;

	/* derivados do cabeçalho/rodapé verde (referência v2) */
	--sobre-verde: #ffffff;
	--sobre-verde-suave: #b9cdc5;
	--rodape-texto: #e8efe9;
	--rodape-borda: #5b7f72;
	--rodape-linha: #3b5c52;

	--radius-card: 10px;
	--radius-img: 8px;
	--radius-pill: 999px;
	--radius-tag: 4px;
	--radius-bloco: 12px;

	--font: Signika, "Trebuchet MS", sans-serif;

	--conteiner: 1200px;
	--margem: 16px;
	--secao: 32px;

	--h1: 2rem;      /* 32px celular, 44px desktop */
	--h2: 1.5rem;    /* 24px celular, 28px desktop */
	--h2-grande: 1.5rem;
}

@media (min-width: 768px) {
	:root {
		--margem: 32px;
		--secao: 40px;
		--h1: 2.5rem;
		--h2: 1.625rem;
		--h2-grande: 1.75rem;
	}
}

@media (min-width: 1024px) {
	:root {
		--secao: 44px;
		--h1: 2.75rem;
		--h2: 1.75rem;
		--h2-grande: 2rem;
	}
}

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

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

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

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

img {
	height: auto;
}

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

.texto-corrido a,
.consentimento a,
.cartao__texto a,
.produto__cashback a {
	color: var(--verde-marca);
	text-decoration: underline;
	text-underline-offset: 2px;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--font);
	font-weight: 700;
	line-height: 1.2;
}

p {
	margin: 0;
}

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

:focus-visible {
	outline: 2px solid var(--verde-marca);
	outline-offset: 2px;
}

.area-verde :focus-visible,
.site-rodape :focus-visible {
	outline-color: var(--amarelo-marca);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

html {
	scroll-behavior: smooth;
}

.screen-reader-text,
.sr-only {
	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-conteudo {
	position: absolute;
	left: 8px;
	top: -100px;
	z-index: 100;
	padding: 12px 18px;
	background: var(--amarelo-marca);
	color: var(--verde-marca);
	font-weight: 700;
	border-radius: var(--radius-pill);
}

.pular-conteudo:focus {
	top: 8px;
}

/* Marcador de conteúdo que falta: visível de propósito (CLAUDE.md, regra 1). */
.marcador {
	background: var(--amb-bg);
	color: var(--amb);
	border-radius: 3px;
	padding: 0 3px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.area-verde .marcador {
	background: rgba(255, 255, 255, 0.14);
	color: var(--sobre-verde);
}

/* ---------- Layout ---------- */
.conteiner {
	width: 100%;
	max-width: var(--conteiner);
	margin-inline: auto;
	padding-inline: var(--margem);
}

.conteiner--estreito {
	max-width: 860px;
}

.conteiner--medio {
	max-width: 1100px;
}

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

/* Seção logo abaixo do menu (Início): mesmo respiro do topo das outras páginas. */
#conteudo > section.secao:first-of-type {
	padding-top: 32px;
}

.secao--cinza {
	background: var(--grid);
}

.secao--branca {
	background: var(--surface);
	border-block: 1px solid var(--line);
}

.secao__topo {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px;
	margin-bottom: 20px;
}

.secao__titulo {
	font-size: var(--h2);
}

.secao__titulo--grande {
	font-size: var(--h2-grande);
}

.secao__apoio {
	margin-top: 6px;
	color: var(--muted);
	font-size: 0.9375rem;
}

.link-seta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
	color: var(--verde-marca);
}

.link-seta:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.grade {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.grade > * {
	flex: 1 1 280px;
	min-width: 0;
}

.grade--cartoes > * {
	flex-basis: 240px;
}

.grade--estreita > * {
	flex-basis: 200px;
}

.grade--larga > * {
	flex-basis: 300px;
}

.grade--2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.grade--2 > * {
	flex: none;
}

@media (min-width: 768px) {
	.grade {
		gap: 20px;
	}

	.grade--2 {
		display: flex;
		gap: 16px;
	}

	.grade--2 > * {
		flex: 1 1 220px;
	}
}

/* Faixa que rola para o lado no celular (ofertas, relacionados) */
.trilho {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	margin-inline: calc(var(--margem) * -1);
	padding: 0 var(--margem) 8px;
}

.trilho > * {
	flex: 0 0 220px;
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	/* Mesma grade do catálogo: com 1 ou 2 itens, cada card fica do tamanho dos demais. */
	.trilho {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
		gap: 20px;
		overflow: visible;
		margin-inline: 0;
		padding: 0;
	}

	.trilho > * {
		min-width: 0;
	}
}

/* Carrossel (Ofertas do Clube no Início): trilho rolável também no computador, com setas nas laterais. */
.carrossel {
	position: relative;
}

.trilho--carrossel > .carrossel__ver-todas {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	font-weight: 700;
	color: var(--verde-marca);
}

.carrossel__seta {
	position: absolute;
	top: 40%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(32, 68, 54, 0.15);
	border-radius: 50%;
	background: #fff;
	color: var(--verde-marca);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	cursor: pointer;
}

.carrossel__seta[hidden] {
	display: none;
}

.carrossel__seta:disabled {
	opacity: 0;
	pointer-events: none;
}

.carrossel__seta svg {
	width: 22px;
	height: 22px;
}

.carrossel__seta--voltar {
	left: -8px;
}

.carrossel__seta--voltar svg {
	transform: rotate(90deg);
}

.carrossel__seta--avancar {
	right: -8px;
}

.carrossel__seta--avancar svg {
	transform: rotate(-90deg);
}

@media (min-width: 768px) {
	.trilho--carrossel {
		display: flex;
		gap: 20px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	/* 4 cartões por tela no computador, 3 no tablet. */
	.trilho--carrossel > * {
		flex: 0 0 calc((100% - 40px) / 3);
	}

	.carrossel__seta--voltar {
		left: -22px;
	}

	.carrossel__seta--avancar {
		right: -22px;
	}
}

@media (min-width: 1100px) {
	.trilho--carrossel > * {
		flex-basis: calc((100% - 60px) / 4);
	}
}

.duas-colunas {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 40px;
	align-items: center;
}

.duas-colunas > * {
	flex: 1 1 400px;
	min-width: 0;
}

/* Barra lateral + conteúdo (FAQ, artigo, privacidade) */
.com-lateral {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 40px;
	align-items: flex-start;
}

.com-lateral__lado {
	flex: 0 1 280px;
	min-width: 220px;
}

.com-lateral__principal {
	flex: 999 1 560px;
	min-width: 0;
}

@media (max-width: 767px) {
	.com-lateral__lado {
		flex-basis: 100%;
	}
}

/* ---------- Tipografia de página ---------- */
/* Trilha a 24 px do menu e título 12 px abaixo dela em todas as páginas, como no Clube (decisão 95). */
.cabecalho-pagina {
	padding-top: 24px;
	padding-bottom: 8px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.titulo-pagina {
	font-size: var(--h1);
	line-height: 1.1;
	color: var(--verde-marca);
}

.linha-fina {
	font-size: 1.0625rem;
	line-height: 1.5;
	max-width: 840px;
}

@media (min-width: 768px) {
	.linha-fina {
		font-size: 1.125rem;
	}
}

.trilha {
	font-size: 0.875rem;
	color: var(--muted);
}

.trilha ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.trilha li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.trilha li + li::before {
	content: "›";
	color: var(--muted);
}

.trilha a {
	display: inline-flex;
	align-items: center;
	min-height: 24px; /* Área de toque mínima (WCAG 2.2, 2.5.8). */
	color: var(--muted);
	text-decoration: none;
}

.trilha a:hover {
	text-decoration: underline;
}

.trilha [aria-current] {
	color: var(--text);
	font-weight: 600;
}

/* Texto longo (artigo, privacidade, páginas simples) */
.texto-corrido {
	font-size: 1rem;
	line-height: 1.6;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.texto-corrido > * {
	margin: 0;
}

.texto-corrido h2 {
	font-size: var(--h2);
	line-height: 1.2;
	margin-top: 12px;
	scroll-margin-top: 16px;
}

.texto-corrido h3 {
	font-size: 1.1875rem;
	line-height: 1.25;
	margin-top: 8px;
}

.texto-corrido ul,
.texto-corrido ol {
	padding-left: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.texto-corrido figure {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.texto-corrido figure img {
	border-radius: var(--radius-card);
}

.texto-corrido .wp-block-table {
	overflow-x: auto;
}

.texto-corrido table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.5;
	background: var(--surface);
}

.texto-corrido th,
.texto-corrido td {
	border: 1px solid var(--line);
	padding: 8px 12px;
	text-align: left;
	vertical-align: top;
}

.texto-corrido thead th {
	background: var(--bg);
	font-weight: 600;
}

.texto-corrido figcaption {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--muted);
}

.texto-corrido blockquote {
	border-left: 4px solid var(--amarelo-marca);
	padding-left: 16px;
}

@media (min-width: 768px) {
	/* Leitura de blog: 17px / 1,6, coluna ~620px (≈ 70 caracteres por linha) */
	.texto-corrido--artigo {
		font-size: 1.0625rem;
		line-height: 1.6;
		gap: 18px;
	}

	.texto-corrido--artigo h2 {
		font-size: 1.625rem;
		margin-top: 16px;
	}
}

/* Caixa "Dica do Armazém" (estilo de bloco "Dica" no editor) */
.texto-corrido .is-style-dica,
.caixa-dica {
	background: var(--amb-bg);
	color: var(--amb);
	border-radius: var(--radius-card);
	padding: 20px 24px;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.texto-corrido .is-style-dica::before,
.caixa-dica__titulo {
	content: "Dica do Armazém Cerealista Piracicaba";
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	margin-bottom: 6px;
}

/* ---------- Selos, chips e placeholders ---------- */
.selo {
	display: inline-block;
	align-self: flex-start;
	background: var(--amarelo-marca);
	color: var(--verde-marca);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 3px 10px;
	border-radius: var(--radius-tag);
}

.selo--sobre-foto {
	position: absolute;
	top: 10px;
	left: 10px;
}

.etiqueta-categoria {
	display: inline-block;
	align-self: flex-start;
	background: var(--grid);
	color: var(--verde-marca);
	font-size: 13px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 6px;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: var(--radius-pill);
	background: var(--grid);
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
}

.chip:hover {
	background: #d4ddd8;
}

.chip[aria-current] {
	background: var(--verde-marca);
	color: #fff;
	font-weight: 600;
}

.chip--contorno {
	background: var(--surface);
	border: 1px solid var(--line);
	font-size: 16px;
}

.faixa-rolavel {
	overflow-x: auto;
}

.faixa-rolavel .chips {
	flex-wrap: nowrap;
	width: max-content;
}

@media (min-width: 768px) {
	.faixa-rolavel .chips {
		flex-wrap: wrap;
		width: auto;
	}
}

.imagem-vazia {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 8px;
	background: var(--grid);
	color: var(--muted);
	font-size: 13px;
	border-radius: var(--radius-img);
}

.foto {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-img);
}

/* ---------- Botões ---------- */
.botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 24px;
	border-radius: var(--radius-pill);
	border: 2px solid transparent;
	font-family: var(--font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
}

@media (min-width: 768px) {
	.botao {
		min-height: 50px;
	}
}

.botao--principal {
	background: var(--verde-marca);
	color: #fff;
}

.botao--principal:hover {
	background: #173328;
}

.botao--contorno {
	border-color: var(--verde-marca);
	color: var(--verde-marca);
	background: transparent;
}

.botao--contorno:hover {
	background: var(--grid);
}

.botao--destaque {
	background: var(--amarelo-marca);
	color: var(--verde-marca);
	font-weight: 700;
}

.botao--destaque:hover {
	background: #ffd53a;
}

/* Botões que levam ao WhatsApp: pílula verde com o logo (padrão do Dashboard Experts) */
.botao--whatsapp {
	background: #15803d;
	color: #fff;
	font-weight: 700;
	border-radius: 999px;
}

.botao--whatsapp:hover {
	background: #116932;
}

.botao-redondo.botao-redondo--whatsapp {
	background: #15803d;
	border-color: #15803d;
	color: #fff;
}

.botao-redondo.botao-redondo--whatsapp:hover {
	background: #116932;
}

.botao--pequeno {
	min-height: 46px;
	padding: 0 18px;
	font-size: 15px;
}

.botao svg {
	flex: none;
}

.botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

@media (max-width: 767px) {
	.botoes--empilhar-celular {
		flex-direction: column;
	}

	.botoes--empilhar-celular .botao {
		width: 100%;
	}
}

/* ---------- Cabeçalho (decisão 81): logo, menu ao lado e busca com sugestões ---------- */
.site-cabecalho {
	position: relative;
	z-index: 40;
}

.site-cabecalho__verde {
	background: var(--verde-marca);
	color: var(--sobre-verde);
}

.site-cabecalho__aviso {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 24px;
	padding-top: 10px;
	font-size: 12px;
	color: var(--sobre-verde-suave);
}

.site-cabecalho__aviso a {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.site-cabecalho__aviso a:hover {
	text-decoration: underline;
}

.site-cabecalho__app {
	display: none;
}

.site-cabecalho__linha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding-top: 10px;
	padding-bottom: 14px;
}

.marca {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	flex: none;
	text-decoration: none;
}

.marca img {
	height: 34px;
	width: auto;
}

.marca__praca {
	color: #fff;
	font-weight: 700;
	font-size: 9px;
	letter-spacing: 0.32em;
	padding-left: 0.32em; /* Compensa o espaço depois da última letra: fica centralizado sob o logo. */
}

.menu-alternar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	border: 0;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
}

.busca {
	position: relative;
	flex: 1 1 100%;
	display: flex;
	align-items: center;
}

.busca__icone {
	position: absolute;
	z-index: 1;
	left: 16px;
	color: var(--sobre-verde-suave);
	pointer-events: none;
}

.busca input[type="search"] {
	width: 100%;
	height: 44px;
	padding: 0 16px 0 44px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	font-size: 16px;
	-webkit-appearance: none;
	appearance: none;
}

.busca input[type="search"]::placeholder {
	color: var(--sobre-verde-suave);
	opacity: 1;
}

.site-cabecalho .busca input[type="search"]:focus {
	outline: none;
	background: var(--surface);
	color: var(--text);
	border-color: var(--surface);
	box-shadow: 0 0 0 3px var(--amarelo-marca);
}

.site-cabecalho .busca:focus-within .busca__icone {
	color: var(--muted);
}

.busca--clara .busca__icone {
	color: var(--muted);
}

.busca--clara input[type="search"] {
	border-color: var(--input-border);
	background: var(--surface);
	color: var(--text);
}

.busca--clara input[type="search"]::placeholder {
	color: var(--muted);
}

/* Caixa de sugestões, no estilo da busca do Dashboard Experts. */
.busca__sugestoes {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 50;
	max-height: min(70vh, 560px);
	overflow-y: auto;
	padding: 8px;
	border-radius: 14px;
	background: var(--surface);
	color: var(--text);
	box-shadow: 0 16px 40px rgba(20, 33, 28, 0.22);
}

.bs-titulo {
	margin: 10px 12px 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.bs-pops {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0 12px 6px;
}

.bs-pops a {
	padding: 6px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	color: var(--text);
	font-size: 14px;
	text-decoration: none;
}

.bs-prod {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 8px 12px;
	border-radius: 10px;
	color: var(--text);
	text-decoration: none;
}

.bs-prod img,
.bs-prod__sem {
	width: 56px;
	height: 56px;
	object-fit: contain;
	border-radius: var(--radius-img);
	background: var(--bg);
}

.bs-prod__nome b {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.bs-prod__nome small,
.bs-prod__preco small {
	display: block;
	font-size: 12.5px;
	color: var(--muted);
}

.bs-prod__preco {
	text-align: right;
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
}

.bs-prod__preco small.ok {
	color: var(--pos);
	font-weight: 500;
}

.bs-prod mark {
	background: #fff1b3;
	color: inherit;
}

.bs-todos {
	display: block;
	margin: 4px;
	padding: 12px;
	border-top: 1px solid var(--line);
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--verde-marca);
	text-decoration: none;
}

.bs-vazio {
	margin: 12px;
	color: var(--muted);
	font-size: 14px;
}

.busca__sugestoes [role="option"]:hover,
.busca__sugestoes [aria-selected="true"] {
	background: var(--bg);
}

/* Menu principal: no celular, lista atrás do botão de menu; no computador, ao lado do logo. */
.menu-principal {
	display: none;
	flex-basis: 100%;
	order: 5;
}

.site-cabecalho--menu-aberto .menu-principal {
	display: block;
}

.menu-principal__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.menu-principal__lista > li > a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 0 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}

.menu-principal__lista > li > a[aria-current] {
	color: var(--amarelo-marca);
}

/* "Comprar agora": pílula amarela, o item de maior destaque do menu. */
.menu-produtos {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 6px;
	border-radius: var(--radius-pill);
	background: var(--amarelo-marca);
}

.menu-principal__lista > .menu-produtos > a {
	flex: 1;
	padding: 0 4px 0 20px;
	border: 0;
	color: var(--verde-marca);
	font-weight: 700;
}

.menu-principal__lista > .menu-produtos > a[aria-current] {
	color: var(--verde-marca);
}

.menu-produtos__abrir {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px 0 4px;
	border: 0;
	border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
	background: none;
	color: var(--verde-marca);
	cursor: pointer;
}

.menu-produtos__abrir svg {
	transition: transform 0.2s;
}

.menu-produtos__abrir[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.menu-produtos:hover,
.menu-produtos:focus-within {
	background: #ffd84d;
}

/* Painel "Comprar agora": atalhos, categorias, indicações e convite do Clube. */
.painel-produtos {
	flex-basis: 100%;
	margin: 0 0 10px;
	border-radius: var(--radius-bloco);
	background: var(--surface);
	color: var(--text);
}

.menu-produtos:has(.painel-produtos:not([hidden])) {
	border-radius: 24px;
}

.painel-produtos__dentro {
	display: grid;
	gap: 20px;
	padding-block: 18px 20px;
}

.pp-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 4px;
}

.pp-col a {
	display: flex;
	align-items: center;
	min-height: 36px;
	color: var(--muted);
	font-size: 15px;
	text-decoration: none;
}

.pp-col a:hover {
	color: var(--verde-marca);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pp-col__titulo {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
}

.pp-atalhos a {
	color: var(--text);
	font-weight: 600;
}

.pp-clube {
	display: none;
}

.painel-produtos a:focus-visible,
.menu-produtos__abrir:focus-visible,
.menu-alternar:focus-visible {
	outline: 3px solid var(--amarelo-marca);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	.site-cabecalho__aviso {
		font-size: 13px;
	}

	.site-cabecalho__app {
		display: inline;
	}

	/* Duas colunas lidas de cima para baixo, para a ordem alfabética seguir a leitura. */
	.pp-cats ul {
		display: block;
		columns: 2;
		column-gap: 32px;
	}

	.pp-cats li {
		break-inside: avoid;
	}
}

@media (min-width: 1100px) {
	.site-cabecalho__linha {
		flex-wrap: nowrap;
		gap: 28px;
		min-height: 84px;
		padding-block: 8px;
	}

	.marca img {
		height: 40px;
	}

	.marca__praca {
		font-size: 10px;
	}

	.menu-alternar {
		display: none;
	}

	.menu-principal {
		display: block;
		flex: 1 1 auto;
		order: 0;
	}

	.menu-principal__lista {
		display: flex;
		align-items: center;
		gap: 2px;
	}

	.menu-principal__lista > li > a {
		min-height: 42px;
		padding: 0 12px;
		border: 0;
		border-radius: var(--radius-pill);
		font-size: 15px;
		white-space: nowrap;
	}

	.menu-principal__lista > li > a:hover {
		background: rgba(255, 255, 255, 0.1);
	}

	.menu-principal__lista > li > a[aria-current] {
		color: #fff;
		box-shadow: inset 0 -2px 0 var(--amarelo-marca);
		border-radius: 0;
	}

	.menu-produtos {
		flex-wrap: nowrap;
		margin: 0 8px 0 0;
	}

	.menu-principal__lista > .menu-produtos > a {
		padding: 0 2px 0 18px;
		border-radius: var(--radius-pill) 0 0 var(--radius-pill);
	}

	.menu-principal__lista > .menu-produtos > a:hover {
		background: none;
	}

	.menu-principal__lista > .menu-produtos > a[aria-current] {
		color: var(--verde-marca);
		box-shadow: none;
		border-radius: var(--radius-pill) 0 0 var(--radius-pill);
	}

	.menu-produtos:has(.painel-produtos:not([hidden])) {
		border-radius: var(--radius-pill);
	}

	.menu-produtos__abrir {
		min-height: 42px;
		min-width: 36px;
		padding: 0 12px 0 2px;
	}

	.busca {
		flex: 0 0 300px;
	}

	.busca__sugestoes {
		left: auto;
		width: 440px;
	}

	/* O painel se abre por baixo de toda a faixa verde, na largura da página. */
	.painel-produtos {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin: 0;
		border-radius: 0;
		border-bottom: 1px solid var(--line);
		box-shadow: 0 12px 24px rgba(20, 33, 28, 0.12);
		max-height: calc(100vh - 140px);
		overflow-y: auto;
	}

	.painel-produtos__dentro {
		grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 220px;
		gap: 32px;
		padding-block: 28px 32px;
	}

	/* No computador cada grupo de categorias vira uma coluna só; as marcas (nomes curtos) ficam em duas. */
	.pp-cats ul {
		columns: 1;
	}

	.pp-marcas ul {
		columns: 2;
		column-gap: 16px;
	}

	.pp-cats a {
		min-height: 32px;
	}

	.pp-clube {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding: 18px;
		border-radius: var(--radius-bloco);
		background: var(--bg);
	}

	.pp-clube__selo {
		padding: 3px 8px;
		border-radius: var(--radius-tag);
		background: var(--amarelo-marca);
		color: var(--verde-marca);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.pp-clube__titulo {
		margin: 0;
		font-size: 16px;
		font-weight: 700;
	}

	.pp-clube__texto {
		margin: 0 0 6px;
		color: var(--muted);
		font-size: 14px;
		line-height: 1.45;
	}
}

@media (prefers-reduced-motion: reduce) {
	.menu-produtos__abrir svg {
		transition: none;
	}
}

/* ---------- Cartões ---------- */
.cartao {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media (min-width: 768px) {
	.cartao--folgado {
		padding: 24px;
	}

	.cartao--amplo {
		padding: 32px;
	}
}

.cartao--verde {
	background: var(--verde-marca);
	border-color: var(--verde-marca);
	color: #fff;
}

.cartao--cinza {
	background: var(--bg);
}

.cartao__titulo {
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.25;
}

@media (min-width: 768px) {
	.cartao__titulo {
		font-size: 1.375rem;
	}
}

.cartao__texto {
	color: var(--muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

a.cartao:hover,
.cartao-link:hover {
	border-color: var(--input-border);
	box-shadow: 0 2px 10px rgba(20, 33, 28, 0.06);
}

/* Cartão de produto/oferta */
.cartao-produto {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

@media (min-width: 768px) {
	.cartao-produto {
		padding: 16px;
		gap: 12px;
	}
}

.cartao-produto:hover {
	border-color: var(--input-border);
}

.cartao-produto__foto {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-img);
	overflow: hidden;
}

.cartao-produto__foto .imagem-vazia {
	height: 100%;
}

/* Linhas alinhadas entre cartões vizinhos: o nome ocupa sempre 2 linhas (o resto vira "…"),
   então preço e Clube começam na mesma altura, e a disponibilidade fica no pé do cartão. */
.cartao-produto__marca {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.cartao-produto__nome {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: 2.6em;
}

.cartao-produto > .disponibilidade {
	margin-top: auto;
}

.cartao-produto__nome a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius-card);
}

.cartao-produto__unidade {
	font-size: 14px;
	color: var(--muted);
}

.cartao-produto__unidade:empty {
	display: none;
}

/* Se algum cartão da lista tem unidade, os outros guardam a linha em branco para o preço não desalinhar. */
:is(.grade-produtos, .trilho):has(.cartao-produto__unidade:not(:empty)) .cartao-produto__unidade:empty {
	display: block;
}

:is(.grade-produtos, .trilho):has(.cartao-produto__unidade:not(:empty)) .cartao-produto__unidade:empty::before {
	content: "\00a0";
}

.preco {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
}

.preco__unidade {
	font-size: 14px;
	font-weight: 500;
	color: var(--muted);
}

@media (min-width: 768px) {
	.cartao-produto__nome {
		font-size: 17px;
	}

	.preco {
		font-size: 22px;
	}
}

.faixa-clube {
	font-size: 14px;
	font-weight: 500;
	padding: 6px 10px;
	border-radius: var(--radius-img);
	background: var(--amb-bg);
	color: var(--amb);
}

.disponibilidade {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--muted);
}

.disponibilidade::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--off);
}

.disponibilidade--sim {
	color: var(--pos);
}

.disponibilidade--sim::before {
	background: var(--pos);
}

/* Cartão de artigo */
.cartao-post {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cartao-post__imagem {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-card);
	overflow: hidden;
}

.cartao-post__imagem .imagem-vazia,
.cartao-post__imagem img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 0;
}

.cartao-post__titulo {
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.25;
}

@media (min-width: 768px) {
	.cartao-post__titulo {
		font-size: 1.3125rem;
	}
}

.cartao-post__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cartao-post__titulo a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cartao-post__resumo {
	font-size: 15px;
	line-height: 1.55;
	color: var(--muted);
}

.cartao-post__meta {
	font-size: 14px;
	color: var(--muted);
}

/* Lista compacta de artigos no celular (Home) */
@media (max-width: 767px) {
	.posts-compactos {
		flex-direction: column;
	}

	/* Na coluna, a base de 280 px da .grade viraria altura: cada artigo fica do tamanho do conteúdo. */
	.posts-compactos > * {
		flex: none;
	}

	.posts-compactos .cartao-post {
		flex-direction: row;
		align-items: flex-start;
		gap: 12px;
	}

	.posts-compactos .cartao-post__imagem {
		flex: 0 0 96px;
		aspect-ratio: 1 / 1;
		border-radius: var(--radius-img);
	}

	.posts-compactos .cartao-post__corpo {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.posts-compactos .cartao-post__titulo {
		font-size: 1.0625rem;
	}
}

.cartao-post__corpo {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Quem somos no Início, celular: o título vem antes da foto (decisão 101). */
@media (max-width: 767px) {
	.quem-inicio {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
	}

	/* Na coluna, a base de 400 px das duas colunas viraria altura da foto: ela fica com os 220 px de sempre. */
	.quem-inicio > * {
		flex: none;
	}

	.quem-inicio > .pilha {
		display: contents;
	}

	.quem-inicio h2 {
		order: -1;
	}
}

/* Cartão de loja */
.cartao-loja__cabeca {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
}

.cartao-loja__endereco,
.cartao-loja__telefone {
	font-size: 15px;
	line-height: 1.5;
	color: var(--muted);
}

.cartao-loja__horario {
	font-size: 15px;
	line-height: 1.5;
	color: var(--muted);
}

/* Lojas em Quem somos: destino dos links #loja-…; o cartão aparece um pouco abaixo do topo. */
#lojas,
#lojas [id] {
	scroll-margin-top: 16px;
}

.cartao-loja__telefone a {
	color: inherit;
	text-decoration: none;
}

.cartao-loja__imagem {
	height: 140px;
	display: flex;
}

.cartao-loja__imagem > * {
	flex: 1;
}

.cartao--cinza .cartao-loja__imagem {
	height: 180px;
}

.cartao-loja__mapa {
	width: 100%;
	border: 0;
	border-radius: inherit;
}

/* Cartões de loja lado a lado com as linhas alinhadas (como os de produto, decisão 92): foto, nome,
   endereço, telefone, horário e botões dividem as linhas com os vizinhos; os botões ficam no pé. */
.grade--lojas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

@supports (grid-template-rows: subgrid) {
	.grade--lojas > .cartao-loja {
		display: grid;
		grid-row: span 5;
		grid-template-rows: subgrid;
		row-gap: 12px;
		align-content: start;
	}

	.grade--lojas > .cartao-loja--horarios {
		grid-row: span 6;
	}

	/* Nome no topo da linha, mesmo quando o selo de delivery do vizinho quebra para baixo. */
	.grade--lojas .cartao-loja__cabeca {
		align-self: start;
	}

	.grade--lojas > .cartao-loja > .botoes {
		grid-row: -2 / -1;
		align-self: end;
	}
}

.loja-linha {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 24px;
}

.loja-linha > * {
	flex: 1 1 360px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.loja-linha .imagem-vazia,
.loja-linha .foto {
	height: 200px;
}

@media (min-width: 768px) {
	.loja-linha .imagem-vazia,
	.loja-linha .foto {
		height: 240px;
	}
}

/* Bloco verde grande (Clube) */
.bloco-verde {
	background: var(--verde-marca);
	color: #fff;
	border-radius: var(--radius-bloco);
	padding: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	align-items: center;
	justify-content: space-between;
}

@media (min-width: 768px) {
	.bloco-verde {
		padding: 48px;
	}
}

.bloco-verde--compacto {
	padding: 20px 24px;
}

@media (min-width: 768px) {
	.bloco-verde--compacto {
		padding: 28px 32px;
	}
}

.bloco-verde__link {
	align-self: flex-start;
	color: var(--amarelo-marca);
	font-weight: 600;
	text-underline-offset: 3px;
}

.bloco-verde__link:hover {
	text-decoration: underline;
}

.bloco-verde__texto {
	flex: 1 1 400px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bloco-verde__titulo {
	font-size: 1.625rem;
	line-height: 1.15;
}

@media (min-width: 768px) {
	.bloco-verde__titulo {
		font-size: 2.25rem;
		line-height: 1.1;
	}
}

.bloco-verde p {
	font-size: 1rem;
	line-height: 1.5;
	max-width: 520px;
}

@media (min-width: 768px) {
	.bloco-verde p {
		font-size: 1.125rem;
	}
}

@media (max-width: 767px) {
	/* Selos da App Store e do Google Play lado a lado (decisão 101). */
	.bloco-verde .botoes {
		width: 100%;
		gap: 10px;
	}

	/* Em telas estreitas (320 px) os dois encolhem juntos, na mesma altura, em vez de um descer. */
	.bloco-verde .botoes:has(.selo-app) {
		flex-wrap: nowrap;
	}

	/* Base = largura do selo a 40 px de altura (ac_botoes_app); encolhem na mesma proporção. */
	.bloco-verde .selo-app {
		flex: 0 1 120px;
		min-width: 0;
	}

	.bloco-verde .selo-app:has(img[width="135"]) {
		flex-basis: 135px;
	}

	.bloco-verde .selo-app img {
		width: 100%;
		height: auto;
	}

	.bloco-verde .botao {
		width: 100%;
	}
}

/* Passos numerados (Clube): número na mesma linha do título do quadro. */
.passo__titulo {
	display: flex;
	align-items: center;
	gap: 12px;
}

.passo__numero {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--amarelo-marca);
	color: var(--verde-marca);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 18px;
}

/* ---------- Formulários ---------- */
.formulario {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 15px;
	font-weight: 600;
}

.campo__dica {
	font-weight: 400;
	color: var(--muted);
	font-size: 14px;
}

.campo input,
.campo select,
.campo textarea {
	width: 100%;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-card);
	background: var(--bg);
	color: var(--text);
	font-size: 16px;
	font-weight: 400;
}

.campo textarea {
	padding: 12px 14px;
	resize: vertical;
	min-height: 140px;
}

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
	outline-offset: 0;
	border-color: var(--verde-marca);
}

.campo [aria-invalid="true"] {
	border-color: #b3261e;
}

.campos-lado {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.campos-lado > * {
	flex: 1 1 220px;
}

.consentimento {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--muted);
	cursor: pointer;
}

.consentimento input {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--verde-marca);
}

.armadilha {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Confirmador Cloudflare Turnstile: ocupa a linha inteira e some quando não precisa de clique */
.confirmador {
	flex-basis: 100%;
}

.confirmador:empty {
	display: none;
}

/* O atributo hidden sempre esconde, mesmo em blocos com display próprio (.pilha, flex etc.). */
[hidden] {
	display: none !important;
}

/* Granel: seletor de peso com de/por (decisão 70) */
.granel {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.granel__rotulo {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
}

.granel__pesos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.granel__peso {
	min-height: 40px;
	padding: 6px 12px;
	border: 1px solid var(--text);
	border-radius: 6px;
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.granel__peso:hover {
	border-color: var(--verde-marca);
}

.granel__peso[aria-checked="true"] {
	background: var(--verde-marca);
	border-color: var(--verde-marca);
	color: #fff;
}

.granel__peso:focus-visible {
	outline: 3px solid var(--amarelo-marca);
	outline-offset: 2px;
}

.granel__de {
	margin: 0;
	color: var(--muted);
	font-size: 15px;
}

.granel__por {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: var(--verde-marca);
}

.granel__off {
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--amarelo-marca);
	color: var(--verde-marca);
	font-size: 13px;
	font-weight: 700;
}

.granel__kg {
	margin: 0;
	font-size: 15px;
}

.produto__preco--indisponivel {
	color: var(--muted);
}

.produto__esgotado {
	gap: 4px;
}

.aviso {
	border-radius: var(--radius-card);
	padding: 14px 16px;
	font-size: 15px;
	line-height: 1.5;
}

.aviso--ok {
	background: #e4f2ec;
	color: #0f5a42;
	border: 1px solid #b5dccb;
}

.aviso--erro {
	background: #fbeaea;
	color: #8c1d18;
	border: 1px solid #f0c4c1;
}

.obrigatorio {
	color: #8c1d18;
}

/* Newsletter */
.newsletter {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	align-items: center;
	justify-content: space-between;
}

.newsletter__texto {
	flex: 1 1 360px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.newsletter__titulo {
	font-size: 1.375rem;
}

@media (min-width: 768px) {
	.newsletter__titulo {
		font-size: 1.75rem;
	}
}

.newsletter__form {
	flex: 1 1 400px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.newsletter__form input[type="email"] {
	flex: 1 1 220px;
	height: 50px;
	padding: 0 18px;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-pill);
	background: var(--surface);
	font-size: 16px;
}

.newsletter__form .consentimento {
	flex-basis: 100%;
}

@media (max-width: 767px) {
	.newsletter__form .botao {
		width: 100%;
	}
}

/* ---------- FAQ ---------- */
.faq-assuntos {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.faq-assuntos__titulo {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 6px;
}

.faq-assuntos a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border-radius: var(--radius-card);
	background: var(--grid);
	font-size: 15px;
	font-weight: 500;
}

.faq-assuntos a:hover {
	background: #d4ddd8;
}

@media (max-width: 767px) {
	.faq-assuntos {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.faq-assuntos__titulo {
		flex-basis: 100%;
	}

	.faq-assuntos a {
		border-radius: var(--radius-pill);
	}
}

.faq-grupo {
	display: flex;
	flex-direction: column;
	gap: 12px;
	scroll-margin-top: 16px;
}

.faq-grupo h2 {
	font-size: 1.375rem;
	margin-bottom: 4px;
}

@media (min-width: 768px) {
	.faq-grupo h2 {
		font-size: 1.625rem;
	}
}

.pergunta {
	border: 1px solid var(--line);
	border-radius: var(--radius-img);
	background: var(--surface);
}

.pergunta summary {
	list-style: none;
	cursor: pointer;
	min-height: 44px;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 16px;
	font-weight: 600;
}

.pergunta summary::-webkit-details-marker {
	display: none;
}

.pergunta summary svg {
	flex: none;
	transition: transform 0.15s ease;
}

.pergunta[open] summary svg {
	transform: rotate(180deg);
}

.pergunta__resposta {
	padding: 0 18px 18px;
	font-size: 16px;
	line-height: 1.65;
	color: var(--muted);
}

.pergunta__resposta > * + * {
	margin-top: 10px;
}

@media (min-width: 768px) {
	.pergunta summary {
		padding: 18px 20px;
		font-size: 17px;
	}

	.pergunta__resposta {
		padding: 0 20px 20px;
	}
}

/* ---------- Artigo ---------- */
.artigo-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	padding-block: 14px;
	border-block: 1px solid var(--line);
	font-size: 15px;
	color: var(--muted);
}

.artigo-meta strong {
	color: var(--text);
}

.compartilhar {
	display: flex;
	align-items: center;
	gap: 8px;
}

.botao-redondo {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--input-border);
	background: var(--surface);
	color: var(--verde-marca);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}

.botao-redondo:hover {
	background: var(--grid);
}

.artigo-resumo {
	font-size: 1.125rem;
	line-height: 1.55;
	color: var(--muted);
}

@media (min-width: 768px) {
	.artigo-resumo {
		font-size: 1.25rem;
	}
}

.artigo-titulo {
	font-size: 2rem;
	line-height: 1.1;
}

@media (min-width: 768px) {
	.artigo-titulo {
		font-size: 3rem;
	}
}

.artigo-capa {
	aspect-ratio: 16 / 8;
	border-radius: var(--radius-card);
	overflow: hidden;
}

.artigo-capa .imagem-vazia,
.artigo-capa img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 0;
}

.sumario {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sumario__titulo {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 4px;
}

.sumario a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 2px 0;
	font-size: 15px;
	color: var(--verde-marca);
}

.sumario a:hover {
	text-decoration: underline;
}

.caixa-amarela {
	background: var(--amarelo-marca);
	color: var(--verde-marca);
	border-radius: var(--radius-card);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.caixa-amarela a {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.autor {
	flex-direction: row;
	gap: 20px;
	align-items: center;
}

.autor__foto {
	width: 72px;
	height: 72px;
	flex: none;
	border-radius: 50%;
	overflow: hidden;
}

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

.autor__iniciais {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--verde-marca);
	color: var(--amarelo-marca);
	font-weight: 700;
	font-size: 1.5rem;
	letter-spacing: 0.02em;
}

.autor__texto {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.autor__rotulo {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.autor__nome {
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
}

.autor__bio {
	margin: 4px 0 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--muted);
}

@media (max-width: 480px) {
	.autor {
		gap: 14px;
		align-items: flex-start;
	}

	.autor__foto {
		width: 56px;
		height: 56px;
	}

	.autor__iniciais {
		font-size: 1.2rem;
	}
}

.vizinhos {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.vizinhos a {
	flex: 1 1 320px;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-card);
	padding: 18px 20px;
	background: var(--surface);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vizinhos a:hover {
	background: var(--grid);
}

.vizinhos__rotulo {
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
}

.vizinhos__titulo {
	font-size: 17px;
	font-weight: 600;
}

.vizinhos__proximo {
	text-align: right;
}

/* Destaque do blog */
.post-destaque {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.post-destaque__imagem {
	flex: 1 1 480px;
	min-height: 220px;
}

.post-destaque__imagem .imagem-vazia,
.post-destaque__imagem img {
	width: 100%;
	height: 100%;
	min-height: 220px;
	object-fit: cover;
	border-radius: 0;
}

.post-destaque__corpo {
	flex: 1 1 400px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
}

.post-destaque__titulo {
	font-size: 1.5rem;
	line-height: 1.15;
}

.post-destaque__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

@media (min-width: 768px) {
	.post-destaque__imagem,
	.post-destaque__imagem img,
	.post-destaque__imagem .imagem-vazia {
		min-height: 340px;
	}

	.post-destaque__corpo {
		padding: 40px;
		gap: 16px;
	}

	.post-destaque__titulo {
		font-size: 2rem;
	}
}

/* Paginação */
.paginacao {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.paginacao--solta {
	margin-top: 24px;
}

.paginacao .page-numbers {
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-card);
	border: 1px solid var(--input-border);
	background: var(--surface);
}

.paginacao .page-numbers.current {
	background: var(--verde-marca);
	border-color: var(--verde-marca);
	color: #fff;
	font-weight: 600;
}

.paginacao .page-numbers.dots {
	border: 0;
	background: none;
}

.paginacao .prev,
.paginacao .next {
	font-weight: 600;
}

/* ---------- Rodapé ---------- */
.site-rodape {
	background: var(--verde-marca);
	color: var(--rodape-texto);
}

.site-rodape__colunas {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 36px;
	padding-top: 32px;
	padding-bottom: 32px;
}

@media (min-width: 768px) {
	.site-rodape__colunas {
		padding-top: 48px;
	}
}

.rodape-coluna {
	flex: 1 1 240px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 15px;
	line-height: 1.5;
}

.rodape-coluna--marca {
	flex-basis: 260px;
	gap: 14px;
}

.rodape-coluna--links {
	flex-basis: 170px;
}

.rodape-coluna__titulo {
	font-size: 15px;
	font-weight: 600;
	color: var(--rodape-texto);
}

.rodape-coluna ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* 32 px: lista compacta e ainda acima da área de toque mínima (24 px, WCAG 2.2). */
.rodape-coluna ul a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

.rodape-whatsapp {
	min-height: 44px;
	color: #fff;
}

.rodape-whatsapp:hover {
	text-decoration: none !important;
}

.rodape-coluna a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rodape-suave {
	color: var(--sobre-verde-suave);
	font-size: 14px;
}

.rodape-logo img {
	height: 48px;
	width: auto;
}

.redes {
	display: flex;
	gap: 10px;
	margin-top: 4px;
	list-style: none;
	padding: 0;
}

/* Selos das lojas de aplicativos do Clube, abaixo das redes */
.rodape-apps {
	margin-top: 24px;
}

.rodape-apps p {
	margin: 0 0 10px;
	font-size: 14px;
}

.rodape-apps__selos {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.rodape-apps .selo-app img {
	height: 40px;
}

.redes a,
.redes__pendente {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--rodape-borda);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--rodape-texto);
}

.redes__pendente {
	border-style: dashed;
	opacity: 0.7;
}

.redes a:hover {
	background: rgba(255, 255, 255, 0.08);
}

.site-rodape__institucional {
	border-top: 1px solid var(--rodape-linha);
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 16px;
	padding-bottom: 16px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--sobre-verde-suave);
}

.site-rodape__institucional p {
	margin: 0;
}

.site-rodape__institucional a {
	text-decoration: underline;
}

.site-rodape__empresa {
	font-weight: 600;
}

.site-rodape__base {
	border-top: 1px solid var(--rodape-linha);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	justify-content: space-between;
	padding-top: 16px;
	padding-bottom: 32px;
	font-size: 13px;
	color: var(--sobre-verde-suave);
}

.site-rodape__base p {
	margin: 0;
}

.site-rodape__base ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.site-rodape__base a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.site-rodape__base a:hover {
	text-decoration: underline;
}

.site-rodape__link-botao {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.site-rodape__link-botao:hover {
	text-decoration: underline;
}

/* ---------- Utilitários ---------- */
.pilha {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pilha--8 {
	gap: 8px;
}

.pilha--16 {
	gap: 16px;
}

.pilha--20 {
	gap: 20px;
}

.pilha--40 {
	gap: 40px;
}

.apoio {
	color: var(--muted);
}

.texto-16 {
	font-size: 16px;
}

.forte {
	font-weight: 600;
}

.mt-0 {
	margin-top: 0;
}

.altura-cheia {
	height: 100%;
}

.botao--pendente {
	cursor: default;
	opacity: 0.85;
}

.botao--pendente .marcador {
	background: rgba(32, 68, 54, 0.12);
	color: var(--verde-marca);
	font-size: 13px;
}

/* Faixas roláveis sem barra visível (a rolagem continua por toque, mouse e teclado). */
.menu-principal__trilho,
.faixa-rolavel,
.trilho {
	scrollbar-width: none;
}

.menu-principal__trilho::-webkit-scrollbar,
.faixa-rolavel::-webkit-scrollbar,
.trilho::-webkit-scrollbar {
	display: none;
}

.foto-bloco {
	height: 220px;
}

@media (min-width: 768px) {
	.foto-bloco {
		height: 320px;
	}
}

.foto-bloco > * {
	height: 100%;
}

.botao--pendente {
	flex-direction: column;
	gap: 2px;
	padding-block: 8px;
}

/* Alvos de toque de pelo menos 44px sem mudar o desenho */
a.etiqueta-categoria {
	position: relative;
}

a.etiqueta-categoria::before {
	content: "";
	position: absolute;
	inset: -8px -4px;
}

.caixa-amarela a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.cartao.loja-linha {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px 24px;
}

/* ---------- Catálogo ---------- */
.filtros {
	border: 0;
}

.filtros__abrir {
	list-style: none;
	width: 100%;
}

.filtros__abrir::-webkit-details-marker {
	display: none;
}

.filtros__corpo {
	display: flex;
	flex-direction: column;
	margin-top: 12px;
}

@media (min-width: 768px) {
	.filtros__abrir {
		display: none;
	}

	.filtros__corpo {
		margin-top: 0;
	}
}

/* Painel de filtros no estilo Mundo Verde: caixa com título e grupos recolhíveis com seta. */
.filtros__corpo {
	gap: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
}

.filtros__titulo {
	margin: 0;
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 600;
	border-bottom: 1px solid var(--line);
}

.filtro {
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
}

.filtro__titulo,
.filtro__cat > summary,
.filtro__mais > summary {
	list-style: none;
	cursor: pointer;
}

.filtro__titulo::-webkit-details-marker,
.filtro__cat > summary::-webkit-details-marker,
.filtro__mais > summary::-webkit-details-marker {
	display: none;
}

.filtro__titulo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 32px;
	font-size: 15px;
	font-weight: 600;
}

/* Seta: para baixo fechada, para cima aberta. */
.filtro__titulo::after,
.filtro__cat > summary::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	margin: 0 4px 4px 12px;
	border: solid var(--muted);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.filtro[open] > .filtro__titulo::after,
.filtro__cat[open] > summary::after {
	margin-bottom: -2px;
	transform: rotate(-135deg);
}

.filtro__opcoes {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 6px;
}

.filtro-opcao {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 32px;
	font-size: 14px;
	cursor: pointer;
}

.filtro-opcao__qtd {
	margin-left: -4px;
	color: var(--muted);
	font-size: 12px;
}

.filtro-opcao input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--verde-marca);
}

.filtro__mais > summary {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	font-size: 13px;
	font-weight: 600;
	color: var(--verde-marca);
	text-decoration: underline;
}

.filtro__mais[open] > summary {
	order: 1;
}

.filtro__ver-menos,
.filtro__mais[open] .filtro__ver-mais {
	display: none;
}

.filtro__mais[open] .filtro__ver-menos {
	display: inline;
}

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

.filtro ul a {
	display: flex;
	align-items: center;
	min-height: 34px;
	font-size: 14px;
}

.filtro ul a:hover {
	text-decoration: underline;
}

.filtro__cat > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Subcategorias, recuadas sob a categoria */
.filtro ul.filtro__sub {
	margin: 0 0 6px 2px;
	padding-left: 14px;
	border-left: 2px solid var(--line);
}

.filtro__sub a {
	min-height: 30px;
	font-size: 13px;
}

.filtros__corpo > .botoes {
	padding: 12px 16px;
}

.filtros--auto .filtros__aplicar,
.filtros--auto .filtros__corpo > .botoes:not(:has(a)) {
	display: none;
}

/* Celular: filtro em tela cheia, aberto pelo botão "Filtrar produtos" (classe posta pelo script do catálogo). */
.filtros__fechar {
	display: none;
}

@media (max-width: 767px) {
	.filtros--painel .filtros[open] > .filtros__corpo {
		position: fixed;
		inset: 0;
		z-index: 950;
		margin: 0;
		border: 0;
		border-radius: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.filtros--painel .filtros__titulo {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: var(--surface);
		font-size: 20px;
	}

	.filtros--painel .filtros__fechar {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: -8px -8px -8px 0;
		border: 0;
		border-radius: 50%;
		background: var(--verde-marca);
		color: #fff;
		font-size: 26px;
		line-height: 1;
		cursor: pointer;
	}

	.filtros--painel .filtros__corpo > .botoes {
		position: sticky;
		bottom: 0;
		margin-top: auto;
		background: var(--surface);
		border-top: 1px solid var(--line);
	}

	.filtros--painel .filtros__aplicar {
		flex: 1;
	}
}

html.sem-rolagem {
	overflow: hidden;
}

.filtro ul a[aria-current] {
	font-weight: 600;
	color: var(--verde-marca);
	text-decoration: underline;
	text-decoration-color: var(--amarelo-marca);
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

.catalogo__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ordenar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	font-size: 15px;
}

.ordenar select {
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-card);
	background: var(--surface);
	font-size: 15px;
}

.grade-produtos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.grade-produtos > li {
	display: flex;
}

.grade-produtos .cartao-produto {
	flex: 1;
}

/* Na grade, as 4 partes do cartão (foto, nome, preço, disponibilidade) dividem as linhas com os
   vizinhos: se um nome ou preço quebra em 2 linhas, os outros cartões da fileira acompanham. */
@supports (grid-template-rows: subgrid) {
	.grade-produtos > li {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.grade-produtos .cartao-produto {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
		row-gap: 10px;
		align-items: start;
	}

	.grade-produtos .cartao-produto > .disponibilidade {
		margin-top: 0;
	}
}

@media (min-width: 768px) {
	.grade-produtos .cartao-produto {
		row-gap: 12px;
	}
}

@media (min-width: 768px) {
	.grade-produtos {
		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
		gap: 20px;
	}
}

/* No celular, todo cartão de produto (catálogo, carrossel da Início, Clube, relacionados) usa os mesmos tamanhos. */
@media (max-width: 767px) {
	.cartao-produto .preco {
		font-size: 18px;
	}

	.cartao-produto .cartao-produto__nome {
		font-size: 15px;
	}

	.cartao-produto .disponibilidade {
		font-size: 13px;
		align-items: flex-start;
	}

	.cartao-produto .disponibilidade::before {
		margin-top: 5px;
	}
}

/* ---------- Produto ---------- */
.produto__topo {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	align-items: flex-start;
	padding-top: 20px;
	padding-bottom: var(--secao);
}

.galeria {
	flex: 1 1 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.galeria__principal {
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-card);
	overflow: hidden;
	background: var(--surface);
	display: flex;
}

.galeria__principal > * {
	flex: 1;
	border-radius: 0;
}

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

/* Celular: a foto quadrada ocupava a tela inteira e empurrava o preço para baixo da dobra. */
@media (max-width: 767px) {
	.galeria__principal {
		aspect-ratio: auto;
		height: min(calc(100vw - 32px), 34vh);
	}

	.galeria__principal img {
		object-fit: contain;
	}
}

.galeria__miniaturas {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

.galeria__miniaturas a {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-img);
	overflow: hidden;
	border: 2px solid transparent;
	background: var(--surface);
}

.galeria__miniaturas a[aria-pressed="true"] {
	border-color: var(--verde-marca);
}

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

.produto__info {
	flex: 1 1 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.produto__nome {
	font-size: 1.875rem;
	line-height: 1.1;
}

.produto__preco {
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.1;
}

.produto__parcelas,
.produto__cashback {
	font-size: 16px;
	line-height: 1.4;
}

.produto__parcelas strong,
.produto__cashback strong {
	font-weight: 600;
	white-space: nowrap; /* "R$" e o valor nunca se separam na quebra de linha. */
}

.produto__cashback {
	margin-top: 4px;
}

.produto__preco .preco__unidade {
	font-size: 1rem;
}

@media (min-width: 768px) {
	.produto__nome {
		font-size: 2.5rem;
	}

	.produto__preco {
		font-size: 2.375rem;
	}
}

.opcoes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.opcao {
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-card);
	background: var(--surface);
	font-size: 15px;
	cursor: pointer;
}

.opcao:hover {
	border-color: var(--verde-marca);
}

a.opcao {
	display: inline-flex;
	align-items: center;
	color: var(--text);
	text-decoration: none;
}

.opcao[aria-current="page"],
.opcao[aria-pressed="true"] {
	border: 2px solid var(--verde-marca);
	background: var(--grid);
	padding: 0 15px;
	font-weight: 600;
}







.botao--grande {
	min-height: 56px;
	font-size: 17px;
	width: 100%;
}

/* ---------- Página de produto, modelo novo (decisão 83) ---------- */
.produto__resumo {
	color: var(--muted);
	font-size: 16px;
	line-height: 1.5;
}

.produto__rotulo {
	font-size: 15px;
	font-weight: 600;
}

/* Preço à esquerda; oferta do Clube à direita (embaixo no celular). */
.produto__precos {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px 24px;
	padding-block: 18px;
	border-block: 1px solid var(--line);
}

.produto__precos > .pilha {
	flex: 1 1 220px;
}

.produto__nota {
	font-size: 12.5px;
	color: var(--muted);
}

.clube-oferta {
	flex: 0 1 260px;
	padding: 12px 14px;
	border: 1px solid #f0d9a8;
	border-radius: var(--radius-card);
	background: var(--amb-bg);
	color: var(--amb);
}

.clube-oferta__titulo {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.clube-oferta__valor {
	margin-top: 2px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.25;
}

.clube-oferta__valor s {
	font-size: 14px;
	font-weight: 500;
	color: var(--muted);
}

.clube-oferta__info {
	margin-top: 4px;
	font-size: 13px;
	color: var(--muted);
}

.clube-oferta a {
	color: var(--amb);
	font-weight: 600;
}

/* Menu suspenso de sabor: abre para baixo; "Indisponível" como nas lojas. */
.seletor {
	position: relative;
}

.seletor__campo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-card);
	background: var(--surface);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.seletor__campo::-webkit-details-marker {
	display: none;
}

.seletor[data-vazio] .seletor__campo {
	color: var(--muted);
	font-weight: 400;
}

.seletor[open] .seletor__campo {
	border-color: var(--verde-marca);
}

.seletor__campo svg {
	flex: none;
	transition: transform 0.2s;
}

.seletor[open] .seletor__campo svg {
	transform: rotate(180deg);
}

.seletor__lista {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 320px;
	overflow-y: auto;
	margin: 0;
	padding: 6px;
	list-style: none;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-card);
	background: var(--surface);
	box-shadow: 0 12px 28px rgba(20, 33, 28, 0.14);
}

.seletor__opcao {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--text);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.seletor__opcao:hover,
.seletor__opcao[aria-current="page"],
.seletor__opcao[aria-pressed="true"] {
	background: var(--grid);
}

.seletor__opcao--off {
	color: var(--muted);
	font-weight: 500;
}

.seletor__ind {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	background: var(--grid);
	color: var(--muted);
	font-size: 12px;
	font-weight: 600;
}

.seletor__ind::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--off);
}

/* Tamanhos em caixas, só com o tamanho. */
.opcoes--caixas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

.opcoes--caixas .opcao[aria-pressed="true"] {
	background: var(--verde-marca);
	border-color: var(--verde-marca);
	color: #fff;
}

/* Lojas lado a lado (só leitura): "Loja 1 - Centro" e, embaixo, a disponibilidade, centralizados. */
.lojas-grade {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	width: fit-content; /* Caixas do tamanho do maior nome, sem sobra nas laterais (todas iguais). */
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.loja-caixa {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 8px 10px;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-card);
	background: var(--surface);
	text-align: center;
}

.loja-caixa__nome {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.loja-caixa .disponibilidade {
	justify-content: center;
	font-size: 14px;
}

/* Quantidade + WhatsApp com o total. */
/* Em telas estreitas (320 px) o botão desce para a linha de baixo em vez de passar da borda. */
.pedido {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.qtd {
	flex: none;
	align-self: center;
}

.qtd__campo {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 48px;
	padding: 0 4px;
	font-size: 15px;
	cursor: pointer;
	list-style: none;
	white-space: nowrap;
}

.qtd__campo::-webkit-details-marker {
	display: none;
}

.qtd__campo svg {
	transition: transform 0.2s;
}

.qtd[open] .qtd__campo svg {
	transform: rotate(180deg);
}

.qtd__lista {
	right: auto;
	width: 260px;
	max-height: none;
	padding: 6px 0;
}

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

.qtd__lista .seletor__opcao {
	border-radius: 0;
	border-left: 3px solid transparent;
	font-weight: 500;
}

.qtd__lista .seletor__opcao[aria-pressed="true"] {
	border-left-color: var(--verde-marca);
	background: var(--bg);
	color: var(--verde-marca);
	font-weight: 700;
}

.qtd__outra {
	display: grid;
	gap: 6px;
	padding: 12px 14px 8px;
	font-size: 14px;
}

.qtd__outra-campo {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 4px 4px 10px;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-card);
}

.qtd__outra-campo input {
	flex: 1;
	min-width: 0;
	height: 36px;
	border: 0;
	font: inherit;
	font-size: 16px;
}

.qtd__outra-campo input:focus {
	outline: none;
}

.qtd__outra-campo:focus-within {
	border-color: var(--verde-marca);
}

.qtd__outra-campo button {
	padding: 8px 12px;
	border: 0;
	border-radius: var(--radius-img);
	background: var(--verde-marca);
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.qtd__outra-campo button:disabled {
	background: var(--grid);
	color: var(--muted);
	cursor: default;
}

/* "Adicionar à lista": botão claro e menor, ao lado da quantidade; o destaque fica no "Pedir agora". */
.botao--lista {
	min-height: 48px;
	gap: 8px;
	border: 1px solid #cfe3d7;
	background: #e8f3ec;
	color: var(--verde-marca);
	font-size: 15px;
	font-weight: 600;
}

.botao--lista:hover {
	background: #d9ecdf;
}

.pedido .botao {
	flex: 1 1 auto;
}

.erro-campo {
	color: #b42318;
	font-size: 14px;
	font-weight: 600;
}

.link-botao {
	padding: 0;
	border: 0;
	background: none;
	color: var(--verde-marca);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.lista-ok {
	font-size: 14px;
	text-align: center;
}

/* Botão da lista no cabeçalho. */
.lista-botao {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	border: 0;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
}

.lista-botao + .menu-alternar {
	margin-left: 0;
}

.comprar-agora {
	min-height: 40px;
	margin-left: auto;
	padding: 0 16px;
	font-size: 14px;
	white-space: nowrap;
}

.comprar-agora + .lista-botao {
	margin-left: 0;
}

/* Celulares estreitos (até 389 px): logo, "Comprar agora", carrinho e menu cabem numa linha só. */
@media (max-width: 389px) {
	.site-cabecalho__linha {
		column-gap: 6px;
	}

	.comprar-agora {
		padding: 0 10px;
		font-size: 13px;
	}

	.site-cabecalho__linha .lista-botao,
	.menu-alternar {
		width: 40px;
		height: 40px;
	}
}

/* História do Quem somos: o texto ficou longo; a foto vai para o topo (antes ficava centralizada
   no meio da coluna, com vazio em cima e embaixo) e, no computador, acompanha a leitura. */
.quem-historia {
	align-items: flex-start;
}

.quem-historia > .foto-bloco {
	order: -1;
}

@media (min-width: 768px) {
	.quem-historia > .foto-bloco {
		order: 0;
		position: sticky;
		top: 24px;
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

/* Quem somos no celular: "O que oferecemos" em 2 colunas e valores mais leves (eram 11 blocos empilhados). */
@media (max-width: 767px) {
	.quem-lista {
		gap: 10px;
	}

	.quem-lista > * {
		flex: 1 1 calc(50% - 5px);
	}

	.quem-lista .cartao {
		padding: 14px;
		font-size: 15px !important;
	}

	.quem-valores {
		gap: 8px;
	}

	.quem-valores .cartao {
		padding: 14px 16px;
		font-size: 16px !important;
	}
}

/* Mapa do site: cartões com a altura do próprio conteúdo (antes todos esticavam até os 2.000 px
   da lista de marcas) e listas longas em colunas. */
.mapa-site {
	align-items: flex-start;
}

.mapa-site__grupo {
	flex-basis: 240px;
	gap: 8px;
}

.mapa-site__grupo--largo {
	flex-basis: 100%;
}

.mapa-site__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mapa-site__grupo--largo .mapa-site__lista {
	columns: 2;
	column-gap: 24px;
}

@media (min-width: 768px) {
	.mapa-site__grupo--largo .mapa-site__lista {
		columns: 4;
	}
}

.mapa-site__lista li {
	break-inside: avoid;
}

.mapa-site__lista .link-seta {
	min-height: 36px;
	font-weight: 500;
}

/* Voltar ao topo: canto esquerdo, porque o direito já tem o carrinho e o WhatsApp. */
.voltar-topo:not([hidden]) {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 900;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface);
	color: var(--verde-marca);
	box-shadow: 0 6px 18px rgba(20, 33, 28, 0.18);
	cursor: pointer;
}

.voltar-topo svg {
	transform: rotate(180deg);
}

.voltar-topo:hover {
	background: var(--grid);
}

.voltar-topo:focus-visible {
	outline: 3px solid var(--verde-marca);
	outline-offset: 3px;
}

@media (min-width: 1100px) {
	.voltar-topo:not([hidden]) {
		left: 24px;
		bottom: 24px;
	}
}

/* Carrinho que acompanha a página (lista pendente, cabeçalho fora da tela). */
.lista-botao--flutuante:not([hidden]) {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 900;
	width: 56px;
	height: 56px;
	background: var(--verde-marca);
	box-shadow: 0 6px 18px rgba(20, 33, 28, 0.3);
}

/* WhatsApp fixo no canto (só no computador); o carrinho flutuante sobe para cima dele. */
.whatsapp-flutuante {
	display: none;
}

@media (min-width: 1100px) {
	.whatsapp-flutuante {
		position: fixed;
		right: 24px;
		bottom: 24px;
		z-index: 900;
		display: grid;
		place-items: center;
		width: 60px;
		height: 60px;
		border-radius: var(--radius-pill);
		background: #15803d;
		color: #fff;
		box-shadow: 0 6px 18px rgba(20, 33, 28, 0.3);
		transition: transform 0.2s ease;
	}

	.whatsapp-flutuante:hover {
		transform: scale(1.06);
	}

	.whatsapp-flutuante:focus-visible {
		outline: 3px solid var(--amarelo-marca);
		outline-offset: 3px;
	}

	.lista-botao--flutuante:not([hidden]) {
		right: 26px;
		bottom: 96px;
	}
}

.lista-botao__qtd {
	position: absolute;
	top: -2px;
	right: -2px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: var(--radius-pill);
	background: var(--amarelo-marca);
	color: var(--verde-marca);
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
}

.lista-botao:focus-visible {
	outline: 3px solid var(--amarelo-marca);
	outline-offset: 2px;
}

@media (min-width: 1100px) {
	.lista-botao {
		order: 10;
		margin-left: 0;
	}

	.comprar-agora {
		display: none;
	}
}

/* Lista de pedido: painel na lateral direita, que entra e sai deslizando. */
.lista-pedido {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(420px, 100vw);
	max-width: 100vw;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--text);
	background: var(--surface);
	box-shadow: -12px 0 32px rgba(20, 33, 28, 0.2);
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

.lista-pedido.lista-pedido--aberta {
	transform: none;
}

.lista-pedido[open] {
	display: flex;
	flex-direction: column;
}

.lista-pedido::backdrop {
	background: rgba(20, 33, 28, 0);
	transition: background 0.3s ease;
}

.lista-pedido.lista-pedido--aberta::backdrop {
	background: rgba(20, 33, 28, 0.45);
}

@media (prefers-reduced-motion: reduce) {
	.lista-pedido,
	.lista-pedido::backdrop {
		transition: none;
	}
}

.lista-pedido__topo {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px 8px 14px;
	background: var(--verde-marca);
	color: #fff;
}

.lista-pedido__topo h2 {
	font-size: 17px;
	color: #fff;
}

.lista-pedido__fechar {
	flex: none;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

/* Lista no modelo do Mercado Livre (decisão 103): fundo cinza, itens em blocos brancos. */
.lista-pedido__aviso {
	margin: 0;
	padding: 8px 16px;
	background: var(--amb-bg);
	color: var(--amb);
	font-size: 13px;
	font-weight: 600;
}

.lista-pedido__corpo {
	flex: 1;
	overflow-y: auto;
	display: grid;
	align-content: start;
	gap: 10px;
	padding: 12px;
	background: var(--bg);
}

.lista-pedido__vazia {
	display: grid;
	justify-items: center;
	gap: 8px;
	padding: 40px 8px;
	text-align: center;
	color: var(--muted);
}

.lista-pedido__vazia[hidden] {
	display: none;
}

.lista-pedido__vazia p {
	margin: 0;
}

.lista-pedido__vazia-icone {
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	margin-bottom: 8px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--pos) 14%, var(--surface));
	color: var(--pos);
}

.lista-pedido__vazia-titulo {
	color: var(--text);
	font-weight: 700;
	font-size: 18px;
}

.lista-pedido__vazia .botao {
	width: 100%;
	margin-top: 12px;
}

/* Cashback do Clube: caixa de borda verde, como a do cupom do Mercado Livre. */
.lista-pedido__cashback {
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--pos);
	border-radius: var(--radius-card);
	background: var(--surface);
	color: var(--pos);
	font-size: 14px;
	line-height: 1.4;
}

.lista-pedido__cashback a {
	color: inherit;
	font-weight: 700;
}

.lista-pedido__itens {
	margin: 0;
	padding: 0;
	list-style: none;
	border-radius: var(--radius-card);
	background: var(--surface);
}

.lista-item {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 12px;
	padding: 12px;
}

.lista-item + .lista-item {
	border-top: 1px solid var(--line);
}

.lista-item__foto {
	width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: var(--radius-img);
	background: var(--bg);
}

.lista-item__topo {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.lista-item__nome {
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--text);
	font-size: 14px;
	line-height: 1.3;
	text-decoration: none;
}

.lista-item__remover {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	margin: -6px -6px 0 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: none;
	color: var(--muted);
	cursor: pointer;
}

.lista-item__remover:hover {
	color: var(--text);
	background: var(--grid);
}

.lista-item__base {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
	margin-top: 8px;
}

.lista-item__qtd {
	display: flex;
	align-items: center;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-pill);
}

.lista-item__qtd button {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: var(--radius-pill);
	background: none;
	color: var(--verde-marca);
	font-size: 18px;
	cursor: pointer;
}

.lista-item__qtd span {
	min-width: 20px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
}

.lista-item__preco {
	display: grid;
	justify-items: end;
	line-height: 1.2;
}

.lista-item__preco s {
	color: var(--off);
	font-size: 12px;
}

.lista-item__preco strong {
	font-size: 18px;
	font-weight: 600;
	white-space: nowrap;
}

.lista-item__preco sup {
	font-size: 11px;
	margin-left: 1px;
}

.lista-item__preco small {
	color: var(--muted);
	font-size: 12px;
}

.lista-pedido__mais {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px;
	border-radius: var(--radius-card);
	background: var(--surface);
	color: var(--verde-marca);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.lista-pedido__mais::after {
	content: "›";
	font-size: 20px;
	line-height: 1;
}

/* Rodapé fixo: nome e Clube; total à esquerda e "Enviar (n)" à direita; nota e "Esvaziar lista". */
.lista-pedido__rodape:not([hidden]) {
	display: grid;
	gap: 10px;
	padding: 10px 14px;
	border-top: 1px solid var(--line);
	background: var(--surface);
}

.lista-pedido__cliente {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 12px;
	align-items: end;
}

.lista-pedido__cliente .erro-campo {
	grid-column: 1 / -1;
}

.lista-pedido__campo {
	display: grid;
	gap: 4px;
}

.lista-pedido__campo label {
	font-size: 13px;
	color: var(--muted);
}

.lista-pedido__campo input {
	width: 100%;
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-card);
	font: inherit;
	font-size: 16px;
}

.lista-pedido__sim {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	font-size: 14px;
	cursor: pointer;
}

.lista-pedido__sim input {
	width: 20px;
	height: 20px;
	accent-color: var(--verde-marca);
}

.lista-pedido__acoes {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.lista-pedido__total {
	display: grid;
	margin: 0;
	line-height: 1.2;
}

.lista-pedido__total strong {
	font-size: 22px;
	white-space: nowrap;
}

.lista-pedido__total small {
	color: var(--muted);
	font-size: 12px;
}

.lista-pedido__rodape .botao {
	flex: none;
	min-height: 48px;
	padding: 0 18px;
	border-radius: var(--radius-card);
	font-size: 15px;
}

.lista-pedido__nota {
	margin: 0;
	color: var(--muted);
	font-size: 12px;
	text-align: center;
}

.lista-pedido__limpar {
	padding: 0;
	border: 0;
	background: none;
	color: var(--muted);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.lista-pedido__limpar:hover {
	color: var(--text);
}

.aviso-neutro {
	padding: 16px;
	border-radius: var(--radius-img);
	background: var(--grid);
	font-size: 15px;
	line-height: 1.5;
	color: var(--muted);
}



.tabela-nutricional {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--input-border);
	border-radius: var(--radius-img);
	overflow: hidden;
	font-size: 15px;
}

.tabela-nutricional caption {
	text-align: left;
	font-size: 14px;
	color: var(--muted);
	padding-bottom: 8px;
}

.tabela-nutricional th,
.tabela-nutricional td {
	padding: 10px 16px;
	text-align: right;
	border-top: 1px solid var(--grid);
	font-weight: 400;
}

.tabela-nutricional th[scope="row"],
.tabela-nutricional thead th:first-child {
	text-align: left;
}

.tabela-nutricional thead th {
	background: var(--grid);
	font-size: 14px;
	font-weight: 600;
	border-top: 0;
}

.tabela-nutricional td {
	color: var(--muted);
	white-space: nowrap;
}

.tabela-nutricional abbr {
	text-decoration: none;
}

@media (min-width: 768px) {
	.catalogo__filtros {
		flex-basis: 260px;
	}
}

/* Ícones das redes em linha (a regra das listas do rodapé empilhava em coluna). */
.rodape-coluna .redes {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

/* Produto: categoria e marca acima do nome; aviso dos ingredientes. */
.produto__etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.aviso-ingredientes {
	border-left: 4px solid var(--verde-marca);
	background: var(--grid);
	padding: 10px 14px;
	border-radius: 0 6px 6px 0;
	font-size: 15px;
	line-height: 1.5;
}

/* ---------- Aviso de cookies (docs/13): barra no rodapé da tela, no estilo do Mercado Livre ---------- */
.aviso-cookies {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	pointer-events: none;
}

.aviso-cookies > * {
	pointer-events: auto;
}

.aviso-cookies__resumo {
	background: var(--surface);
	color: var(--text);
	border-top: 1px solid var(--line);
	box-shadow: 0 -4px 16px rgba(20, 33, 28, 0.12);
	padding-block: 14px;
	font-size: 15px;
	line-height: 1.5;
}

.aviso-cookies__linha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}

.aviso-cookies__linha p {
	flex: 1 1 420px;
}

.aviso-cookies__botao {
	flex: 1 1 auto;
	min-height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: 6px;
	background: var(--grid);
	color: var(--verde-marca);
	font-family: var(--font);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.aviso-cookies__botao:hover {
	background: #d3ddd8;
}

.aviso-cookies__caixa {
	width: calc(100% - 2 * var(--margem));
	max-width: 960px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	margin: 0 auto var(--margem);
	padding: 20px;
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: var(--radius-bloco);
	box-shadow: 0 8px 32px rgba(20, 33, 28, 0.22);
	font-size: 15px;
	line-height: 1.5;
}

.aviso-cookies__config {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.aviso-cookies p {
	margin: 0;
}

.aviso-cookies a {
	color: var(--verde-marca);
	text-decoration: underline;
}

/* Celular: o aviso ocupava quase metade da tela; texto menor e os 3 botões numa linha. */
@media (max-width: 767px) {
	.aviso-cookies__resumo {
		padding-block: 10px;
		font-size: 13px;
		line-height: 1.4;
	}

	.aviso-cookies__linha {
		gap: 8px;
	}

	.aviso-cookies__linha p {
		flex-basis: 100%;
	}

	.aviso-cookies__botoes {
		flex: 1 1 100%;
		flex-wrap: nowrap;
	}

	.aviso-cookies__botao {
		flex: 1 1 0;
		padding: 0 6px;
		font-size: 13px;
		white-space: normal;
	}
}

/* Áreas de toque de pelo menos 24 px (WCAG 2.2): telefone da faixa do topo, trilha e links do rodapé. */
.site-cabecalho__aviso > span > a,
.trilha a,
.rodape-coluna--links a {
	display: inline-block;
	padding-block: 6px;
}

.aviso-cookies__titulo {
	margin: 0;
	font-size: 1.125rem;
	color: var(--verde-marca);
}

.aviso-cookies__titulo:focus {
	outline: none;
}

.aviso-cookies__botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.aviso-cookies__botoes .botao {
	flex: 1 1 auto;
}

.aviso-cookies__categorias {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.aviso-cookies__categoria {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 10px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
}

.aviso-cookies__categoria input {
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--verde-marca);
}

.aviso-cookies__categoria label {
	font-weight: 600;
}

.aviso-cookies__categoria p {
	grid-column: 2;
	color: var(--muted);
	font-size: 14px;
}

.aviso-cookies__sempre {
	font-weight: 400;
	color: var(--muted);
}

@media (min-width: 768px) {
	.aviso-cookies__botoes .botao {
		flex: 0 1 auto;
	}
}

.aviso-cookies [hidden] {
	display: none;
}

/* Selos das lojas de aplicativos (Clube) */
.selo-app {
	display: inline-flex;
	border-radius: 8px;
}

.selo-app img {
	display: block;
	width: auto;
	height: 48px;
}

/* ---------- Skeleton de carregamento (decisão 54; assets/js/carregamento.js) ---------- */
@keyframes esqueleto-brilho {
	0% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0 50%;
	}
}

.esqueleto,
.esqueleto-img {
	background: linear-gradient(90deg, var(--grid) 25%, #f1f4f2 37%, var(--grid) 63%);
	background-size: 400% 100%;
	animation: esqueleto-brilho 1.4s ease infinite;
}

.esqueleto {
	display: block;
	border-radius: 6px;
}

.esqueleto-img {
	color: transparent;
}

main.carregando > :not(.esqueleto-pagina) {
	display: none;
}

.esqueleto-pagina {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 20px;
	padding-bottom: var(--secao);
	min-height: 70vh;
}

.esqueleto--trilha {
	width: 180px;
	height: 14px;
}

.esqueleto--titulo {
	width: min(520px, 80%);
	height: 40px;
	margin-bottom: 10px;
}

.esqueleto--linha {
	height: 14px;
	margin-bottom: 10px;
}

.esqueleto--imagem {
	aspect-ratio: 1;
	margin-bottom: 12px;
	border-radius: var(--radius-img);
}

.esqueleto--foto {
	aspect-ratio: 1;
	border-radius: var(--radius-card);
}

.esqueleto--botao {
	height: 52px;
	margin: 16px 0;
	border-radius: var(--radius-pill);
}

.esqueleto-grade {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.esqueleto-cartao {
	padding: 12px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
}

.esqueleto-produto {
	display: grid;
	gap: 24px;
}

.esqueleto-texto {
	max-width: 760px;
	margin-bottom: 16px;
}

@media (min-width: 768px) {
	.esqueleto-grade {
		grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
		gap: 20px;
	}

	.esqueleto-produto {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 40px;
	}
}

/* Receita no blog (decisão 71) */
.receita-galeria {
	display: grid;
	grid-template-columns: 3fr 2fr;
	grid-template-rows: 1fr 1fr;
	gap: 6px;
	aspect-ratio: 16 / 9;
	border-radius: 24px;
	overflow: hidden;
}

.receita-galeria--1 {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.receita-galeria--2 {
	grid-template-rows: 1fr;
}

.receita-galeria__item {
	position: relative;
	padding: 0;
	border: 0;
	background: var(--surface);
	cursor: zoom-in;
	overflow: hidden;
}

.receita-galeria__item:first-child {
	grid-row: 1 / -1;
}

.receita-galeria__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.receita-galeria__item:focus-visible {
	outline: 3px solid var(--amarelo-marca);
	outline-offset: -3px;
}

.receita-galeria__total {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-weight: 600;
	font-size: 16px;
}

.receita-fotos {
	width: min(960px, 100vw - 32px);
	max-height: calc(100vh - 32px);
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: var(--surface);
}

.receita-fotos::backdrop {
	background: rgba(0, 0, 0, .7);
}

.receita-fotos__lista {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
}

.receita-fotos__lista figure {
	margin: 0;
}

.receita-fotos__lista img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}

.receita-fotos__fechar {
	position: sticky;
	top: 8px;
	float: right;
	margin: 8px 8px 0 0;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	z-index: 1;
}

.receita {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 40px;
}

.texto-corrido .receita h2 {
	margin: 16px 0 0;
}

.texto-corrido .receita-cartoes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.texto-corrido .receita-cartoes li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 18px 8px;
	border-radius: 16px;
	background: var(--bg);
	text-align: center;
}

.receita-cartoes svg {
	margin-bottom: 8px;
	color: var(--verde-marca);
}

.receita-cartoes strong {
	font-size: 1.25rem;
	line-height: 1.2;
}

.receita-cartoes span {
	color: var(--muted);
	font-size: 15px;
}

.receita-ingredientes {
	border: 1px solid var(--line);
	border-radius: 18px;
	padding: 20px;
}

.receita-porcoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-bottom: 12px;
}

.receita-porcoes__rotulo {
	font-weight: 700;
	white-space: nowrap;
}

.receita-porcoes__opcoes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.receita-porcoes__opcoes button {
	min-height: 40px;
	padding: 6px 16px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--muted);
	font: inherit;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

.receita-porcoes__opcoes button[aria-checked="true"] {
	background: var(--verde-marca);
	color: #fff;
}

.receita-porcoes__opcoes button:focus-visible {
	outline: 3px solid var(--amarelo-marca);
	outline-offset: 2px;
}

.texto-corrido .receita-ingredientes__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.texto-corrido .receita-ingredientes__lista li {
	display: grid;
	grid-template-columns: 7.5em 1fr;
	gap: 12px;
	margin: 0;
	padding: 10px 0;
	border-top: 1px solid var(--line);
}

.texto-corrido .receita-ingredientes__lista li.receita-ingredientes__grupo {
	display: block;
	padding-top: 18px;
	font-weight: 700;
}

.receita-ingredientes__qtd {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.receita-ingredientes__nome a {
	margin-left: 6px;
	font-size: 14px;
	white-space: nowrap;
}

.texto-corrido .receita-passos {
	list-style: none;
	counter-reset: passo;
	margin: 0;
	padding: 0;
}

.texto-corrido .receita-passos li {
	counter-increment: passo;
	position: relative;
	margin: 0 0 16px;
	padding-left: 48px;
	min-height: 34px;
}

.receita-passos li::before {
	content: counter(passo);
	position: absolute;
	left: 0;
	top: -2px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--amarelo-marca);
	color: var(--verde-marca);
	font-weight: 700;
	display: grid;
	place-items: center;
}

@media (max-width: 600px) {
	.receita-galeria {
		aspect-ratio: 4 / 3;
		border-radius: 18px;
	}

	.texto-corrido .receita-cartoes {
		gap: 8px;
	}

	.receita-cartoes strong {
		font-size: 1.05rem;
	}

	.receita-cartoes span {
		font-size: 13px;
	}

	.texto-corrido .receita-ingredientes__lista li {
		grid-template-columns: 6em 1fr;
	}
}

/* Referências científicas do artigo (decisão 74) */
.referencias {
	border-top: 1px solid var(--line);
	padding-top: 24px;
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.texto-corrido .referencias ol {
	margin: 0;
	padding-left: 1.5em;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 15px;
	line-height: 1.5;
}

.referencias li {
	overflow-wrap: anywhere;
	scroll-margin-top: 96px;
}

.referencias li:target {
	background: var(--amb-bg);
	border-radius: 6px;
}

.referencias__revisao {
	font-size: 15px;
	color: var(--muted);
}

.chamada-ref {
	font-size: 0.72em;
	line-height: 0;
}

.chamada-ref a {
	padding: 0 1px;
}

/* Experts: vitrine com foto redonda (page-experts.php). */
.expert {
	align-items: center;
	gap: 10px;
	text-align: center;
}

.expert__foto {
	width: 128px;
	height: 128px;
	border-radius: 50%;
	object-fit: cover;
}

/* Experts: Google Forms incorporado. O Google não informa a altura de cada página do formulário
   (outro domínio), então o quadro ocupa a altura da tela e o formulário rola dentro dele:
   sem sobra em branco nas páginas curtas. */
.experts__form {
	display: block;
	width: 100%;
	height: calc(100vh - 140px);
	height: calc(100dvh - 140px);
	min-height: 480px;
	border: 1px solid var(--line);
	border-radius: var(--radius-img);
}