/* ==========================================================================
   CAMADA ENXUTA  —  css/enxuto.css
   --------------------------------------------------------------------------
   PARA VOLTAR ATRÁS: apague a linha <link ... enxuto.css> das páginas.
   Nenhum arquivo além desta camada foi tocado para deixar a loja mais limpa,
   então remover a linha devolve o visual anterior inteiro, sem sobra.

   O QUE ESTA CAMADA FAZ — e o que ela NÃO faz
   Ela aperta o espaço e alivia o peso: menos padding, sombra mais discreta,
   borda mais fina, texto de ajuda menor. Ela NÃO tira informação da tela. A
   dona é iniciante e os textos de ajuda são o que faz ela conseguir usar o
   painel sozinha; sumir com eles seria confundir "limpo" com "vazio".

   E ela CRESCE uma coisa de propósito: o alvo dos botões de tocar. Estavam
   com 40px e a recomendação para o dedo é 44px (Apple) / 48dp (Material).
   Minimalismo que faz errar o toque não é minimalismo, é erro.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) PESO: sombra e borda
   -------------------------------------------------------------------------- */

:root {
  /* A sombra antiga tinha duas camadas e 18px de desfoque; num fundo claro
     isso vira sujeira cinza em volta de cada card. */
  --sombra: 0 1px 2px rgba(38, 48, 42, .04), 0 4px 12px rgba(38, 48, 42, .05);
  --sombra-forte: 0 8px 24px rgba(38, 48, 42, .12);
}

/* --------------------------------------------------------------------------
   2) A LOJA (vitrine e página da cestinha)
   -------------------------------------------------------------------------- */

.bloco {
  padding: 17px 18px;
  margin: 18px 0;
}

.bloco h2 {
  font-size: 1.12rem;
  margin-bottom: 12px;
}

/* A lista do "O que vem dentro" respirava mais do que precisava. */
.itens li { padding: 6px 0; }

.produto__descricao { margin-bottom: 4px; }


/* --------------------------------------------------------------------------
   3) O PAINEL DA DONA
   --------------------------------------------------------------------------
   O painel tem sete abas e dezenas de campos. É aqui que o aperto rende mais:
   cada campo economiza uma linha, e são muitos campos.
   -------------------------------------------------------------------------- */

.ajuda {
  font-size: .82rem;
  line-height: 1.45;
  margin-top: 5px;
}

.campo { margin-bottom: 14px; }

.grupo__corpo { padding: 14px 16px 16px; }
.grupo__topo { padding: 13px 14px; }

.item-admin { padding: 10px 12px; }

.barra-topo { margin-bottom: 14px; }

/* Os chips de categoria ficavam com 46px de
   altura cada. Numa lista de dez, são 3 linhas de 46px só de chip. */
.tipo-chip { min-height: 42px; }

/* --------------------------------------------------------------------------
   4) O DEDO  —  isto AUMENTA, e é de propósito
   --------------------------------------------------------------------------
   "pointer: coarse" é o dedo, não o mouse: só telas de toque recebem o alvo
   maior. No computador o botão continua compacto, que ali o mouse acerta.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
  .tipo-chip, .chip, .botao--pequeno, .link-texto { min-height: 44px; }
  .botao-icone { min-width: 44px; min-height: 44px; }
}

/* Cinto E suspensório: a regra de cima depende de o navegador se declarar
   "dedo", e nem todo se declara. Tela estreita é celular na prática, então
   o alvo grande vale ali de qualquer jeito. */
@media (max-width: 899px) {
  .tipo-chip, .chip, .botao--pequeno, .link-texto { min-height: 44px; }
  .botao-icone { min-width: 44px; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   5) CELULAR
   --------------------------------------------------------------------------
   A foto da cestinha já tinha caído de 57% para 42% da tela. A recomendação
   para comércio no celular é a foto não passar de ~40% da altura: acima disso
   o preço e o botão de pedir saem da primeira tela.
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .produto__foto { max-width: calc(38vh * 0.8); }
  .bloco { padding: 14px 13px; margin: 14px 0; }
  .bloco h2 { font-size: 1.05rem; margin-bottom: 10px; }
  .produto__preco { font-size: 1.5rem; }
}

/* --------------------------------------------------------------------------
   6) VITRINE NO CELULAR — ver mais cestinhas por tela
   --------------------------------------------------------------------------
   O card tinha 373px de altura: 198 de foto e 172 de texto e respiro. Cabiam
   exatamente 2 fileiras numa tela. A foto fica como está — ela é o que vende,
   e já tentamos quadrado uma vez e cortou a cestinha. O aperto é todo no
   texto embaixo dela.

   Duas regras que ficam:
   - a categoria continua em 12px, que é o piso de leitura no celular;
   - o alvo de toque NÃO encolhe. O "Quero esta" tinha 44px de altura própria,
     mas o card inteiro já é o link (<a class="cartao">): o dedo acerta
     qualquer ponto de 160 x 300px. O rótulo pode ser pequeno sem custo.
   -------------------------------------------------------------------------- */

@media (max-width: 699px) {
  .grade { gap: 11px; }

  .cartao__corpo { padding: 9px 10px 10px; gap: 1px; }

  .cartao__categoria { letter-spacing: .03em; line-height: 1.3; }

  .cartao__nome { font-size: .9rem; line-height: 1.22; }

  .cartao__preco { font-size: 1.05rem; }

  .cartao__acao {
    margin-top: 6px;
    padding-top: 6px;
    min-height: 0;
    font-size: .82rem;
  }
}

/* --------------------------------------------------------------------------
   7) PÁGINA DA CESTINHA NO CELULAR — um pouco menos
   --------------------------------------------------------------------------
   Pedido explícito: diminuir aqui também, mas MENOS que na vitrine. Aqui a
   cliente já escolheu e está lendo com calma o que vem dentro — a lista pode
   apertar o respiro, mas o texto continua confortável de ler.
   Cada item ocupava ~49px (38 da linha + 11 de vão).
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .itens { gap: 5px; }
  .itens li { font-size: .95rem; padding: 3px 0; gap: 10px; }
  .itens li::before { width: 19px; height: 19px; background-size: 12px; }
}