/* Seu Chips — página /pedido/ (rodada 8, 2026-10-11: a sacola v3, combos com combinação no cartão, avulsos sem teto)
   Reaproveita nav, footer, botões e tipografia de site.css. Aqui só o que é do pedido-sacola.
   Nenhum hex: toda cor vem de tokens.css (var() e rgba() numérico). */

/* ---------- Estrutura da página ---------- */
.pagina-pedido { background: var(--marrom); color: var(--marrom-escuro); }

.p-abertura {
  position: relative;
  padding-top: calc(var(--e-12) + 5rem);
  padding-bottom: var(--e-8);
  background: var(--marrom);
  color: var(--marrom-escuro);
  overflow: hidden;
}
.p-grao {
  position: absolute;
  inset: 0;
  background: url("/assets/img/grao.png") repeat;
  background-size: 320px;
  mix-blend-mode: soft-light;
  opacity: 0.24;
  pointer-events: none;
}
.p-abertura .wrap { position: relative; }
.p-abertura h1 { font-size: var(--t-1); font-weight: 800; color: var(--marrom-escuro); }
.p-sub {
  font-size: var(--t-4);
  color: inherit;
  margin: 0 0 var(--e-2);
}
.p-exp { max-width: var(--medida); margin: 0; }

.p-etapa { padding-block: var(--e-8); }
.p-etapa-marrom { background: var(--marrom); color: var(--marrom-escuro); }
.p-etapa h2 { font-size: var(--t-2); }
.etapa-num {
  display: inline-block;
  font-family: var(--fonte-display);
  font-variation-settings: "SOFT" 80, "WONK" 1;
  color: var(--azul-escuro);   /* texto grande: 3,3:1 sobre --marrom */
  margin-right: var(--e-1);
}
.p-fechar .etapa-num { color: var(--azul-escuro); }

/* ---------- 1 · produtos: combos e avulsos (rodada 8) ---------- */
.produtos { display: grid; gap: var(--e-4); }

/* Cartão de combo: mesma linguagem do .cartao (papel, raio e sombra dura) */
.combo-cartao {
  position: relative;
  background: var(--papel);
  color: var(--tinta-sobre-papel);
  border-radius: var(--raio-caixa);
  box-shadow: var(--sombra-caixa);
  padding: var(--e-3);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.combo-foto img { display: block; width: 100%; border-radius: var(--raio-s); }
.combo-nome {
  font-style: italic;
  font-weight: 900;
  font-size: var(--t-2);
  text-align: center;
  margin: 0;
}
.combo-sub { margin: 0; }
.combo-preco { margin: 0; font-weight: 600; font-size: var(--t-s); }
.combo-economia { margin: 0; font-size: var(--t-s); color: var(--tinta-sobre-papel-suave); }
.combo-itens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--e-2);
  row-gap: 0.35em;
  margin: 0;
  font-weight: 600;
  font-size: var(--t-s);
}
.combo-add { width: 100%; }
.combo-add[disabled] { opacity: 0.55; cursor: not-allowed; }

/* A escolha do segundo sabor dentro do Combo clássico: chips de radio de verdade */
.combo-escolha {
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
}
.combo-escolha legend { font-weight: 600; padding: 0 0 var(--e-1); }
.combo-radio { position: relative; }
.combo-radio input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.combo-radio > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 44px;
  padding: 0.4rem 1rem;
  border: var(--borda) solid var(--chip);
  border-radius: var(--raio-pill);
  font-weight: 600;
  line-height: 1.2;
  transition: background-color var(--dur-curta) var(--ease),
              color var(--dur-curta) var(--ease),
              border-color var(--dur-curta) var(--ease);
}
.combo-radio input:checked + span {
  background: var(--chip);
  border-color: var(--chip);
  color: var(--papel-claro);
}
.combo-radio input:focus-visible + span {
  outline: 3px solid var(--azul-escuro);
  outline-offset: 3px;
}
.combo-cartao .dica[hidden] { display: none; }

/* Bolinha de sabor (cor vem do token da pedra) */
.bolinha {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  flex: 0 0 auto;
}
.bolinha[data-sabor="classic"] { background: var(--classic-massa); }
.bolinha[data-sabor="onyx"] { background: var(--onyx); }
.bolinha[data-sabor="ambar"] { background: var(--ambar); }
.bolinha[data-sabor="ruby"] { background: var(--ruby); }

/* Grupo Avulsos */
.avulsos > h3 {
  font-size: var(--t-2);
  font-style: italic;
  font-weight: 900;
  color: var(--marrom-escuro);
  margin: var(--e-2) 0 0;
}
.avulsos-sub { margin: 0 0 var(--e-3); color: inherit; }

/* ---------- 2 · a sacola: os cookies em fileira (Ton, 13/10: "a dos cookies em fileira apenas vai ficar mais
   minimalista… vai poder exibir a quantidade escolhida e todos os ícones de cookies escolhidos"). O saco kraft saiu;
   fica um painel de papel com um ícone por cookie, encolhendo conforme a sacola cresce. ---------- */
.sacola-wrap {
  position: relative;
  max-width: 520px;
  margin: var(--e-4) auto var(--e-2);
  padding: var(--e-3);
  background: var(--papel-escuro);
  border: var(--contorno) solid var(--marrom-escuro);
  border-radius: var(--raio-caixa);
  box-shadow: var(--sombra-botao);
  transition: transform calc(250ms * var(--ms)) var(--ease-pouso);
}
/* Pulinho ao receber um cookie (o JS tira a classe depois de 250 ms) */
.sacola-wrap.recebeu { transform: scale(1.02); }
/* Ton, 13/10: os cookies em fileira, "um um pouco por cima do outro, como se fossem se encaixando".
   Cada um entra --sobre do próprio diâmetro no anterior (o mais novo fica por cima, na ponta da fileira);
   o padding devolve à primeira linha o recuo da margem negativa. */
.sacola-fileira {
  --cookie: 56px;
  --sobre: 0.36;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  padding-inline-start: calc(var(--cookie) * var(--sobre));
  min-height: var(--cookie);
}
/* Faixas de tamanho pela quantidade (o JS põe data-faixa): até 8, até 18, até 40, acima; quanto mais cookies, mais encaixe */
.sacola-fileira[data-faixa="2"] { --cookie: 44px; --sobre: 0.4; }
.sacola-fileira[data-faixa="3"] { --cookie: 36px; --sobre: 0.44; }
.sacola-fileira[data-faixa="4"] { --cookie: 28px; --sobre: 0.48; }
.sacola-fileira .cookie {
  width: var(--cookie);
  height: var(--cookie);
  flex: 0 0 auto;
  display: block;
  margin-inline-start: calc(var(--cookie) * var(--sobre) * -1);
}
/* Giro fixo por posição: as gotas não se repetem iguais lado a lado (não é animação).
   Todo cookie leva transform (o 1º do trio com 0deg): transform cria camada de pintura, e se só alguns girassem,
   os sem giro seriam pintados por baixo dos girados e quebrariam o "mais novo por cima" (achado da revisão, 13/10). */
.sacola-fileira .cookie { transform: rotate(0deg); }
.sacola-fileira .cookie:nth-child(3n+2) { transform: rotate(118deg); }
.sacola-fileira .cookie:nth-child(3n) { transform: rotate(236deg); }
/* Tela estreita: mais encaixe para a fileira caber numa linha (13 cookies cabem em 360 px) */
@media (max-width: 480px) {
  .sacola-fileira { --sobre: 0.42; }
  .sacola-fileira[data-faixa="2"] { --sobre: 0.5; }
  .sacola-fileira[data-faixa="3"] { --sobre: 0.52; }
  .sacola-fileira[data-faixa="4"] { --sobre: 0.55; }
}
.sacola-fileira .cookie .cookie-disco { stroke: var(--marrom-escuro); stroke-width: 4; } /* o contorno do traço da marca */

/* Ponto onde o cookie pousa: o fim da fileira, onde o ícone novo vai aparecer */
.sacola-alvo { display: block; width: 0; height: var(--cookie); flex: 0 0 auto; }

/* "+N" só quando a fileira passa de 96 cookies (acima disso o painel não aguenta um ícone por unidade) */
.sacola-mais {
  display: inline-block;
  margin-inline-start: var(--e-1);
  background: var(--marrom-escuro);
  color: var(--papel-claro);
  border-radius: var(--raio-pill);
  font-weight: 700;
  font-size: var(--t-s);
  line-height: 1;
  padding: 0.3rem 0.7rem;
}
.sacola-mais[hidden] { display: none; }
.sacola-wrap .sacola-vazia { margin: 0; max-width: none; }
/* Vazia (classe pelo JS): a fileira some e o cookie voa para o canto do painel, onde o 1º ícone aparece */
.sacola-wrap.vazia .sacola-fileira { min-height: 0; }
.sacola-wrap.vazia .sacola-alvo { height: 0; }

/* Lista viva: uma linha por item, com quantidade, nome, preço e −/+ */
.sacola-lista {
  list-style: none;
  margin: 0 0 var(--e-3);
  padding: 0;
  display: grid;
  gap: var(--e-1);
}
.sacola-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--e-1) var(--e-2);
  background: var(--marrom-escuro);
  color: var(--papel-claro);
  border-radius: var(--raio-s);
  padding: 0.4rem var(--e-2);
}
.item-qtd { font-family: var(--fonte-display); font-weight: 800; }
.item-nome small { display: block; font-size: var(--t-s); font-weight: 400; color: var(--azul-claro); }
.item-preco { font-weight: 600; white-space: nowrap; }
.sacola-item .contador { gap: var(--e-1); }
.sacola-item .contador-btn {
  background: transparent;
  border: var(--borda) solid var(--papel-claro);
  color: var(--papel-claro);
}
.sacola-item .contador-btn:hover { background: rgba(246, 236, 214, 0.12); color: var(--papel-claro); }
.sacola-item .contador-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.sacola-vazia {
  text-align: center;
  font-weight: 600;
  margin: 0 auto var(--e-3);
  max-width: var(--medida);
}

/* Cookie SVG na boca do saco (tingido pela pedra, via CSS) */
.cookie .cookie-disco { stroke-width: 0; }
.cookie-classic .cookie-disco { fill: var(--classic-massa); }
.cookie-classic .cookie-gota { fill: var(--classic-tinta); }
.cookie-onyx .cookie-disco { fill: var(--onyx); }
.cookie-onyx .cookie-gota { fill: var(--onyx-tinta); }
.cookie-ambar .cookie-disco { fill: var(--ambar); }
.cookie-ambar .cookie-gota { fill: var(--papel-claro); }
.cookie-ruby .cookie-disco { fill: var(--ruby); }
.cookie-ruby .cookie-gota { fill: var(--ruby-brilho); }

/* Cookie que voa do cartão até a caixa (transform-only via WAAPI) */
.voo-cookie {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  transform-origin: center;
  margin: 0;
}
.voo-cookie .cookie { width: 100%; height: 100%; display: block; }

/* Faíscas ao pousar */
.faisca {
  position: fixed;
  z-index: 81;
  width: 16px;
  height: 16px;
  color: var(--papel-claro);
  stroke: var(--marrom-escuro);   /* herda para o <use>: faísca clara com o traço escuro da marca */
  stroke-width: 2;
  paint-order: stroke;
  pointer-events: none;
  animation: faiscar calc(0.5s * var(--ms)) var(--ease) forwards;
}
@keyframes faiscar {
  0% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  40% { opacity: 1; transform: scale(1.15) rotate(20deg); }
  100% { opacity: 0; transform: scale(1) rotate(45deg); }
}

/* ---------- 2 · cartões dos sabores (avulsos) ---------- */
.cartoes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-4);
  margin-top: var(--e-6);
}
.cartao {
  position: relative;
  isolation: isolate;
  border-radius: var(--raio-caixa);
  box-shadow: var(--sombra-caixa);
  padding: var(--e-3);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
/* Rodada 11: a mesma identidade dos painéis da home (textura do pôster + cristal + cookie recortado).
   Rodada 12: o cookie fechado é a foto do cartão; o aberto (recheio) aparece por cima ao passar o mouse,
   ao focar qualquer controle do cartão ou com o sabor na sacola (.na-sacola, pedido.js). */
.cartao-classic { background-color: var(--classic-fundo); background-image: url("/assets/img/fundo-classic-720.webp"); color: var(--classic-tinta); }
.cartao-onyx { background-color: var(--onyx); background-image: url("/assets/img/fundo-onyx-720.webp"); color: var(--onyx-tinta); }
.cartao-ambar { background-color: var(--ambar-fundo); background-image: url("/assets/img/fundo-ambar-720.webp"); color: var(--ambar-tinta); }
.cartao-ruby { background-color: var(--ruby-fundo); background-image: url("/assets/img/fundo-ruby-720.webp"); color: var(--ruby-brilho); }

.cartao-foto { position: relative; }
.cartao-cristal {
  position: absolute;
  right: -4%;
  top: -6%;
  width: 70%;
  height: auto;
  aspect-ratio: 800 / 720;
  color: var(--onyx-tinta);
  opacity: 0.45;
  pointer-events: none;
}
.cartao-ambar .cartao-cristal { color: var(--ambar-tinta); opacity: 0.34; }
.cartao-ruby .cartao-cristal { color: var(--ruby-brilho); opacity: 0.28; }
.cartao-pilha {
  position: relative;
  display: grid;
  width: 82%;
  margin: var(--e-2) auto 0;
}
.cartao-foto img {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(var(--sombra-cookie));
  transition: opacity var(--dur-media) var(--ease);
}
.cartao-classic .cartao-foto img,
.cartao-ambar .cartao-foto img { filter: drop-shadow(var(--sombra-cookie-papel)); }
.cartao-foto .foto-aberto { opacity: 0; }
.cartao:hover .foto-aberto, .cartao:focus-within .foto-aberto, .cartao.na-sacola .foto-aberto { opacity: 1; }
.cartao:hover .foto-fechado, .cartao:focus-within .foto-fechado, .cartao.na-sacola .foto-fechado { opacity: 0; }
.cartao-nome {
  font-style: italic;
  font-weight: 900;
  font-size: var(--t-2);
  text-align: center;
  margin: 0;
}
.cartao-classic .cartao-nome { color: var(--classic-tinta); }
.cartao-onyx .cartao-nome { color: var(--onyx-tinta); }
.cartao-ambar .cartao-nome { color: var(--ambar-tinta); }
.cartao-ruby .cartao-nome { color: var(--ruby-brilho); }
.cartao-desc { margin: 0; }
.cartao-frase {
  font-family: var(--fonte-display);
  font-style: italic;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  margin: 0;
}
.cartao-preco { margin: 0; font-weight: 600; font-size: var(--t-s); }

/* O cartão inteiro é o botão "Pôr na sacola": o ::after estica o alvo */
.cartao-acoes { margin-top: auto; display: grid; gap: var(--e-2); }
.cartao-add::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.cartao-add { position: static; width: 100%; }
.contador {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
}
.contador-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--raio-pill);
  font-size: var(--t-4);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur-curta) var(--ease), color var(--dur-curta) var(--ease);
}
.cartao-onyx .contador-btn,
.cartao-ruby .contador-btn {
  background: transparent;
  border: var(--borda) solid var(--papel-claro);
  color: var(--papel-claro);
}
.cartao-onyx .contador-btn:hover,
.cartao-ruby .contador-btn:hover { background: rgba(246, 236, 214, 0.12); color: var(--papel-claro); }
.cartao-classic .contador-btn,
.cartao-ambar .contador-btn {
  background: var(--marrom-escuro);
  border: var(--borda) solid var(--marrom-escuro);
  color: var(--papel-claro);
}
.cartao-classic .contador-btn:hover,
.cartao-ambar .contador-btn:hover { background: var(--marrom-meio); color: var(--papel-claro); }
.contador-n {
  min-width: 2ch;
  text-align: center;
  font-family: var(--fonte-display);
  font-variation-settings: "SOFT" 80, "WONK" 1;
  font-weight: 800;
  font-size: var(--t-3);
}

/* [hidden] esconde de verdade: regras de display (.campo, .enviado, data-js) não podem vazá-lo */
.pagina-pedido [hidden] { display: none !important; }

/* ---------- 3 · fechar o pedido ---------- */
.p-fechar { background: var(--papel); color: var(--tinta-sobre-papel); }
.p-fechar h2 { color: var(--tinta-sobre-papel); }
#fechar { display: grid; gap: var(--e-3); max-width: 40rem; }
.campo { display: grid; gap: var(--e-1); border: 0; margin: 0; padding: 0; }
.campo label, .campo legend { font-weight: 600; padding: 0; }
.opcional { font-weight: 400; font-size: var(--t-s); color: var(--tinta-sobre-papel-suave); }
.campo input, .campo select, .campo textarea {
  font: inherit;
  color: var(--tinta-sobre-papel);
  background: var(--papel-claro);
  border: var(--borda) solid var(--chip);
  border-radius: var(--raio-s);
  padding: 0.65rem 0.9rem;
  min-height: 44px;
  width: 100%;
  min-width: 0;   /* 12/10: na grade CEP + número, a largura intrínseca do input estourava a página no mobile */
}
.campo textarea { resize: vertical; }
/* 12/10: endereço da entrega (CEP + número lado a lado; bairro + cidade idem) */
.campo-endereco { gap: var(--e-2); }
.campo-linha { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.campo-endereco .campo { gap: var(--e-1); }
.campo-radios { display: grid; gap: var(--e-1); }
.radio-linha {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  min-height: 44px;
  font-weight: 500;
}
.radio-linha input { width: 1.2rem; height: 1.2rem; accent-color: var(--azul-escuro); }
.dica { margin: 0; font-size: var(--t-s); color: var(--tinta-sobre-papel-suave); }

.frete { padding: var(--e-2); background: var(--papel-claro); border-radius: var(--raio-s); }
.frete strong { color: var(--marrom-escuro); }
.totais { margin: 0; font-family: var(--fonte-display); font-size: var(--t-4); font-weight: 600; color: var(--tinta-sobre-papel); }

.fechar-acoes { display: grid; gap: var(--e-2); justify-items: start; }
#btn-enviar[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn-contorno-papel {
  background: transparent;
  border: var(--contorno) solid var(--marrom-escuro);
  color: var(--marrom-escuro);
}
.btn-contorno-papel:hover { background: rgba(22, 10, 2, 0.08); color: var(--marrom-escuro); }
.btn-contorno-papel[disabled] { opacity: 0.55; cursor: not-allowed; }

.form-status { margin: 0; font-weight: 600; }
.enviado {
  border: var(--borda) solid var(--chip);
  border-radius: var(--raio-caixa);
  background: var(--papel-claro);
  box-shadow: var(--sombra-cartao);
  padding: var(--e-3);
  display: grid;
  gap: var(--e-2);
  justify-items: start;
}
.enviado-texto { margin: 0; font-weight: 600; }
.noscript-aviso {
  margin-top: var(--e-4);
  border: var(--borda) solid var(--chip);
  border-radius: var(--raio-caixa);
  background: var(--papel-claro);
  padding: var(--e-3);
  max-width: var(--medida);
}

/* ---------- Resumo vivo (barra fixa no mobile) ---------- */
.resumo {
  background: var(--marrom-escuro);
  color: var(--papel-claro);
  border-top: var(--borda) solid var(--marrom-meio);
  padding: var(--e-2) var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2) var(--e-3);
  flex-wrap: wrap;
}
.resumo-texto { margin: 0; font-weight: 600; }
/* Abaixo de 1024 px o "em vez de" segue na mesma linha do resumo, separado por "·" */
.resumo-sub {
  margin: 0;
  font-size: var(--t-s);
  color: var(--azul-claro);
}
.resumo-sub { flex-basis: 100%; }  /* linha própria, pequena */
.resumo.destaque { box-shadow: 0 0 0 3px var(--azul); }
.resumo-sub[hidden] { display: none; }
.resumo-fechar[hidden] { display: none; }   /* 12/10: a barra só aponta para a etapa 3, e só com itens */

/* ---------- Responsivo ---------- */
@media (max-width: 759px) {
  .cartoes { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body { padding-bottom: 96px; }
  .resumo {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    justify-content: space-between;
    gap: var(--e-2);
  }
  .resumo-texto { font-size: var(--t-s); }
}

/* A partir de 760 px os dois combos ficam lado a lado; os avulsos seguem em 2 colunas */
@media (min-width: 760px) {
  .totais { text-align: right; }
  .produtos { grid-template-columns: 1fr 1fr; align-items: start; }
  .avulsos { grid-column: 1 / -1; }
}

/* Desktop largo: produtos à esquerda; sacola + lista + resumo fixos à direita */
@media (min-width: 1024px) {
  .p-grade {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
    gap: var(--e-6);
    align-items: start;
  }
  .produtos { grid-column: 1; }
  .p-col-sacola { grid-column: 2; position: sticky; top: 96px; }
  .p-col-sacola h2 { margin-top: 0; }
  .p-col-sacola .resumo {
    margin-top: var(--e-3);
    border: var(--borda) solid var(--marrom-meio);
    border-radius: var(--raio-caixa);
    padding: var(--e-2) var(--e-3);
  }
}