/* Lean mobile fixes: scope to small screens only to avoid desktop bloat */
html, body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }

img, video, canvas, iframe { max-width: 100%; height: auto; display: block; }

/* Base sizes kept modest */
:root {
  --step--1: 12px;
  --step-0: 14px;
  --step-1: 18px;
  --step-2: 22px;
}

@media (max-width: 768px) {
  /* Conservative base */
  body { font-size: var(--step-0); line-height: 1.45; }
  h1 { font-size: var(--step-1); margin: 10px 0; }
  h2 { font-size: 16px; margin: 8px 0; }
  h3 { font-size: 15px; margin: 6px 0; }

  /* Containers: remove huge paddings and fixed widths */
  .container, .wrapper, .content, main, section, header, footer, nav {
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 0;
    margin-right: 0;
  }

  /* Avoid global width:100% on everything. Only fix obvious grid/cards. */
  .grid, .cards, .items, .gallery, .produtos, .lista-produtos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
  }

  /* Buttons: full width only for CTA classes */
  .btn, .button, .cta, button[type="button"], a.btn {
    width: 100%;
    text-align: center;
    padding: 10px 12px;
  }

  /* Menus: wrap without overflow */
  nav ul { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 0; margin: 0; }
  nav li { list-style: none; }

  /* Cards and product tiles */
  .card, .produto, .item, .box { border-radius: 8px; overflow: hidden; }
  .card img, .produto img, .item img { object-fit: cover; width: 100%; height: auto; }

  /* Tables: scroll within container if needed */
  table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }

  /* Hero/Banners: prevent 100vh monsters on mobile */
  .hero, .banner, .topo, .cabecalho {
    height: auto !important;
    min-height: unset !important;
    padding-top: 12px;
    padding-bottom: 12px;
    background-size: cover;
    background-position: center;
  }

  /* Images or sections with fixed sizes: auto-scale down */
  [style*="width:"], [style*="min-width:"], [style*="max-width:"],
  [style*="height:"], [style*="min-height:"], [style*="max-height:"] {
    /* Do not force but avoid overflow */
    max-width: 100% !important;
  }

  /* Safe area for flutuantes */
  main { padding-bottom: 68px; }
}

/* Extra: small phones */
@media (max-width: 420px) {
  body { font-size: 13px; }
  h1 { font-size: 18px; }
  h2 { font-size: 15px; }
}