/* ============================================================
   LOWKEY — FIX MOBILE CARDS v4
   ✦ Neon APAGADO en reposo, se ENCIENDE al tocar
   ✦ Badges rediseñados (glassmorphism + glow)
   ============================================================ */


/* ============================================================
   GLOBAL: apagar overlay ::before en todos lados
   ============================================================ */
.product-card-premium::before {
    display: none !important;
    opacity: 0 !important;
}


/* ============================================================
   DESKTOP — hover limpio
   ============================================================ */
@media (min-width: 769px) {
    .product-card-premium {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    }
    .product-card-premium:hover {
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6) !important;
        border-color: rgba(0, 255, 156, 0.35) !important;
    }
    .btn-primary:hover, .btn-cart:hover,
    .btn-checkout:hover, .cta-button:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
    }
    .filter-btn.active { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; }
    .nav-item.active   { box-shadow: none !important; }
}


/* ============================================================
   MOBILE — RESTING STATE: neon APAGADO
   Card neutra, sin brillo verde en reposo
   ============================================================ */
@media (max-width: 768px) {

    .product-card-premium {
        border-radius: 20px !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.60) !important;
        transition:
            transform 0.14s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.14s ease,
            border-color 0.14s ease !important;
    }

    /* Imagen sin aura verde en reposo */
    .product-img {
        filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.50)) !important;
        transition: filter 0.14s ease, transform 0.14s ease !important;
    }

    /* Contenedor imagen sin aura */
    .product-image-container::before {
        background: transparent !important;
        display: none !important;
    }

    /* Precio sin glow en reposo */
    .product-price-premium {
        text-shadow: none !important;
    }

    /* Botones neutros */
    .btn-cart-premium {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.40) !important;
    }
    .btn-view-premium {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.30) !important;
    }
}


/* ============================================================
   MOBILE — :HOVER BLOQUEADO
   iOS/Android pega el :hover después de tocar →
   lo igualamos al resting para que no haga nada
   ============================================================ */
@media (max-width: 768px) {

    .product-card-premium:hover {
        transform: none !important;
        border-color: rgba(255, 255, 255, 0.07) !important;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.60) !important;
    }
    .product-card-premium:hover .product-img {
        transform: none !important;
        filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.50)) !important;
    }
    .product-card-premium:hover .product-image-container::before {
        display: none !important;
    }
}


/* ============================================================
   MOBILE — :ACTIVE: neon SE ENCIENDE al tocar
   ============================================================ */
@media (max-width: 768px) {

    .product-card-premium:active {
        transform: scale(0.972) !important;
        border-color: rgba(0, 255, 156, 0.55) !important;
        box-shadow:
            0 3px 16px rgba(0, 0, 0, 0.80),
            0 0 52px rgba(0, 255, 156, 0.34),
            inset 0 0 20px rgba(0, 255, 156, 0.06) !important;
    }

    .product-card-premium:active .product-img {
        filter: drop-shadow(0 12px 30px rgba(0, 255, 156, 0.60)) !important;
        transform: scale(1.01) !important;
    }

    /* Precio: glow verde al tocar */
    .product-card-premium:active .product-price-premium {
        text-shadow:
            0 0 10px rgba(0, 255, 156, 0.55),
            0 0 22px rgba(0, 255, 156, 0.25) !important;
    }

    .btn-view-premium:active {
        transform: scale(0.95) !important;
        background: rgba(255, 255, 255, 0.09) !important;
        box-shadow: 0 0 18px rgba(0, 255, 156, 0.16) !important;
    }
    .btn-cart-premium:active {
        transform: scale(0.93) !important;
        box-shadow: 0 0 28px rgba(0, 255, 156, 0.50) !important;
    }
}


/* ============================================================
   MOBILE 480px
   ============================================================ */
@media (max-width: 480px) {
    .product-card-premium {
        border-radius: 18px !important;
    }
    .product-image-container { padding: 20px !important; }
    .product-content         { padding: 16px !important; }

    .product-card-premium:hover {
        border-color: rgba(255, 255, 255, 0.07) !important;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.60) !important;
    }
    .product-card-premium:active {
        border-color: rgba(0, 255, 156, 0.50) !important;
        box-shadow:
            0 3px 14px rgba(0, 0, 0, 0.80),
            0 0 42px rgba(0, 255, 156, 0.28) !important;
    }
    .product-card-premium:active .product-img {
        filter: drop-shadow(0 10px 26px rgba(0, 255, 156, 0.54)) !important;
    }
}


/* ============================================================
   MOBILE 375px (iPhone SE)
   ============================================================ */
@media (max-width: 375px) {
    .product-card-premium {
        border-radius: 16px !important;
    }
    .product-image-container { padding: 18px !important; }
    .product-content         { padding: 14px !important; }

    .product-card-premium:hover {
        border-color: rgba(255, 255, 255, 0.07) !important;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.60) !important;
    }
    .product-card-premium:active {
        border-color: rgba(0, 255, 156, 0.46) !important;
        box-shadow:
            0 2px 12px rgba(0, 0, 0, 0.80),
            0 0 36px rgba(0, 255, 156, 0.24) !important;
    }
    .product-card-premium:active .product-img {
        filter: drop-shadow(0 9px 22px rgba(0, 255, 156, 0.50)) !important;
    }
}


/* ============================================================
   ✦ BADGES REDISEÑADOS — GLASSMORPHISM PREMIUM
   ============================================================ */

/* BASE — badge principal (Nuevo / Bestseller) */
.product-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 12px 5px 9px;
    border-radius: 999px;
    font-size: 0.60rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    backdrop-filter: blur(12px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
    line-height: 1;
}

/* Icono interno (dot) */
.product-badge::before {
    content: '';
    display: inline-block !important;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
    flex-shrink: 0;
}

/* ── NUEVO ── */
.product-badge.new,
.product-badge.nuevo {
    background: rgba(0, 200, 120, 0.22) !important;
    color: #00ff9c !important;
    border-color: rgba(0, 255, 156, 0.30) !important;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.40),
        0 0 18px rgba(0, 255, 156, 0.22),
        inset 0 1px 0 rgba(0, 255, 156, 0.15) !important;
    animation: none !important;
}

/* ── BESTSELLER ── */
.product-badge.bestseller,
.product-badge.destacado {
    background: rgba(255, 180, 0, 0.18) !important;
    color: #ffd84d !important;
    border-color: rgba(255, 210, 0, 0.32) !important;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.40),
        0 0 18px rgba(255, 200, 0, 0.22),
        inset 0 1px 0 rgba(255, 220, 0, 0.18) !important;
    animation: badgeBestsellerGlow 2.8s ease-in-out infinite !important;
}

@keyframes badgeBestsellerGlow {
    0%, 100% {
        box-shadow:
            0 2px 12px rgba(0, 0, 0, 0.40),
            0 0 14px rgba(255, 200, 0, 0.18),
            inset 0 1px 0 rgba(255, 220, 0, 0.18);
    }
    50% {
        box-shadow:
            0 2px 14px rgba(0, 0, 0, 0.45),
            0 0 28px rgba(255, 200, 0, 0.38),
            inset 0 1px 0 rgba(255, 220, 0, 0.22);
    }
}

/* ── OFERTA / SALE ── */
.product-badge.oferta,
.product-badge.sale {
    background: rgba(255, 50, 60, 0.18) !important;
    color: #ff7070 !important;
    border-color: rgba(255, 60, 70, 0.30) !important;
    box-shadow:
        0 2px 12px rgba(0, 0, 0, 0.40),
        0 0 16px rgba(255, 60, 70, 0.22),
        inset 0 1px 0 rgba(255, 80, 80, 0.15) !important;
    animation: none !important;
}

/* ── BADGE DESCUENTO (-XX%) ── */
/* NOTA: posición final controlada por lowkey-fix-final.css */
.product-badge-discount {
    position: absolute !important;
    z-index: 5 !important;
    background: rgba(220, 30, 50, 0.20) !important;
    color: #ff6b6b !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 60, 80, 0.32) !important;
    letter-spacing: 0.5px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.40),
        0 0 20px rgba(255, 50, 60, 0.28),
        inset 0 1px 0 rgba(255, 100, 100, 0.18) !important;
    animation: discountGlow 2.2s ease-in-out infinite !important;
    font-family: 'Poppins', sans-serif !important;
}

@keyframes discountGlow {
    0%, 100% {
        box-shadow:
            0 2px 10px rgba(0, 0, 0, 0.40),
            0 0 16px rgba(255, 50, 60, 0.22),
            inset 0 1px 0 rgba(255, 100, 100, 0.18);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 2px 12px rgba(0, 0, 0, 0.45),
            0 0 28px rgba(255, 50, 60, 0.44),
            inset 0 1px 0 rgba(255, 100, 100, 0.22);
        transform: scale(1.06);
    }
}

/* Mobile: badge principal y descuento ajustados */
@media (max-width: 768px) {
    .product-badge {
        top: 10px !important;
        right: 10px !important;
        font-size: 0.57rem !important;
        padding: 4px 10px 4px 7px !important;
        letter-spacing: 0.9px !important;
    }
    .product-badge::before {
        width: 5px !important;
        height: 5px !important;
    }
    .product-badge-discount {
        /* posición manejada por lowkey-fix-final.css */
        font-size: 0.67rem !important;
        padding: 4px 8px !important;
    }
}


/* ============================================================
   MODAL, CART, FILTROS — sin aura
   ============================================================ */
.modal-content       { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8) !important; }
.cart-modal          { box-shadow: -8px 0 40px rgba(0, 0, 0, 0.6) !important; }
.cart-button-float   { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important; }
.cart-button-float:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6) !important; }
.filter-btn          { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; }
.filter-btn:hover    { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; }
.filter-btn.active   { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important; }
.hero::before,
.hero::after         { opacity: 0 !important; display: none !important; }