/**
 * A cara da loja — um arquivo so, com os dois tamanhos.
 *
 * 🔑 Celular primeiro. Metade da carteira compra do balcao, no telefone, com a mao
 * ocupada: campo alto, botao largo, texto de 16px (abaixo disso o iPhone da zoom
 * sozinho ao tocar no campo e a tela sai do lugar).
 *
 * 🔑 O desenho de computador comeca em 880px e NAO e a mesma tela esticada: o
 * cartao ganha uma coluna de apresentacao a esquerda, que no celular nao existe.
 *
 * Visual de ferramenta de trabalho, nao de loja de varejo: quem usa isto e lojista
 * comprando para revender, varias vezes por mes, e o que ele quer e entrar rapido.
 */

:root {
  --fundo: #eef1f4;
  --superficie: #ffffff;
  --tinta: #1b1f24;
  --tinta-fraca: #5b6672;
  --borda: #d4dae1;
  --borda-forte: #aeb8c2;
  --acento: #16643f;
  --acento-escuro: #0f4a2e;
  --acento-claro: #e6f0ea;
  --erro: #b3261e;
  --erro-fundo: #fdecea;
  --erro-borda: #f3c2bd;
  --recado-fundo: #fff7e6;
  --recado-tinta: #5a4300;
  --recado-borda: #f0d9a8;
  --certo-fundo: #e9f4ee;
  --certo-borda: #bcdcc9;
  --raio: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--fundo);
  color: var(--tinta);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* ---------- o cartao ---------- */

.pagina {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 16px 40px;
}

.cartao {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}

.cartao__corpo { padding: 24px 20px 28px; }

/* A coluna de apresentacao so existe no computador (ver a consulta de midia). */
.apresentacao { display: none; }

.marca {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 20px;
}

.marca__nome {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.marca__linha {
  font-size: 13px;
  color: var(--tinta-fraca);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

h1 {
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 6px;
}

.subtitulo {
  margin: 0 0 22px;
  color: var(--tinta-fraca);
  font-size: 15px;
}

/* ---------- formulario ---------- */

.campo { margin-bottom: 18px; }

.campo > label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.campo__ajuda {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--tinta-fraca);
  margin-top: 2px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  min-height: 52px;          /* area de toque confortavel no celular */
  padding: 12px 14px;
  font-size: 16px;           /* menos que isto e o iPhone da zoom no foco */
  font-family: inherit;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
}

input:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
  border-color: var(--acento);
}

input[aria-invalid="true"] { border-color: var(--erro); }

.campo__erro {
  display: none;
  margin-top: 6px;
  font-size: 14px;
  color: var(--erro);
}

.campo__erro.aparece { display: block; }

button {
  width: 100%;
  min-height: 54px;
  padding: 14px 18px;
  font-size: 17px;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--acento);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

button:hover { background: var(--acento-escuro); }
button:focus-visible { outline: 3px solid var(--acento-escuro); outline-offset: 2px; }
button[disabled] { background: var(--borda-forte); cursor: progress; }

.rodape-do-cartao {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--borda);
  font-size: 15px;
  text-align: center;
}

a { color: var(--acento-escuro); }
a:hover { text-decoration: none; }

/* Link que tambem e alvo de dedo: 44px de altura util. */
.link-largo {
  display: inline-block;
  padding: 10px 6px;
  min-height: 44px;
}

/* ---------- avisos ---------- */

.aviso {
  display: none;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 15px;
  border: 1px solid transparent;
}

.aviso.aparece { display: block; }

.aviso--erro { background: var(--erro-fundo); border-color: var(--erro-borda); color: var(--erro); }
.aviso--recado { background: var(--recado-fundo); border-color: var(--recado-borda); color: var(--recado-tinta); }
.aviso--certo { background: var(--certo-fundo); border-color: var(--certo-borda); color: var(--acento-escuro); }

.nota {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--tinta-fraca);
}

.porque {
  margin: 0 0 20px;
  padding: 12px 14px;
  background: var(--acento-claro);
  border-radius: 8px;
  font-size: 15px;
  color: var(--acento-escuro);
}

/* ---------- computador ---------- */

@media (min-width: 880px) {
  .pagina { padding: 48px 32px; }

  .cartao {
    max-width: 920px;
    display: grid;
    grid-template-columns: 340px 1fr;
    box-shadow: 0 2px 14px rgba(27, 31, 36, 0.09);
  }

  /* A coluna que o celular nao tem: quem esta no computador tem espaco para
     entender onde entrou antes de digitar. */
  .apresentacao {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 44px 32px;
    background: var(--acento-escuro);
    color: #fff;
  }

  .apresentacao h2 {
    margin: 0;
    font-size: 24px;
    line-height: 1.25;
  }

  .apresentacao p {
    margin: 0;
    font-size: 15px;
    color: #cfe0d6;
  }

  .apresentacao ul {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 15px;
    color: #cfe0d6;
  }

  .apresentacao li { margin-bottom: 6px; }

  .apresentacao__marca {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9dc0ac;
  }

  .cartao__corpo { padding: 44px 48px; }

  /* No computador a marca ja esta na coluna escura: repeti-la e ruido. */
  .cartao__corpo .marca { display: none; }

  h1 { font-size: 26px; }

  input[type="text"],
  input[type="password"] { min-height: 46px; }

  button {
    min-height: 48px;
    width: auto;
    min-width: 200px;
  }

  .rodape-do-cartao { text-align: left; }
}

/* ==========================================================================
   A LOJA — vitrine e carrinho
   ==========================================================================

   🔑 Aqui moram as DUAS TELAS que o dono pediu, "os dois bem feitos", e nao a
   mesma esticada: o mesmo HTML de produto vira CARTAO no celular (uma coluna,
   preco e caixa de quantidade lado a lado, botao de 48px para o dedo) e TABELA
   LARGA no computador (SKU, produto, marca, categoria, preco e quantidade em
   colunas alinhadas, com cabecalho). Quem troca de desenho e a consulta de
   midia de 880px, e nada no JavaScript.

   🔑 Regra de negocio tambem nao mora no CSS: esgotado e so risco no nome e
   etiqueta vermelha — sem numero de estoque, que o dono decidiu nunca mostrar. */

:root {
  --sabor-fundo: #f6f8f9;
  --topo-fraco: #9dc0ac;
}

/* ---------- topo e o aviso da reserva ---------- */

.corpo-loja {
  /* a barra do carrinho e fixa no rodape do celular: sem esta folga ela cobriria
     o ultimo produto da lista */
  padding-bottom: 104px;
}

.topo {
  background: var(--acento-escuro);
  color: #fff;
}

.topo__interno {
  max-width: 1440px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.topo .marca { margin: 0; }
.topo .marca__nome { color: #fff; }
.topo .marca__linha { color: var(--topo-fraco); }

.topo__sair {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  color: #fff;
  font-size: 15px;
}

/* ⚠️ Decisao do dono: o carrinho nao segura mercadoria, e isto se diz no topo da
   vitrine E dentro do carrinho. */
.faixa-reserva {
  margin: 0;
  padding: 10px 16px;
  background: var(--recado-fundo);
  border-bottom: 1px solid var(--recado-borda);
  color: var(--recado-tinta);
  font-size: 14px;
  text-align: center;
}

/* ---------- a folha ---------- */

.loja {
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px;
}

/* No celular marca e categoria dividem a linha: com um campo por linha, a busca e
   os dois filtros empurravam o primeiro produto para fora da tela. */
.filtros {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0 0 14px;
}

.filtros .campo { margin-bottom: 0; }
.filtros .campo--busca { grid-column: 1 / -1; }

.filtros .botao-fraco {
  grid-column: 1 / -1;
  min-height: 46px;
}

.filtros select {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  font-size: 16px;
  font-family: inherit;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
}

.filtros select:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

.botao-fraco {
  width: 100%;
  background: var(--superficie);
  color: var(--acento-escuro);
  border: 1px solid var(--borda-forte);
}

.botao-fraco:hover { background: var(--acento-claro); }

.resumo {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--tinta-fraca);
}

.vazio {
  margin: 20px 0;
  padding: 18px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  color: var(--tinta-fraca);
  text-align: center;
}

/* ---------- o produto (cartao no celular) ---------- */

.vitrine__cabecalho { display: none; }

.vitrine {
  display: grid;
  gap: 12px;
}

.produto {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
}

.bloco + .bloco,
.sabores .bloco { border-top: 1px solid var(--borda); }

.linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "sku       sku"
    "nome      nome"
    "marca     categoria"
    "preco     qtd";
  gap: 4px 12px;
  align-items: center;
  padding: 14px;
}

.celula--sku { grid-area: sku; font-size: 13px; color: var(--tinta-fraca); }
.celula--nome { grid-area: nome; font-size: 17px; font-weight: 600; }
.celula--marca { grid-area: marca; font-size: 13px; color: var(--tinta-fraca); }
.celula--categoria { grid-area: categoria; font-size: 13px; color: var(--tinta-fraca); text-align: right; }
.celula--preco { grid-area: preco; font-size: 19px; font-weight: 700; }
.celula--qtd { grid-area: qtd; justify-self: end; }

/* Esgotado: nome riscado e etiqueta. Sem numero, sem "restam poucos". */
.nome--esgotado {
  text-decoration: line-through;
  color: var(--tinta-fraca);
}

.etiqueta-indisponivel {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid var(--erro-borda);
  border-radius: 999px;
  background: var(--erro-fundo);
  color: var(--erro);
  font-size: 12px;
  font-weight: 600;
  vertical-align: middle;
}

/* Os sabores, dentro do pai: quem tem preco e caixa de quantidade e o sabor. */
.sabores { background: var(--sabor-fundo); }

.linha--sabor .celula--nome { font-size: 16px; font-weight: 500; }

/* O sabor se distingue do pai por uma marca a esquerda. Ela e sombra, e nao borda
   nem recuo: assim o sabor nao sai do alinhamento das colunas do computador. */
.linha--sabor { box-shadow: inset 4px 0 0 var(--borda-forte); }

.escolha-o-sabor {
  font-size: 13px;
  color: var(--tinta-fraca);
}

/* A frase que o BANCO escreveu sobre este item (a unica que cita quantidade). */
.recado {
  margin: 0 14px 12px;
  padding: 8px 10px;
  background: var(--recado-fundo);
  border: 1px solid var(--recado-borda);
  border-radius: 6px;
  color: var(--recado-tinta);
  font-size: 14px;
}

/* ---------- a caixa de quantidade ---------- */

.caixa-qtd {
  display: flex;
  align-items: center;
  gap: 6px;
}

.caixa-qtd__botao {
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--acento-escuro);
  background: var(--acento-claro);
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
}

.caixa-qtd__botao:hover { background: var(--acento); color: #fff; }

.caixa-qtd__campo {
  width: 72px;
  min-height: 48px;
  padding: 8px 4px;
  font-size: 16px;
  font-family: inherit;
  text-align: center;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
  border-radius: 8px;
}

.caixa-qtd__campo:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

/* Enquanto a rota nao respondeu, o numero na tela ainda e o do dedo, nao o do banco. */
.caixa-qtd__campo--enviando { opacity: 0.55; }

/* ---------- o carrinho (folha inteira no celular) ---------- */

.carrinho {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  padding: 16px;
  background: var(--superficie);
  overflow-y: auto;
}

.carrinho.aberto { display: block; }

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

.carrinho__cabeca h2 { margin: 0; font-size: 19px; }

.carrinho__fechar {
  width: auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  font-size: 15px;
  color: var(--acento-escuro);
  background: var(--superficie);
  border: 1px solid var(--borda-forte);
}

.faixa-reserva--carrinho {
  margin: 12px 0;
  border: 1px solid var(--recado-borda);
  border-radius: 8px;
  text-align: left;
}

.carrinho__vazio { color: var(--tinta-fraca); }

.item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
}

.item__sku { grid-column: 1 / -1; font-size: 12px; color: var(--tinta-fraca); }
.item__nome { font-size: 15px; }
.item__conta { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.item__quantidade { font-size: 14px; color: var(--tinta-fraca); }
.item__subtotal { font-weight: 600; }

.item__tirar {
  justify-self: start;
  width: auto;
  min-width: 0;
  min-height: 36px;
  margin-top: 4px;
  padding: 0 10px;
  font-size: 14px;
  color: var(--erro);
  background: transparent;
  border: 1px solid var(--erro-borda);
}

.item__tirar:hover { background: var(--erro-fundo); }

.carrinho__totais {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 2px solid var(--borda);
}

.carrinho__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 16px;
}

.carrinho__total strong { font-size: 22px; }

/* O "quanto falta" e o numero que a rota mandou — a tela nao soma nada. */
.carrinho__falta {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--recado-fundo);
  border: 1px solid var(--recado-borda);
  border-radius: 8px;
  color: var(--recado-tinta);
  font-size: 14px;
}

/* `width` escrito aqui porque a consulta de midia das telas de entrada (880px)
   estreita todo `button`, e o de finalizar o pedido e do tamanho do carrinho. */
.carrinho > button { width: 100%; margin-top: 14px; }

/* ---------- a barra do celular ---------- */

.barra-carrinho {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--superficie);
  border-top: 1px solid var(--borda-forte);
  box-shadow: 0 -2px 10px rgba(27, 31, 36, 0.10);
}

.barra-carrinho__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.barra-carrinho__linhas { font-size: 13px; color: var(--tinta-fraca); }
.barra-carrinho__total { font-size: 20px; }
.barra-carrinho__falta { font-size: 12px; color: var(--recado-tinta); }

.botao-barra {
  width: auto;
  min-width: 150px;
  min-height: 48px;
  font-size: 16px;
}

/* ---------- a caixa da confirmacao ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(27, 31, 36, 0.55);
  overflow-y: auto;
}

.modal[hidden] { display: none; }

.modal__caixa {
  width: 100%;
  max-width: 520px;
  padding: 20px;
  background: var(--superficie);
  border-radius: var(--raio);
}

.modal__caixa h2 { margin: 0 0 12px; font-size: 20px; }

.modal__numero { margin: 0 0 8px; font-size: 22px; font-weight: 700; }

.modal__corpo p { margin: 0 0 10px; font-size: 15px; }

.modal__nota { color: var(--tinta-fraca); font-size: 14px; }

.modal__itens { margin: 0 0 12px; padding-left: 18px; }
.modal__itens li { margin-bottom: 10px; }

/* A frase do banco, item a item — e o unico lugar da loja com numero de estoque. */
.modal__mensagem { display: block; color: var(--erro); font-size: 14px; }

.modal__acoes { display: grid; gap: 10px; margin-top: 8px; }

/* ==========================================================================
   COMPUTADOR — a tabela larga
   ==========================================================================

   ⚠️ 1200px, e nao os 880px das telas de entrada: a tabela de seis colunas MAIS a
   coluna do carrinho so cabem a partir dai. Abaixo disso as colunas estouravam a
   largura da tela e a pagina ganhava barra de rolagem horizontal — que e
   exatamente o defeito que "duas telas, nao uma espremida" existe para evitar.
   Entre 880 e 1200 (tablet, notebook pequeno) vale o desenho de cartao, que cabe. */

@media (min-width: 1200px) {
  .corpo-loja { padding-bottom: 0; }

  /* No computador o carrinho e uma coluna fixa ao lado: a barra do rodape some. */
  .barra-carrinho { display: none; }

  .loja {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    padding: 20px 24px 40px;
  }

  .loja__vitrine { min-width: 0; }

  .filtros {
    grid-template-columns: minmax(240px, 2fr) 1fr 1fr auto;
    align-items: end;
  }

  .filtros .campo--busca { grid-column: auto; }

  .filtros select,
  .filtros input[type="text"] { min-height: 46px; }

  .filtros .botao-fraco {
    grid-column: auto;
    width: auto;
    min-width: 0;
    min-height: 46px;
    padding: 0 20px;
  }

  /* As colunas do cabecalho e as das linhas sao as MESMAS medidas: e o que alinha
     um produto com o outro, ja que cada familia e um bloco separado. */
  /* Colunas que encolhem juntas (minmax), e nao medidas cravadas: com px fixo, a
     tabela nao cabia em notebook e empurrava a pagina para o lado. A de quantidade
     e a unica fixa — ela guarda os dois botoes de dedo e o campo. */
  .vitrine__cabecalho,
  .linha {
    grid-template-columns:
      minmax(96px, 1.1fr) minmax(170px, 3fr) minmax(80px, 1fr)
      minmax(84px, 1.1fr) minmax(92px, 1fr) 168px;
  }

  .vitrine__cabecalho {
    display: grid;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid transparent;   /* a mesma borda do produto, para nao deslocar */
    color: var(--tinta-fraca);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .linha {
    grid-template-areas: "sku nome marca categoria preco qtd";
    gap: 12px;
  }

  .celula--nome { font-size: 15px; }
  .celula--categoria { text-align: left; }
  .celula--preco { font-size: 16px; }
  .celula--qtd { justify-self: start; }

  .caixa-qtd__botao { width: 44px; min-width: 44px; min-height: 44px; }
  .caixa-qtd__campo { width: 64px; min-height: 44px; }

  /* A lista vira uma tabela so, e nao uma pilha de cartoes com folga entre eles. */
  .vitrine { gap: 0; }

  .produto { border-radius: 0; border-top: 0; }
  .produto:first-child { border-top: 1px solid var(--borda); border-radius: var(--raio) var(--raio) 0 0; }
  .produto:last-child { border-radius: 0 0 var(--raio) var(--raio); }

  .carrinho {
    display: block;
    position: sticky;
    top: 16px;
    align-self: start;
    inset: auto;
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
  }

  .carrinho__fechar { display: none; }
}