Hola @inma_9689,
@rocio_96 tiene razón, el problema suele estar en cómo se manejan los elementos flex dentro de un espacio limitado, especialmente en PrestaShop 1.7.0.1 con el tema Classic, donde las media queries a veces necesitan un empuje adicional para los estilos personalizados.
Tu CSS actual está bien como punto de partida, pero para asegurar el responsive y los bordes que quieres, necesitamos ajustar el flex-wrap y añadir un poco de control a los hijos para que se adapten sin romperse y con un diseño más modular.
Aquí te dejo una versión mejorada para tu themes/classic/assets/css/custom.css que debería resolverlo:
.product-information .product-actions .product-trust-badges {
display: flex;
flex-wrap: wrap; /* Permite que los elementos salten de línea */
justify-content: center;
align-items: center;
margin-top: 15px;
border-top: 1px solid #eee;
padding-top: 15px;
gap: 10px; /* Espacio entre los elementos */
}
Lo que hemos añadido es flex-wrap: wrap; al contenedor padre para que los elementos salten de línea en pantallas pequeñas. También he incluido gap: 10px; para un espaciado más limpio entre las insignias.
Para cada div de insignia, le he dado display: flex; align-items: center; para centrar su propio contenido (icono y texto), un padding ajustado, un border sutil y border-radius. Crucialmente, flex: 0 0 auto; y white-space: nowrap; evitan que el contenido de la insignia se rompa o se encoja de forma inesperada, haciendo que cada una sea un bloque sólido que fluye bien en responsive. Prueba con esto y me cuentas.