/* ═══════════════════════════════════════════════════════════
   mobile/cardapio.css — Overrides Mobile
   Dolce Olive — carregado depois de pages/cardapio.css

   Esta é a tela mais usada por quem compra pelo celular, então
   recebeu um cuidado extra: alvos de toque maiores, o modal de
   montar o produto quase em tela cheia, e os botões de navegar
   nas fotos de decoração sempre visíveis (em Desktop eles só
   aparecem no hover do mouse — no touch isso nunca acontece).
═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  nav { position: relative; top: auto; }
  .cat-nav {top: 0; touch-action: pan-x; -webkit-overflow-scrolling: touch;}
}

@media (max-width: 640px) {
  nav { padding: 0 4%; }

  /* Barra de categorias (Bolos, Doces...): mais compacta para
     caber mais abas visíveis por vez, mas ainda fácil de tocar. */
  .cat-tab { padding: .7rem 1rem; font-size: 13px; }
  .cat-nav { justify-content: flex-start; }
  
  /* Flores decorativas do cabeçalho ficam menores e mais discretas,
     evitando "peso" visual em telas estreitas. */
  .lavanda-header-left,
  .lavanda-header-right { width: 220px; }

  .main { padding: 32px 4% 80px; }
  .section-head h2 { font-size: 18px; }

  .cards-grid { grid-template-columns: 1fr; }
  .product-card { padding: 24px 20px; }

  .gift-grid { grid-template-columns: 1fr; }
  .gift-card { padding: 24px 20px; }

  .info-box { padding: 24px 20px; gap: 18px; }

  /* Alvos de toque maiores nos controles de quantidade e nos
     chips de tamanho — o padrão Desktop é pensado para mouse. */
  .qty-btn { width: 38px; height: 38px; font-size: 16px; }
  .tier-chip { padding: 7px 14px; font-size: 11px; }

  .size-opts { grid-template-columns: 1fr; }

  /* Modal de montar o produto: ocupa quase a tela toda, sem
     cantos arredondados, com mais espaço de rolagem — muito mais
     fácil de usar com o polegar do que um card pequeno centralizado. */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%; width: 100%;
    max-height: 94vh; height: 94vh;
    border-radius: 16px 16px 0 0;
    padding: 24px 20px 28px;
    display: flex; flex-direction: column;
  }
  .modal-close { top: 14px; right: 16px; font-size: 22px; padding: 4px; }
  .modal-title { font-size: 16px; }

  /* Botões de avançar/voltar do modal ficam mais altos e em uma
     barra de largura total, fácil de alcançar com uma mão. */
  .modal-actions {
    margin: 20px -20px -28px;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
    background: #170240; border-top: 1px solid rgba(255,255,255,.08);
  }
  .btn-back, .btn-gold { padding: 13px 20px; }
}

@media (max-width: 480px) {
  .decor-opts { grid-template-columns: repeat(3,1fr); }
  .page-header { padding-top: calc(var(--nav-h) + 48px); padding-bottom: 40px; }
  .lavanda-header-left,
  .lavanda-header-right { width: 160px; }
}

@media (max-width: 360px) {
  .decor-opts { grid-template-columns: repeat(2,1fr); }
  .modal-actions { flex-direction: column; }
  .btn-gold { order: -1; }
}

/* Em telas de toque, os botões de navegar entre fotos (decoração
   e presentes) precisam aparecer sempre — não existe "hover" para
   revelá-los como no Desktop. */
@media (hover: none) {
  .decor-opt .di-prev, .decor-opt .di-next,
  .card-di-prev, .card-di-next { opacity: 1; }
}