/* ═══════════════════════════════════════════════════════════════════════════
   AVISO FLOTANTE "añadido al carrito"                        (2026-08-23)

   Sustituye a la banda de ancho completo que empujaba la página hacia abajo.
   Arriba a la derecha, bajo la cabecera, se va solo a los 6 s.

   El aviso EN LÍNEA solo se esconde si `wk-toast-js` está en el <body>, y esa
   clase la pone el propio script: sin JavaScript sigue saliendo el de siempre.
   Nunca se pierde el mensaje.
   ═══════════════════════════════════════════════════════════════════════════ */
body.wk-toast-js .woocommerce-message{ display:none !important; }

.wk-toasts{
  position:fixed;
  top:var(--wk-toast-top,96px);
  right:var(--wk-calle,20px);
  z-index:120;              /* por encima de la cabecera fija (60) */
  display:flex;
  flex-direction:column;
  gap:10px;
  width:min(380px, calc(100vw - 40px));
  pointer-events:none;      /* la columna no debe robar clics al fondo… */
}
.wk-toasts .wk-toast{ pointer-events:auto; }   /* …pero cada aviso sí los recibe */

.wk-toast{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 14px 14px 16px;
  background:var(--wk-celda,#fff);
  border:1px solid var(--wk-filete,#E5E2DC);
  /* El filete rojo a la IZQUIERDA y no arriba: en una tarjeta que entra
     lateralmente, el acento marca por dónde ha entrado. */
  border-left:3px solid var(--wk-rojo,#CC0000);
  box-shadow:0 10px 30px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08);

  opacity:0;
  transform:translateX(16px);
  /* Salida: 150ms. Lo que el sistema responde va rápido. */
  transition:opacity .15s var(--wk-ease,cubic-bezier(.2,.6,.2,1)),
             transform .15s var(--wk-ease,cubic-bezier(.2,.6,.2,1));
}
.wk-toast.is-visible{
  opacity:1;
  transform:translateX(0);
  /* Entrada algo más lenta que la salida: entrar es una novedad y hay que
     verla; salir ya no aporta nada. */
  transition-duration:.22s;
}

.wk-toast__cuerpo{ min-width:0; flex:1; }

.wk-toast__titulo{
  margin:0 !important;
  font-family:var(--wk-mono,ui-monospace,monospace);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--wk-rojo,#CC0000) !important;
}
.wk-toast__nombre{
  margin:4px 0 0 !important;
  font-size:13.5px;
  line-height:1.4;
  color:var(--wk-tinta,#12100E) !important;
  /* Los nombres de BGS son larguísimos ("… | 10 mm (3/8\") | metrisch | 11-tlg.");
     dos líneas bastan para reconocer lo que se ha añadido. */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.wk-toast__enlace{
  display:inline-block;
  margin-top:10px;
  font-family:var(--wk-sans,sans-serif);
  font-size:12px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--wk-tinta,#12100E) !important;
  border-bottom:2px solid var(--wk-rojo,#CC0000);
  padding-bottom:2px;
  transition:color .16s var(--wk-ease,ease);
}
@media (hover:hover) and (pointer:fine){
  .wk-toast__enlace:hover{ color:var(--wk-rojo,#CC0000) !important; }
}

.wk-toast__cerrar{
  flex:none;
  width:26px; height:26px;
  margin:-4px -4px 0 0;
  display:flex; align-items:center; justify-content:center;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  cursor:pointer;
  /* Color declarado a mano, no heredado: la regla que pinta TODOS los botones
     de blanco ya se ha llevado por delante tres iconos de este tema. */
  color:var(--wk-tinta-3,#6E6A65) !important;
  transition:color .16s var(--wk-ease,ease);
}
.wk-toast__cerrar svg{
  width:14px; height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:square;
}
@media (hover:hover) and (pointer:fine){
  .wk-toast__cerrar:hover{ color:var(--wk-tinta,#12100E) !important; }
}
.wk-toast__cerrar:active{ transform:scale(.92); }

/* En pantalla estrecha ocupa el ancho disponible: a 380px fijos se saldría. */
@media (max-width:520px){
  .wk-toasts{
    left:12px; right:12px;
    width:auto;
    top:var(--wk-toast-top,84px);
  }
}

/* Movimiento reducido: aparece sin recorrido. Se conserva el fundido, que
   ayuda a entender que algo nuevo ha llegado. */
@media (prefers-reduced-motion:reduce){
  .wk-toast{ transform:none; transition:opacity .01ms; }
  .wk-toast.is-visible{ transform:none; }
}