/* ==========================================================================
   MONTE SUA CESTA — o visual do módulo (ramo com-monte)
   --------------------------------------------------------------------------
   A página de montar (monte.html), o cartão de convite na vitrine, os itens
   a mais na página da cestinha e as telas do Monte no painel.

   As cores vêm TODAS das variáveis do :root do css/estilo.css: trocou a
   paleta da loja, o Monte acompanha. Carrega depois do enxuto.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   12.4) MONTE SUA CESTA
   -------------------------------------------------------------------------- */

.apresentacao--monte { text-align: left; padding: 8px 0 4px; }
.apresentacao--monte h1 { font-size: clamp(1.6rem, 6.5vw, 2.2rem); }
.apresentacao--monte p { margin: 0; max-width: 56ch; }

/* Cartao especial na vitrine que leva para a montagem */
.cartao--monte { border-style: dashed; }

.cartao--monte .cartao__foto {
  background: var(--cor-primaria-suave);
  display: grid;
  place-items: center;
}

.cartao--monte .cartao__foto svg {
  width: 44%;
  height: auto;
  color: var(--cor-primaria);
}

.cartao--monte .cartao__preco { color: var(--cor-primaria-escura); font-size: .95rem; }

/* Lista de itens para escolher */
.monte {
  display: grid;
  gap: 10px;
  margin: 14px 0 20px;
  padding-bottom: 24px;
}

.item-monte {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: 10px 12px 10px 10px;
  box-shadow: var(--sombra);
  transition: border-color .15s ease, background .15s ease;
}

/* Item ja escolhido fica marcado, para a cliente nao se perder na lista */
.item-monte.escolhido {
  border-color: var(--cor-primaria);
  background: color-mix(in srgb, var(--cor-primaria) 6%, var(--cor-superficie));
}

.item-monte__foto {
  width: 62px; height: 62px;
  flex: 0 0 auto;
  border-radius: var(--raio-p);
  overflow: hidden;
  background: var(--cor-primaria-suave);
}
.item-monte__foto img { width: 100%; height: 100%; object-fit: cover; }
.item-monte__foto .foto-vazia { background-size: 52%; }

.item-monte__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.item-monte__info strong { font-size: .97rem; line-height: 1.25; color: var(--cor-texto); }
.item-monte__info span { font-size: .84rem; color: var(--cor-texto-suave); line-height: 1.35; }

.item-monte__preco {
  font-family: var(--fonte-titulo);
  font-size: 1.08rem;
  color: var(--cor-primaria);
}

/* Preço à esquerda, botões à direita, na mesma linha.
   O nome do item fica com a largura inteira acima. */
.item-monte__rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;      /* se nao couber, os botoes descem — nunca estouram */
  gap: 8px 12px;
  margin-top: 5px;
}

/* Botoes de menos e mais */
.passo { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }

.passo__botao {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-primaria-escura);
  cursor: pointer;
  padding: 0;
  transition: background .12s ease, border-color .12s ease;
}
.passo__botao svg { width: 17px; height: 17px; }
.passo__botao:hover:not([disabled]) { border-color: var(--cor-primaria); }
.passo__botao:active:not([disabled]) { transform: scale(.94); }
.passo__botao[disabled] { opacity: .35; cursor: not-allowed; }

.passo__botao--mais {
  background: var(--cor-botao);
  border-color: var(--cor-botao);
  color: var(--cor-botao-texto);
}
.passo__botao--mais:hover { background: var(--cor-botao-hover); }

.passo__qtd {
  min-width: 30px;
  text-align: center;
  font-weight: 700;
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
  color: var(--cor-texto);
}

/* Barra fixa com o total que sobe em tempo real */
.barra-total__interno { display: flex; flex-direction: column; gap: 9px; }

.barra-total__linha {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.barra-total__rotulo {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

.barra-total__valor {
  font-family: var(--fonte-titulo);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--cor-primaria);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.barra-total__vazio {
  margin: 0;
  text-align: center;
  color: var(--cor-texto-suave);
  font-size: .93rem;
  padding: 5px 0;
}

.barra-total__aviso {
  margin: 0;
  font-size: .84rem;
  color: #8a3324;
  background: #f7e7e3;
  border-radius: var(--raio-p);
  padding: 8px 12px;
}

.botao--travado { opacity: .5; pointer-events: none; }

/* Celular bem estreito (iPhone SE e afins): a linha do item nao cabia com
   foto de 62px + preco + os dois botoes, e a pagina rolava para o lado. */
@media (max-width: 359px) {
  /* O espaço sai da foto e das margens, NUNCA do tamanho dos botões:
     40px é o mínimo para o dedo acertar sem errar. Se ainda assim não
     couber (preço comprido), o flex-wrap desce os botões para a linha
     de baixo — feio é melhor que rolagem lateral. */
  .item-monte { padding: 9px; gap: 9px; }
  .item-monte__foto { width: 52px; height: 52px; }
  .item-monte__preco { font-size: 1rem; }
  .passo__qtd { min-width: 24px; }
}

@media (min-width: 900px) {
  /* Exceção: na página de montar, o total continua fixo também no
     computador — é ele que dá a sensação de "o valor está subindo". */
  .pagina-monte .barra-fixa {
    display: block;
    position: fixed;
    background: var(--cor-fundo);
    background: color-mix(in srgb, var(--cor-fundo) 93%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--cor-borda);
    padding: 14px 18px;
  }
  .pagina-monte .barra-total__interno {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    max-width: var(--largura);
    margin: 0 auto;
  }
  .pagina-monte .barra-total__linha { flex: 0 0 auto; gap: 22px; }
  .pagina-monte .barra-fixa .botao { width: auto; min-width: 280px; }
  .pagina-monte .rodape { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   14) ITENS A MAIS NA PÁGINA DA CESTINHA
   --------------------------------------------------------------------------
   Parente pobre do .item-monte de propósito: aqui a lista vem DEPOIS do que
   interessa, que é a cestinha. Linha mais baixa, foto menor, sem descrição —
   quem chegou nesta página já decidiu o principal.
   -------------------------------------------------------------------------- */

#bloco-extras > div { display: flex; flex-direction: column; gap: 8px; }

.extra {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-p);
  padding: 7px 9px;
  transition: border-color .15s ease, background .15s ease;
}

.extra--escolhido {
  border-color: var(--cor-primaria);
  background: color-mix(in srgb, var(--cor-primaria) 6%, var(--cor-superficie));
}

.extra__foto {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  border-radius: var(--raio-p);
  overflow: hidden;
  background: var(--cor-primaria-suave);
}
.extra__foto img { width: 100%; height: 100%; object-fit: cover; }
.extra__foto .foto-vazia { background-size: 52%; }

.extra__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.extra__info strong { font-size: .92rem; line-height: 1.25; color: var(--cor-texto); }

.extra__preco {
  font-family: var(--fonte-titulo);
  font-size: .95rem;
  color: var(--cor-primaria);
}

/* O contador vive na MESMA linha do titulo. Ele e a resposta para "posso
   continuar?", entao tem que estar onde o olho ja esta — e ocupando zero
   linha propria, porque a tela da cliente ja estava cheia. */
.extras__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.extras__topo h2 { margin: 0; }

.extras__regra {
  font-size: .85rem;
  color: var(--cor-texto-suave);
  white-space: nowrap;
}
.extras__regra--cheio { color: var(--cor-primaria-escura); font-weight: 700; }

/* A conta do preco, embaixo do numero grande: "R$ 269,90 da cestinha + R$ 42,00
   em 3 itens a mais". Sem isto o total sobe e a cliente nao sabe de onde veio. */
.produto__extras {
  display: block;
  font-family: var(--fonte-corpo);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cor-texto-suave);
  margin-top: 5px;
}

/* O total com extras, dentro da barra fixa, logo acima do botão. */
.barra-extras {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.barra-extras span {
  font-size: .82rem;
  color: var(--cor-texto-suave);
  text-transform: lowercase;
}
.barra-extras strong {
  font-family: var(--fonte-titulo);
  font-size: 1.25rem;
  color: var(--cor-primaria);
}

/* O "ver os outros N itens": discreto, centralizado, sem virar botão. */
.extras__mais { text-align: center; margin: 12px 0 0; }

/* Aviso dentro de um campo do painel: mesma família do .ajuda, mas com peso
   suficiente para ela não passar batido por uma configuração que se contradiz. */
.ajuda--alerta {
  color: #8a3324;
  font-weight: 600;
  background: rgba(138, 51, 36, .07);
  border-radius: var(--raio-p);
  padding: 8px 10px;
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   16) CHIP DE ESCOLHA (liga/desliga)
   --------------------------------------------------------------------------
   Usado para marcar quais itens uma cestinha aceita como item a mais.

   O GANCHO DE ESTILO É O aria-pressed, não uma classe.
   Eu tinha usado uma classe ".tipo-chip--ativo" que simplesmente NÃO EXISTIA
   no CSS: o estado mudava por dentro e a tela ficava igual. Com o seletor
   preso ao aria-pressed, o que o leitor de tela anuncia e o que o olho vê são
   a mesma coisa — não há como um mudar e o outro não.

   E o tique não é enfeite: marcado não pode depender só da cor, senão quem
   não distingue as duas não sabe o que escolheu.
   -------------------------------------------------------------------------- */

.chip-escolha {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 9px 15px;
  border-radius: var(--raio-pilula);
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.chip-escolha:hover { border-color: var(--cor-primaria); }

.chip-escolha[aria-pressed="true"] {
  background: var(--cor-botao);
  border-color: var(--cor-botao);
  color: var(--cor-botao-texto);
}

.chip-escolha__tique {
  font-size: .9em;
  width: 0;
  overflow: hidden;
  transition: width .14s ease;
}
.chip-escolha[aria-pressed="true"] .chip-escolha__tique { width: 1em; }

@media (prefers-reduced-motion: reduce) {
  .chip-escolha, .chip-escolha__tique { transition: none; }
}

/* --------------------------------------------------------------------------
   VERSÃO ENXUTA (vinha do css/enxuto.css)
   --------------------------------------------------------------------------
   Estas regras vêm DEPOIS das de cima de propósito: apertam o espaço e
   aumentam o alvo do dedo, como o enxuto.css faz no resto do site. */

/* As linhas dos itens a mais: a foto continua (é ela que faz a cliente
   escolher), o resto encolhe. */
.extra { padding: 6px 8px; gap: 9px; }
.extra__foto { width: 42px; height: 42px; border-radius: var(--raio-p); }
.extra__info strong { font-size: .9rem; }
.extra__preco { font-size: .9rem; }
#bloco-extras > div { gap: 6px; }

@media (pointer: coarse) {
  .passo__botao { width: 44px; height: 44px; }
}

@media (max-width: 899px) {
  .passo__botao { width: 44px; height: 44px; }
  .extras__topo { margin-bottom: 8px; }
  .extra__info strong { font-size: .86rem; line-height: 1.24; }
}

/* O card de convite do Monte na grade: foco de teclado igual ao dos outros. */
.cartao--nada:focus-visible {
  outline: 3px solid var(--cor-primaria-escura);
  outline-offset: 3px;
  border-radius: var(--raio);
}

/* Os atalhos da demonstração ("Painel da loja" e "Cores e fontes", do
   css/temas.css) sobem acima da barra do total, que na página de montar fica
   fixa também no computador. */
.pagina-monte .demo-atalhos { bottom: 104px; }
.pagina-monte .tema-painel { bottom: 160px; max-height: calc(100vh - 186px); }