.elementor-4020 .elementor-element.elementor-element-d7d458e{--display:flex;--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;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--border-radius:10px 10px 10px 10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4020 .elementor-element.elementor-element-d7d458e:not(.elementor-motion-effects-element-type-background), .elementor-4020 .elementor-element.elementor-element-d7d458e > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-astglobalcolor5 );}.elementor-4020 .elementor-element.elementor-element-35689dd{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-weight:var( --e-global-typography-text-font-weight );}.elementor-4020 .elementor-element.elementor-element-66fe64b > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-4020 .elementor-element.elementor-element-f507947{--display:flex;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:0px;--padding-bottom:0px;--padding-left:5px;--padding-right:5px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-4020 .elementor-element.elementor-element-68f8690{text-align:center;}.elementor-4020 .elementor-element.elementor-element-68f8690 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:13px;font-weight:600;color:var( --e-global-color-text );}.elementor-4020 .elementor-element.elementor-element-3b8a9d6{text-align:center;}.elementor-4020 .elementor-element.elementor-element-3b8a9d6 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:11px;font-weight:400;color:var( --e-global-color-text );}.elementor-4020 .elementor-element.elementor-element-45dc24d{--e-rating-justify-content:center;}.elementor-4020 .elementor-element.elementor-element-3298775{text-align:center;}.elementor-4020 .elementor-element.elementor-element-3298775 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:700;color:var( --e-global-color-astglobalcolor7 );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-weight:var( --e-global-typography-accent-font-weight );}.elementor-4020 .elementor-element.elementor-element-0afe389 .elementor-button{background-color:var( --e-global-color-astglobalcolor1 );font-family:"Poppins", Sans-serif;font-size:13px;font-weight:500;padding:10px 10px 10px 10px;}@media(max-width:767px){.elementor-4020 .elementor-element.elementor-element-68f8690 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-4020 .elementor-element.elementor-element-68f8690 .elementor-heading-title{font-size:8px;}.elementor-4020 .elementor-element.elementor-element-3b8a9d6 .elementor-heading-title{font-size:12px;}.elementor-4020 .elementor-element.elementor-element-3298775 .elementor-heading-title{font-size:14px;}.elementor-4020 .elementor-element.elementor-element-0afe389 .elementor-button{font-size:10px;padding:8px 8px 8px 8px;}}/* Start custom CSS for container, class: .elementor-element-d7d458e *//* ======================================================
   ESTILO MODERNO PARA TARJETAS DE PRODUCTO (LOOP GRID)
   ====================================================== */

/* Contenedor principal de la tarjeta/ítem del Loop Grid */
.e-loop-item, 
.e-loop-item.product,
ul.products li.product {
    background-color: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 0 !important; /* Mantiene la imagen pegada a los bordes superiores */
    overflow: hidden !important;
    position: relative !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.3s ease !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* Efecto Hover en la Tarjeta (Elevación y Sombra Elevada) */
.e-loop-item:hover, 
.e-loop-item.product:hover,
ul.products li.product:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03) !important;
    border-color: #cbd5e1 !important;
}

/* --- CONTENEDOR DE IMAGEN Y ZOOM --- */

/* Wrapper de la imagen */
.e-loop-item .woocommerce-LoopProduct-link img,
.e-loop-item img,
ul.products li.product img {
    border-radius: 0 !important;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* Zoom suave en la imagen al hacer hover */
.e-loop-item:hover img,
ul.products li.product:hover img {
    transform: scale(1.05) !important;
}

/* --- ETIQUETAS Y BADGES (Ofertas / Sale) --- */

.e-loop-item .onsale,
ul.products li.product .onsale {
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    margin: 0 !important;
    background-color: #ef4444 !important; /* Rojo moderno */
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    line-height: 1 !important;
    min-height: auto !important;
    min-width: auto !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    z-index: 2 !important;
}

/* --- DETALLES DE LA TARJETA (Título, Precio, Botón) --- */

/* Padding interno para la información del producto */
.e-loop-item .e-con, 
.e-loop-item .product-info-wrapper {
    padding: 8px !important;
}

/* Título del Producto */
.e-loop-item .woocommerce-loop-product__title,
.e-loop-item h2,
.e-loop-item h3 {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
    transition: color 0.2s ease !important;
}

.e-loop-item:hover .woocommerce-loop-product__title,
.e-loop-item:hover h2,
.e-loop-item:hover h3 {
    color: #0073aa !important; /* Color primario al pasar el cursor */
}

/* Precios */
.e-loop-item .price,
ul.products li.product .price {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Precio tachado (rebajado) */
.e-loop-item .price del,
ul.products li.product .price del {
    font-size: 13px !important;
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

.e-loop-item .price ins,
ul.products li.product .price ins {
    text-decoration: none !important;
    color: #059669 !important; /* Verde moderno para ofertas */
}

/* --- BOTÓN AÑADIR AL CARRITO --- */

.e-loop-item .button,
ul.products li.product .button {
    background-color: #0073aa !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border: none !important;
    transition: all 0.2s ease !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: auto !important;
}

.e-loop-item .button:hover,
ul.products li.product .button:hover {
    background-color: #005177 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 115, 170, 0.25) !important;
}

/* Adaptación táctil para Móviles */
@media (max-width: 768px) {
    .e-loop-item:hover,
    ul.products li.product:hover {
        transform: none !important; /* Evita movimientos innecesarios en pantallas táctiles */
    }
}/* End custom CSS */