Hola @ignacio96, entiendo el problema. Es muy común luchar contra la especificidad del CSS del tema Classic, especialmente con los badges de descuento. La versión 8.2.1 de PrestaShop sigue usando el tema Classic, y sus estilos a veces requieren un selector más potente o una declaración de estilo más completa para anular lo predefinido.
El !important es fuerte, pero podemos superarlo con un selector más específico y definiendo bien los estilos de píldora y degradado. Tu problema viene de la especificidad del selector y de que el background-color es anulado por una regla más específica del tema base. Además, el display por defecto puede no ser el ideal para padding y box-shadow.
Aquí tienes un fragmento de código que deberías añadir a tu themes/classic/assets/css/custom.css. Esto te dará el estilo de píldora con degradado y sombra que buscas:
.product-miniature .product-price-and-shipping .discount-percentage {
background: linear-gradient(to right, #ff6b6b, #ee5253); /* Degradado moderno */
color: #fff; /* Texto blanco para contraste */
padding: 4px 10px;
border-radius: 20px; /* Forma de píldora */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra sutil */
display: inline-block; /* Asegura el correcto renderizado de padding y sombra */
margin-left: 5px; /* Pequeño margen para separación */
white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
}
Explicación de los cambios:
product-miniature .product-price-and-shipping .discount-percentage: Este selector es más específico que el que usabas, lo que le da prioridad sobre las reglas del tema base, incluso si estas usan !important en un nivel menos específico.background: linear-gradient(...): Sustituye el background-color por un degradado lineal, dándole ese toque moderno.color: #fff: Asegura que el texto sea blanco para que contraste bien con el degradado.padding: 4px 10px: Ajusta el relleno interno para que la forma de píldora se vea bien.border-radius: 20px: Esto es clave para la forma de píldora. Puedes ajustar el valor si quieres que sea más o menos redondeado.box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2): Añade una sombra suave para darle profundidad sin ser demasiado intrusiva.display: inline-block: Es fundamental para que el padding, margin y box-shadow se apliquen correctamente a un elemento que, por defecto, podría ser inline y no respetar estas propiedades de diseño.margin-left: 5px: Para separar un poco el badge si está junto a otros elementos de precio.white-space: nowrap: Evita que el porcentaje de descuento se divida en varias líneas, manteniéndolo siempre en una sola.
Con esto, deberías ver los badges con el estilo que buscas. ¡Pruébalo y me cuentas!