/*
  cardapio.css — só no template "Cardápio Digital".
  Mobile first (referência 390px). Até 959px: coluna única de no máximo 480px.
  A partir de 960px (bloco DESKTOP no fim do arquivo): duas colunas — lateral
  fixa (marca, busca, chips, preços) e listas em grade de 2 colunas.
  Ordem no celular: capa → marca → busca/chips (sticky) → preços → mais
  pedidos → salgadas → doces → rodapé → botão flutuante.
*/

/* ---------- Página e container ---------- */

.alt-cardapio {
	background: var(--cinza-100); /* mesmo cinza da página de links; aparece só nas laterais, no desktop */
}

.cardapio {
	position: relative;
	max-width: var(--largura-max);
	min-height: 100vh;
	margin: 0 auto;
	background: var(--branco);
}

@media (min-width: 521px) {
	.cardapio {
		box-shadow: 0 0 0 1px rgba(56, 30, 21, 0.06), 0 20px 60px -20px rgba(56, 30, 21, 0.25);
	}
}

/* ---------- 1. Capa + marca ---------- */

/* No celular estes dois wrappers não geram caixa: os filhos se comportam como
   filhos diretos de .cardapio (o sticky da busca continua funcionando). */
.lateral,
.lateral__caixa,
.conteudo {
	display: contents;
}

.capa {
	height: 150px;
	background: var(--cinza-foto);
	overflow: hidden;
}

.capa__img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	object-position: center 60%;
}

.hero {
	position: relative;
	margin-top: -22px;
	padding: 18px var(--gutter) 6px;
	border-radius: 22px 22px 0 0;
	background: var(--branco);
}

.hero__marca {
	display: flex;
	align-items: center;
	gap: 13px;
}

.hero__logo {
	width: 54px;
	height: 54px;
}

.hero__texto {
	min-width: 0;
}

.hero__nome {
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.hero__subtitulo {
	margin-top: 2px;
	font-size: 12px;
	color: var(--marrom-claro);
}

.hero .status {
	margin-top: 12px;
}

/* ---------- 2 + 3. Busca e chips (sticky) ---------- */

.filtros-sentinela {
	height: 1px;
	margin-top: -1px;
}

.filtros {
	position: sticky;
	top: 0;
	z-index: 10;
	padding: 10px var(--gutter) 8px;
	background: var(--branco);
	box-shadow: 0 1px 0 transparent;
	transition: box-shadow var(--transicao);
}

/* Sombra sutil só quando a barra está colada no topo (classe posta pelo JS). */
.filtros.is-colado {
	box-shadow: 0 1px 0 var(--linha), 0 6px 16px -8px rgba(56, 30, 21, 0.18);
}

/* Compensa a barra de administração do WP para quem está logado. */
.admin-bar .filtros {
	top: 32px;
}

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

/* Quantos itens cada lista mostra antes de "Ver todos" (o JS lê esta variável). */
.cardapio {
	--itens-iniciais: 5;
}

.busca {
	position: relative;
}

.busca__lupa {
	position: absolute;
	top: 50%;
	left: 15px;
	transform: translateY(-50%);
	color: var(--marrom-claro);
	pointer-events: none;
}

.busca__campo {
	width: 100%;
	height: 45px;
	padding: 0 44px 0 42px;
	border: 0;
	border-radius: 14px;
	background: var(--linha);
	color: var(--marrom);
	font-size: 16px; /* 16px evita o zoom automático do iOS ao focar */
	-webkit-appearance: none;
	appearance: none;
}

.busca__campo::placeholder {
	color: var(--marrom-claro);
	opacity: 1;
}

.busca__campo::-webkit-search-decoration,
.busca__campo::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.busca__campo:focus-visible {
	outline-offset: 0;
	border-radius: 14px;
}

.busca__limpar {
	position: absolute;
	top: 50%;
	right: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	transform: translateY(-50%);
	border: 0;
	background: none;
	color: var(--marrom-claro);
}

.chips {
	display: flex;
	gap: 8px;
	margin: 10px calc(-1 * var(--gutter)) 0;
	padding: 4px var(--gutter);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.chips::-webkit-scrollbar {
	display: none;
}

.chip {
	position: relative;
	flex: none;
	height: 36px;
	padding: 0 15px;
	border: 0;
	border-radius: var(--raio-pilula);
	background: var(--linha);
	color: var(--marrom);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color var(--transicao), color var(--transicao);
}

/* Área de toque de 44px sem mudar a altura visual de 36px. */
.chip::before {
	content: "";
	position: absolute;
	inset: -4px 0;
}

.chip:hover {
	background: var(--bege-200);
}

.chip.is-ativo {
	background: var(--laranja);
	color: var(--branco);
}

.chip.is-ativo:active {
	background: var(--laranja-escuro);
}

/* ---------- 4. Tabela de preços ---------- */

.precos {
	padding: 12px var(--gutter) 8px;
}

.precos__caixa {
	padding: 14px 16px 2px;
	border: 1.5px solid var(--linha);
	border-radius: var(--raio-card);
	background: var(--branco);
}

.precos__rotulo {
	font-size: 9px;
	letter-spacing: 0.06em;
}

.precos__linha {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 0;
}

.precos__linha + .precos__linha {
	border-top: 1px solid var(--linha);
}

.precos__esq {
	flex: 1;
	min-width: 0;
}

.precos__tamanho {
	font-size: 14px;
	font-weight: 700;
}

.precos__descricao {
	margin-top: 1px;
	font-size: 11px;
	color: var(--marrom-claro);
}

.precos__dir {
	flex: none;
	text-align: right;
}

.precos__valor {
	font-size: 15px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* Com busca ou chip ativo (classe posta pelo JS), os resultados sobem para logo
   abaixo da barra: somem a tabela de preços e o card do pedido. A barra fixa
   "Fazer pedido" continua embaixo. No desktop os dois ficam na lateral e não
   atrapalham, então só vale até 959px. */
@media (max-width: 959px) {
	.cardapio.is-filtrando .precos,
	.cardapio.is-filtrando .pedido-cta {
		display: none;
	}
}

/* ---------- Títulos de seção (mais pedidos, salgadas, doces) ---------- */

.secao__titulo {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 0 var(--gutter) 6px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.3;
}

.secao__contagem {
	font-size: 12px;
	font-weight: 600;
	color: var(--marrom-claro);
	white-space: nowrap;
}

/* ---------- Nome + ingredientes (usado nas três listas) ---------- */

.sabor__nome {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.sabor__ingredientes {
	margin-top: 4px;
	font-size: 12.5px;
	line-height: 1.38;
	color: var(--marrom-claro);
}

/* ---------- 5. Os mais pedidos ---------- */

.destaques {
	padding-top: 26px;
	background: var(--branco);
}

.destaque {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 var(--gutter);
	padding: 13px 0;
}

.destaque + .destaque {
	border-top: 1px solid var(--linha);
}

/* Foto à ESQUERDA de propósito: é o que diferencia a vitrine da lista comum. */
.destaque__foto {
	position: relative;
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: var(--raio-card);
	background: var(--cinza-foto);
}

.destaque__foto img {
	width: 72px;
	height: 72px;
	border-radius: var(--raio-card);
	object-fit: cover;
}

.destaque__foto-vazia {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 7px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--marrom-claro);
}

/* Selo do ranking: 24px, sai 6px para fora da foto, borda branca de 2px. */
.destaque__selo {
	position: absolute;
	top: -6px;
	left: -6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 2px solid var(--branco);
	border-radius: 50%;
	background: var(--laranja);
	color: var(--branco);
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
}

.destaque__texto {
	flex: 1;
	min-width: 0;
}

.destaque .sabor__nome {
	font-size: 15.5px;
}

/* ---------- 6 + 7. Salgadas e Doces ---------- */

.secao--lista {
	padding-top: 32px;
}

.secao--lista + .secao--lista {
	padding-top: 24px;
}

.sabor {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 var(--gutter);
	padding: 12px 0;
}

.sabor__texto {
	flex: 1;
	min-width: 0;
}

.sabor + .sabor {
	border-top: 1px solid var(--linha);
}

/*
  Antes do JS assumir (classe .is-pronta no <main>), o CSS já esconde do 6º
  item em diante — assim não há "pulo" de 105 para 5 itens ao carregar.
  Sem JS (html.no-js) nada é escondido: os 105 sabores ficam visíveis.
*/
.js .cardapio:not(.is-pronta) .sabores .sabor:nth-child(n + 6) {
	display: none;
}

/* Botão "Ver todos": só texto, chevron gira ao expandir. */
.ver-todos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	width: calc(100% - 2 * var(--gutter));
	min-height: 44px;
	margin: 10px var(--gutter) 6px;
	padding: 12px;
	border: 0;
	background: none;
	color: var(--cinza-500);
	font-size: 13.5px;
	font-weight: 700;
}

.ver-todos:hover {
	color: var(--marrom-claro);
}

.ver-todos__chevron {
	transition: transform 220ms ease;
}

.ver-todos[aria-expanded="true"] .ver-todos__chevron {
	transform: rotate(180deg);
}

.no-js .ver-todos {
	display: none;
}

/* Estado vazio (nada casou com a busca/chip). */
.vazio {
	padding: 40px var(--gutter) 8px;
	text-align: center;
}

.vazio__texto {
	font-size: 14px;
	color: var(--marrom-claro);
}

.vazio__limpar {
	min-height: 44px;
	margin-top: 4px;
	padding: 10px 14px;
	border: 0;
	background: none;
	color: var(--laranja);
	font-size: 14px;
	font-weight: 700;
}

/* Fecha o miolo antes do rodapé. */
#sabores {
	padding-bottom: 24px;
}

/* ---------- 8. Rodapé ---------- */

.rodape {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 30px var(--gutter) calc(30px + env(safe-area-inset-bottom, 0px));
	background: var(--marrom);
	color: var(--bege-100);
}

.rodape__marca {
	display: flex;
	align-items: center;
	gap: 11px;
}

.rodape__logo {
	width: 42px;
	height: 42px;
}

.rodape__nome {
	font-size: 16px;
	font-weight: 800;
}

/* Card translúcido do rodízio. */
.rodape__rodizio {
	padding: 13px 14px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.07);
}

.rodape__rodizio-rotulo {
	font-size: 10px;
	color: var(--laranja);
}

.rodape__rodizio-texto {
	margin-top: 5px;
	font-size: 12px;
	line-height: 1.45;
}

.rodape__info {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.rodape__info dt {
	color: var(--bege-300);
}

.rodape__info dd {
	margin-top: 5px;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
}

.rodape__mapa {
	display: block;
	width: fit-content;
	margin-top: 6px;
	min-height: 24px;
	color: var(--laranja);
	font-size: 11.5px;
	font-weight: 800;
}

.rodape__mapa:hover {
	text-decoration: underline;
}

.rodape__acoes {
	display: grid;
	gap: 9px;
}

.rodape__divisor {
	margin: 0;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.rodape__notas {
	display: grid;
	gap: 6px;
	font-size: 11px;
	line-height: 1.5;
	color: var(--bege-300);
}

.rodape__nota-legal {
	font-size: 10px;
	opacity: 0.7;
}

/* ---------- 9. Botão flutuante de WhatsApp ---------- */

.flutuante {
	position: fixed;
	right: max(20px, calc(50vw - var(--largura-max) / 2 + 20px));
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	z-index: 20;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 12px 19px 12px 17px;
	border-radius: var(--raio-pilula);
	background: var(--verde-whatsapp);
	color: var(--branco);
	font-size: 14px;
	font-weight: 700;
	box-shadow: 0 4px 14px rgba(13, 64, 31, 0.28);
	transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 0s;
}

.flutuante:hover {
	background: var(--verde-whatsapp-escuro);
}

/* Some quando o rodapé entra na tela (classe posta pelo JS). */
.flutuante.is-oculto {
	opacity: 0;
	transform: translateY(10px);
	visibility: hidden;
	pointer-events: none;
	transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
}

/* Links pendentes (WhatsApp/mapa sem URL ainda): cursor normal, sem "mão". */
[data-pendente] {
	cursor: default;
}

/* ---------- Controle de quantidade (− n +) ---------- */

.qtd {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: none;
	height: 36px;
	border-radius: var(--raio-pilula);
	background: var(--linha);
	color: var(--marrom);
	transition: background-color var(--transicao), color var(--transicao);
}

.qtd__botao {
	position: relative;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: inherit;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
}

/* Área de toque de 44px sem crescer o botão. */
.qtd__botao::before {
	content: "";
	position: absolute;
	inset: -4px;
}

.qtd__botao:hover {
	background: rgba(56, 30, 21, 0.06);
}

.qtd__n {
	min-width: 18px;
	font-size: 14px;
	font-weight: 800;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Quantidade 0: só o "+". */
.qtd[data-qtd="0"] .qtd__menos,
.qtd[data-qtd="0"] .qtd__n {
	display: none;
}

/* No pedido: laranja, como o chip ativo. */
.qtd.is-ativo {
	background: var(--laranja);
	color: var(--branco);
}

.qtd.is-ativo .qtd__botao:hover {
	background: rgba(255, 255, 255, 0.16);
}

/* =========================================================================
   DESKTOP (≥ 960px): duas colunas — lateral fixa + listas em grade
   ========================================================================= */

@media (min-width: 960px) {
	.cardapio {
		--itens-iniciais: 6;
		display: grid;
		grid-template-columns: 340px minmax(0, 1fr);
		grid-template-areas:
			"capa capa"
			"lateral conteudo"
			"rodape rodape";
		gap: 24px;
		max-width: 1120px;
		min-height: 0;
		padding: 24px 32px 48px;
		background: transparent;
		box-shadow: none;
	}

	.lateral,
	.lateral__caixa,
	.conteudo {
		display: block;
	}

	/* Capa vira um banner arredondado. */
	.capa {
		grid-area: capa;
		height: 260px;
		border-radius: var(--raio-bento);
		box-shadow: 0 24px 50px -28px rgba(56, 30, 21, 0.45);
	}

	.capa__img {
		height: 260px;
		object-position: center 55%;
	}

	/* Coluna da esquerda. .lateral ocupa a célula inteira (mesma altura do painel
	   das listas); o card de verdade é .lateral__caixa, sticky dentro dela — assim
	   ele fica alinhado ao topo do painel e para exatamente no fim dele (bento). */
	.lateral {
		grid-area: lateral;
		min-width: 0;
	}

	.lateral__caixa {
		position: sticky;
		top: 24px;
		max-height: calc(100vh - 48px);
		overflow-y: auto;
		border-radius: var(--raio-bento);
		background: var(--branco);
		box-shadow: 0 14px 40px -20px rgba(56, 30, 21, 0.35);
		scrollbar-width: thin;
	}

	.admin-bar .lateral__caixa {
		top: 56px;
		max-height: calc(100vh - 80px);
	}

	.hero {
		margin-top: 0;
		padding: 24px 24px 8px;
		border-radius: var(--raio-bento) var(--raio-bento) 0 0;
	}

	.hero__nome {
		font-size: 22px;
	}

	.filtros-sentinela {
		display: none;
	}

	.filtros,
	.filtros.is-colado {
		position: static;
		padding: 8px 24px 4px;
		box-shadow: none;
	}

	.chips {
		flex-wrap: wrap;
		margin: 12px 0 0;
		padding: 0;
		overflow: visible;
	}

	.precos {
		padding: 12px 24px 20px;
	}

	/* Coluna das listas: painel branco. */
	.conteudo {
		grid-area: conteudo;
		min-width: 0;
		padding: 8px 12px 20px;
		border-radius: var(--raio-bento);
		background: var(--branco);
		box-shadow: 0 14px 40px -20px rgba(56, 30, 21, 0.2);
	}

	.secao__titulo {
		padding: 0 20px 10px;
		font-size: 22px;
	}

	.destaques {
		padding-top: 24px;
	}

	.secao--lista {
		padding-top: 28px;
	}

	/* Listas em grade: 2 colunas quando cabem 2 × 280px, senão 1. */
	.destaques__lista,
	.sabores {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		column-gap: 32px;
		padding: 0 20px;
	}

	.destaque,
	.sabor {
		margin: 0;
		padding: 14px 0;
		border-top: 0;
		border-bottom: 1px solid var(--linha);
	}

	/* Mais específico que ".destaque + .destaque" do celular, senão ficam duas linhas. */
	.destaque + .destaque,
	.sabor + .sabor {
		border-top: 0;
	}

	.ver-todos {
		width: calc(100% - 40px);
		margin: 12px 20px 4px;
	}

	.vazio {
		padding: 48px 20px 16px;
	}

	#sabores {
		padding-bottom: 8px;
	}

	/* Antes do JS assumir: 6 visíveis por lista (3 linhas × 2 colunas). */
	.js .cardapio:not(.is-pronta) .sabores .sabor:nth-child(6) {
		display: list-item;
	}

	.js .cardapio:not(.is-pronta) .sabores .sabor:nth-child(n + 7) {
		display: none;
	}

	/* Rodapé em três colunas dentro de um card marrom. */
	.rodape {
		grid-area: rodape;
		display: grid;
		grid-template-columns: 1.1fr 1fr 1fr;
		grid-template-areas:
			"marca info acoes"
			"rodizio info acoes"
			"divisor divisor divisor"
			"notas notas notas";
		gap: 20px 40px;
		align-items: start;
		padding: 36px 40px 32px;
		border-radius: var(--raio-bento);
	}

	.rodape__marca {
		grid-area: marca;
	}

	.rodape__rodizio {
		grid-area: rodizio;
	}

	.rodape__info {
		grid-area: info;
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.rodape__acoes {
		grid-area: acoes;
	}

	.rodape__divisor {
		grid-area: divisor;
	}

	.rodape__notas {
		grid-area: notas;
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}

	.flutuante {
		right: 32px;
		bottom: 32px;
	}
}

/* =========================================================================
   PADRÃO DECORATIVO (ilustrações do Figma em assets/img/padrao.svg)
   Aplicado por mask-image, então a cor vem do CSS e o arquivo é um só.
   Bem sutil: só tira a cara de cor chapada.
   ========================================================================= */

/* Fundo cinza da página no desktop. */
@media (min-width: 960px) {
	.cardapio {
		position: relative;
		z-index: 1; /* conteúdo acima do padrão */
	}

	.alt-cardapio::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 0; /* o <html> tem fundo próprio, então -1 ficaria atrás do fundo do body */
		background: var(--marrom);
		opacity: 0.12;
		-webkit-mask: url("../img/padrao.svg") 0 0 / 900px repeat;
		mask: url("../img/padrao.svg") 0 0 / 900px repeat;
		pointer-events: none;
	}
}

/* Rodapé marrom (celular e desktop). */
.rodape {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.rodape::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--bege-100);
	opacity: 0.07;
	-webkit-mask: url("../img/padrao.svg") 40px 20px / 640px repeat;
	mask: url("../img/padrao.svg") 40px 20px / 640px repeat;
	pointer-events: none;
}

/* =========================================================================
   BEBIDAS NO CARDÁPIO (seção só de consulta, com preço)
   ========================================================================= */

.sabor--bebida {
	display: block;
	padding: 0;
}

.sabor__grupo {
	padding: 18px 0 6px;
}

.sabor--inicio-grupo + .sabor--bebida,
.sabor--bebida + .sabor--bebida:not(.sabor--inicio-grupo) {
	border-top: 0;
}

.sabor__linha {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--linha);
}

.sabor--inicio-grupo .sabor__linha {
	border-top: 0;
}

.sabor__preco {
	flex: none;
	font-size: 14px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* =========================================================================
   PEDIDO — botão "Fazer pedido", resumo na lateral e diálogos
   ========================================================================= */


/* Botão de contorno marrom (+ Adicionar pizza / bebidas). */
.botao--contorno-marrom {
	min-height: 46px;
	border: 1.5px solid var(--linha);
	background: var(--branco);
	color: var(--marrom);
	font-size: 14px;
}

.botao--contorno-marrom:hover {
	border-color: var(--bege-300);
	background: var(--bege-100);
}

/* Link em forma de texto (Trocar tamanho). */
.link {
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--laranja);
	font-size: 13px;
	font-weight: 700;
}

/* Trava a rolagem da página enquanto um diálogo está aberto. */
html.tem-dialogo {
	overflow: hidden;
}

/* ---------- <dialog>: folha de baixo no celular, card centrado no desktop ---------- */

.dlg {
	position: fixed;
	inset: auto 0 0 0;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	max-height: 92vh;
	max-height: 92dvh;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 22px 22px 0 0;
	background: var(--branco);
	color: var(--marrom);
	box-shadow: 0 -12px 40px -16px rgba(56, 30, 21, 0.5);
	display: none;
	flex-direction: column;
}

.dlg[open] {
	display: flex;
}

.dlg::backdrop {
	background: rgba(56, 30, 21, 0.55);
}

.dlg__cabecalho {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	flex: none;
	padding: 18px var(--gutter) 12px;
	border-bottom: 1px solid var(--linha);
}

.dlg__passo {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--marrom-claro);
}

.dlg__titulo {
	margin-top: 2px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
}

.dlg__fechar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin: -8px -10px 0 0;
	border: 0;
	border-radius: 50%;
	background: var(--linha);
	color: var(--marrom);
}

.dlg__fechar:hover {
	background: var(--bege-200);
}

.dlg__corpo {
	flex: 1 1 auto;
	min-height: 0;
	padding: 12px var(--gutter) 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.dlg__grupo {
	padding: 14px 0 4px;
}

.dlg__rodape {
	flex: none;
	padding: 12px var(--gutter) calc(14px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--linha);
	background: var(--branco);
}

.dlg__rodape--pedido {
	display: grid;
	gap: 8px;
}

/* ---------- Aviso dos valores (antes de montar a primeira pizza) ---------- */

.dlg--aviso .dlg__corpo {
	display: grid;
	gap: 10px;
	padding-top: 16px;
	padding-bottom: 20px;
}

.aviso__texto {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--marrom);
}

.aviso__texto + .aviso__texto {
	color: var(--marrom-claro);
}

@media (min-width: 960px) {
	.dlg.dlg--aviso {
		width: min(440px, calc(100% - 48px));
		height: fit-content;
	}
}

/* ---------- Montar pizza: passo 1 (tamanho) ---------- */

.tamanhos {
	display: grid;
	gap: 10px;
	padding-top: 4px;
}

.tamanho {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 64px;
	padding: 14px 16px;
	border: 1.5px solid var(--linha);
	border-radius: var(--raio-card);
	background: var(--branco);
	color: var(--marrom);
	text-align: left;
	transition: border-color var(--transicao), background-color var(--transicao), transform var(--transicao);
}

.tamanho:hover {
	border-color: var(--laranja);
	background: var(--bege-100);
}

.tamanho:active {
	transform: scale(0.985);
}

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

.tamanho__nome {
	font-size: 16px;
	font-weight: 800;
}

.tamanho__desc {
	font-size: 12px;
	color: var(--marrom-claro);
}

.tamanho__valor {
	flex: none;
	font-size: 16px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.passo__nota {
	margin-top: 14px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--marrom-claro);
}

/* ---------- Montar pizza: passo 2 (sabores) ---------- */

.passo__resumo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
	font-size: 13px;
	font-weight: 700;
}

.busca--dlg .busca__campo {
	height: 42px;
}

.montar-contagem {
	margin: 10px 0 2px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--marrom-claro);
}

.escolha__grupo .rotulo {
	padding: 14px 0 4px;
}

.escolha__item + .escolha__item {
	border-top: 1px solid var(--linha);
}

.escolha__rotulo {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 10px 0;
	cursor: pointer;
}

.escolha__caixa {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	opacity: 0;
	pointer-events: none;
}

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

/* Círculo de seleção à direita. */
.escolha__marca {
	position: relative;
	flex: none;
	width: 24px;
	height: 24px;
	border: 2px solid var(--bege-300);
	border-radius: 50%;
	transition: background-color var(--transicao), border-color var(--transicao);
}

.escolha__marca::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 8px;
	width: 5px;
	height: 9px;
	border: solid var(--branco);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	opacity: 0;
}

.escolha__item.is-marcado .escolha__marca {
	border-color: var(--laranja);
	background: var(--laranja);
}

.escolha__item.is-marcado .escolha__marca::after {
	opacity: 1;
}

.escolha__item.is-marcado .sabor__nome {
	color: var(--laranja-escuro);
}

.escolha__item.is-bloqueado .escolha__rotulo {
	cursor: not-allowed;
	opacity: 0.45;
}

.escolha__caixa:focus-visible + .escolha__texto {
	outline: 2px solid var(--laranja);
	outline-offset: 4px;
	border-radius: 4px;
}

.escolha__vazio {
	padding: 24px 0;
	font-size: 14px;
	text-align: center;
	color: var(--marrom-claro);
}

/* ---------- Bebidas (diálogo) ---------- */

.bebida {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
}

.bebida + .bebida {
	border-top: 1px solid var(--linha);
}

.bebida__texto {
	flex: 1;
	min-width: 0;
}

.bebida__nome {
	font-size: 14.5px;
	font-weight: 700;
}

.bebida__valor {
	margin-top: 2px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--marrom-claro);
}

/* ---------- Seu pedido (carrinho) ---------- */

.carrinho__vazio {
	padding: 18px 0 6px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--marrom-claro);
}

.carrinho__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--linha);
}

.carrinho__texto {
	flex: 1;
	min-width: 0;
}

.carrinho__nome {
	font-size: 14.5px;
	font-weight: 800;
}

.carrinho__detalhe {
	margin-top: 2px;
	font-size: 12.5px;
	line-height: 1.38;
	color: var(--marrom-claro);
}

.carrinho__valor {
	margin-top: 3px;
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.carrinho__acoes {
	display: grid;
	gap: 8px;
	margin-top: 14px;
}

.carrinho__nota {
	margin-top: 14px;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--marrom-claro);
}

.carrinho__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: 14px;
	font-weight: 600;
	color: var(--marrom-claro);
}

.carrinho__total strong {
	font-size: 20px;
	font-weight: 800;
	color: var(--marrom);
	font-variant-numeric: tabular-nums;
}

.carrinho__limpar {
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--marrom-claro);
	font-size: 13px;
	font-weight: 700;
}

.carrinho__limpar:hover {
	color: var(--laranja);
}

/* ---------- Desktop: diálogo centrado, resumo na lateral, sem botão flutuante ---------- */

@media (min-width: 960px) {
	.dlg {
		inset: 0;
		width: min(560px, calc(100% - 48px));
		max-height: min(88vh, 860px);
		margin: auto;
		border-radius: var(--raio-bento);
		box-shadow: 0 30px 80px -30px rgba(56, 30, 21, 0.6);
	}

	.dlg__cabecalho,
	.dlg__corpo,
	.dlg__rodape {
		padding-left: 28px;
		padding-right: 28px;
	}

	.dlg__rodape {
		padding-bottom: 18px;
	}

	.carrinho__acoes {
		grid-template-columns: 1fr 1fr;
	}
}

/* Bebidas no desktop: uma coluna (a grade de 2 colunas é só para os sabores). */
@media (min-width: 960px) {
	.sabores--bebidas {
		grid-template-columns: 1fr;
		max-width: 520px;
	}

	.sabor--bebida {
		padding: 0;
		border-bottom: 0;
	}
}

/* Botões de ação dos diálogos e da lateral ocupam a largura toda. */
.dlg__rodape .botao,
.pedido-cta__botao {
	width: 100%;
}

.passo__resumo span {
	min-width: 0;
	font-size: 12.5px;
	line-height: 1.35;
}

.passo__resumo .link {
	flex: none;
	white-space: nowrap;
}

/* =========================================================================
   CTA DO PEDIDO — card explicativo, barra fixa no celular, chips no diálogo
   ========================================================================= */

/* Card "Quer pedir? Monte sua pizza aqui" (logo antes da tabela de preços, no celular e na lateral do desktop). */
.pedido-cta {
	margin: 8px var(--gutter) 4px;
	padding: 16px 16px 14px;
	border-radius: var(--raio-card);
	background: var(--cinza-200);
}

.pedido-cta__titulo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
}

.pedido-cta__contagem {
	font-size: 12px;
	font-weight: 600;
	color: var(--marrom-claro);
}

.pedido-cta__texto {
	margin: 6px 0 12px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--marrom-medio);
}

.pedido-cta__botao {
	min-height: 50px;
	box-shadow: 0 8px 20px -10px rgba(184, 40, 15, 0.7);
}

.pedido-cta__resumo {
	display: grid;
	gap: 8px;
}

.pedido-cta__itens {
	display: grid;
	gap: 5px;
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.4;
}

.pedido-cta__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin: 4px 0 2px;
	padding-top: 10px;
	border-top: 1px solid rgba(56, 30, 21, 0.12);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--marrom-claro);
}

.pedido-cta__total strong {
	font-size: 18px;
	font-weight: 800;
	color: var(--marrom);
}

/* Barra fixa embaixo (celular): sempre visível, então o rodapé ganha espaço. */
.barra-pedido {
	position: fixed;
	right: 12px;
	bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	left: 12px;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: calc(var(--largura-max) - 24px);
	min-height: 60px;
	margin: 0 auto;
	padding: 10px 16px 10px 14px;
	border: 0;
	border-radius: 18px;
	background: var(--laranja);
	color: var(--branco);
	text-align: left;
	box-shadow: 0 10px 28px -8px rgba(184, 40, 15, 0.65);
	transition: background-color var(--transicao), transform var(--transicao);
}

.barra-pedido:hover {
	background: var(--laranja-escuro);
}

.barra-pedido:active {
	transform: scale(0.985);
}

.barra-pedido__icone {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
}

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

.barra-pedido__titulo {
	font-size: 15.5px;
	font-weight: 800;
	line-height: 1.2;
}

.barra-pedido__sub {
	font-size: 12px;
	line-height: 1.3;
	opacity: 0.9;
}

.barra-pedido__seta {
	flex: none;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	opacity: 0.85;
}

.cardapio--com-pedido .rodape {
	padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* Chips dentro do diálogo "Montar pizza": mesma barra rolável da página. */
.chips--dlg {
	margin: 10px calc(-1 * var(--gutter)) 0;
}

@media (min-width: 960px) {
	.barra-pedido {
		display: none;
	}

	.cardapio--com-pedido .rodape {
		padding-bottom: 32px;
	}

	/* Fica entre os chips e a tabela de preços: espaço igual dos dois lados (8 + 12 do .precos). */
	.pedido-cta {
		margin: 12px 24px 8px;
	}

	/* No diálogo centrado, os chips quebram linha em vez de rolar. */
	.chips--dlg {
		flex-wrap: wrap;
		margin: 10px 0 0;
		padding: 0;
		overflow: visible;
	}
}