/* =====================================================
   🎯 CARRITO MISMO DISEÑO EN MOBILE Y PC
   Sobrescribe los estilos de mobile para mantener
   el diseño horizontal tipo PC
   ===================================================== */

@media (max-width: 768px) {
    /* Forzar que el modal se vea como en PC */
    .cart-modal {
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .cart-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        border-radius: 0 !important;
        transform: translateX(100%) !important;
        border-left: 1px solid rgba(255,255,255,0.1) !important;
        border-top: none !important;
    }

    .cart-modal.active .cart-content {
        transform: translateX(0) !important;
    }

    /* Mantener diseño horizontal de items como en PC */
    .cart-product-card {
        display: flex !important;
        flex-direction: row !important;
        background: rgba(20, 20, 20, 0.6) !important;
        border: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        border-radius: 0 !important;
        padding: 16px !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    .cart-product-card::before {
        display: none !important;
    }

    /* Imagen del producto - mantener tamaño de PC */
    .cart-product-image {
        flex: 0 0 auto !important;
        width: 85px !important;
        height: 85px !important;
        min-width: 85px !important;
        border-radius: 6px !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        z-index: auto !important;
    }

    .cart-product-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Contenido - layout horizontal */
    .cart-product-details {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 0 !important;
        text-align: left !important;
    }

    /* Nombre del producto */
    .cart-product-name {
        font-size: 0.9rem !important;
        font-weight: 500 !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        text-align: left !important;
    }

    /* Precio */
    .cart-product-price {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
        text-align: left !important;
    }

    /* Controles (cantidad y eliminar) */
    .cart-product-controls,
    .cart-product-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        margin-top: auto !important;
    }

    /* Botones de cantidad */
    .quantity-control,
    .cart-qty-controls {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        background: rgba(255,255,255,0.05) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        border-radius: 6px !important;
        padding: 0 !important;
        height: 32px !important;
    }

    .quantity-control button,
    .cart-qty-controls button {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.9rem !important;
    }

    .quantity-control span,
    .cart-qty-controls span {
        min-width: 30px !important;
        text-align: center !important;
        font-size: 0.9rem !important;
    }

    /* Botón eliminar */
    .remove-from-cart,
    .cart-remove-btn {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.95rem !important;
    }

    /* Footer con totales */
    .cart-footer {
        padding: 20px !important;
        border-top: 1px solid rgba(255,255,255,0.08) !important;
        background: #0a0a0a !important;
        position: sticky !important;
        bottom: 0 !important;
    }

    /* Eliminar efectos de "card" premium en mobile */
    .cart-product-overlay {
        display: none !important;
    }

    .cart-product-badge {
        display: none !important;
    }

    /* Header más compacto pero funcional */
    .cart-header {
        padding: 16px 20px !important;
    }

    .cart-header h2 {
        font-size: 1.2rem !important;
    }

    /* Body scrolleable */
    .cart-body {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 16px !important;
    }

    /* Botón checkout */
    .checkout-button,
    .checkout-btn {
        width: 100% !important;
        padding: 14px !important;
        font-size: 1rem !important;
    }
}

/* Para pantallas muy pequeñas, solo ajustar tamaños */
@media (max-width: 480px) {
    .cart-product-image {
        width: 75px !important;
        height: 75px !important;
        min-width: 75px !important;
    }

    .cart-product-name {
        font-size: 0.85rem !important;
    }

    .cart-product-price {
        font-size: 1rem !important;
    }
}

@media (max-width: 360px) {
    .cart-product-card {
        padding: 12px !important;
        gap: 10px !important;
    }

    .cart-product-image {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
    }

    .cart-product-name {
        font-size: 0.8rem !important;
    }
}