/* Primo's Sports — responsividade
   Testado nos breakpoints: 320/360/375/390/412/430, 768/820/1024, 1280/1366/1440/1920 */

@media (max-width: 1100px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .filters-panel {
    position: static;
    max-height: none;
    display: none;
  }
  .filters-panel.open { display: block; }
  .filters-toggle { display: inline-flex; }
}

@media (max-width: 980px) {
  /* Mobile: composição das camisas aparece antes do texto (mais impacto,
     sem exigir rolagem para ver o produto), CTAs com largura total e
     respeito à safe area do iPhone. */
  .hero { min-height: 0; }
  .hero-content {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: 1rem 1.25rem;
  }
  .hero-products { order: -1; min-height: 220px; margin-bottom: 0.25rem; }
  .hero-product-composite { width: min(420px, 88%); }
  .hero-copy p { margin-bottom: 1.1rem; }
  .hero-cta {
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .hero-cta .btn { width: 100%; min-height: 52px; }
  .hero h1 { font-size: clamp(2.8rem, 13vw, 4.2rem); transform: none; }
  .hero-benefits-grid { padding: 0.6rem 0.4rem; }
  .hero-benefit { padding-block: 0.55rem; gap: 0.6rem; }
  .hero-benefit > svg { width: 24px; height: 24px; }
  .story-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .modal-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .hero-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-benefit { border-left: 0 !important; border-top: 1px solid var(--border); padding: 0.5rem 0.6rem; gap: 0.5rem; }
  .hero-benefit { justify-content: flex-start; min-width: 0; }
  .hero-benefit b { font-size: 0.76rem; letter-spacing: 0; line-height: 1.2; }
  .hero-benefit small { font-size: 0.7rem; }
  .hero-benefit span { min-width: 0; overflow-wrap: anywhere; }
  .hero-benefit > svg { width: 22px; height: 22px; }
  .hero-benefit:nth-child(1),
  .hero-benefit:nth-child(2) { border-top: 0; }
  .hero-benefit:nth-child(even) { border-left: 1px solid var(--border) !important; }

  .section-heading.split { align-items: flex-start; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .product-actions .row { grid-template-columns: 1fr; }
  .perso-fields { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

@media (max-width: 860px) {
  .nav-wrap { gap: 0.6rem; }

  /* O cabeçalho já usa gaveta em todas as larguras (main.css); aqui só
     apertamos a marca para o botão de menu nunca ser espremido. */
  .brand { margin-inline: 0; margin-right: auto; min-width: 0; flex-shrink: 1; }
  .brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
  }
  .brand img { width: 34px; height: 34px; }
  .nav-actions { margin-left: 0; flex-shrink: 0; }

  .main-nav { padding-inline: 1.25rem; }
  .main-nav a {
    padding: 0.9rem 0.5rem;
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
  }
}


@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .drawer { width: 100%; }
  .modal-dialog { max-height: 96dvh; border-radius: var(--radius); }
  .modal-grid { padding: 1.1rem; gap: 1rem; }
  .related-grid { padding: 0 1.1rem 1.1rem; }
  .whatsapp-float { width: 52px; height: 52px; }
}

@media (max-width: 420px) {
  /* Espaço apertado: a lupa sai do cabeçalho (a busca vive no catálogo) */
  #searchBtn { display: none; }
  .nav-wrap { gap: 0.5rem; }
  .nav-actions { gap: 0.35rem; }
}

@media (max-width: 380px) {
  .container { padding-inline: 1rem; }
  .product-grid { grid-template-columns: 1fr; }
  .hero-products { min-height: 200px; }
  .hero-product-composite { width: min(320px, 90%); }
}

/* Paisagem em telas baixas: evita drawer/modal cortados */
@media (max-height: 480px) and (orientation: landscape) {
  .hero-content { padding-block: 1rem; }
  .hero-products { min-height: 200px; }
  .modal-dialog { max-height: 98dvh; }
}

@media (min-width: 1600px) {
  :root { --container: 1320px; }
}

/* Impressão das páginas institucionais */
@media print {
  .site-header, .whatsapp-float, .drawer, .overlay, .modal, .toast-stack, .ambient { display: none !important; }
  body { background: #fff; color: #000; }
  .prose p, .prose li { color: #222; }
}