/* Cardápio, janela do item, carrinho e pagamento dos rascunhos. Usa as cores de cada loja. */
:root {
  --texto: #fff;
  --texto-suave: var(--suave);
  --borda: var(--linha);
  --erro: #ff8a80;
  --faixa-fundo: rgb(var(--brilho) / 0.2);
  --faixa-texto: #fff;
  --folha-fundo: var(--superficie);
  --arte-fundo: #000;
  --campo-fundo: var(--fundo);
  --raio-botao: 10px;
  --raio-campo: 8px;
  --fonte-titulo: var(--titulo);
  --peso: var(--peso-titulo);
}
body.com-carrinho { padding-bottom: 5.5rem; }
.rotulo-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

#categorias {
  position: sticky;
  top: 4.05rem;
  z-index: 10;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.625rem 1rem;
  background: var(--topo);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
  scrollbar-width: none;
}
#categorias a {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
#cardapio-lista { max-width: 76rem; margin: 0 auto; padding: 0 1rem 3rem; }
.categoria { padding-top: 2.25rem; scroll-margin-top: 8rem; }
.categoria-nota { margin-top: 0.25rem; color: var(--suave); }

button.produto {
  width: 100%;
  padding: 0;
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.produto-texto { display: grid; gap: 0.25rem; }
.produto-nome { font-size: 1.0625rem; font-weight: 700; line-height: 1.25; }
.produto-descricao { color: var(--suave); font-size: 0.875rem; line-height: 1.4; }
.produto-foto { display: block; }
.produto-foto img { height: 100%; }
.produto-info { align-items: stretch; }
.preco { display: grid; font-size: 1rem; white-space: normal; }
.preco-antigo { color: var(--suave); font-size: 0.8125rem; font-weight: 500; }
span.escolher { display: inline-flex; align-items: center; flex: none; }

/* Janela do item: a escolha aparece em foto, inclusive meio a meio. */
.foto-escolha { position: relative; width: 100%; height: 100%; overflow: hidden; }
.foto-escolha img { position: absolute; inset: 0; filter: saturate(1.25) contrast(1.06); }
.foto-escolha img + img { clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%); animation: entrar-metade 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.foto-escolha::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.45), transparent 40%);
  pointer-events: none;
}
.foto-divisor {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #fff;
  clip-path: polygon(calc(58% - 3px) 0, calc(58% + 3px) 0, calc(42% + 3px) 100%, calc(42% - 3px) 100%);
}
@keyframes entrar-metade { from { opacity: 0; transform: translateX(14%); } to { opacity: 1; transform: none; } }
.selo-borda {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: var(--destaque);
  color: var(--sobre-destaque);
  font-size: 0.8125rem;
  font-weight: 700;
  animation: entrar-selo 0.3s cubic-bezier(0.3, 1.5, 0.6, 1);
}
@keyframes entrar-selo { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }

#folha[open] { animation: subir-folha 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes subir-folha { from { transform: translateY(6%); opacity: 0; } to { transform: none; opacity: 1; } }
.opcao { transition: background 0.15s; }
.tamanho { transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.botao-principal, .stepper-botao, .sugestao-item { transition: transform 0.15s, box-shadow 0.2s, filter 0.15s, border-color 0.15s; }
.botao-principal:not(:disabled):active, .stepper-botao:not(:disabled):active { transform: scale(0.97); }

@media (hover: hover) {
  #categorias a:hover { background: rgb(var(--brilho) / 0.2); border-color: var(--titulo-cor, var(--destaque)); transform: translateY(-1px); }
  .opcao:hover { background: rgb(var(--brilho) / 0.1); }
  .tamanho:hover { border-color: var(--titulo-cor, var(--destaque)); transform: translateY(-2px); }
  .botao-principal:not(:disabled):hover { box-shadow: 0 8px 22px rgb(var(--brilho) / 0.5); transform: translateY(-2px); }
  .stepper-botao:not(:disabled):hover, .sugestao-item:hover { border-color: var(--titulo-cor, var(--destaque)); transform: translateY(-2px); }
  #barra-carrinho:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgb(var(--brilho) / 0.6); }
}
#barra-carrinho { transition: transform 0.2s, box-shadow 0.2s; }
.carrinho { position: relative; }
.carrinho-qtd {
  display: inline-grid;
  place-items: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--destaque);
  color: var(--sobre-destaque);
  font-size: 0.75rem;
  font-weight: 700;
}
.carrinho-qtd[hidden] { display: none; }
.confirmacao { justify-items: start; }
.confirmacao-arte { width: 100%; height: 13rem; margin: 2.5rem 0 0; border-radius: 12px; overflow: hidden; }
.folha-texto h2 { font-size: 1.75rem; }
.folha-arte { padding: 0; height: 16rem; }
#folha { background: var(--superficie); color: #fff; }
.fechar { background: #000; color: #fff; }
.sugestao-arte { width: 100%; height: 4.5rem; border-radius: 8px; overflow: hidden; }
.sugestao-item { color: #fff; }
select option { color: #000; }

/* Janela */
#folha {
  width: 100%;
  max-width: 30rem;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: var(--folha-fundo);
  color: var(--texto);
}

#folha[open] {
  display: flex;
  flex-direction: column;
}

#folha::backdrop {
  background: rgb(15 10 30 / 0.55);
}

.folha-corpo {
  position: relative;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.fechar {
  position: sticky;
  top: 0.75rem;
  z-index: 2;
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0.75rem 0.75rem -3.5rem auto;
  border: 0;
  border-radius: 50%;
  background: var(--texto);
  color: var(--folha-fundo);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.folha-arte {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 15rem;
  padding: 1rem;
  background: var(--arte-fundo);
}

.folha-arte .arte-svg {
  width: auto;
  max-width: 100%;
}

.folha-texto {
  display: grid;
  gap: 1rem;
  padding: 1.25rem 1rem 1.5rem;
}

.folha-texto h2 {
  padding-right: 2.5rem;
  font-size: 1.625rem;
}

.folha-arte + .folha-texto h2 {
  padding-right: 0;
}

.folha-descricao {
  color: var(--texto-suave);
}

.folha-rodape {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--folha-fundo);
  border-top: 2px solid var(--borda);
}

.folha-rodape .botao-principal {
  flex: 1;
}

.total-texto {
  display: grid;
  flex: none;
  min-width: 6.5rem;
  font-size: 0.875rem;
}

.total-texto strong {
  font-size: 1.125rem;
}

.botao-principal {
  min-height: 3.25rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--raio-botao);
  background: var(--destaque);
  color: var(--sobre-destaque);
  font-weight: 800;
  cursor: pointer;
}

.botao-principal:disabled {
  background: var(--borda);
  color: var(--texto);
  cursor: not-allowed;
}

.botao-link {
  justify-self: start;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* Grupos */
.grupos {
  display: grid;
  gap: 1.25rem;
}

.grupo {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.grupo legend {
  padding: 0;
  margin-bottom: 0.25rem;
  font-weight: 800;
}

.grupo-nota {
  color: var(--texto-suave);
  font-size: 0.875rem;
}

.opcao {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  border-bottom: 1px solid var(--borda);
  cursor: pointer;
}

.opcao input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  accent-color: var(--destaque);
}

.opcao-nome {
  flex: 1;
}

.opcao-preco {
  color: var(--texto-suave);
  white-space: nowrap;
}

.opcao-qtd .opcao-preco {
  display: block;
  font-size: 0.875rem;
}

.tamanhos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.5rem;
}

.tamanho {
  position: relative;
  display: grid;
  place-content: center;
  min-height: 3.75rem;
  padding: 0.25rem;
  border: 2px solid var(--borda);
  border-radius: var(--raio-botao);
  text-align: center;
  cursor: pointer;
}

.tamanho input {
  position: absolute;
  opacity: 0;
}

.tamanho:has(input:checked) {
  border-color: var(--destaque);
  background: var(--destaque);
  color: var(--sobre-destaque);
}

.tamanho:has(input:focus-visible) {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

.tamanho-nome {
  font-weight: 800;
}

.tamanho-detalhe {
  font-size: 0.75rem;
}

.stepper {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.25rem;
}

.stepper-botao {
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--borda);
  border-radius: var(--raio-botao);
  background: none;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.stepper-botao:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.stepper-valor {
  min-width: 1.5rem;
  font-weight: 800;
  text-align: center;
}

/* Campos */
.campo {
  display: grid;
  gap: 0.25rem;
  font-weight: 700;
}

.campo[hidden],
.campos-entrega[hidden] {
  display: none;
}

.campos-entrega {
  display: grid;
  gap: 1rem;
}

#form-pagamento {
  display: grid;
  gap: 1rem;
}

.campo input,
.campo select,
.campo textarea,
.grupo select {
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--borda);
  border-radius: var(--raio-campo);
  background: var(--campo-fundo);
  font-weight: 400;
}

.erro-campo {
  color: var(--erro);
  font-size: 0.9375rem;
  font-weight: 700;
}

/* Carrinho */
.linhas {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.linha-texto {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.linha-detalhe {
  color: var(--texto-suave);
  font-size: 0.875rem;
}

.linha-preco {
  font-weight: 700;
}

.sugestao h3 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.sugestao-lista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.5rem;
}

.sugestao-item {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.25rem;
  border: 2px solid var(--borda);
  border-radius: var(--raio-botao);
  background: none;
  font-size: 0.875rem;
  line-height: 1.2;
  cursor: pointer;
}

.sugestao-arte {
  width: 3.25rem;
  height: 4rem;
}

/* Confirmação */
.confirmacao {
  justify-items: start;
}

.aviso-demonstracao {
  padding: 0.75rem;
  border-radius: var(--raio-campo);
  background: var(--faixa-fundo);
  color: var(--faixa-texto);
  font-size: 0.9375rem;
}

/* Barra do carrinho */
#barra-carrinho {
  position: fixed;
  right: 0.75rem;
  bottom: calc(0.75rem + env(safe-area-inset-bottom));
  left: 0.75rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: 44rem;
  min-height: 3.75rem;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--raio-botao);
  background: var(--destaque);
  color: var(--sobre-destaque);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.28);
}

#barra-carrinho[hidden] {
  display: none;
}

.barra-acao {
  flex: 1;
  text-align: center;
}


/* ---------- Controles herdam a tipografia e a cor da loja ---------- */
button, input, select, textarea { font: inherit; color: inherit; }
#folha { color-scheme: dark; }
.grupo select, .campo select, .campo input, .campo textarea { color: #fff; }
.folha-arte { padding: 0; height: 17rem; align-items: stretch; background: #000; }
.folha-arte > * { width: 100%; }
.folha-texto h2 { font-family: var(--titulo); font-weight: var(--peso-titulo); text-transform: uppercase; }
.botao-principal { font-weight: 700; text-transform: uppercase; }
html, body { overflow-x: clip; }

/* ---------- Vitrine de categorias ---------- */
#vitrine {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62%;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 2rem 1rem 0.5rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.vitrine-card {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: space-between;
  gap: 0.75rem;
  min-height: 15.5rem;
  padding: 1rem 0.75rem 0.875rem;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(to bottom, var(--vitrine-cor, var(--destaque)), #0a0505 92%);
  color: #fff;
  text-align: center;
  text-decoration: none;
  scroll-snap-align: start;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s;
}
.vitrine-card:nth-child(even) { --vitrine-cor: var(--vitrine-cor-2, #c7600f); }
.vitrine-titulo { font-family: var(--titulo); font-size: 1.625rem; font-weight: var(--peso-titulo); line-height: 1.05; text-transform: uppercase; }
.vitrine-foto {
  width: 72%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 12px 26px rgb(0 0 0 / 0.55);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.vitrine-foto img { filter: saturate(1.25) contrast(1.06); }
.vitrine-acao { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; }
.vitrine-acao svg { width: 1rem; height: 1rem; transition: transform 0.2s; }

/* ---------- Produtos: foto grande em duas colunas ---------- */
#cardapio-lista .lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
#cardapio-lista button.produto {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--superficie);
}
#cardapio-lista .produto-foto { width: 100%; height: auto; min-height: 0; aspect-ratio: 1; flex: none; }
#cardapio-lista .produto-info { flex: 1; align-content: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 0.625rem; padding: 0.75rem; }
.produto-nome { font-family: var(--titulo); font-size: 1.25rem; font-weight: var(--peso-titulo); line-height: 1.1; text-transform: uppercase; }
.produto-descricao { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.produto-selo {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background: var(--destaque);
  color: var(--sobre-destaque);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
}
#cardapio-lista .produto-pe { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 0.5rem; }
.preco { color: var(--preco); font-size: 1.1875rem; font-weight: 700; line-height: 1.2; }
.preco-de { color: var(--suave); font-size: 0.75rem; font-weight: 500; }
span.escolher { justify-content: center; min-height: 2.75rem; text-transform: uppercase; }

/* ---------- Faixa forte dos combos ---------- */
.categoria-destaque {
  margin: 2.5rem calc(50% - 50vw) 0;
  padding: 2.25rem max(1rem, calc(50vw - 38rem)) 2.5rem;
  background: var(--faixa-forte, radial-gradient(90% 120% at 15% 0%, #ff2b38, var(--destaque) 55%, #a30a14));
  color: var(--faixa-forte-texto, #fff);
}
.categoria-destaque h2 { font-size: 2.75rem; line-height: 1; }
.categoria-destaque .categoria-nota { color: inherit; font-weight: 700; }
.categoria-destaque button.produto { color: #fff; }
#cardapio-lista .categoria-destaque .lista { grid-template-columns: minmax(0, 1fr); }
#cardapio-lista .categoria-destaque button.produto {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  border: 0;
  background: #0a0505;
}
#cardapio-lista .categoria-destaque .produto-foto { position: relative; height: 100%; aspect-ratio: auto; min-height: 11rem; }
.categoria-destaque .produto-foto img { position: absolute; inset: 0; }
.categoria-destaque .produto-nome { font-size: 1.5rem; }
.categoria-destaque .preco-antigo { color: #d8d8d8; }

/* ---------- Informações com ícone ---------- */
.fato { grid-template-columns: 2.5rem 1fr; column-gap: 0.625rem; align-items: center; }
.fato-icone {
  display: grid;
  place-items: center;
  grid-row: span 2;
  width: 2.5rem;
  height: 2.5rem;
  border: 1.5px solid var(--titulo-cor, var(--destaque));
  border-radius: 50%;
  color: var(--titulo-cor, var(--destaque));
}
.fato-icone svg { width: 1.25rem; height: 1.25rem; }

@media (hover: hover) {
  .vitrine-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgb(var(--brilho) / 0.4); }
  .vitrine-card:hover .vitrine-foto { transform: scale(1.1) rotate(10deg); }
  .vitrine-card:hover .vitrine-acao svg { transform: translateX(4px); }
  .categoria-destaque button.produto:hover { box-shadow: 0 16px 36px rgb(0 0 0 / 0.5); border-color: transparent; }
}

@media (min-width: 60rem) {
  #vitrine {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    width: min(76rem, 100% - 3rem);
    margin: 0 auto;
    overflow: visible;
    padding: 2.5rem 0 0;
  }
  .vitrine-card { min-height: 19rem; }
  .vitrine-titulo { font-size: 2rem; }
  #categorias { padding-inline: max(1.5rem, calc(50vw - 38rem)); }
  #cardapio-lista { width: min(76rem, 100% - 3rem); padding-inline: 0; }
  #cardapio-lista .lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  #cardapio-lista .produto-foto { aspect-ratio: 4 / 3; }
  #cardapio-lista .categoria-destaque .lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #cardapio-lista .categoria-destaque .produto-foto { aspect-ratio: auto; }
  #cardapio-lista .categoria-destaque button.produto { grid-template-columns: 15rem minmax(0, 1fr); }
  .produto-nome { font-size: 1.5rem; }
  .categoria-destaque h2 { font-size: 3.5rem; }
}

/* ---------- Chamada e escolhas sobre a foto ---------- */
.chamada {
  display: block;
  margin-bottom: 0.25rem;
  color: #fff;
  font-family: "Kaushan Script", cursive;
  font-size: clamp(1.625rem, 6.5vw, 2.25rem);
  line-height: 1.1;
}
.selos {
  position: absolute;
  left: 0.75rem;
  right: 3.5rem;
  bottom: 0.75rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.selos .selo-borda { position: static; }
.selo-escuro { background: rgb(0 0 0 / 0.78); color: #fff; }

/* ---------- Montador de pizza ---------- */
.botao-montar { width: 100%; max-width: 24rem; margin-top: 1rem; cursor: pointer; font: inherit; font-weight: 700; }
#folha.folha-montar[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.mt-fechar { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 6; margin: 0; }
.mt-esq { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 1.5rem; }
.mt-dir { display: none; }
.mt-previa-movel { height: 14.5rem; }
.mt-previa { position: relative; overflow: hidden; background: #000; }
.foto-vazia {
  display: grid;
  place-content: center;
  gap: 0.25rem;
  height: 100%;
  text-align: center;
  background: radial-gradient(70% 90% at 50% 40%, rgb(var(--brilho) / 0.4), #0a0505 75%);
}
.foto-vazia strong { font-family: var(--titulo); font-size: 1.625rem; font-weight: var(--peso-titulo); text-transform: uppercase; }
.foto-vazia > span:not(.selos) { color: var(--suave); }
.foto-escolha .selos { right: 0.75rem; }
.mt-titulo { padding: 1.125rem 1rem 0.5rem; font-family: var(--titulo); font-size: 2rem; font-weight: var(--peso-titulo); text-transform: uppercase; }
.mt-progresso {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  padding: 0.5rem 4rem 0.5rem 1rem;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  scrollbar-width: none;
}
.mt-etapa {
  flex: 1 0 auto;
  display: grid;
  min-height: 3rem;
  padding: 0.25rem 0.75rem;
  border: 1.5px solid var(--linha);
  border-radius: 10px;
  background: none;
  color: #fff;
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.mt-etapa strong { font-size: 0.875rem; }
.mt-etapa span { color: var(--suave); white-space: nowrap; }
.mt-etapa.feita { border-color: rgb(var(--brilho) / 0.6); }
.mt-etapa.pendente { border-color: var(--preco); background: rgb(255 198 26 / 0.12); }
.mt-etapa.pendente span { color: var(--preco); font-weight: 700; }
.mt-secao { padding: 1.5rem 1rem 0; scroll-margin-top: 4.5rem; }
.mt-secao > header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.625rem; }
.mt-secao h3 { font-family: var(--titulo); font-size: 1.5rem; font-weight: var(--peso-titulo); line-height: 1.1; text-transform: uppercase; }
.mt-regra { flex: none; padding: 0.125rem 0.5rem; border-radius: 6px; background: var(--fundo); color: var(--suave); font-size: 0.75rem; font-weight: 600; }
.mt-secao.faltando > header .mt-regra { background: var(--preco); color: #000; }
.mt-ajuda { margin-bottom: 0.5rem; color: var(--suave); font-size: 0.875rem; }
.mt-secao h4 { margin: 1rem 0 0.5rem; font-size: 0.9375rem; font-weight: 700; color: var(--preco); }
.mt-tamanhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); gap: 0.5rem; }
.mt-tamanho {
  position: relative;
  display: grid;
  gap: 0.0625rem;
  padding: 0.625rem 0.75rem;
  border: 2px solid var(--linha);
  border-radius: 12px;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.mt-tamanho input { position: absolute; opacity: 0; }
.mt-tamanho strong { font-size: 1.0625rem; }
.mt-tamanho span { color: var(--suave); }
.mt-tamanho .mt-tamanho-preco { color: var(--preco); font-weight: 700; }
.mt-tamanho:has(input:checked) { border-color: var(--titulo-cor, var(--destaque)); background: rgb(var(--brilho) / 0.16); }
.mt-tamanho:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.mt-sabor { margin-bottom: 0.5rem; border: 2px solid var(--linha); border-radius: 14px; overflow: hidden; transition: border-color 0.15s, background 0.15s, opacity 0.15s; }
.mt-sabor.escolhido { border-color: var(--titulo-cor, var(--destaque)); background: rgb(var(--brilho) / 0.12); }
.mt-sabor.bloqueado { opacity: 0.45; }
.mt-sabor-linha { display: grid; grid-template-columns: 1.375rem 4rem minmax(0, 1fr) auto; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem 0.5rem 0.625rem; cursor: pointer; }
.mt-sabor-linha input { width: 1.375rem; height: 1.375rem; margin: 0; accent-color: var(--destaque); }
.mt-sabor-foto { width: 4rem; height: 4rem; overflow: hidden; border-radius: 10px; }
.mt-sabor-foto img { filter: saturate(1.25) contrast(1.06); transition: transform 0.3s; }
.mt-sabor-texto { display: grid; gap: 0.0625rem; font-size: 0.8125rem; line-height: 1.3; color: var(--suave); }
.mt-sabor-texto strong { color: #fff; font-size: 1rem; }
.mt-sabor-preco { color: var(--preco); font-size: 0.9375rem; font-weight: 700; white-space: nowrap; }
.mt-link { display: inline-block; min-height: 2.75rem; padding: 0 0.75rem; border: 0; background: none; color: #fff; font: inherit; font-size: 0.875rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.linha-texto .mt-link { justify-self: start; min-height: 2.25rem; padding: 0; color: var(--titulo-cor, var(--destaque)); }
.mt-obs-sabor { display: block; width: calc(100% - 1.25rem); min-height: 2.75rem; margin: 0 0.625rem 0.625rem; padding: 0.375rem 0.75rem; border: 1.5px solid var(--linha); border-radius: 8px; background: var(--fundo); color: #fff; }
.mt-opcao { display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; border-bottom: 1px solid var(--linha); cursor: pointer; transition: background 0.15s, opacity 0.15s; }
.mt-opcao input { flex: none; width: 1.375rem; height: 1.375rem; margin: 0; accent-color: var(--destaque); }
.mt-opcao > span { flex: 1; }
.mt-opcao b { color: var(--preco); font-weight: 700; white-space: nowrap; }
.mt-opcao b.mt-sem-custo { color: var(--suave); font-size: 0.8125rem; font-weight: 500; }
.mt-opcao.bloqueado { opacity: 0.45; cursor: not-allowed; }
.mt-obs-geral { width: 100%; padding: 0.625rem 0.75rem; border: 2px solid var(--linha); border-radius: 10px; background: var(--fundo); color: #fff; }
.mt-resumo { padding: 0 0 0.5rem; }
.mt-resumo-movel { margin: 1.5rem 1rem 0; padding: 1rem; border-radius: 14px; background: var(--fundo); }
.mt-resumo h3 { font-family: var(--titulo); font-size: 1.375rem; font-weight: var(--peso-titulo); text-transform: uppercase; }
.mt-resumo-tamanho, .mt-resumo-vazio { color: var(--suave); font-size: 0.875rem; }
.mt-resumo ul { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.mt-resumo li { display: flex; justify-content: space-between; gap: 0.75rem; padding-block: 0.25rem; font-size: 0.9375rem; }
.mt-resumo li small { display: block; color: var(--suave); font-size: 0.8125rem; }
.mt-resumo-nota { color: var(--preco); font-size: 0.8125rem !important; }
.mt-rodape { display: grid; gap: 0.5rem; }
.mt-rodape .botao-principal { width: 100%; }
.mt-total-linha { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mt-total-linha > strong { font-family: var(--titulo); font-size: 1.875rem; font-weight: var(--peso-titulo); color: #fff; }
.mt-aviso { color: var(--preco); font-size: 0.875rem; font-weight: 700; }
.mt-aviso:empty { display: none; }
.mt-bebida { padding-top: 2.25rem; }
.mt-adicionada { display: inline-block; justify-self: start; padding: 0.25rem 0.75rem; border-radius: 999px; background: #18a558; color: #fff; font-size: 0.8125rem; font-weight: 700; }
.mt-adicionada::before { content: "✓ "; }
.mt-bebidas { display: grid; gap: 0.625rem; margin: 0; padding: 0; list-style: none; }
.mt-bebidas li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.5rem; border: 1.5px solid var(--linha); border-radius: 14px; }
.mt-bebida-foto { width: 4.5rem; height: 4.5rem; overflow: hidden; border-radius: 10px; }
.mt-bebida-texto { display: grid; font-size: 0.9375rem; }
.mt-bebida-texto span { color: var(--preco); font-weight: 700; }
.mt-bebida-adicionar { min-height: 2.75rem; padding: 0 0.875rem; border: 2px solid var(--destaque); border-radius: 8px; background: var(--destaque); color: var(--sobre-destaque); font-size: 0.875rem; font-weight: 700; cursor: pointer; transition: transform 0.15s; }
.mt-bebida-adicionar.ok { background: #18a558; border-color: #18a558; color: #fff; }
.mt-bebida-rodape { justify-content: space-between; }
.mt-bebida-rodape .botao-link { justify-self: auto; padding-inline: 0.5rem; }

@media (hover: hover) {
  .mt-tamanho:hover { border-color: var(--titulo-cor, var(--destaque)); transform: translateY(-2px); }
  .mt-etapa:hover { background: rgb(var(--brilho) / 0.14); }
  .mt-sabor:not(.bloqueado):hover { border-color: var(--titulo-cor, var(--destaque)); }
  .mt-sabor:not(.bloqueado):hover .mt-sabor-foto img { transform: scale(1.12); }
  .mt-opcao:not(.bloqueado):hover { background: rgb(var(--brilho) / 0.1); }
  .mt-bebida-adicionar:not(.ok):hover { transform: translateY(-2px); }
}

@media (min-width: 60rem) {
  #folha.folha-montar {
    max-width: 66rem;
    height: min(46rem, 92dvh);
    margin: auto;
    border-radius: 16px;
  }
  .mt-progresso { padding-right: 1rem; }
  #folha.folha-montar[open] { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; grid-template-rows: minmax(0, 1fr); }
  .folha-montar .mt-previa-movel, .folha-montar .mt-resumo-movel, .folha-montar .mt-rodape { display: none; }
  .mt-dir { display: grid; grid-template-rows: 15rem minmax(0, 1fr) auto; min-height: 0; background: var(--fundo); border-left: 1px solid var(--linha); }
  .mt-dir .mt-resumo { padding: 1rem 1.25rem; overflow-y: auto; }
  .mt-total-fixo { display: grid; gap: 0.75rem; padding: 1rem 1.25rem; border-top: 1px solid var(--linha); }
  .mt-total-fixo .botao-principal { width: 100%; }
  .mt-tamanhos { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Venda por unidade ---------- */
#cardapio-lista article.produto { position: relative; display: flex; flex-direction: column; height: 100%; }
.produto-unidade .produto-nome { margin: 0; }
.unidade-adicionar { width: 100%; justify-content: center; min-height: 2.75rem; text-transform: uppercase; }
.unidade-stepper { display: flex; justify-content: space-between; width: 100%; }
.unidade-stepper[hidden], .unidade-adicionar[hidden] { display: none; }
.unidade-stepper .stepper-botao { color: inherit; border-color: var(--titulo-cor, var(--destaque)); }
.unidade-stepper .stepper-valor { font-size: 1.125rem; }
.produto-unidade.no-carrinho { border-color: var(--titulo-cor, var(--destaque)); box-shadow: 0 0 0 1px var(--titulo-cor, var(--destaque)); }