Hola @ruben_online65, el análisis de @martaadmin es muy acertado. Para lograr ese efecto de 'píldora' en el control de cantidad, necesitamos tratar el contenedor bootstrap-touchspin como el elemento principal al que aplicar el borde y el border-radius.
El enfoque es eliminar los bordes de los elementos internos (botones y campo de texto) y dejar que el contenedor principal defina la forma exterior. Además, he incluido reglas para eliminar los 'spinners' nativos de los navegadores en caso de que el input sea de tipo number, aunque en el tema Classic por defecto suele ser text con JS.
Aquí tienes el CSS que puedes añadir a tu themes/classic/assets/css/custom.css para conseguirlo:
/* Estilo unificado para el control de cantidad como píldora */
.product-quantity .bootstrap-touchspin {
display: flex; /* Alinea los elementos en una fila */
border: 1px solid #ccc; /* Borde principal para la píldora */
border-radius: 25px; /* Bordes redondeados para la forma de píldora */
overflow: hidden; /* Oculta cualquier desbordamiento visual */
width: fit-content; /* Ajusta el ancho al contenido interno */
height: 40px; /* Altura fija para todo el control */
}
.product-quantity .bootstrap-touchspin .input-group-btn,
Con esto, el contenedor .bootstrap-touchspin tendrá el borde redondeado, y sus hijos (.input-group-btn y .form-control) se integrarán visualmente al eliminar sus propios bordes. No olvides limpiar la caché de tu PrestaShop (Rendimiento -> Vaciar caché) y la de tu navegador después de aplicar los cambios.