:root{--tooltip-blue:#061525;--tooltip-blue2:#020a14;--tooltip-border:rgba(255,200,80,.34)}
/* =========================================================
   TOOLTIP PREMIUM DE ITEMS
   Se activa al pasar el mouse sobre la tarjeta/imagen.
   ========================================================= */
.product{position:relative;overflow:visible;z-index:1}
.product:hover{z-index:1000}
.product-image{position:relative;overflow:visible}
.mu-tooltip{position:absolute;left:50%;top:28px;transform:translate(-50%,10px) scale(.96);width:340px;max-width:calc(100vw - 30px);max-height:540px;overflow:auto;background:linear-gradient(180deg,rgba(0,20,40,.985),rgba(0,8,20,.995));border-radius:66px;padding:18px 18px 20px;border:1px solid var(--tooltip-border);box-shadow:0 20px 50px rgba(0,0,0,.9),0 0 30px rgba(0,140,255,.25),inset 0 0 0 1px rgba(255,255,255,.04);opacity:0;visibility:hidden;transition:opacity .25s ease,transform .25s ease,visibility .25s;z-index:9999;text-align:center;pointer-events:none;backdrop-filter:blur(6px);}
.product:hover .mu-tooltip,.product-image:hover .mu-tooltip{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
.mu-tooltip::after{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%) rotate(180deg);border:8px solid transparent;border-top-color:rgba(0,15,30,.98);filter:drop-shadow(0 2px 0 rgba(255,200,80,.25))}
.tooltip-item{width:70px!important;height:86px!important;object-fit:contain;margin:0 auto 9px;display:block;filter:drop-shadow(0 0 14px rgba(255,180,80,.6))}
.item-name{color:#00ff66;font-size:16px;font-weight:700;margin-bottom:12px;line-height:1.3;text-shadow:0 0 10px rgba(0,255,102,.4)}
.mu-tooltip div{font-family:Inter,Arial,sans-serif;font-size:13px;font-weight:600;margin-bottom:5px;line-height:1.2}
.mu-tooltip .yellow{color:#ffd000}.mu-tooltip .purple{color:#c96cff}.mu-tooltip .white{color:#fff}.mu-tooltip .blue{color:#7ab8ff}.mu-tooltip .lightblue{color:#8bbcff}.mu-tooltip .red{color:#ff4040}.mu-tooltip .green-title{color:#00ff88;font-size:14px;font-weight:700;margin-top:12px;margin-bottom:9px;letter-spacing:1px}
@media(max-width:760px){.mu-tooltip{width:285px;max-height:460px;border-radius:42px;padding:15px}.mu-tooltip div{font-size:11.5px}.item-name{font-size:14px}.tooltip-item{width:58px!important;height:70px!important}}

/* CORRECCION: tooltip aparece por ENCIMA de la imagen */
.mu-tooltip{
  top:auto !important;
  bottom:calc(100% + 10px) !important;
  transform:translate(-50%,10px) scale(.96);
}
.product:hover .mu-tooltip,
.product-image:hover .mu-tooltip{
  transform:translate(-50%,0) scale(1);
}
.mu-tooltip::after{
  top:auto;
  bottom:-8px;
  transform:translateX(-50%) rotate(180deg);
}

/* FIX FINAL: activación robusta del tooltip por mouse */
.product-image.tooltip-open .mu-tooltip,
.product.tooltip-open .mu-tooltip{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0) scale(1);
}


/* Tooltip solicitado: aparece ENCIMA DE LA MISMA IMAGEN al pasar el mouse. */
.product-image .mu-tooltip {
  top: 0 !important;
  bottom: auto !important;
  left: 50%;
  transform: translate(-50%, 0) scale(.96);
}
.product:hover .mu-tooltip,
.product-image:hover .mu-tooltip,
.product.tooltip-open .mu-tooltip,
.product-image.tooltip-open .mu-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, 0) scale(1) !important;
}
.product-image { overflow: visible !important; }
.product { overflow: visible !important; }

/* AJUSTE SOLICITADO: tooltip un poco más alto y sin barra de desplazamiento visible */
.mu-tooltip{
  max-height:620px !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
.mu-tooltip::-webkit-scrollbar{width:0 !important;height:0 !important;display:none !important}