/* ============================================== los avisos de la tienda
   El aviso de «lo has añadido al carrito» traía el botón flotando a la
   derecha: cuando el nombre de la cápsula era largo —y lo son— el texto se
   metía por debajo y quedaba escrito encima del botón. Además llevaba la barra
   verde de la plantilla, que no es de esta web.

   Se quita el flotado y se usa una fila: texto a la izquierda, botón a la
   derecha, y en pantalla estrecha uno debajo del otro.

   Ojo al marcado, que no es uno: los avisos buenos son un <div> con el texto
   suelto dentro, y los errores son un <ul> con un <li> por aviso. Por eso la
   caja y la fila se pintan por separado.
   ------------------------------------------------------------------------ */

/* ---- la caja ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
 margin:0 0 30px !important;
 padding:18px 22px !important;
 border:1px solid #E4E6EC !important;
 border-top:0 !important;
 border-left:3px solid #D2AB74 !important;
 border-radius:0 !important;
 background:#FAFAFB !important;
 font-family:"Jost","Helvetica Neue",Arial,sans-serif;
 font-size:15.5px;
 line-height:1.5;
 color:#14151A;
 list-style:none;
}
.woocommerce-error{border-left-color:#B3261E !important;background:#FCF3F2 !important;color:#7A1C16}
.woocommerce-error a{color:#7A1C16}

/* El icono de la plantilla se dibujaba con el relleno de la izquierda; sin
   flotado ya no hace falta, y sin él el texto empieza donde debe. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-error li::before{content:none !important;display:none !important}

/* ---- la fila ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error > li{
 display:flex !important;
 flex-wrap:wrap;
 align-items:center;
 gap:14px 20px;
}
.woocommerce-error{display:block !important}
.woocommerce-error > li{margin:0;padding:0;list-style:none}
.woocommerce-error > li + li{margin-top:12px}

/* ---- el botón ---- */
.woocommerce-message > .button,
.woocommerce-info > .button,
.woocommerce-error > li > .button{
 float:none !important;
 order:2;
 margin:0 0 0 auto !important;
 flex:none;
 display:inline-block;
 /* Perfilado, no relleno. Dos razones: en esta página ya hay dos botones así
    —«Aplicar cupón» y «Actualizar carrito»— y este es del mismo rango, no más
    importante; y el tema fija el color del texto de los botones por encima de
    todo, incluso de un estilo en línea, así que un fondo oscuro dejaría el
    texto negro sobre negro. */
 background:transparent !important;
 border:1px solid #0A0B0F !important;
 border-radius:0;
 padding:13px 24px;
 font-size:11px;
 font-weight:700;
 letter-spacing:.18em;
 text-transform:uppercase;
 text-decoration:none;
 white-space:nowrap;
 transition:background .18s cubic-bezier(.4,0,.2,1),color .18s cubic-bezier(.4,0,.2,1);
}
/* Al pasar por encima se rellena de oro, que deja el texto oscuro legible
   pase lo que pase con el color. */
.woocommerce-message > .button:hover,
.woocommerce-info > .button:hover,
.woocommerce-error > li > .button:hover{background:#D2AB74 !important;border-color:#D2AB74 !important}

/* En el aviso de error, el perfil va del color del error. */
.woocommerce-error > li > .button{border-color:#7A1C16 !important}

@media (max-width:560px){
 .woocommerce-message,.woocommerce-info,.woocommerce-error{padding:16px 18px !important}
 .woocommerce-message > .button,
 .woocommerce-info > .button,
 .woocommerce-error > li > .button{margin-left:0 !important;width:100%;text-align:center}
}