/* =====================================================================
   MILA CALÇADOS — responsive.css
   Ajustes por breakpoint. Projetado de fato para o celular:
   tipografia, grids, hero, cards, toque e navegação repensados.
   ===================================================================== */

/* ---------- Notebook / telas médias ---------- */
@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.3fr; }
  .footer-col--policies { grid-column: span 3; }
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  :root { --header-h: 66px; }

  /* Nav vira menu hamburger */
  .main-nav { display: none; }
  .nav-toggle { display: grid; }
  .header-wa .btn span { display: none; } /* botão WA vira ícone */
  .header-wa .btn { --pad-x: 0; width: 44px; height: 44px; border-radius: 50%; padding: 0; }

  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
  .insta-grid { grid-template-columns: repeat(4, 1fr); }

  .banner-inner { grid-template-columns: 1fr; }
  .banner-media { min-height: 300px; height: 300px; position: relative; }
  .proof-inner { grid-template-columns: 1fr; }
  .proof-media { max-width: 460px; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
  .footer-col--policies { grid-column: auto; }
}

/* ---------- Carrossel editorial: empilha (foto em cima, texto embaixo) ---------- */
@media (max-width: 820px) {
  .ed-inner { grid-template-columns: 1fr; gap: 1.4rem; }
  .ed--reverse .ed-media { order: 0; }           /* foto sempre em cima no mobile */
  .ed-panel { max-width: none; }
  .ed-viewport { aspect-ratio: 4 / 5; }
  /* setas maiores e fáceis de tocar no celular */
  .ed-arrow { width: 44px; height: 44px; }
  .editorial + .editorial { padding-top: clamp(2rem, 6vw, 3rem); }
}

/* ---------- Hero: empilha e vira full-bleed no mobile ---------- */
@media (max-width: 820px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; padding-block: 2.2rem 2.6rem; }
  .hero-copy { max-width: 34rem; margin-inline: auto; order: 2; }
  .hero-copy .eyebrow { margin-bottom: .8rem; }
  .hero-sub { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-proof { justify-content: center; }
  .hero-media { order: 1; max-width: 440px; margin-inline: auto; }
  .hero-media img { aspect-ratio: 4 / 5; object-position: center 25%; }
  .hero-media .hero-tag { left: 50%; transform: translateX(-50%); bottom: -18px; }
}

/* ---------- Smartphone ---------- */
@media (max-width: 560px) {
  :root { --gutter: 1.15rem; }

  .hero-actions .btn { flex: 1 1 auto; }
  .hero-title { font-size: clamp(2.4rem, 12vw, 3.2rem); }

  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
  .cat-card .cat-label span { font-size: 1.18rem; }

  /* Produtos: 2 colunas confortáveis no celular */
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .prod-name { font-size: 1.06rem; }
  .prod-price { font-size: 1rem; }
  .prod-media { margin-bottom: .7rem; }
  /* No toque não há hover: mostra a dica "Ver detalhes" de forma sutil */
  .prod-hint { opacity: 1; transform: none; font-size: .68rem; padding: 1.1rem .6rem .6rem; }

  .insta-grid { grid-template-columns: repeat(2, 1fr); }

  /* Modal de produto empilha: foto em cima, informações embaixo */
  .pmodal-body { grid-template-columns: 1fr; }
  .pmodal-dialog { max-height: 90vh; }
  .pm-main { aspect-ratio: 4 / 3; }

  .trust ul { gap: .5rem 1.4rem; }
  .trust li { font-size: .74rem; }

  .prod-toolbar { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: .4rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .prod-toolbar::-webkit-scrollbar { display: none; }
  .filter-chip { flex: none; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { justify-content: center; text-align: center; }

  .wa-float { width: 54px; height: 54px; }
}

/* ---------- Telas muito pequenas ---------- */
@media (max-width: 360px) {
  .prod-grid, .cat-grid { grid-template-columns: 1fr; }
}

/* ---------- Desktop grande ---------- */
@media (min-width: 1500px) {
  :root { --wrap: 1340px; }
}