Exacto, @raquel96, el problema que describes es un comportamiento estándar de CSS cuando usas border. El border forma parte del box model del elemento, por lo que al añadirlo o cambiar su grosor, el navegador recalcula el tamaño del elemento y, por consiguiente, el diseño de la página. Esto provoca ese molesto "salto" visual.
La solución correcta es usar outline o box-shadow, ya que se renderizan fuera o dentro del elemento sin afectar su espacio ocupado. Para tu caso, outline es perfecto y más sencillo de controlar. Te propongo esta modificación en tu themes/classic/assets/css/custom.css:
.js-qv-product-images .thumb-container.selected {
outline: 2px solid #007bff; /* Usa outline en lugar de border */
outline-offset: -1px; /* Dibuja el outline 1px hacia adentro */
transform: scale(1.03); /* Efecto de escala */
transition: all 0.2s ease-in-out; /* Transición suave */
}
Explicación de los cambios:
outline: 2px solid #007bff;: Reemplaza border. El outline no afecta el tamaño del box model. Le he dado 2px para que sea más visible que un 1px de border simulado.outline-offset: -1px;: Esto es clave. Mueve el outline 1px hacia adentro del borde del elemento, haciendo que el contorno se vea dentro del espacio original de la miniatura, evitando así cualquier posible desplazamiento o solapamiento con el borde del contenedor si lo tuviera. Si no usas outline-offset, el contorno se dibujaría por fuera.transition: all 0.2s ease-in-out;: He cambiado ease por ease-in-out para una transición ligeramente más fluida, pero esto es cuestión de preferencia.
Con estos cambios, el borde de resaltado debería aparecer sin causar ningún salto visual en la galería de miniaturas.