/* ==========================================================================
   FOOTBALLPRO — Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .promo-grid { grid-template-columns: 1fr 1fr; }
  .promo-features { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--dark-border); padding-left: 0; padding-top: 24px; flex-direction: row; flex-wrap: wrap; gap: 24px 40px; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1020px) {
  .search-box { display: none; }
  .main-nav { display: none; }
  .burger { display: block; }
  .header .container { justify-content: space-between; }
  .header-actions { margin-left: auto; }
  .layout-with-sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  section { padding: 56px 0; }
  .cat-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .promo-grid { grid-template-columns: 1fr; }
  .promo-img { aspect-ratio: 16/9; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-slide { min-height: 560px; }
  .hero-script { display: none; }
  .usp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .news-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .header .container { gap: 10px; }
  .logo-mark { width: 34px; height: 34px; }
  .logo-mark svg { width: 20px; height: 20px; }
  .logo-text .name { font-size: 15.5px; }
  .logo-text .tag { display: none; }
  .header-actions { gap: 12px; }
}

@media (max-width: 560px) {
  .container { padding: 0 18px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .product-body { padding: 12px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .brands-row { justify-content: center; gap: 24px 34px; }
  .brand-item { font-size: 17px; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .hero-slide { min-height: 520px; }
  .hero-content { max-width: 100%; }
  .hero-desc { max-width: 100%; }
  .promo-features { flex-direction: column; }
  .back-to-top { width: 42px; height: 42px; bottom: 18px; right: 18px; }
}