/* =====================================================
   Mobile Header V2 — personalización
   Editá acá colores, altura y fondo de la barra superior
   del header en mobile (la que tiene menú, logo e iconos).
   ===================================================== */

/* --- Barra superior: fondo blanco + más altura --- */
.mobile-header-v2,
.mobile-header-v2.stuck,
.mobile-header-v2.handheld-stick-this {
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Altura: padding arriba y abajo del menú / logo / user / carrito.
   Subí o bajá estos valores para más o menos espacio. */
.mobile-header-v2 .mobile-header-v2-inner {
    min-height: 76px;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* --- Iconos y textos en violeta --- */
.mobile-header-v2 .navbar-toggler,
.mobile-header-v2 .navbar-toggler i,
.mobile-header-v2 .handheld-header-links a,
.mobile-header-v2 .handheld-header-links i,
.mobile-header-v2 .handheld-header-links > ul li > a,
.mobile-header-v2 a,
.mobile-header-v2 i {
    color: #9B62DF !important;
}

/* Contador del carrito: número blanco sobre burbuja violeta */
.mobile-header-v2 .handheld-header-links .cart .count,
.mobile-header-v2 .cart .count {
    background: #9B62DF !important;
    color: #fff !important;
    border-color: #9B62DF !important;
}

/* --- Logo en su versión a color (no la versión clara/blanca) --- */
.mobile-header-v2 .site-dark-logo {
    display: none !important;
}
.mobile-header-v2 .header-logo img,
.mobile-header-v2 .img-header-logo,
.mobile-header-v2 .header-logo svg,
.mobile-header-v2 .custom-logo {
    filter: none !important;
}
.mobile-header-v2 .header-logo-link:not(.site-dark-logo) {
    display: inline-block !important;
}

/* =====================================================
   Buscador en mobile: redondo (pill) con borde gris fino
   ===================================================== */
@media (max-width: 1024px) {

    /* Buscador desktop (navbar): redondeo del contenedor.
       overflow:hidden acá NO afecta el dropdown porque éste cuelga del <form>,
       no del .input-group. */
    form.navbar-search .input-group {
        border-radius: 100px !important;
        overflow: hidden;
    }

    /* Buscador mobile (widget WooCommerce): redondeo SIN overflow:hidden,
       para no recortar el dropdown de resultados del AJAX que cae hacia abajo. */
    .woocommerce-product-search {
        border-radius: 100px !important;
        margin-top: 14px !important;
        display: block;
        position: relative;
    }

    /* El campo de texto */
    .woocommerce-product-search input.search-field,
    .woocommerce-product-search input[type="search"],
    form.navbar-search input.product-search-field,
    form.navbar-search input[name="s"] {
        border: 1px solid #cfcfcf !important;
        border-radius: 100px !important;
        padding: 12px 20px !important;
        background: #fff !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .woocommerce-product-search input.search-field:focus,
    form.navbar-search input.product-search-field:focus {
        border-color: #9B62DF !important;
    }

    /* Botón lupa: que acompañe el redondeo y no rompa el borde */
    .woocommerce-product-search button[type="submit"],
    .woocommerce-product-search .button {
        border-radius: 0 100px 100px 0 !important;
        border: none !important;
        background: transparent !important;
    }
}