/* =========================================================================
   MOSHI STORE CR - SISTEMA DE NAVEGACIÓN HOLOGRÁFICA (ALTA FIDELIDAD)
   Arquitectura Soberana v5.3 - Restauración de Estilos y Optimización
   ========================================================================= */

/* FUENTES: Cargadas globalmente desde functions.php (no @import = no bloqueo de render) */


:root {
    --neon-cyan: #00FFFF;
    --neon-pink: #ff00f7;
    --neon-violet: #8b5cf6;
    --neon-green: #39ff14;
    --bg-dark: #000000;
    --bg-dark-alt: #050505;
    --nav-height: 72px;
}

/* ═══════════════════════════════════════════════════════════════
   1. ANIMACIONES BASE
   ═══════════════════════════════════════════════════════════════ */
@keyframes cosmicSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes coreRotate { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } }
@keyframes nebulaBreath {
    0%, 100% { box-shadow: 0 0 20px rgba(0, 243, 255, 0.5), 0 0 45px rgba(255, 0, 247, 0.25); }
    50% { box-shadow: 0 0 35px rgba(0, 243, 255, 0.7), 0 0 60px rgba(139, 92, 246, 0.35); }
}
@keyframes holographicEnter { to { opacity: 1; filter: blur(0) brightness(1); transform: scale(1) translateY(0); } }
@keyframes holographicExit { to { opacity: 0; filter: blur(20px) brightness(0.5); transform: scale(0.92) translateY(-30px); } }

/* ═══════════════════════════════════════════════════════════════
   2. SCROLLBARS Y UTILIDADES
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 922px) {
    ::-webkit-scrollbar { width: 10px !important; }
    ::-webkit-scrollbar-track { background: #000 !important; }
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, var(--neon-cyan), var(--neon-pink)) !important;
        border-radius: 10px !important; border: 2px solid #000 !important;
    }
}

.mobile-only { display: none !important; }
.pc-only { display: none !important; }

@media (max-width: 921px) { .mobile-only { display: flex !important; } }
@media (min-width: 922px) { .pc-only { display: flex !important; } }

body.moshi-menu-open { overflow: hidden !important; }

/* ═══════════════════════════════════════════════════════════════
   3. TRIGGER PC (Lateral Izquierdo)
   ═══════════════════════════════════════════════════════════════ */
#moshi-menu-trigger {
    position: fixed; top: 50%; left: 0; transform: translateY(-50%);
    width: 42px; height: 150px;
    background: linear-gradient(var(--bg-dark), var(--bg-dark)) padding-box,
                linear-gradient(to bottom, var(--neon-cyan), var(--neon-pink)) border-box;
    border: 2px solid transparent; border-left: none; border-radius: 0 12px 12px 0;
    z-index: 100000; cursor: pointer; display: flex; flex-direction: column; align-items: center;
    padding-top: 22px; box-shadow: 4px 0 20px rgba(0, 0, 0, 0.6);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#moshi-menu-trigger::before {
    content: ""; position: absolute; top: 13px; left: 50%; transform: translateX(-50%);
    width: 24px; height: 24px; border: 1.5px solid var(--neon-cyan);
    border-top-color: transparent; border-bottom-color: transparent; border-radius: 50%;
    animation: coreRotate 3s linear infinite; pointer-events: none;
}
#moshi-menu-trigger span { width: 6px; height: 6px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px #fff, 0 0 20px var(--neon-pink); margin-bottom: 24px; }
#moshi-menu-trigger::after {
    content: "M\A E\A N\A U"; white-space: pre; font-family: 'Orbitron', sans-serif;
    font-size: 14px; font-weight: 900; text-align: center;
    background: linear-gradient(to bottom, var(--neon-cyan), var(--neon-pink));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   4. OVERLAY Y NAVEGACIÓN PC
   ═══════════════════════════════════════════════════════════════ */
.moshi-apex-overlay {
    position: fixed !important; top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: #050505 !important;
    background-image: 
        radial-gradient(circle at 50% -20%, rgba(139, 92, 246, 0.12) 0%, transparent 70%),
        radial-gradient(circle at 0% 0%, rgba(0, 243, 255, 0.05) 0%, transparent 50%) !important;
    z-index: 9999999 !important; display: block !important; overflow: hidden !important;
    clip-path: circle(0% at 50% 92%); opacity: 0; pointer-events: none;
    transition: clip-path 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease !important;
}
.moshi-apex-overlay.is-active { clip-path: circle(150% at 50% 92%); opacity: 1; pointer-events: auto; }

@media (min-width: 922px) {
    .moshi-apex-overlay { 
        display: none; 
        flex-direction: row !important; 
        background: #000 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        background-image: 
            radial-gradient(circle at 50% -10%, rgba(255, 0, 247, 0.08) 0%, transparent 60%),
            radial-gradient(circle at 50% 110%, rgba(0, 243, 255, 0.08) 0%, transparent 60%) !important;
    }
    .moshi-apex-overlay.is-active { display: flex !important; }

    .moshi-nav-pc {
        width: 380px !important;
        min-width: 380px !important;
        height: 100vh !important;
        background: rgba(0,0,0,0.4);
        backdrop-filter: blur(10px);
        border-right: 1px solid rgba(0,243,255,0.1);
        padding: 80px 40px;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        gap: 15px;
        z-index: 20;
        position: relative !important;
    }

    .moshi-nav-pc a {
        color: #fff !important; font-family: 'Poppins', sans-serif !important; font-size: 34px !important;
        font-weight: 900 !important; text-transform: uppercase !important; text-decoration: none !important;
        letter-spacing: 4px !important; opacity: 0.7; transition: 0.3s;
        text-shadow: 2px 2px 0px var(--neon-pink), -2px -2px 0px var(--neon-cyan) !important;
    }
    .moshi-nav-pc a:hover { opacity: 1 !important; transform: translateX(10px); color: var(--neon-cyan) !important; }

    /* Los contenedores de vista en PC ocupan el resto del espacio */
    .menu-view {
        flex: 1 !important;
        height: 100vh !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        background: transparent !important;
        align-items: stretch !important;
        justify-content: center !important;
    }

    .moshi-pc-vitrina-default {
        width: 100% !important;
        padding: 80px 60px;
        overflow-y: auto;
    }

    .moshi-pc-vitrina-default .console-grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
        gap: 30px !important;
        width: 100% !important;
    }
}

.moshi-close {
    position: absolute !important; top: 40px !important; right: 50px !important;
    color: var(--neon-pink) !important; font-size: 45px !important; font-weight: 900 !important;
    cursor: pointer !important; text-shadow: 0 0 15px var(--neon-pink);
    background: transparent !important; border: none !important; transition: 0.4s; z-index: 2000 !important;
}

/* ═══════════════════════════════════════════════════════════════
   5. HUD MÓVIL (Sovereign Bar)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 921px) {
    #moshi-apex-os .moshi-apex-bottom-bar {
        display: flex !important; 
        position: fixed !important; 
        bottom: 0 !important; 
        left: 0 !important;
        width: 100% !important; 
        height: 70px !important; 
        background: rgba(5, 5, 5, 0.98) !important;
        backdrop-filter: blur(25px); 
        -webkit-backdrop-filter: blur(25px);
        border-radius: 28px 28px 0 0 !important; 
        z-index: 2147483647 !important; /* Prioridad máxima absoluta */
        justify-content: space-around !important; 
        align-items: center !important;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.95) !important;
        pointer-events: auto !important;
        -webkit-text-size-adjust: 100% !important; /* BLOQUEO DE FONT BOOSTING */
        text-size-adjust: 100% !important;
    }
    #moshi-apex-os .moshi-apex-bottom-bar::before {
        content: "" !important; position: absolute !important; inset: 0 !important;
        border: 1.2px solid transparent !important; border-radius: 28px 28px 0 0 !important;
        background: linear-gradient(rgba(5, 5, 5, 0.96), rgba(5, 5, 5, 0.96)) padding-box,
                    linear-gradient(to right, #00f3ff, #ff00f7, #8b5cf6) border-box !important;
        -webkit-mask-image: linear-gradient(to bottom, black 40px, transparent 65px) !important;
        mask-image: linear-gradient(to bottom, black 40px, transparent 65px) !important;
        z-index: -1 !important;
    }
}

#moshi-apex-os .moshi-apex-bottom-bar .apex-mob-item-center .apex-mob-label { margin-top: 7px !important; font-size: 10px !important; } /* Compensado para no bajar más la palabra */

/* ---- ESTADO ACTIVO ---- */
#moshi-apex-os .moshi-apex-bottom-bar .apex-mob-item.is-active .apex-mob-label {
    background: linear-gradient(135deg, #00f3ff, #ff00f7, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 1 !important;
}

#moshi-apex-os .moshi-apex-bottom-bar .apex-mob-item.is-active .apex-mob-icon-hud {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

#moshi-apex-os .moshi-apex-bottom-bar .apex-mob-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-decoration: none; transition: 0.3s; 
    background: none !important; border: none !important; padding: 0 !important;
    -webkit-tap-highlight-color: transparent;
}

#moshi-apex-os .moshi-apex-bottom-bar .apex-mob-item:active { transform: scale(0.92); }

#moshi-apex-os .moshi-apex-bottom-bar .apex-mob-icon-hud {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    margin-bottom: 4px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 50%;
    background: rgba(255, 255, 255, 0.04); position: relative;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#moshi-apex-os .moshi-apex-bottom-bar .apex-mob-icon-svg { width: 19px; height: 19px; color: rgba(255, 255, 255, 0.85); }
#moshi-apex-os .moshi-apex-bottom-bar .apex-mob-label { 
    font-family: 'Outfit', sans-serif !important; font-size: 9px !important; 
    font-weight: 800 !important; color: #fff !important; text-transform: uppercase; 
    letter-spacing: 1px !important; opacity: 0.9 !important; 
    -webkit-text-size-adjust: 100% !important; 
    text-size-adjust: 100% !important; 
}

/* Carrito Badge RESTAURADO */
#moshi-apex-os .moshi-apex-bottom-bar .apex-mob-cart-count {
    position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px;
    background: var(--neon-cyan); color: #000; font-size: 8px; font-weight: 900; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; border: 1.5px solid #000;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.6); z-index: 5;
}

/* Colores HUD Protegidos */
#moshi-apex-os .moshi-apex-bottom-bar .apex-mob-item-home .apex-mob-icon-svg    { color: #00f3ff; }
#moshi-apex-os .moshi-apex-bottom-bar .apex-mob-item-shop .apex-mob-icon-svg    { color: #39ff14; }
#moshi-apex-os .moshi-apex-bottom-bar .apex-mob-item-cart .apex-mob-icon-svg    { color: #ff00f7; }
#moshi-apex-os .moshi-apex-bottom-bar .apex-mob-item-profile .apex-mob-icon-svg { color: #8b5cf6; }
#moshi-apex-os .moshi-apex-bottom-bar .apex-mob-item.is-active .apex-mob-label  { color: #fff; opacity: 1; }


/* Círculo Central HUD */
#moshi-apex-os .moshi-apex-bottom-bar .apex-mob-item-center { position: relative !important; top: -24px !important; flex: 1.4 !important; z-index: 100 !important; }
.apex-center-circle {
    position: relative !important; width: 60px !important; height: 60px !important;
    background: #050505 !important; border-radius: 50% !important;
    box-shadow: 0 0 35px rgba(0, 243, 255, 0.8), 0 0 70px rgba(255, 0, 247, 0.6) !important;
    animation: nebulaBreath 3s ease-in-out infinite;
}
.apex-center-circle-ring {
    position: absolute !important; inset: 0 !important; padding: 3px !important; border-radius: 50% !important;
    background: conic-gradient(from 0deg, #00f3ff, #ff00f7, #8b5cf6, #00f3ff) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: cosmicSpin 3s linear infinite !important; z-index: 10 !important;
}
.apex-center-circle::after { content: '' !important; position: absolute !important; inset: 3px !important; border: 1.5px solid #000 !important; border-radius: 50% !important; z-index: 11 !important; }
.apex-mob-logo-img { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 62px !important; height: 62px !important; border-radius: 50% !important; z-index: 2 !important; object-fit: cover !important; }

/* ═══════════════════════════════════════════════════════════════
   6. CONSOLA Y VITRINAS
   ═══════════════════════════════════════════════════════════════ */
.moshi-nav-mobile { 
    width: 100vw !important; 
    height: 100dvh !important; 
    background: #000 !important; 
    background-image: 
        radial-gradient(circle at 50% -10%, rgba(255, 0, 247, 0.1) 0%, transparent 60%),
        radial-gradient(circle at 50% 110%, rgba(0, 243, 255, 0.1) 0%, transparent 60%) !important;
    overflow-y: auto !important; 
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

.console-wrapper { 
    width: 100% !important;
    padding: 70px 24px 180px !important; 
    display: flex; 
    flex-direction: column; 
    gap: 22px !important; 
}

.console-grid {
    display: flex;
    flex-direction: column;
    gap: 18px !important;
}

.console-hub { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px; }

.hub-orb {
    position: relative !important; width: 90px !important; height: 90px !important;
    background: #050505 !important; border-radius: 50% !important;
    box-shadow: 0 0 35px rgba(0, 243, 255, 0.6), 0 0 70px rgba(255, 0, 247, 0.4) !important;
    animation: nebulaBreath 3s ease-in-out infinite;
}

.hub-orb-ring {
    position: absolute !important; inset: 0 !important; padding: 3px !important; border-radius: 50% !important;
    background: conic-gradient(from 0deg, var(--neon-cyan), var(--neon-pink), var(--neon-violet), var(--neon-cyan)) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: cosmicSpin 3s linear infinite; z-index: 10 !important;
}

.hub-orb::after { content: '' !important; position: absolute !important; inset: 3px !important; border: 1.5px solid #000 !important; border-radius: 50% !important; z-index: 11 !important; }

.hub-orb img { 
    position: absolute !important; top: 50% !important; left: 50% !important; 
    transform: translate(-50%, -50%) !important; width: 92px !important; 
    height: 92px !important; border-radius: 50% !important; 
    z-index: 2 !important; object-fit: cover !important; 
}

.console-hub-title { 
    font-family: 'Orbitron', sans-serif !important; 
    font-size: 14px; 
    font-weight: 900; 
    letter-spacing: 6px; 
    color: #fff; 
    text-transform: uppercase; 
    margin-top: 15px; 
}

.console-card {
    position: relative !important; background: rgba(10, 10, 15, 0.75) !important;
    backdrop-filter: blur(18px) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 14px !important; display: flex !important; align-items: center !important;
    padding: 16px 18px !important; text-decoration: none !important; transition: 0.3s;
}
.console-card:active { transform: scale(0.97) !important; background: rgba(20, 20, 25, 0.9) !important; }
.console-card-accent { position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--card-color); border-radius: 0 4px 4px 0; box-shadow: 0 0 12px var(--card-color); }
.console-card-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1.2px solid var(--card-color); border-radius: 50%; margin-left: 8px; }
.console-card-icon svg { width: 18px; height: 18px; color: var(--card-color); filter: drop-shadow(0 0 4px var(--card-color)); }
.console-card-label { flex: 1; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 2.5px; color: #fff; text-transform: uppercase; margin-left: 16px; }
.console-card-chevron { width: 18px; height: 18px; color: var(--card-color); opacity: 0.4; }

/* Vitrinas Submenús RESTAURADO */
.moshi-view-submenu { 
    display: none; 
    width: 100%; 
    height: 100%; 
    background: transparent !important; /* Permitir ver el fondo del overlay */
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 100; 
}

@media (min-width: 922px) {
    .moshi-view-submenu {
        position: relative !important;
        flex: 1 !important;
        width: auto !important;
        left: auto !important;
        top: auto !important;
        background: transparent !important;
        z-index: 5 !important;
        display: none;
        align-items: stretch !important;
    }
    .moshi-view-submenu.is-active {
        display: flex !important;
    }
    
    /* En PC ocultamos la vitrina por defecto de view-main cuando hay un submenú activo */
    .moshi-apex-overlay:has(.moshi-view-submenu.is-active) #moshi-apex-view-main {
        display: none !important;
    }
}
.full-vitrina-wrapper { padding: 80px 24px 180px !important; display: flex; flex-direction: column; gap: 25px; width: 100%; height: 100%; overflow-y: auto !important; }

@media (min-width: 922px) {
    .full-vitrina-wrapper { 
        padding: 60px !important; 
        align-items: stretch !important; 
        width: 100% !important;
        max-width: 1500px !important;
        margin: 0 auto !important;
    }
    .grid-animes-full { 
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important; 
        gap: 35px !important;
        width: 100% !important;
        padding: 40px 0 !important;
    }
    .anime-box-full {
        height: 185px !important;
    }
    .anime-name {
        font-size: 16px !important;
        margin-bottom: 8px !important;
        color: #e2f9ff !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.95), 0 0 8px rgba(0, 0, 0, 0.8) !important;
    }
    .count-badge {
        font-size: 9px !important;
        padding: 3px 10px !important;
    }
}

.moshi-btn-back-boutique {
    background: rgba(5, 5, 5, 0.6); backdrop-filter: blur(15px); border: 1.5px solid var(--neon-cyan);
    border-radius: 100px; padding: 8px 20px; color: #fff; display: inline-flex; align-items: center; gap: 10px;
    font-family: 'Outfit', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: 4px; transition: 0.3s; cursor: pointer;
}
.vitrina-title-container { border-left: 3px solid var(--card-color); padding-left: 15px; margin-top: 10px; }
.title-main { font-family: 'Cormorant+Garamond', serif !important; font-size: 42px !important; font-style: italic !important; color: #fff !important; margin: 0 !important; line-height: 1.2 !important; }

.grid-animes-full { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px !important; width: 100%; }
.anime-box-full {
    position: relative; height: 110px; background: linear-gradient(90deg, #00f3ff, #ff00f7) !important;
    padding: 2px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
    text-decoration: none; transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); display: block;
}
.anime-box-full:active { transform: scale(0.95) !important; }

.anime-box-full::before {
    content: ""; position: absolute; inset: 2px;
    background: var(--bg-img) center / 100% 100% no-repeat, 
                radial-gradient(circle at 30% 30%, #1a2a2d 0%, #0a0a0f 100%) !important; 
    z-index: 1;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 23px), calc(100% - 23px) 100%, 0 100%);
}
.overlay-oscura {
    display: none !important; /* Eliminado a petición del usuario para mayor nitidez */
}
.box-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px 8px 8px; z-index: 10; background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 60%, transparent 100%) !important; }
.anime-name { 
    color: var(--neon-cyan) !important; 
    font-family: 'Outfit', sans-serif !important; 
    font-size: 10px !important; 
    font-weight: 900 !important; 
    text-transform: uppercase; 
    letter-spacing: 0.5px;
    display: block; 
    margin-bottom: 6px; 
    text-shadow: 0 2px 4px #000, 0 0 8px rgba(0, 0, 0, 1) !important;
}
.count-badge { display: inline-block; background: linear-gradient(90deg, var(--neon-cyan), var(--neon-pink)); color: #000; font-size: 8.5px; font-weight: 900; padding: 3px 8px; clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }

/* ═══════════════════════════════════════════════════════════════
   7. TRANSICIONES Y RENDIMIENTO
   ═══════════════════════════════════════════════════════════════ */
.menu-view { display: none; width: 100%; height: 100%; }
.menu-view.is-active { display: flex !important; flex-direction: column !important; }

.menu-view.moshi-v-enter {
    display: flex !important; position: absolute; top: 0; left: 0; opacity: 0;
    filter: blur(15px) brightness(2); transform: scale(1.08) translateY(20px);
    animation: holographicEnter 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.menu-view.moshi-v-exit {
    display: flex !important; position: absolute; top: 0; left: 0; opacity: 1;
    animation: holographicExit 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.moshi-menu-open .m-hero__mesh,
body.moshi-menu-open .m-hero__particles,
body.moshi-menu-open .m-hero__shooting-stars,
body.moshi-menu-open .m-new__Sakura { display: none !important; }

/* (eliminado scroll lock CSS) */

/* ═══════════════════════════════════════════════════════════════
   8. SISTEMA DE CARRITO (DRAWER & FLOAT TRIGGER)
   ═══════════════════════════════════════════════════════════════ */

/* Botón Flotante PC */
#moshi-cart-float-trigger {
    display: none !important; /* Oculto por defecto */
    position: fixed !important; bottom: 28px !important; right: 28px !important; 
    width: 60px !important; height: 60px !important;
    background: rgba(5, 5, 5, 0.85) !important; backdrop-filter: blur(15px) !important;
    border: 2px solid #fff !important; border-radius: 50% !important;
    color: #fff !important; cursor: pointer !important; z-index: 100000 !important;
    align-items: center !important; justify-content: center !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 0, 247, 0.2) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    padding: 0 !important;
}

@media (min-width: 922px) {
    #moshi-cart-float-trigger { display: flex !important; }
}

#moshi-cart-float-trigger:hover {
    transform: scale(1.1) translateY(-5px) !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.8), 0 0 25px rgba(255, 0, 247, 0.5) !important;
    border-color: var(--neon-pink) !important; color: var(--neon-pink) !important;
}


.moshi-cart-float-icon { width: 26px !important; height: 26px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.moshi-cart-float-icon svg { width: 26px !important; height: 26px !important; stroke: currentColor !important; fill: none !important; }

.moshi-cart-float-count {
    position: absolute !important; top: -5px !important; right: -5px !important; 
    min-width: 22px !important; height: 22px !important;
    background: var(--neon-cyan) !important; color: #000 !important; 
    font-size: 10px !important; font-weight: 900 !important;
    border-radius: 50% !important; display: flex !important; 
    align-items: center !important; justify-content: center !important;
    box-shadow: 0 0 10px var(--neon-cyan) !important; border: 1.5px solid #fff !important;
    z-index: 10 !important;
}

/* Drawer Container */
.moshi-cart-drawer {
    position: fixed !important; inset: 0 !important; z-index: 999999 !important; 
    display: none !important; pointer-events: none !important; direction: ltr !important;
}
.moshi-cart-drawer.is-open { display: block !important; pointer-events: auto !important; }

.moshi-cart-drawer-backdrop {
    position: absolute !important; inset: 0 !important; 
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(10px) !important; opacity: 0; transition: opacity 0.4s ease;
    cursor: pointer !important;
}
.moshi-cart-drawer.is-open .moshi-cart-drawer-backdrop { opacity: 1 !important; }

/* Panel Lateral - Cyber-Glass Side Panel */
.moshi-cart-drawer-panel {
    position: absolute !important; top: 0 !important; right: 0 !important; 
    bottom: 0 !important; left: auto !important;
    width: 100% !important; max-width: 420px !important; height: 100dvh !important;
    background: rgba(5, 5, 10, 0.95) !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    border-radius: 40px 0 0 40px !important;
    border-left: 2px solid transparent !important;
    background-image: linear-gradient(rgba(5, 5, 10, 0.95), rgba(5, 5, 10, 0.95)), 
                      linear-gradient(to bottom, var(--neon-cyan), var(--neon-pink)) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    display: flex !important; flex-direction: column !important; 
    transform: translateX(100%) !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: -20px 0 80px rgba(0, 0, 0, 0.95) !important;
    z-index: 2 !important;
    overflow: hidden !important;
}

/* Ajuste móvil - Efecto de Expansión Circular (Estilo Menú Galaxy) */
@media (max-width: 921px) {
    .moshi-cart-drawer {
        z-index: 2147483640 !important; /* Un nivel por debajo del HUD (2147483647) */
        position: fixed !important; inset: 0 !important;
        /* Forzar capa de composición propia para evitar parpadeo en Android */
        -webkit-transform: translateZ(0) !important;
        transform: translateZ(0) !important;
    }
    
    .moshi-cart-drawer-panel {
        top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
        width: 100vw !important; height: 100vh !important;
        max-width: none !important;
        border-radius: 0 !important;
        border: none !important;
        /* Fondo sólido — NO backdrop-filter en móvil para evitar parpadeo en Android.
           El 0.98 de opacidad ya lo hace completamente opaco, blur no aporta nada. */
        background: rgb(5, 5, 10) !important;
        background-image: 
            radial-gradient(circle at 50% -20%, rgba(139, 92, 246, 0.08) 0%, transparent 70%),
            radial-gradient(circle at 72% 92%, rgba(0, 243, 255, 0.08) 0%, transparent 60%) !important;
        /* Eliminar backdrop-filter que causa parpadeo con clip-path en Android */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        
        /* Animación de Expansión desde el Botón Carrito */
        clip-path: circle(0% at 72% 92%) !important;
        transform: none !important;
        opacity: 1 !important; /* Sin fade — el clip-path es suficiente */
        pointer-events: none !important;
        /* GPU layer para que el clip-path no cause flash */
        will-change: clip-path !important;
        -webkit-transform: translateZ(0) !important;
        transition: clip-path 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    .moshi-cart-drawer.is-open .moshi-cart-drawer-panel { 
        clip-path: circle(150% at 72% 92%) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Ocultar 'X' en móvil para usar el botón del HUD como cierre */
    .moshi-cart-drawer-close, .moshi-cart-drawer-backdrop { display: none !important; }

    /* Espaciado para el footer para no chocar con HUD */
    .moshi-cart-drawer-footer-fixed {
        padding-bottom: 110px !important;
        background: rgba(5, 5, 5, 0.98) !important;
    }
}

.moshi-cart-drawer.is-open .moshi-cart-drawer-panel { transform: translateX(0) !important; }

/* Header Drawer */
.moshi-cart-drawer-header {
    padding: 25px 30px !important; border-bottom: 1px solid rgba(0, 255, 255, 0.1) !important;
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    background: rgba(255, 255, 255, 0.02) !important;
    flex-shrink: 0 !important;
    position: relative !important;
}
.moshi-cart-drawer-header::after {
    content: '' !important; position: absolute !important; bottom: -1px !important; left: 10% !important;
    width: 80% !important; height: 1px !important;
    background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent) !important;
    box-shadow: 0 0 12px var(--neon-cyan) !important;
}


.moshi-cart-drawer-title-wrap { display: flex !important; align-items: center !important; gap: 15px !important; }

/* Fix de tamaño de icono */
.moshi-cart-drawer-icon { 
    width: 24px !important; height: 24px !important; 
    display: flex !important; align-items: center !important; justify-content: center !important; 
    color: var(--neon-cyan) !important;
    filter: drop-shadow(0 0 8px var(--neon-cyan));
}
.moshi-cart-drawer-icon svg { width: 24px !important; height: 24px !important; stroke: currentColor !important; fill: none !important; }

.moshi-cart-drawer-label { 
    font-family: 'Outfit', sans-serif; font-weight: 900; 
    letter-spacing: 2px; color: #fff; font-size: 16px; 
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}
.moshi-cart-drawer-count { 
    background: rgba(0, 255, 255, 0.1); padding: 2px 8px; border-radius: 4px;
    color: var(--neon-cyan); font-size: 10px; font-weight: 800;
    margin-left: 8px; font-family: 'Inter', sans-serif; 
    border: 1px solid rgba(0, 255, 255, 0.2);
}

.moshi-cart-drawer-close {
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff; font-size: 20px; width: 32px; height: 32px; border-radius: 8px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: 0.3s;
}
.moshi-cart-drawer-close:hover { background: var(--neon-pink); border-color: var(--neon-pink); color: #fff; transform: rotate(90deg); box-shadow: 0 0 15px var(--neon-pink); }

/* Body Drawer */
.moshi-cart-drawer-body { 
    flex: 1 !important; overflow-y: auto !important; padding: 10px 30px !important; 
    display: flex !important; flex-direction: column !important; 
    scrollbar-width: thin; scrollbar-color: var(--neon-cyan) transparent;
}
.moshi-cart-drawer-list { list-style: none; padding: 0; margin: 0; }

.moshi-cart-drawer-item {
    display: flex; gap: 18px; padding: 25px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative; animation: slideInRight 0.4s ease backwards;
}
.moshi-cart-drawer-item::after {
    content: '' !important; position: absolute !important; bottom: -1px !important; left: 0 !important;
    width: 0 !important; height: 1px !important;
    background: var(--neon-cyan) !important;
    transition: width 0.4s ease !important;
    box-shadow: 0 0 10px var(--neon-cyan) !important;
}
.moshi-cart-drawer-item:hover::after { width: 100% !important; }


.moshi-cart-drawer-item-thumb { 
    width: 68px !important; height: 90px !important; border-radius: 10px; 
    overflow: hidden; background: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.12); flex-shrink: 0;
    position: relative !important; z-index: 1 !important;
}

.moshi-cart-drawer-item:hover .moshi-cart-drawer-item-thumb { border-color: var(--neon-cyan); box-shadow: 0 0 15px rgba(0, 255, 255, 0.2); }

.moshi-cart-drawer-item-thumb img { 
    width: 100% !important; height: 100% !important; 
    object-fit: cover !important; 
    display: block !important;
    border-radius: inherit !important; /* Forza a la imagen a seguir la curva del marco */
    position: relative !important; z-index: 2 !important;
}






.moshi-cart-drawer-item-details { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.moshi-cart-drawer-item-name { 
    color: #fff; font-size: 14px; font-weight: 700; 
    text-decoration: none; display: block; line-height: 1.4;
    transition: 0.2s;
}
.moshi-cart-drawer-item-name:hover { color: var(--neon-cyan); }

.moshi-cart-drawer-item-meta { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; flex-wrap: nowrap !important; gap: 10px; width: 100%; }
.moshi-cart-drawer-item-price { color: var(--neon-cyan); font-weight: 900; font-size: 15px; text-shadow: 0 0 10px rgba(0, 255, 255, 0.3); }

.moshi-cart-drawer-item-qty-control { 
    display: flex; align-items: center; gap: 12px; 
    background: rgba(255, 255, 255, 0.05); 
    padding: 5px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.05);
}
.moshi-qty-btn { 
    background: transparent; border: none; color: #fff; 
    cursor: pointer; font-size: 18px; width: 20px; height: 20px; 
    display: flex; align-items: center; justify-content: center; opacity: 0.4;
    transition: 0.2s;
}
.moshi-qty-btn.qty-limit-reached {
    animation: moshiShake 0.4s ease !important;
    color: var(--neon-pink) !important;
    border-color: var(--neon-pink) !important;
    box-shadow: 0 0 10px var(--neon-pink) !important;
}

@keyframes moshiShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.moshi-qty-btn:hover { opacity: 1; color: var(--neon-cyan); }
.moshi-cart-drawer-item-qty-number { color: #fff; font-weight: 800; font-size: 14px; min-width: 18px; text-align: center; font-family: monospace; }

.moshi-cart-drawer-item-remove { 
    position: absolute; top: 22px; right: 0; 
    color: rgba(255, 255, 255, 0.2); text-decoration: none; 
    font-size: 22px; transition: 0.2s; 
}
.moshi-cart-drawer-item-remove:hover { color: var(--neon-pink); transform: scale(1.2); }

/* Footer Fijo al Fondo */
.moshi-cart-drawer-footer-fixed {
    margin-top: auto !important;
    padding: 15px 30px 30px !important; /* Menos padding arriba para acercar la línea */
    background: rgba(5, 5, 5, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    flex-shrink: 0 !important;
    z-index: 5 !important;
    position: relative !important;
    border-top: 1px solid rgba(0, 255, 255, 0.15) !important;
}

/* Línea Divisora con Glow (Footer) */
.moshi-cart-drawer-footer-fixed::before {
    content: '' !important; position: absolute !important; top: -1px !important; left: 10% !important;
    width: 80% !important; height: 1px !important;
    background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent) !important;
    box-shadow: 0 0 12px var(--neon-cyan) !important;
    z-index: 6 !important;
}

/* Evitar choque con HUD móvil */
@media (max-width: 921px) {
    .moshi-cart-drawer-footer-fixed {
        padding-bottom: 110px !important;
        background: rgba(5, 5, 5, 0.98) !important;
    }
}




.moshi-cart-drawer-subtotal-wrap { 
    margin-bottom: 25px !important;
}
.moshi-cart-drawer-subtotal { 
    display: flex !important; justify-content: space-between !important; align-items: center !important; 
    margin-bottom: 10px !important; color: #fff !important; font-family: 'Outfit', sans-serif !important; 
}
.moshi-cart-drawer-subtotal span { opacity: 0.4; letter-spacing: 2px; font-size: 12px; font-weight: 900; }
.moshi-cart-drawer-subtotal strong,
.moshi-cart-drawer-subtotal strong .amount,
.moshi-cart-drawer-subtotal strong bdi { 
    font-size: 22px !important; 
    color: var(--neon-cyan) !important; 
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5); 
    line-height: 1 !important;
}

.moshi-cart-drawer-note { font-size: 10px !important; opacity: 0.3 !important; color: #fff !important; text-align: center !important; }

.moshi-cart-drawer-footer { padding: 0 !important; }
.moshi-cart-drawer-btn {
    display: flex !important; width: 100% !important; padding: 20px !important; 
    align-items: center !important; justify-content: center !important;
    text-decoration: none !important; font-family: 'Outfit', sans-serif !important; 
    font-weight: 900 !important; letter-spacing: 3px !important; font-size: 13px !important;
    border-radius: 100px !important; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    text-transform: uppercase !important;
}

/* Botón Principal Estilo Cápsula */
.moshi-cart-drawer-btn-primary { 
    background: linear-gradient(90deg, var(--neon-cyan), #00d2ff) !important; 
    color: #000 !important; 
    box-shadow: 0 5px 25px rgba(0, 255, 255, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.moshi-cart-drawer-btn-primary:hover { 
    background: #fff !important;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.5) !important; 
    transform: translateY(-5px) scale(1.02) !important;
}

/* Empty State */
.moshi-cart-drawer-empty-container { 
    flex: 1; display: flex; flex-direction: column; 
    align-items: center; justify-content: center; gap: 20px; 
    text-align: center; opacity: 0.6;
}
.moshi-cart-drawer-empty { font-family: 'Outfit', sans-serif; font-size: 16px; letter-spacing: 1px; color: #fff; }
.moshi-cart-drawer-footer-empty { width: 100%; max-width: 280px; }

@keyframes slideInRight { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }



/* Tooltip de Cantidad Premium (Hacia abajo) */
.moshi-cart-drawer-item-qty-control { position: relative !important; }

.moshi-qty-tooltip {
    position: absolute !important; top: 100% !important; left: 50% !important; 
    transform: translateX(-50%) translateY(10px) !important;
    background: rgba(10, 10, 15, 0.95) !important; 
    backdrop-filter: blur(10px) !important;
    color: var(--neon-cyan) !important;
    border: 1px solid var(--neon-cyan) !important;
    font-family: 'Outfit', sans-serif !important; font-size: 9px !important;
    font-weight: 900 !important; padding: 4px 10px !important; border-radius: 4px !important;
    white-space: nowrap !important; z-index: 100 !important;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2) !important;
    pointer-events: none !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    animation: moshiTooltipInDown 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

.moshi-qty-tooltip::after {
    content: '' !important; position: absolute !important; bottom: 100% !important; left: 50% !important;
    transform: translateX(-50%) !important;
    border: 5px solid transparent !important;
    border-bottom-color: var(--neon-cyan) !important;
}

.moshi-qty-tooltip.is-exiting {
    animation: moshiTooltipOutDown 0.2s ease forwards !important;
}

@keyframes moshiTooltipInDown {
    from { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.5); }
    to { opacity: 1; transform: translateX(-50%) translateY(10px) scale(1); }
}

@keyframes moshiTooltipOutDown {
    to { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.5); }
}