/* =========================================================================
   LatinPic - Estilos de widgets Elementor
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Buscador de productos
   ------------------------------------------------------------------------- */
/* Centrado por defecto del buscador dentro de su contenedor de widget.
   (El control "Alineacion" de Elementor puede sobrescribirlo.) */
.elementor-widget-latinpic_product_search > .elementor-widget-container {
    display: flex;
    justify-content: center;
}

.latinpic-search-form {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 640px;
    margin: 0;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    border-radius: 50px;            /* pildora, como la barra de referencia */
    background: #fff;
}

.latinpic-search-form .latinpic-search-cat {
    flex: 0 0 auto;
    border: none;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0 14px;
    background: #f6f6f6;
    font-size: 14px;
    max-width: 180px;
    cursor: pointer;
}

.latinpic-search-form input[type="search"] {
    flex: 1 1 auto;
    border: none;
    margin: 0;
    padding: 16px 8px 16px 26px;
    font-size: 15px;
    line-height: 1.2;
    background: transparent;
    box-shadow: none;
    outline: none;
    min-width: 0;
}

.latinpic-search-form button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    margin: 0;
    padding: 0 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;          /* sin boton de color: icono a la derecha */
    color: #1b2a4a;
    transition: opacity 0.2s ease;
}

.latinpic-search-form button:hover {
    opacity: 0.6;
}

/* Si el boton no tiene texto, queda solo el icono */
.latinpic-search-form button .latinpic-search-label:empty {
    display: none;
}

.latinpic-search-icon {
    display: block;
    flex: 0 0 auto;
}

/* En pantallas chicas, el texto del boton se oculta y queda solo el icono */
@media (max-width: 480px) {
    .latinpic-search-form .latinpic-search-label {
        display: none;
    }
    .latinpic-search-form button {
        padding: 0 16px;
    }
    .latinpic-search-form .latinpic-search-cat {
        max-width: 120px;
    }
}

/* -------------------------------------------------------------------------
   2. Tienda Masonry  (masonry nativo por CSS column-count, sin JS/isotope)
   -------------------------------------------------------------------------
   Ventajas: funciona en el editor de Elementor, antes de cargar imagenes y
   en movil; no depende de isotope ni entra en conflicto con BeTheme.
   Se usa !important en width/float/display porque el CSS del hijo carga ANTES
   que woocommerce.css de BeTheme (que con igual especificidad ganaria).
   ------------------------------------------------------------------------- */
.latinpic-masonry {
    width: 100%;
}

.latinpic-masonry ul.products {
    list-style: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    column-gap: 16px;          /* lo controla el slider "Espacio entre productos" */
}

/* Numero de columnas (escritorio) */
.latinpic-masonry.cols-1 ul.products { column-count: 1; }
.latinpic-masonry.cols-2 ul.products { column-count: 2; }
.latinpic-masonry.cols-3 ul.products { column-count: 3; }
.latinpic-masonry.cols-4 ul.products { column-count: 4; }
.latinpic-masonry.cols-5 ul.products { column-count: 5; }

/* Cada producto: una "tarjeta" que no se parte entre columnas */
.latinpic-masonry ul.products li.product {
    list-style: none !important;
    display: inline-block !important;
    width: 100% !important;
    float: none !important;
    clear: none !important;
    margin: 0 0 16px !important;  /* el margen inferior tambien lo ajusta el slider */
    padding: 0 !important;
    vertical-align: top;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

/* Tablet */
@media (max-width: 1024px) {
    .latinpic-masonry.cols-tablet-1 ul.products { column-count: 1; }
    .latinpic-masonry.cols-tablet-2 ul.products { column-count: 2; }
    .latinpic-masonry.cols-tablet-3 ul.products { column-count: 3; }
    .latinpic-masonry.cols-tablet-4 ul.products { column-count: 4; }
    .latinpic-masonry.cols-tablet-5 ul.products { column-count: 5; }
}

/* Movil */
@media (max-width: 767px) {
    .latinpic-masonry.cols-mobile-1 ul.products { column-count: 1; }
    .latinpic-masonry.cols-mobile-2 ul.products { column-count: 2; }
    .latinpic-masonry.cols-mobile-3 ul.products { column-count: 3; }
}

/* La imagen ocupa todo el ancho de la columna */
.latinpic-masonry ul.products li.product .image_frame,
.latinpic-masonry ul.products li.product .mfn-li-product-row-image,
.latinpic-masonry ul.products li.product img {
    width: 100% !important;
    height: auto;
    margin: 0;
    float: none;
}

.latinpic-masonry ul.products li.product .image_frame {
    border: none;
    margin-bottom: 0;
}

.latinpic-masonry-empty {
    padding: 30px;
    text-align: center;
    opacity: 0.7;
}

/* -------------------------------------------------------------------------
   3. Productos relacionados (masonry)
   ------------------------------------------------------------------------- */
.latinpic-related-products {
    clear: both;
    width: 100%;
    margin-top: 40px;
}

.latinpic-related-products .latinpic-related-title {
    margin-bottom: 20px;
}