.elementor-1074 .elementor-element.elementor-element-1b53fa0{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-1074 .elementor-element.elementor-element-4aa982d{--grid-columns:4;--grid-row-gap:20px;--load-more-message-color:var( --e-global-color-secondary );--grid-column-gap:20px;}.elementor-1074 .elementor-element.elementor-element-4aa982d .elementor-loop-container{grid-auto-rows:1fr;}.elementor-1074 .elementor-element.elementor-element-4aa982d .e-loop-item > .elementor-section, .elementor-1074 .elementor-element.elementor-element-4aa982d .e-loop-item > .elementor-section > .elementor-container, .elementor-1074 .elementor-element.elementor-element-4aa982d .e-loop-item > .e-con, .elementor-1074 .elementor-element.elementor-element-4aa982d .e-loop-item .elementor-section-wrap  > .e-con{height:100%;}.elementor-1074 .elementor-element.elementor-element-4aa982d .e-load-more-message{font-family:"Montserrat", Sans-serif;font-size:15px;font-weight:400;}@media(max-width:1024px){.elementor-1074 .elementor-element.elementor-element-4aa982d{--grid-columns:2;}}@media(max-width:767px){.elementor-1074 .elementor-element.elementor-element-4aa982d{--grid-columns:2;--grid-row-gap:11px;width:var( --container-widget-width, 400px );max-width:400px;--container-widget-width:400px;--container-widget-flex-grow:0;--grid-column-gap:10px;}}/* Start custom CSS for loop-grid, class: .elementor-element-4aa982d */@media (max-width: 767px) { /* Breakpoint para móviles */

    /* 1. Contenedor principal de la cuadrícula generada por el widget Loop Grid */
    .elementor-loop-container.elementor-grid {
        display: grid !important; /* Fuerza el modelo de cuadrícula */
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columnas de igual ancho */
        gap: 15px !important; /* Espacio entre productos (ajusta a tu gusto) */
    }

    /* 2. Cada elemento/caja de producto individual dentro de la cuadrícula */
    .elementor-loop-container.elementor-grid .e-loop-item,
    .elementor-loop-container.elementor-grid .product {
        width: auto !important; /* Permite que el grid controle el ancho */
        max-width: unset !important; /* Asegura que no haya un max-width conflictivo */
        flex-basis: auto !important; /* Permite al flexbox padre controlar el ancho */
        margin: 0 !important; /* Quita márgenes excesivos si los hubiera */
        padding: 5px !important; /* Pequeño padding interno para que no pegue al borde */
        box-sizing: border-box !important; /* Incluye padding y borde en el ancho total */
        text-align: center !important; /* Centra el contenido general del producto */
    }

    /* 3. Corrección para la imagen del producto */
    .elementor-loop-container.elementor-grid .woocommerce div.product div.images img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* 4. Ajustes para el título y precio */
    .elementor-loop-container.elementor-grid .woocommerce-loop-product__title,
    .elementor-loop-container.elementor-grid .price {
        text-align: center !important;
        word-break: break-word !important; /* Permite que el texto largo se rompa */
        font-size: 16px !important; /* Ajusta el tamaño de fuente si el título es muy largo */
        line-height: 1.2em !important; /* Ajusta el interlineado si se ve apretado */
        margin-bottom: 5px !important; /* Espacio debajo del título/precio */
    }

    /* 5. Contenedor de cantidad y botón (e-atc-qty-button-holder) */
    /* Este div contiene el campo de cantidad y el botón "Agregar al carrito" */
    .elementor-loop-container.elementor-grid .e-atc-qty-button-holder {
        display: flex !important; /* Usamos flexbox para que se pongan uno al lado del otro */
        flex-wrap: wrap !important; /* Permite que los elementos se envuelvan si no hay espacio */
        justify-content: center !important; /* Centra los elementos horizontalmente */
        align-items: center !important; /* Centra los elementos verticalmente */
        gap: 5px !important; /* Espacio entre el campo de cantidad y el botón */
        width: 100% !important; /* Asegura que el contenedor ocupe todo el ancho disponible */
        margin-top: 10px !important; /* Espacio encima del bloque cantidad/botón */
    }

    /* 6. Campo de cantidad (input y su div contenedor) */
    .elementor-loop-container.elementor-grid .quantity {
        width: 35% !important; /* Ocupa el 35% del ancho del contenedor flex */
        max-width: 60px !important; /* Máximo 60px para el input de cantidad */
        box-sizing: border-box !important;
    }
    .elementor-loop-container.elementor-grid .quantity input[type="number"] {
        width: 100% !important; /* El input ocupa todo el ancho de su div .quantity */
        text-align: center !important; /* Centra el número */
        font-size: 14px !important; /* Ajusta tamaño de fuente del número */
        padding: 5px !important; /* Pequeño padding interno */
    }

    /* 7. Botón "Agregar al carrito" */
    .elementor-loop-container.elementor-grid .button {
        width: 60% !important; /* Ocupa el 60% del ancho del contenedor flex */
        max-width: 120px !important; /* Máximo 120px para el botón */
        font-size: 14px !important; /* Ajusta el tamaño de fuente del botón */
        padding: 8px 10px !important; /* Padding para el botón */
        box-sizing: border-box !important;
    }
}/* End custom CSS */