.elementor-kit-40713{--e-global-color-09490c4:#A31194;}.elementor-kit-40713 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}
/* Start custom CSS *//* 1. Estilizar el contenedor del formulario */
form.search-from {
    display: flex !important;
    align-items: center !important;
    background-color: #ffffff !important; /* Fondo blanco */
    border: 1px solid #dcdfe6 !important; /* Borde gris suave */
    border-radius: 12px !important; /* Bordes redondeados de la tercera imagen */
    padding: 0 15px !important;
    height: 48px !important; /* Altura estándar más estilizada */
    box-shadow: none !important;
    overflow: hidden;
}

/* 2. Estilizar el campo de texto (Input) */
form.search-from input[type="search"],
form.search-from input.search-field {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    height: 100% !important;
    padding: 0 10px !important;
    font-size: 15px !important;
    color: #606266 !important;
    order: 2 !important; /* Mueve el texto a la derecha del icono */
    width: 100% !important;
}

/* Cambiar el color del texto de ayuda (Placeholder) */
form.search-from input::placeholder {
    color: #909399 !important;
}

/* 3. Transformar el botón en un icono limpio a la izquierda */
button#searchsubmit2.btn {
    background: transparent !important; /* Quita el fondo morado/fucsia */
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    order: 1 !important; /* Coloca el icono al inicio (izquierda) */
    cursor: pointer;
}

/* Asegurar que el icono dentro del botón sea gris/azul tenue */
button#searchsubmit2.btn i,
button#searchsubmit2.btn svg {
    color: #7a8293 !important; /* Color similar al de tu tercera imagen */
    font-size: 18px !important;
}


/* Ocultar las categorías buscando la ruta de su enlace en la tienda */
ul.woocommerce-product-subcategories li:has(a[href*="165"]),
ul.woocommerce-product-subcategories li:has(a[href*="166"]),
ul.woocommerce-product-subcategories div.slick-slide:has(a[href*="165"]),
ul.woocommerce-product-subcategories div.slick-slide:has(a[href*="166"]) {
    display: none !important;
}

.page-title.bwp-title {
    height: auto !important;
    min-height: auto !important;
    max-height: 400px !important; 
    padding-bottom: 40px !important;
}

/* Regla adicional por si el contenedor interno del slider es el que empuja */
.page-title.bwp-title .bwp-slider {
    height: auto !important;
}
/* Evitar que la pista del carrusel estire los elementos */
.woocommerce-product-subcategorie-content .slick-track {
    align-items: flex-start !important;
    height: auto !important;
}


/* Forzar a los <li> (Categorías) a ocupar solo su tamaño real */
.woocommerce-product-subcategorie-content li.product-category.slick-slide {
    height: auto !important;
    min-height: 100px !important;
    max-height: 250px !important;
    display: block !important;
}


/* Reducir el tamaño de la imagen principal del producto */
.woocommerce div.product div.images {
    max-width: 400px !important; /* Puedes cambiar este 400px por el tamaño que prefieras */
    margin: 0 auto !important; /* Esto asegura que la foto quede centrada */
}

/* Evitar que las miniaturas de abajo (si hay) se deformen */
.woocommerce div.product div.images .flex-control-thumbs li {
    width: 25% !important;
}

/* ==========================================================================
   ALINEACIÓN COMPLETA: CUADRÍCULAS AL LADO DE LA FLECHA
   ========================================================================== */

/* 1. Contenedor principal: Forzamos la línea horizontal a la derecha */
div.woocommerce-ordering.pwb-dropdown.dropdown {
    display: block !important;
    text-align: right !important; /* Empuja todo el contenido interno a la derecha */
    position: relative !important;
}

/* 2. La lista de las cuadrículas */
ul.display.hidden-sm.hidden-xs {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    
    /* ELIMINAR EL STROKE/BORDE, FONDO Y SOMBRAS */
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    
    /* Espaciados */
    margin: 0 15px 0 0 !important; /* Margen de 15px a la derecha para separarse de la flecha */
    padding: 0 !important;
}

/* Asegurar que los elementos internos de la lista no hereden fondos extraños */
ul.display.hidden-sm.hidden-xs li {
    display: inline-block !important;
    background: transparent !important;
    border: none !important;
    margin: 0 4px !important;
}

/* 3. El botón de la flecha (Dropdown Toggle) */
span.pwb-dropdown-toggle,
.pwb-dropdown-toggle {
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
}

/* ==========================================================================
   CORRECCIÓN DEL DESPLEGABLE (Menú de opciones)
   ========================================================================== */
div.woocommerce-ordering.pwb-dropdown.dropdown ul.dropdown-menu,
div.woocommerce-ordering.pwb-dropdown.dropdown .pwb-dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    min-width: 180px !important;
    z-index: 99999 !important;
}/* End custom CSS */