/* CSS base para la nueva UI de productos */
#productos-ui { margin-top: 30px; }
#filtros-productos { background: #fafafa; border-radius: 8px; padding: 20px; margin-bottom: 20px; }
#listado-productos { min-height: 400px; }
.producto-card { border: 1px solid #eee; border-radius: 8px; margin-bottom: 20px; padding: 15px; background: #fff; transition: box-shadow .2s; }
.producto-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.producto-img-zoom { cursor: zoom-in; }

/* En la UI nueva usamos sticky nativo (evita que JS inyecte position:fixed/width/left inline) */
#productos-ui .sidebar--productos {
	position: sticky;
	top: 120px;
	align-self: flex-start;
}

/* Small safeguard: don't allow sidebar to shrink below a reasonable width */
.sidebar {
	min-width: 220px;
}

/* Ajustes adicionales para forzar proporciones de columnas y evitar compresión
   Estas reglas inciden en el layout flex de Bootstrap para que la columna
   lateral y el contenido principal mantengan su espacio. */
#productos-ui .row > .col-md-3.sidebar {
	/* Forzar que la columna lateral ocupe ~25% del ancho de la fila */
	flex: 0 0 25% !important;
	max-width: 25% !important;
	padding-right: 15px !important;
}
#productos-ui .row > .col-md-9 {
	/* Contenido principal 75% */
	flex: 0 0 75% !important;
	max-width: 75% !important;
}

/* En móviles dejamos que las columnas fluyan normalmente */
@media (max-width: 767.98px) {
	#productos-ui .row > .col-md-3.sidebar,
	#productos-ui .row > .col-md-9 {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
	#productos-ui .sidebar--productos { position: static; top: auto; }
	.sidebar { min-width: 0 !important; }
}