.elementor-3224 .elementor-element.elementor-element-eb61cf7{--spacer-size:10px;}.elementor-3224 .elementor-element.elementor-element-c037271:not(.elementor-motion-effects-element-type-background), .elementor-3224 .elementor-element.elementor-element-c037271 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://zafiroh2o.com/wp-content/uploads/2021/07/page-title.jpg");}.elementor-3224 .elementor-element.elementor-element-c037271 > .elementor-background-overlay{background-color:#6EC1E4;opacity:0.29;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-3224 .elementor-element.elementor-element-c037271{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-3224 .elementor-element.elementor-element-1fc8ba8{--spacer-size:25px;}.elementor-3224 .elementor-element.elementor-element-8060dc0{--e-search-icon-clear-color:var( --e-global-color-secondary );}.elementor-3224 .elementor-element.elementor-element-418b320.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}.elementor-3224 .elementor-element.elementor-element-418b320.elementor-wc-products ul.products li.product span.onsale{display:block;}@media(max-width:1024px){.elementor-3224 .elementor-element.elementor-element-418b320.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-3224 .elementor-element.elementor-element-eb61cf7{--spacer-size:25px;}.elementor-3224 .elementor-element.elementor-element-268a3e6{width:100%;}.elementor-3224 .elementor-element.elementor-element-74cfe93{width:100%;max-width:100%;}.elementor-3224 .elementor-element.elementor-element-418b320.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(min-width:768px){.elementor-3224 .elementor-element.elementor-element-6551cd5{width:100%;}}/* Start custom CSS for acuasafe_h4_title, class: .elementor-element-74cfe93 */.elementor-3224 .elementor-element.elementor-element-74cfe93 .sec-title-two h5,
.elementor-3224 .elementor-element.elementor-element-74cfe93 h5 {
    color: #0088cc !important;
    padding-bottom: 10px;
    font-size: 25px;
}

.elementor-3224 .elementor-element.elementor-element-74cfe93 .sec-title-two h2,
.elementor-3224 .elementor-element.elementor-element-74cfe93 h2 {
    padding-top: 5px;
    font-size: 60px;
}/* End custom CSS */
/* Start custom CSS for search, class: .elementor-element-8060dc0 *//* ==========================================
   BLACK & WHITE MINIMALIST SEARCH WIDGET
   ========================================== */

/* Main Form Wrapper */
.elementor-3224 .elementor-element.elementor-element-8060dc0 .e-search-form {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}

.elementor-3224 .elementor-element.elementor-element-8060dc0 .e-search-input-wrapper {
    position: relative;
    width: 100%;
}

/* Search Input Field */
.elementor-3224 .elementor-element.elementor-element-8060dc0 input.e-search-input {
    width: 100% !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    border-radius: 50px !important; /* Modern Pill Shape */
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    outline: none !important;
    transition: all 0.3s ease-in-out !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

/* Placeholder Styling */
.elementor-3224 .elementor-element.elementor-element-8060dc0 input.e-search-input::placeholder {
    color: #888888 !important;
    font-weight: 400 !important;
}

/* Input Focus State */
.elementor-3224 .elementor-element.elementor-element-8060dc0 input.e-search-input:focus {
    background-color: #ffffff !important;
    border-color: #000000 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15) !important;
}

/* Close/Clear Icon */
.elementor-3224 .elementor-element.elementor-element-8060dc0 .e-search-input-wrapper i {
    color: #000000 !important;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.elementor-3224 .elementor-element.elementor-element-8060dc0 .e-search-input-wrapper i:hover {
    opacity: 1;
}

/* Live Search Results Dropdown */
.elementor-3224 .elementor-element.elementor-element-8060dc0 .e-search-results-container {
    background-color: #ffffff !important;
    border: 2px solid #000000 !important;
    border-radius: 12px !important;
    margin-top: 10px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
    z-index: 9999 !important;
}

/* Individual Result Items */
.elementor-3224 .elementor-element.elementor-element-8060dc0 .e-search-results a,
.elementor-3224 .elementor-element.elementor-element-8060dc0 .e-search-results div {
    color: #000000 !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: block !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Hover Effect: Inverted Black Background */
.elementor-3224 .elementor-element.elementor-element-8060dc0 .e-search-results a:hover,
.elementor-3224 .elementor-element.elementor-element-8060dc0 .e-search-results div:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Remove bottom border on last item */
.elementor-3224 .elementor-element.elementor-element-8060dc0 .e-search-results a:last-child,
.elementor-3224 .elementor-element.elementor-element-8060dc0 .e-search-results div:last-child {
    border-bottom: none !important;
}/* End custom CSS */
/* Start custom CSS for wc-archive-products, class: .elementor-element-418b320 *//* =======================================================
   WOOCOMMERCE PRODUCT GRID STYLING
   Colors: Principal (#6EC1E4) | Secondary (#54595F) | Text (#7A7A7A)
   ======================================================= */

/* 1. Top Section: Results count & Sorting Dropdown */
.elementor-3224 .elementor-element.elementor-element-418b320 .woocommerce-result-count {
    color: #7A7A7A !important;
    font-weight: 500;
    margin-bottom: 15px;
}

.elementor-3224 .elementor-element.elementor-element-418b320 .woocommerce-ordering select {
    color: #54595F !important;
    border: 1px solid #7A7A7A !important;
    background-color: #ffffff !important;
    padding: 8px 12px;
    border-radius: 6px;
    outline: none;
    max-width: 100%;
}

/* 2. Center the Grid */
.elementor-3224 .elementor-element.elementor-element-418b320 .row.clearfix {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: -15px;
    margin-right: -15px;
}

.elementor-3224 .elementor-element.elementor-element-418b320 .row.clearfix > div {
    padding-left: 15px;
    padding-right: 15px;
    width: 100%; /* Base width */
}

/* 3. Product Card Container */
.elementor-3224 .elementor-element.elementor-element-418b320 .product-block-two {
    background-color: #ffffff;
    border: 1px solid #f2f2f2;
    border-radius: 12px;
    padding-bottom: 20px;
    margin-bottom: 25px;
    text-align: center;
    overflow: hidden;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    width: 100%;
}

.elementor-3224 .elementor-element.elementor-element-418b320 .product-block-two:hover {
    box-shadow: 0 10px 25px rgba(84, 89, 95, 0.15);
    transform: translateY(-5px);
}

/* 4. Product Title */
.elementor-3224 .elementor-element.elementor-element-418b320 .lower-content h4 {
    margin: 15px 0 10px 0;
}

.elementor-3224 .elementor-element.elementor-element-418b320 .lower-content h4 a {
    color: #54595F !important;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

.elementor-3224 .elementor-element.elementor-element-418b320 .lower-content h4 a:hover {
    color: #6EC1E4 !important;
}

/* 5. Pricing */
.elementor-3224 .elementor-element.elementor-element-418b320 .price {
    display: block;
    margin-bottom: 15px;
}

.elementor-3224 .elementor-element.elementor-element-418b320 .price del,
.elementor-3224 .elementor-element.elementor-element-418b320 .price del .amount,
.elementor-3224 .elementor-element.elementor-element-418b320 .price del .woocommerce-Price-currencySymbol {
    color: #7A7A7A !important;
    font-size: 14px;
    opacity: 0.8;
}

.elementor-3224 .elementor-element.elementor-element-418b320 .price ins,
.elementor-3224 .elementor-element.elementor-element-418b320 .price ins .amount,
.elementor-3224 .elementor-element.elementor-element-418b320 .price ins .woocommerce-Price-currencySymbol {
    color: #6EC1E4 !important;
    text-decoration: none !important;
    font-weight: 800;
    font-size: 18px;
    margin-left: 6px;
}

/* 6. Action Buttons */
.elementor-3224 .elementor-element.elementor-element-418b320 .product-block-two > .button {
    display: inline-block;
    background-color: #6EC1E4 !important;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 50px;
    text-transform: uppercase;
    text-decoration: none !important;
    border: none;
    margin: 4px;
    transition: all 0.3s ease !important;
}

.elementor-3224 .elementor-element.elementor-element-418b320 .product-block-two > .button:hover {
    background-color: #54595F !important;
    color: #ffffff !important;
}

/* 7. Image Overlay & Icons */
.elementor-3224 .elementor-element.elementor-element-418b320 .inner-box .image {
    position: relative;
    overflow: hidden;
}

.elementor-3224 .elementor-element.elementor-element-418b320 .inner-box .image img {
    width: 100%;
    height: auto;
}

.elementor-3224 .elementor-element.elementor-element-418b320 .inner-box .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(84, 89, 95, 0.7) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.elementor-3224 .elementor-element.elementor-element-418b320 .product-block-two:hover .overlay {
    opacity: 1;
}

.elementor-3224 .elementor-element.elementor-element-418b320 .shop_metas a {
    display: inline-block;
    background-color: #6EC1E4 !important;
    color: #ffffff !important;
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 50%;
    text-align: center;
    margin: 0 5px;
    font-size: 18px;
    transition: all 0.3s ease;
    transform: translateY(20px);
    opacity: 0;
}

.elementor-3224 .elementor-element.elementor-element-418b320 .product-block-two:hover .shop_metas a {
    transform: translateY(0);
    opacity: 1;
}

.elementor-3224 .elementor-element.elementor-element-418b320 .shop_metas a:hover {
    background-color: #ffffff !important;
    color: #6EC1E4 !important;
}

/* =======================================================
   8. RESPONSIVE DESIGN (Corrección para Celulares y Tablets)
   ======================================================= */

/* Desktop (Pantallas grandes - 4 o 3 columnas) */
@media (min-width: 992px) {
    .elementor-3224 .elementor-element.elementor-element-418b320 .row.clearfix > div {
        flex: 0 0 25%; /* 4 por fila. Cámbialo a 33.333% si prefieres 3 por fila */
        max-width: 25%;
    }
}

/* Tablets (Tablets - 2 columnas) */
@media (max-width: 991px) and (min-width: 768px) {
    .elementor-3224 .elementor-element.elementor-element-418b320 .row.clearfix > div {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Mobile (Celulares - 1 columna y ajustes de alineación) */
@media (max-width: 767px) {
    .elementor-3224 .elementor-element.elementor-element-418b320 .row.clearfix > div {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    /* Arreglar la parte superior en móviles */
    .elementor-3224 .elementor-element.elementor-element-418b320 .woocommerce-result-count,
    .elementor-3224 .elementor-element.elementor-element-418b320 .woocommerce-ordering {
        text-align: center;
        width: 100%;
        float: none;
        display: block;
    }
    
    .elementor-3224 .elementor-element.elementor-element-418b320 .woocommerce-ordering select {
        width: 100%;
        margin-bottom: 20px;
    }
    
    /* Asegurar que los botones no se salgan en pantallas muy pequeñas */
    .elementor-3224 .elementor-element.elementor-element-418b320 .product-block-two > .button {
        padding: 10px 12px;
        font-size: 12px;
        width: 80%;
        margin-bottom: 8px;
    }
}/* End custom CSS */