/* 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; }

/* Fix: ensure the sticky sidebar wrapper doesn't collapse the column width
   theiaStickySidebar crea un wrapper que a veces no hereda el 100% del ancho
   del .col-md-3; forzamos ancho y box-sizing para evitar compresión del row */
.sidebar .theiaStickySidebar {
	width: 100% !important;
	box-sizing: border-box;
}

/* 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;
}

/* Forzar que el wrapper sticky no use estilos inline que colapsen el ancho.
   Usamos !important para sobreescribir estilos inline del plugin cuando sea posible. */
.sidebar .theiaStickySidebar {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 220px !important;
	box-sizing: border-box !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;
	}
	.sidebar { min-width: 0 !important; }
}