/* ================================================================
woocommerce-notices.css — Avisos clásicos de WooCommerce
Restyle de los avisos que WooCommerce imprime con las plantillas
`templates/notices/*.php` (`.woocommerce-message`, `.woocommerce-info`
y `.woocommerce-error`), alineados a los tokens del tema.
El caso principal es el «X se ha añadido a tu carrito» con el botón
«Ver carrito», que sale al añadir al carrito desde la ficha de
producto (hook `woocommerce_before_single_product`) y desde los
archivos de tienda (`woocommerce_before_shop_loop`).
El marcado lo genera WooCommerce y no admite wrappers, así que la
maqueta se monta sobre el propio contenedor:
El texto es un nodo suelto, sin elemento propio: con el contenedor en
flex se convierte en un ítem anónimo (order 0). El botón se fija al
final con `order: 2` y el icono al principio con `order: -1` en el
::before — así el orden visual es estable incluso en versiones de
WooCommerce que emiten el enlace antes del texto (hasta la 10.x lo
hacían). No hace falta tocar PHP ni plantillas.
Se encola en páginas de WooCommerce, carrito y checkout desde
functions.php, con dependencia de `mwm-blocks-front` para heredar los
tokens :root.
Nota de especificidad: `woocommerce-layout.css` trae
`.woocommerce .woocommerce-message .button { float: right }` (0,3,0),
por eso aquí se usa `body.woocommerce … > a.button` (0,3,2) en lugar
de recurrir a !important.
================================================================ */
body.woocommerce {
/* Alias locales para no repetir literales. */
--vit-wc-notice-bg: #ffffff;
--vit-wc-notice-border: rgba(16, 46, 62, 0.07);
--vit-wc-notice-radius: 16px;
--vit-wc-notice-shadow: 0 12px 32px rgba(16, 46, 62, 0.14);
--vit-wc-notice-max: 760px;
--vit-wc-notice-badge: var(--vit-teal);
--vit-wc-notice-badge-ink: var(--vit-dark);
}
/* ---------------------------------------------------------------
1. Tarjeta base
Los tres avisos comparten contenedor: fondo blanco, radio y sombra
del lenguaje de tarjetas del tema. Funciona igual sobre el fondo
claro de la tienda que sobre el navy de la ficha de producto
(main.mwm-wc-single-product), donde la tarjeta queda flotando.
--------------------------------------------------------------- */
body.woocommerce .woocommerce-message,
body.woocommerce .woocommerce-info,
body.woocommerce .woocommerce-error {
align-items: center;
background: var(--vit-wc-notice-bg);
/* `border` completo: neutraliza el border-top de color de WooCommerce. */
border: 1px solid var(--vit-wc-notice-border);
border-radius: var(--vit-wc-notice-radius);
box-shadow: var(--vit-wc-notice-shadow);
box-sizing: border-box;
color: var(--vit-dark);
display: flex;
flex-wrap: wrap;
font-family: var(--vit-font-body);
font-size: 16px;
gap: 12px 16px;
line-height: 1.45;
list-style: none;
margin: 0 auto 32px;
max-width: var(--vit-wc-notice-max);
padding: 18px 22px;
position: relative;
/* Centrado con aire lateral en móvil sin depender de un contenedor padre. */
width: calc(100% - var(--mwm-padding-x) * 2);
word-wrap: break-word;
}
/* Entrada suave: el aviso aparece tras recargar la página, y el
desplazamiento corto ayuda a que el usuario lo localice. */
@media (prefers-reduced-motion: no-preference) {
body.woocommerce .woocommerce-message,
body.woocommerce .woocommerce-info,
body.woocommerce .woocommerce-error {
animation: mwm-wc-notice-in 0.35s ease both;
}
}
@keyframes mwm-wc-notice-in {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: none;
}
}
/* Los que WooCommerce mete en los avisos de error, en línea con el
resto del texto. */
body.woocommerce .woocommerce-message li,
body.woocommerce .woocommerce-info li,
body.woocommerce .woocommerce-error li {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------------------------------------------------------------
2. Icono
WooCommerce pinta un glifo de su fuente propia en ::before, en
posición absoluta. Aquí se convierte en una pastilla circular con el
color semántico y un SVG embebido, y se coloca como primer ítem flex.
--------------------------------------------------------------- */
body.woocommerce .woocommerce-message::before,
body.woocommerce .woocommerce-info::before,
body.woocommerce .woocommerce-error::before {
background-color: var(--vit-wc-notice-badge);
background-position: center;
background-repeat: no-repeat;
background-size: 20px 20px;
border-radius: 999px;
content: "";
display: block;
flex: 0 0 auto;
font-family: inherit;
height: 38px;
order: -1;
position: static;
width: 38px;
}
/* El ::after de WooCommerce es un clearfix (display: table): dentro de un
contenedor flex sería un ítem más y abriría un hueco. */
body.woocommerce .woocommerce-message::after,
body.woocommerce .woocommerce-info::after,
body.woocommerce .woocommerce-error::after {
content: none;
display: none;
}
/* ---------------------------------------------------------------
3. Variantes
--------------------------------------------------------------- */
/* Éxito («… se ha añadido a tu carrito»): teal del tema con el check en navy,
que sobre #25dbbf contrasta mucho mejor que el blanco. */
body.woocommerce .woocommerce-message::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102e3e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 7'/%3E%3C/svg%3E");
}
body.woocommerce .woocommerce-info {
--vit-wc-notice-badge: var(--vit-mint);
}
body.woocommerce .woocommerce-info::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102e3e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='M12 7.5h.01'/%3E%3C/svg%3E");
/* Anula el `display: none` global de .woocommerce-info::before
(blocks-mwm.css), que existía para esconder el glifo de WooCommerce. */
display: block;
}
body.woocommerce .woocommerce-error {
--vit-wc-notice-badge: var(--vit-error);
}
body.woocommerce .woocommerce-error::before {
/* Aspa en blanco: sobre el rojo #d63638 es la única opción legible. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E");
}
/* ---------------------------------------------------------------
4. Botón «Ver carrito» / «Seguir comprando»
Píldora teal con texto navy, igual criterio que los botones de Mi
cuenta (blocks-mwm.css) y forma de .mwm-button-01.
--------------------------------------------------------------- */
body.woocommerce .woocommerce-message > a.button,
body.woocommerce .woocommerce-info > a.button,
body.woocommerce .woocommerce-error > a.button {
background: var(--vit-teal);
border: none;
border-radius: 100px;
color: var(--vit-dark);
cursor: pointer;
display: inline-flex;
flex: 0 0 auto;
float: none;
font-family: var(--vit-font-heading);
font-size: 15px;
font-weight: 600;
justify-content: center;
line-height: 1.2;
/* Empuja el botón al extremo derecho: el texto del aviso es un ítem
anónimo y ocupa el espacio libre a su izquierda. */
margin: 0 0 0 auto;
order: 2;
padding: 12px 26px;
text-decoration: none;
transition: opacity 0.2s ease, transform 0.2s ease;
white-space: nowrap;
}
body.woocommerce .woocommerce-message > a.button:hover,
body.woocommerce .woocommerce-info > a.button:hover,
body.woocommerce .woocommerce-error > a.button:hover {
background: var(--vit-teal);
color: var(--vit-dark);
opacity: 0.85;
transform: translateY(-1px);
}
body.woocommerce .woocommerce-message > a.button:focus-visible,
body.woocommerce .woocommerce-info > a.button:focus-visible,
body.woocommerce .woocommerce-error > a.button:focus-visible {
outline: 2px solid var(--vit-dark);
outline-offset: 2px;
}
/* ---------------------------------------------------------------
5. Ficha de producto: hueco para el header fijo
El aviso es el primer elemento dentro de main.mwm-wc-single-product,
que solo aporta 56px de padding superior — menos que la altura del
header fijo. `.mwm-single-product` sí lo compensa con su padding-top,
pero el aviso va por delante y quedaría medio tapado.
--mwm-header-height la fija site-navigation.js con la altura real.
--------------------------------------------------------------- */
body.woocommerce:has(main.mwm-wc-single-product) .woocommerce-message,
body.woocommerce:has(main.mwm-wc-single-product) .woocommerce-info,
body.woocommerce:has(main.mwm-wc-single-product) .woocommerce-error {
margin-top: max(0px, calc(var(--mwm-header-height, 80px) - 40px));
}
/* ---------------------------------------------------------------
6. Responsive
Por debajo de 600px el botón pasa a línea propia a todo el ancho; el
icono y el texto se quedan en la primera fila.
--------------------------------------------------------------- */
@media (max-width: 599px) {
body.woocommerce .woocommerce-message,
body.woocommerce .woocommerce-info,
body.woocommerce .woocommerce-error {
font-size: 15px;
padding: 16px 18px;
}
body.woocommerce .woocommerce-message::before,
body.woocommerce .woocommerce-info::before,
body.woocommerce .woocommerce-error::before {
background-size: 18px 18px;
height: 32px;
width: 32px;
}
body.woocommerce .woocommerce-message > a.button,
body.woocommerce .woocommerce-info > a.button,
body.woocommerce .woocommerce-error > a.button {
flex: 1 0 100%;
margin-left: 0;
width: 100%;
}
}