/* ============================================================
   TEATia Loja — Correções de UI (adicional global)
   Padroniza os cartões de produto, remove bordas feias e
   garante responsividade estável em telas de notebook/celular.
   ============================================================ */

/* ---- Cartões de produto (dinâmicos da API e estáticos) ----
   Os cards renderizam: <div class="...aspect-[4/5]..."><img class="...object-contain p-6...">
   Sobrescrevemos para preencher o quadro de forma UNIFORME. */
.produto-item [class*="aspect-"],
#produto-grid [class*="aspect-"],
main [class*="aspect-"][class*="overflow-hidden"] {
  background: #ffffff;
}
/* Imagem: preenche todo o quadro (crop central), sem letterbox/padding */
.produto-item [class*="aspect-"] img,
#produto-grid [class*="aspect-"] img,
main [class*="aspect-"][class*="overflow-hidden"] img {
  object-fit: cover !important;
  padding: 0 !important;
  width: 100%;
  height: 100%;
}

/* ---- Remove a moldura pesada dos cartões: mais limpo ---- */
a.produto-item,
.produto-item,
#produto-grid article {
  border-color: #efe9f7;
  box-shadow: 0 1px 4px rgba(84, 56, 143, 0.09);
}

/* Ícones/badges continuam acima da imagem */
.produto-item [class*="aspect-"] > span,
#produto-grid [class*="aspect-"] > span { z-index: 2; }

/* ---- Bloco "Destaque" no topo da /loja acompanha os cards no mobile ---- */
@media (max-width: 1024px) {
  .produto-item [class*="aspect-"],
  #produto-grid [class*="aspect-"],
  main [class*="aspect-"][class*="overflow-hidden"] { aspect-ratio: 4 / 5 !important; }
}

/* ---- Responsividade geral (notebook menor / tablet) ---- */
@media (min-width: 641px) and (max-width: 1280px) {
  .container-tea { padding-left: 20px; padding-right: 20px; }
}

/* ---- Garante que seções .reveal NUNCA fiquem invisíveis ----
   Fallback: se o smooth-scroll reveal falhar (ex.: voltar via histórico/bfcache),
   o conteúdo aparece normalmente. */
.reveal { visibility: visible !important; opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; }
}

/* ---- Textos um pouco menores em telas compactas (evita "tudo grande") ---- */
@media (max-width: 1280px) {
  .produto-item .font-display.text-xl { font-size: 1.1rem; }
  .produto-item .font-display.text-\[28px\] { font-size: 24px; }
}

/* ---- Hero não fica "gigante" em telas de notebook menores ---- */
@media (min-width: 641px) and (max-width: 1279px) {
  .h-display.text-5xl, .h-display.text-6xl, .h-display.text-7xl,
  h1.h-display, h1.text-7xl, h1.text-6xl, h1.text-5xl {
    font-size: clamp(2.1rem, 5.2vw, 3.1rem) !important;
    line-height: 1.08 !important;
  }
  h2.h-display.text-4xl, h2.h-display.text-5xl,
  h2.text-4xl, h2.text-5xl {
    font-size: clamp(1.6rem, 3.4vw, 2.2rem) !important;
  }
}

/* ---- Ajustes em telas bem estreitas (mobile) ---- */
@media (max-width: 640px) {
  .h-display.text-5xl, h1.h-display, h1.text-7xl, h1.text-6xl, h1.text-5xl {
    font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
    line-height: 1.1 !important;
  }
}

/* ============================================================
   Tipografia refinada (mais legível, elegante e profissional)
   ============================================================ */
/* Leitura mais confortável no corpo de texto */
body, .text-ink-700, .text-ink-600, p, .prose-tea * {
  letter-spacing: -0.01em;
}
.prose-tea, .leading-relaxed {
  line-height: 1.65;
}
/* Limpa o corpo dos parágrafos nas descrições de produto */
.prose-tea p, .product-desc p {
  color: var(--color-ink-700, #312640);
}
/* Direção: títulos um pouco mais equilibrados */
.h-display, .font-display {
  letter-spacing: -0.02em;
}
/* Botões e interações mais agradáveis */
button, .btn, a.btn-primary, a.btn-ghost {
  -webkit-font-smoothing: antialiased;
}
/* Espaçamento generoso entre cards de produto */
#produto-grid { row-gap: 1.75rem; }
/* Preço em destaque, hierarquia clara */
#produto-grid .font-display.text-\[28px\], #produto-grid [class*="text-\[28"] {
  letter-spacing: -0.02em;
}
/* Footer/rodapé um pouco mais arejado */
footer .container-tea { line-height: 1.6; }