/* Mobile polish — touch targets, safe areas, rhythm (≤680px, matches header breakpoint) */

@media (max-width: 680px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  /* Lateral breathing room + notch / home indicator */
  .wrap {
    padding-inline: max(16px, env(safe-area-inset-left))
      max(16px, env(safe-area-inset-right));
  }

  /* Loja — “ESCOLHE O TEU MODELO”: body prefix beats caneleiras load order */
  body .shop-hero {
    margin-top: clamp(48px, 12vw, 72px);
    padding: 30px 0 20px;
  }

  .shop-hero h1 {
    line-height: 1.06;
    letter-spacing: 0.35px;
  }

  .shop-hero p {
    line-height: 1.65;
    max-width: 34ch;
  }

  /* Homepage hero CTA — tamanhos em hero.css (mobile); aqui só reforço se necessário */

  /* Hamburger: mínimo ~44×44 (Apple HIG) */
  .menu-toggle {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  /* Bloco “Pronto para mudar o teu jogo?” */
  .cta-contacto {
    padding-inline: max(16px, env(safe-area-inset-left))
      max(16px, env(safe-area-inset-right));
  }

  .site-footer {
    padding-inline: max(16px, env(safe-area-inset-left))
      max(16px, env(safe-area-inset-right));
  }

  /* Faixa COMPRA 2 PARES — máscara um pouco mais larga em ecrã estreito */
  .marquee {
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      black 5%,
      black 95%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0,
      black 5%,
      black 95%,
      transparent 100%
    );
  }

  /* Secções genéricas — ligeiramente mais compacto que desktop, sem “esmagar” */
  .section {
    padding-block: clamp(2.1rem, 5.5vw, 3.75rem);
  }

  /* PRO Players */
  #players-hero {
    margin-top: clamp(28px, 7vw, 44px);
  }

  #players-hero h1 {
    line-height: 1.08;
    padding-inline: 4px;
  }

  #players-hero .wrap > p {
    line-height: 1.65;
    padding-inline: 4px;
  }

  /* WhatsApp flutuante — acima da barra do sistema */
  .chat-launcher {
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    right: calc(14px + env(safe-area-inset-right, 0px));
  }

  /* Termos: texto longo mais legível */
  #main .wrap {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  #main .section-head h1 {
    line-height: 1.12;
  }

  #main section[id] p {
    line-height: 1.65;
  }
}

/* Telemóveis muito estreitos */
@media (max-width: 380px) {
  .shop-hero h1 {
    font-size: clamp(1.35rem, 6vw + 0.5rem, 2rem);
  }

  .hero-cta .btn.btn-lg {
    padding-inline: 14px;
    font-size: 0.75rem;
    max-width: 220px;
    min-height: 38px;
  }
}