/* =========================================================
   Nutribiótica – Sticky Add to Cart con pestaña/toggle (v7)
   Rev D — fluido en aparecer/desaparecer + anti-rebote colapso
   ========================================================= */

/* Solo silenciamos las transiciones de opacity/visibility cuando el JS lo pida,
   manteniendo SIEMPRE la transición de transform para que todo se vea suave. */
#nutri-sticky-atc.nutri-silent{
  transition:
    opacity   .06s linear,
    visibility 0s linear 0s; /* no tocamos transform aquí */
}
#nutri-sticky-atc.nutri-silent *{
  /* No anulamos otras transiciones internas */
}

/* ===== Contenedor: usamos variables para animar coherentemente ===== */
#nutri-sticky-atc{
  /* Vars animables */
  --nutri-y: 12px;                /* desplazamiento base (oculto)  */
  --nutri-hover-dy: 0px;          /* micro-hover en expandido      */
  --nutri-scale: 1;               /* por si quieres micro-escala   */

  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0) + 14px);
  transform: translate(-50%, calc(var(--nutri-y) + var(--nutri-hover-dy))) scale(var(--nutri-scale));
  z-index: 999999;
  overflow: visible;

  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;

  width: min(660px, calc(100vw - 28px));
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  font-family: var(--nutri-font, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    transform .34s cubic-bezier(.2,.65,.2,1),
    opacity   .24s ease-out,
    visibility 0s linear .24s; /* visible se activa al final del fade-in */
  will-change: transform, opacity;
}

/* ===== Visible (expandido por defecto) ===== */
#nutri-sticky-atc.is-visible{
  --nutri-y: 0px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    transform .34s cubic-bezier(.2,.65,.2,1),
    opacity   .24s ease-out,
    visibility 0s linear 0s; /* visible inmediato en entrada */
}

/* ===== Colapsado (independiente de .is-visible para evitar “rebote”) =====
   El JS aplica .is-collapsed ANTES de alternar .is-visible, así no “salta”.
   Deja 3px visibles para la pestaña. */
#nutri-sticky-atc.is-collapsed{
  --nutri-y: calc(100% - 3px);
  opacity: .98;
  pointer-events: auto;
}

/* ===== Hover suave solo en desktop cuando está expandido ===== */
@media (hover:hover) and (pointer:fine){
  #nutri-sticky-atc.is-visible:not(.is-collapsed):hover{
    --nutri-hover-dy: -2px;
    box-shadow: 0 16px 32px rgba(11,53,87,.18);
  }
  #nutri-sticky-atc.is-visible:not(.is-collapsed){
    transition:
      transform .28s cubic-bezier(.2,.65,.2,1),
      opacity   .24s ease-out,
      visibility 0s linear 0s,
      box-shadow .2s ease;
  }
}

/* ============================
   Pestaña / Toggle centrado
   ============================ */
#nutri-sticky-atc .nutri-sticky-atc__toggle{
  position: absolute;
  left: 50%;
  top: -19px;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  border: 1px solid #d9e2ec;
  background: #fff;
  color:#56AA9D;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 0;
  box-shadow: 0 6px 14px rgba(11,53,87,.18);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .12s ease;
  z-index: 1000000;
}
#nutri-sticky-atc .nutri-sticky-atc__toggle:hover{
  background: #56AA9D;
  color: #fff;
  box-shadow: 0 8px 18px rgba(11,53,87,.25);
}
#nutri-sticky-atc .nutri-sticky-atc__toggle:active{
  transform: translateX(-50%) translateY(1px);
}

/* Chevron */
#nutri-sticky-atc .nutri-sticky-atc__toggle .chevron{
  width: 16px; height: 16px; position: relative; display: block;
}
#nutri-sticky-atc .nutri-sticky-atc__toggle .chevron::before{
  content:""; position:absolute; left:50%; top:50%;
  width:10px; height:10px; margin-left:-5px; margin-top:-5px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease;
}
#nutri-sticky-atc.is-collapsed .nutri-sticky-atc__toggle .chevron::before{ transform: rotate(225deg); }

/* ===== Imagen ===== */
#nutri-sticky-atc .nutri-sticky-atc__thumb{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; position:relative; }
#nutri-sticky-atc .nutri-sticky-atc__thumb img,
#nutri-sticky-atc .nutri-sticky-thumb{ width:60px; height:60px; object-fit:contain; background:#fff; border-radius:8px; border:1px solid #e6edf4; }

/* ===== Meta ===== */
#nutri-sticky-atc .nutri-sticky-atc__meta{ display:grid; grid-template-rows:auto auto auto; min-width:220px; margin-right:4px; }
.nutri-sticky-atc__brand{ font-size:.78rem; letter-spacing:.02em; opacity:.75; text-transform:uppercase; margin-bottom:2px; font-weight:500; }
.nutri-sticky-atc__title{ font-size:1rem; font-weight:600; line-height:1.15; max-width:340px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#0f3f37; }
.nutri-sticky-atc__price{ font-weight:600; color:#0b3557; margin-top:3px; }
.nutri-sticky-atc__price .woocommerce-Price-amount{ font-size:1.06rem;color: black; }

/* ===== Qty ===== */
.nutri-sticky-atc__qty{
  display:inline-flex; align-items:center; height:36px;
  border:1px solid #d9e2ec; border-radius:9999px; background:#fff; padding:0 4px; gap:0;
}
.nutri-sticky-atc__qty .qty-input{
  width:38px; min-width:38px; height:100%; margin:0 4px; border:0;
  background: transparent; border-radius: 0; text-align:center;
  font-size:.95rem; color:#0b3557; line-height:1;
  -moz-appearance:textfield; -webkit-appearance:none; appearance:none; opacity:1;
}
.nutri-sticky-atc__qty .qty-input::-webkit-outer-spin-button,
.nutri-sticky-atc__qty .qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.nutri-sticky-atc__qty button{
  width:32px; height:32px; border:0; border-radius:9999px; background:#f3f6f9; color:#56AA9D; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; line-height:1; font-size:16px; font-weight:600;
  transition:background .15s ease, transform .08s ease;
}
.nutri-sticky-atc__qty button:hover{ background:#eaf0f6; }

/* ===== CTA ===== */
.nutri-sticky-atc__button{
  margin-left:auto; flex:0 0 auto; background:#56AA9D; color:#fff; border:0; border-radius:9999px; padding:12px 20px; cursor:pointer; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow:0 8px 18px rgba(11,53,87,.18);
}
.nutri-sticky-atc__button:hover{
  transform: translateY(-1px);
  box-shadow:0 12px 24px rgba(11,53,87,.25);
  background:#56AA9D; color:#fff;
}
.nutri-sticky-atc__button.is-loading{ opacity:.85; pointer-events:none; }
.nutri-sticky-atc__button .btn-spinner{ width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; display:none; animation:nutri-spin .7s linear infinite; }
.nutri-sticky-atc__button.is-loading .btn-spinner{ display:inline-block; }
@keyframes nutri-spin{ to{ transform: rotate(360deg); } }

/* ===== Mobile ===== */
@media (max-width:600px){
  #nutri-sticky-atc{
    justify-content:flex-start; align-items:flex-start; flex-wrap:wrap;
    gap:10px; padding:10px 12px; border-radius:10px; width: calc(100vw - 16px);
  }

  #nutri-sticky-atc .nutri-sticky-atc__thumb{ order:1; margin-right:8px; }
  #nutri-sticky-atc .nutri-sticky-atc__meta{ order:2; width: calc(100% - 70px); margin:0 0 8px 0; text-align:left; }

  /* Qty + CTA en la misma línea */
  #nutri-sticky-atc .nutri-sticky-atc__qty{ order:3; height:28px; margin:0 8px 0 0; }
  #nutri-sticky-atc .nutri-sticky-atc__button{ order:4; flex:1 1 auto; width:auto; margin:0; padding:10px 14px; font-size:.9rem; justify-content:center; }

  .nutri-sticky-atc__qty .qty-input{ width:34px; min-width:34px; font-size:.85rem; }
  .nutri-sticky-atc__qty button{ width:26px; height:26px; font-size:12px; }

  #nutri-sticky-atc .nutri-sticky-atc__thumb img,
  #nutri-sticky-atc .nutri-sticky-thumb{ width:50px; height:50px; }

  #nutri-sticky-atc .nutri-sticky-atc__toggle{ top:-17px; width:32px; height:32px; }
  #nutri-sticky-atc .nutri-sticky-atc__toggle .chevron::before{ width:8px; height:8px; margin-left:-4px; margin-top:-4px; }

  /* En mobile, colapsa completamente (la pestaña asoma lo justo) */
  #nutri-sticky-atc.is-collapsed{ --nutri-y: 100%; }
}