.elementor-38 .elementor-element.elementor-element-a677877{--display:flex;--min-height:522px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-38 .elementor-element.elementor-element-d8dfe9e{width:var( --container-widget-width, 78% );max-width:78%;--container-widget-width:78%;--container-widget-flex-grow:0;}.elementor-38 .elementor-element.elementor-element-d8dfe9e.elementor-element{--align-self:center;}:root{--page-title-display:none;}@media(max-width:767px){.elementor-38 .elementor-element.elementor-element-a677877{--content-width:500px;}.elementor-38 .elementor-element.elementor-element-d8dfe9e{--container-widget-width:314px;--container-widget-flex-grow:0;width:var( --container-widget-width, 314px );max-width:314px;}}/* Start custom CSS for shortcode, class: .elementor-element-d8dfe9e *//* RESPONSIVE PARA EL CARRITO MORA MORA */
@media (max-width: 767px) {
    
    /* 1. Cambiamos el grid a un formato de lista vertical */
    .mora-cart-item {
        grid-template-columns: 70px 1fr !important; /* Imagen pequeña a la izquierda, resto a la derecha */
        grid-template-rows: auto auto;
        gap: 15px;
        padding: 15px !important;
        align-items: flex-start;
    }

    /* 2. La imagen se queda en su lugar (arriba a la izquierda) */
    .mora-cart-img {
        grid-row: 1 / 3; /* Ocupa las dos filas para que el texto fluya al lado */
    }

    .mora-cart-img img {
        width: 70px !important;
        height: 70px !important;
    }

    /* 3. Ajuste del bloque de información */
    .mora-product-info {
        grid-column: 2;
        padding-right: 0;
    }

    .mora-product-name {
        font-size: 14px !important;
        display: block;
        margin-bottom: 5px;
    }

    /* 4. EL SELECTOR DE CANTIDAD (Lo que se ve mal) */
    .mora-qty-.elementor-38 .elementor-element.elementor-element-d8dfe9e {
        grid-column: 2; /* Lo movemos debajo del nombre del producto */
        width: 100px; /* Ancho fijo para que no se estire */
        height: 35px;
        margin-top: 10px;
        padding: 2px 5px !important;
    }

    .mora-qty-btn {
        width: 25px !important;
        height: 25px !important;
        font-size: 12px !important;
    }

    .mora-qty-number {
        font-size: 13px !important;
        min-width: 20px !important;
    }

    /* 5. Ajuste del encabezado de la tabla */
    .mora-cart-header {
        padding: 8px 15px !important;
        font-size: 11px !important;
    }
    
    .mora-cart-header span:last-child {
        margin-right: 0 !important;
    }
}/* End custom CSS */