/* ══════════════════════════════════════════════════════════════════
   AGREGAR AL CARRITO · la confirmación
   ──────────────────────────────────────────────────────────────────
   El botón ya decía "Agregado", pero el número del carrito se movía
   solo y el aviso no decía QUÉ se agregó. En una grilla de muebles
   parecidos eso es justo lo que hace falta.

   Son tres señales, todas chicas y en la paleta del sitio:
     1. el botón se barre y muestra el tilde,
     2. el contador del header da un salto,
     3. un aviso con la miniatura y el nombre del mueble.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1 · El botón ──────────────────────────────────────────────── */
.btn-add-cart{position:relative;overflow:hidden;isolation:isolate}

/* La barra que cruza el botón al agregar. */
.btn-add-cart.added::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:#fff;
  transform:scaleX(0);transform-origin:left center;
  animation:cartBarrido 520ms var(--ease-out) forwards;
}
.btn-add-cart.added{
  background:var(--ink);color:var(--ink);
  transition:color 180ms linear;
}
.btn-add-cart.added .btn-add-cart-text{color:var(--ink)}

/* El tilde se dibuja, no aparece de golpe. */
.btn-add-cart.added svg polyline{
  stroke-dasharray:24;stroke-dashoffset:24;
  animation:cartTilde 320ms var(--ease-out) 140ms forwards;
}
@keyframes cartBarrido{
  0%  {transform:scaleX(0);transform-origin:left center}
  55% {transform:scaleX(1);transform-origin:left center}
  100%{transform:scaleX(0);transform-origin:right center}
}
@keyframes cartTilde{to{stroke-dashoffset:0}}

/* ── 2 · El contador del header ────────────────────────────────── */
.cart-badge.pop{animation:cartSalto 620ms var(--ease-out)}
@keyframes cartSalto{
  0%  {transform:scale(1)}
  28% {transform:scale(1.55)}
  52% {transform:scale(.9)}
  74% {transform:scale(1.14)}
  100%{transform:scale(1)}
}

/* ── 3 · El aviso ──────────────────────────────────────────────── */
.toast-carrito{
  position:fixed;z-index:1200;
  right:clamp(.75rem,2.5vw,1.5rem);
  bottom:clamp(.75rem,2.5vw,1.5rem);
  width:min(23rem,calc(100vw - 1.5rem));

  display:flex;align-items:center;gap:.85rem;
  padding:.7rem .7rem .7rem .7rem;
  background:var(--glass-bg-2);
  -webkit-backdrop-filter:var(--glass-blur);
          backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  box-shadow:var(--glass-shadow);
  color:var(--ink);

  opacity:0;transform:translateY(14px) scale(.97);
  transition:opacity 320ms var(--ease-out),transform 420ms var(--ease-out);
  pointer-events:none;
  cursor:pointer;
}
.toast-carrito.on{opacity:1;transform:none;pointer-events:auto}

.toast-carrito-foto{
  flex-shrink:0;width:52px;height:52px;
  border-radius:var(--r);overflow:hidden;
  background:var(--sand);
}
.toast-carrito-foto img{width:100%;height:100%;object-fit:cover}

.toast-carrito-texto{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem;
  line-height:1.3;
}
.toast-carrito-texto b{
  font-size:.625rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.toast-carrito-texto span{
  font-size:.8125rem;font-weight:500;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.toast-carrito-ver{
  flex-shrink:0;align-self:stretch;
  padding:0 .9rem;
  background:var(--ink);color:#fff;border:none;
  border-radius:var(--r);
  font-size:.6875rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;
  transition:background 240ms var(--ease);
}
.toast-carrito-ver:hover{background:#000}

/* En el teléfono el aviso se apoya abajo y ocupa el ancho, como una
   hoja, para no quedar flotando en una esquina. */
@media(max-width:600px){
  .toast-carrito{
    right:.6rem;left:.6rem;bottom:.6rem;width:auto;
    transform:translateY(100%);
  }
  .toast-carrito.on{transform:translateY(0)}
}

/* ── Con menos movimiento, todo aparece de una ─────────────────── */
@media(prefers-reduced-motion:reduce){
  .btn-add-cart.added::before{animation:none;transform:none;opacity:.14}
  .btn-add-cart.added svg polyline{animation:none;stroke-dashoffset:0}
  .cart-badge.pop{animation:none}
  .toast-carrito{transition:none;transform:none}
  .toast-carrito.on{transform:none}
}