/* ============================================================
   TEMPTATION — LOADER PRO V1
   Solo para el loader de categorías.
   Sin JS nuevo. Sin forzar display. AJAX sigue mandando.
   ============================================================ */

:root{
  --txp-brand-red:#DA0405;
}

#product-category .ajax-loader{
    position:fixed!important;
    top:50%!important;
    left:50%!important;
    transform:translate(-50%,-50%) translateZ(0)!important;

    width:90px!important;
    height:90px!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    isolation:isolate!important;
    box-sizing:border-box!important;

    border:1px solid var(--txp-brand-border, rgba(84,69,80,.11))!important;
    border-radius:28px!important;

    background:
      var(
        --txp-brand-surface-gradient,
        linear-gradient(
          128deg,
          #fff9fa 0%,
          #f7f2fa 51%,
          #eff7f5 100%
        )
      )!important;

    box-shadow:
      0 18px 46px rgba(84,69,80,.17)!important,
      0 3px 12px rgba(167,41,82,.08)!important;

    z-index:10010!important;
    backface-visibility:hidden!important;
    will-change:transform!important;
}

#product-category .ajax-loader::before{
    content:""!important;
    position:absolute!important;
    inset:1px!important;
    border-radius:27px!important;
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,.84) 0%,
        rgba(255,255,255,.30) 100%
      )!important;
    pointer-events:none!important;
    opacity:.72!important;
}

#product-category .ajax-loader::after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    bottom:10px!important;
    width:28px!important;
    height:3px!important;
    border-radius:999px!important;
    background:var(--txp-brand-red, #DA0405)!important;
    transform:translateX(-50%)!important;
    opacity:.9!important;
    animation:txpLoaderTrack 1.45s ease-in-out infinite!important;
    pointer-events:none!important;
}

#product-category .ajax-loader img{
    position:absolute!important;
    top:50%!important;
    left:50%!important;

    width:58px!important;
    height:58px!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;

    display:block!important;
    visibility:visible!important;
    opacity:1!important;

    transform:translate(-50%,-50%) translateZ(0)!important;
    filter:drop-shadow(0 3px 8px rgba(167,41,82,.16))!important;

    animation:txpLoaderFloat 2.8s ease-in-out infinite!important;
    will-change:transform!important;
}

@keyframes txpLoaderFloat{
    0%,100%{
        transform:translate(-50%,-50%) translateY(0)!important;
    }
    50%{
        transform:translate(-50%,-50%) translateY(-4px)!important;
    }
}

@keyframes txpLoaderTrack{
    0%,100%{
        width:22px;
        opacity:.36;
    }
    50%{
        width:42px;
        opacity:1;
    }
}

@media (prefers-reduced-motion:reduce){
    #product-category .ajax-loader img,
    #product-category .ajax-loader::after{
        animation:none!important;
    }
}


/* TXP_SHARED_WAIT_V1
   Reutiliza el WebP oficial.
   Sin fuentes, imágenes ni peticiones adicionales.
*/

/* Buscador: indicador local, no bloquea escritura */
.search-ajax .ajax-loader-container{
    position:absolute!important;
    top:100%!important;
    left:50%!important;
    right:auto!important;
    transform:translateX(-50%)!important;
    width:58px!important;
    height:52px!important;
    padding:5px!important;
    margin:3px 0 0!important;
    border:1px solid rgba(84,69,80,.11)!important;
    border-radius:16px!important;
    background:#fff9fa!important;
    box-shadow:0 8px 22px rgba(84,69,80,.12)!important;
    z-index:10011!important;
    box-sizing:border-box!important;
}
.search-ajax .ajax-loader-container::before,
.search-ajax .ajax-loader-container::after{
    content:none!important;
}
.search-ajax .ajax-loader-container img{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    display:block!important;
    width:44px!important;
    height:40px!important;
    max-width:100%!important;
    max-height:none!important;
    margin:auto!important;
    opacity:1!important;
    visibility:visible!important;
    object-fit:contain!important;
    transform:none!important;
    animation:txpLoaderFloatSearch 2.8s ease-in-out infinite!important;
}
@keyframes txpLoaderFloatSearch{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-3px)}
}

/* Un único indicador compartido: navegación y vista rápida */
#txp-global-wait-v1{
    position:fixed!important;
    inset:0!important;
    display:none;
    align-items:center;
    justify-content:center;
    z-index:10009!important;
    background:rgba(84,69,80,.20);
    pointer-events:none!important;
}
#txp-global-wait-v1.txp-visible{
    display:flex!important;
}
#txp-global-wait-v1 .txp-wait-card{
    position:relative;
    box-sizing:border-box;
    width:90px;
    height:90px;
    overflow:hidden;
    border:1px solid rgba(84,69,80,.11);
    border-radius:28px;
    background:linear-gradient(
        128deg,#fff9fa 0%,#f7f2fa 51%,#eff7f5 100%
    );
    box-shadow:
        0 18px 46px rgba(84,69,80,.17),
        0 3px 12px rgba(167,41,82,.08);
}
#txp-global-wait-v1 .txp-wait-logo{
    position:absolute;
    top:50%;
    left:50%;
    display:block;
    width:58px;
    height:58px;
    object-fit:contain;
    transform:translate(-50%,-50%);
    animation:txpLoaderFloat 2.8s ease-in-out infinite;
}
#txp-global-wait-v1 .txp-wait-card::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:10px;
    width:28px;
    height:3px;
    background:#DA0405;
    border-radius:999px;
    transform:translateX(-50%);
    animation:txpLoaderTrack 1.45s ease-in-out infinite;
}
@media(prefers-reduced-motion:reduce){
    #txp-global-wait-v1 .txp-wait-logo,
    #txp-global-wait-v1 .txp-wait-card::after,
    .search-ajax .ajax-loader-container img{
        animation:none!important;
    }
}


/* Vista rápida: usar únicamente el loader oficial activo */
html.txp-wait-ready .quickview-load-img{
 display:none!important;
}