Hola @jaimeiberia, entiendo perfectamente tu problema. Es un error común al intentar posicionar elementos con CSS. Como bien han señalado @sergio94 e @ivan24, la clave está en el position y el border-radius.
El position: relative mantiene el elemento en el flujo normal del documento, y al intentar moverlo con top o left, simplemente se desplaza desde su posición original pero sigue ocupando ese espacio, lo que causa las superposiciones. Para sacarlo de ese flujo y posicionarlo libremente respecto a su contenedor, necesitas position: absolute.
Aquí tienes el CSS corregido para tu themes/classic/assets/css/custom.css. Recuerda que el bloque padre (.product-accessories-block) debe tener position: relative para que position: absolute funcione como esperamos, pero esto ya lo tiene por defecto en el tema Classic.
/* Customización de flechas y puntos del carrusel de productos relacionados */
/* Contenedor del carrusel para asegurar el posicionamiento absoluto */
.product-accessories-block {
position: relative; /* Aseguramos que el padre tenga position: relative */
overflow: hidden; /* Para que las flechas no corten en caso de estar un poco fuera */
}
/* Flechas de navegación */
.product-accessories-block .owl-nav button {
position: absolute; /* Posicionamiento absoluto respecto al padre */
top: 50%;
Con estos cambios, las flechas y los puntos deberían mostrarse tal como deseas, con las flechas circulares, un efecto al pasar el ratón y los puntos indicando la posición de forma clara. Asegúrate de vaciar la caché de PrestaShop después de aplicar el CSS.