/* r2menu/cardapio/estilo.css */

/* ========= Base ========= */
* { box-sizing: border-box; }

body {
  font-family: 'Segoe UI', sans-serif;
  background: #f5f9ff;
  margin: 0;
  padding: 0;
  color: #333;
}

/* largura máxima / centralização (desktop) */
.gm-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px;
}

/* ========= GRID (consolidado) ========= */
/* Desktop padrão: tamanhos fluídos */
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  padding: 20px;
  max-width: 1200px;
  margin: auto;
}

/* Ultra estreito (<320): 1 por linha para não espremer demais */
@media (max-width: 319.98px){
  .grid{ grid-template-columns: 1fr !important; gap: 12px !important; }
}

/* MOBILE (≤767): **2 por linha em qualquer celular** */
@media (min-width: 320px) and (max-width: 767.98px){
  .grid{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 14px !important;
  }
}

/* Tablet pequeno (768–991): 3 por linha */
@media (min-width: 768px) and (max-width: 991.98px){
  .grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}

/* Desktop (≥992): 4 por linha; ajuste acima conforme preferir */
@media (min-width: 992px) and (max-width: 1199.98px){
  .grid{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}

/* Large (≥1200): 5 colunas */
@media (min-width: 1200px) and (max-width: 1399.98px){
  .grid{ grid-template-columns: repeat(5, minmax(0,1fr)) !important; }
}

/* XL (≥1400): 6 colunas (opcional) */
@media (min-width: 1400px){
  .grid{ grid-template-columns: repeat(6, minmax(0,1fr)) !important; }
}

/* ========= CARD ========= */
.produto{
  background:#fff;
  border:1px solid #e9eef3;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.produto:hover{
  transform: translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
  border-color:#ffd740;
}
.item{ border-top: 5px solid #ffd740; } /* Amarelo claro, visível sempre */

/* ----- IMAGEM ----- */
.produto .img-wrap{
  position:relative;
  background:#fff;
  aspect-ratio: 4 / 3;        /* mobile dá mais altura para a foto */
}
@media (min-width: 992px){
  .produto .img-wrap{ aspect-ratio: 16 / 9; } /* desktop fica mais wide */
}
.produto .img-wrap img{
  width:100%;
  height:100%;
  object-fit: cover;           /* cobre sem deformar (corta um pouco se preciso) */
  display:block;
  border-radius:10px;
}
.produto .sem-imagem{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  color:#9aa4b2; background:#f6f8fa; font-size:38px;
}

/* ----- BADGE PROMO ----- */
.badge-promo{
  position:absolute; top:8px; left:8px;
  display:flex; gap:6px; align-items:center;
  background:linear-gradient(135deg,#ef4444,#b91c1c);
  color:#fff; padding:6px 10px; border-radius:999px;
  font-size:.78rem; font-weight:700; box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.badge-promo strong{
  background:rgba(255,255,255,.15); padding:2px 6px; border-radius:999px;
}

/* ----- CONTEÚDO ----- */
.conteudo{ padding: 12px 14px 14px; display:grid; gap:8px; flex-grow:1; }
.tipo{ display:flex; align-items:center; gap:8px; color:#6b7280; font-size:.9rem }
.titulo{ font-size:1rem; font-weight:800; letter-spacing:.2px; margin:0; color:#222; }
.descricao{ color:#677287; font-size:.92rem }

/* preço (mantendo sua semântica) */
.preco{ display:flex; align-items:baseline; gap:8px; margin-top:4px; color:#009ee3; font-weight:bold; font-size:1rem; }
.preco .de{ color:#9ca3af; text-decoration:line-through; font-size:.95rem; }
.preco .por{ color:#065f46; font-weight:800; font-size:1.15rem; }
.preco .custom{ color:#6f42c1; }

/* chip tipo */
.chip-tipo{
  background:#eaf4ff; color:#007bff;
  padding:2px 8px; border-radius:8px;
  font-size:.75rem; font-weight:700;
}

/* botão */
.botao button{
  background:#ffc107; color:#000;
  border:none; padding:10px 16px;
  font-size:.95rem; border-radius:8px;
  cursor:pointer; transition:background .3s ease;
  width:100%; font-weight:600;
}
.botao button:hover{ background:#e6b800; transform:scale(1.02); }

/* skeleton para imagens */
.skeleton{
  background:linear-gradient(90deg,#eee,#f6f6f6,#eee);
  background-size:200% 100%; animation:sh 1.2s infinite;
}
@keyframes sh{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Acessibilidade / foco */
.produto{ cursor: pointer; }
.produto a, .produto button{ cursor: default; }
.produto:focus-visible{
  outline: 3px solid #2563eb;
  outline-offset: 3px;
  border-radius: 14px;
}

/* Ajustes finos para telas muito pequenas */
@media (max-width: 480px){
  .titulo{ font-size:.97rem; }
  .preco .por{ font-size:1.06rem; }
}

/* ========= PATCHS DE CONFIABILIDADE (Android/WebView) ========= */
/* Evita que qualquer filho force a coluna a “abrir” no mobile */
.grid > * { min-width: 0; }

/* iOS/Android antigos às vezes perdem o alinhamento */
.grid { align-items: start; }

/* --- FORÇA 2 COLUNAS NO MOBILE (Android/WebView) --- */
@media (max-width: 767.98px){
  .grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 14px !important;
    align-items: start;
  }
  .grid > *,
  .produto,
  .produto .img-wrap,
  .produto .conteudo{ min-width: 0 !important; }

  /* caso algum CSS antigo tenha fixado largura do card */
  .produto{ width: auto !important; }
}

/* Fallback do aspect-ratio (browsers antigos) */
.produto .img-wrap::before{ content:""; float:left; padding-top:75%; }
.produto .img-wrap::after{ content:""; display:block; clear:both; }