/* ============================================================
   RepuestosMax — responsive.css · Mobile First
   ============================================================ */

@media (max-width: 1080px) {
  .header__search { max-width: 300px; }
  .categories { grid-template-columns: repeat(4, 1fr); }
  .products { grid-template-columns: repeat(3, 1fr); }
  .finder__form { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .header__menu-toggle { display: inline-flex; }
  .header__search { order: 5; flex-basis: 100%; max-width: none; display: none; }
  .nav { position: fixed; inset: 0 0 0 auto; width: min(300px, 82vw); height: 100dvh; background: var(--white); box-shadow: var(--shadow-lg); transform: translateX(-100%); transition: transform var(--transition); margin-left: 0; padding: calc(var(--header-h) + 20px) var(--sp-5) var(--sp-5); z-index: var(--z-header); }
  .nav.is-open { transform: none; }
  .nav__menu { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav__link { padding: 14px 16px; font-size: 1.05rem; }
  .header__actions { margin-left: auto; }
  .categories { grid-template-columns: repeat(3, 1fr); }
  .promos, .benefits, .testimonials, .blog { grid-template-columns: repeat(2, 1fr); }
  .modal__content { grid-template-columns: 1fr; }
  .modal__media img { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .cta__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 680px) {
  .topbar__item--hide { display: none; }
  .indicators__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-4); }
  .finder__form { grid-template-columns: repeat(2, 1fr); }
  .finder__actions { flex-direction: column; }
  .finder__actions .btn { max-width: none; }
  .categories { grid-template-columns: repeat(2, 1fr); }
  .products { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .promos, .benefits, .testimonials, .blog { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .products { grid-template-columns: 1fr; }
  .finder__form { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hero__actions .btn { flex: 1; }
  .product-card__actions { flex-direction: column; }
}