/* ============================================================
   InnovArte Handmade — Adaptativo móvil (responsive)
   Clases utilitarias que colapsan las cuadrículas y ajustan el
   espaciado en teléfonos. Se aplican con !important porque los
   layouts base usan estilos en línea.
   Puntos de quiebre: 820px (tablet/móvil), 560px, 430px.
   ============================================================ */

/* --- Fija la barra: 'clip' recorta el desborde horizontal SIN crear un
   contenedor de scroll (a diferencia de 'hidden'), lo que permite que
   position:sticky del nav funcione. --- */
.rr-page { overflow-x: clip !important; }

/* --- Colapso de cuadrículas --- */
@media (max-width: 820px) {
  .rr-g4  { grid-template-columns: repeat(2, 1fr) !important; gap: 24px 16px !important; }
  .rr-g3  { grid-template-columns: repeat(2, 1fr) !important; }
  .rr-g2  { grid-template-columns: 1fr !important; gap: 34px !important; }
  .rr-foot{ grid-template-columns: 1fr !important; gap: 30px !important; }
  /* menos aire vertical en secciones muy espaciadas */
  .rr-pad { padding-top: 60px !important; padding-bottom: 60px !important; }
}

/* --- Teléfonos --- */
@media (max-width: 560px) {
  .rr-g3  { grid-template-columns: 1fr !important; }
  .rr-pad { padding-top: 48px !important; padding-bottom: 48px !important; }
}

/* --- Teléfonos pequeños: producto/galería a una columna --- */
@media (max-width: 430px) {
  .rr-g4  { grid-template-columns: 1fr !important; }
}