form[name="product-search"].va-working,
form[name="product-vehicle-filter"].va-working,
form.user-vehicle-filter.va-working,
.va-modal__quick.va-working{pointer-events:none}
form[name="product-search"].va-working .search-wrapper input.search,
form[name="product-vehicle-filter"].va-working .vin input.vin,
form.user-vehicle-filter.va-working .vin input.vin,
.va-modal__quick.va-working #va-modal-input{color:#999}
.search-wrapper,.vin{position:relative}
.va-search-spinner{display:none;position:absolute;top:50%;left:auto;right:10px;bottom:auto;width:16px;height:16px;margin:-8px 0 0 0;border:2px solid #d8d8d8;border-top-color:#29405B;border-radius:50%;box-sizing:border-box;z-index:2;transform-origin:center center;animation:va-spin .7s linear infinite}
@keyframes va-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.va-search-status{display:block;width:100%;font-size:11px;line-height:1.3;margin-top:7px;color:#16803a;font-weight:600}

/* Selector de cantidad compacto (escritorio, tarjetas de producto): el
   tema oculta las flechitas nativas del campo numérico en todo el sitio
   (".comp-counter input[type=number]") para dibujar sus propios botones
   -/+ superpuestos — acá se pidió lo contrario, las flechitas nativas del
   navegador. No aplica en ningún otro lado, solo en ".va-compact-counter"
   (la agrega frontend.js). No se le puede poner estilo en línea a un
   pseudo-elemento (::-webkit-inner-spin-button), por eso va en CSS. */
body .va-compact-counter input[type="number"]{-moz-appearance:auto !important;}
body .va-compact-counter input[type="number"]::-webkit-inner-spin-button,
body .va-compact-counter input[type="number"]::-webkit-outer-spin-button{
    -webkit-appearance:inner-spin-button !important;
    opacity:1 !important;
    margin-left:4px;
}
.va-search-status.va-error{color:#b42318}
.va-identified-notice strong{margin-right:5px}

/* Quita el selector de categoría del buscador y deja solo imagen, nombre
   y precio en cada recomendación — el resto del markup (título, precio,
   imagen) del buscador nativo del tema no se toca.
   El <select> real ya queda oculto, pero el tema lo "mejora" con Select2
   (controller.js), que inserta su propio control visual al lado — hay
   que ocultar ese también, si no reaparece al iniciar Select2. */
form[name="product-search"] select.category,
form[name="product-search"] .select2-container{display:none !important}
#product-search-results .product-categories{display:none !important}

/* Buscador: embudo (abre nuestro popup) a la izquierda, botón de búsqueda
   chico (solo lupa) a la derecha — SOLO en móvil, superpuestos como
   iconos flotantes sobre el campo de texto, sin tocar su flujo/ancho
   normal (nada de flexbox en el formulario: eso llegó a colapsar el
   campo). En escritorio no se toca absolutamente nada: el botón embudo
   queda oculto y el de "Buscar" conserva su estilo nativo intacto. */
.va-search-filter-toggle{display:none}

/* La "X" para borrar un vehículo del listado (.user-vehicle-list) del tema
   solo aparece con :hover, que en pantallas táctiles no existe: el primer
   toque simulaba el hover y a la vez disparaba el click del link, así que
   se veía un parpadeo y navegaba. La dejamos siempre visible. */
.user-vehicle-list li span{visibility:visible !important;z-index:5 !important}

/* Mismo layout final que aplica layoutSearchForm() en frontend.js, pero acá
   en CSS puro: el JS corre recién en DOMContentLoaded (script en el footer),
   así que sin esto se ve un instante el buscador nativo del tema (grande,
   sin iconos) antes de que el JS lo acomode — un "salto" feo. Con este CSS
   ya pinta así desde el primer momento; el JS después no cambia nada
   (mismos valores), solo sirve de refuerzo si el tema gana la carrera. */
@media (max-width: 1279px) {
    .product-search form[name="product-search"]{
        position:relative !important;
    }
    .product-search form[name="product-search"] .search-wrapper{
        background:#ffffff !important;
        border-radius:8px !important;
        overflow:hidden !important;
        width:100% !important;
        border-left:none !important;
    }
    .product-search form[name="product-search"] .search-wrapper input.search{
        padding-left:44px !important;
        padding-right:44px !important;
        box-sizing:border-box !important;
        background-color:#ffffff !important;
        border-radius:8px !important;
        appearance:none !important;
        border:none !important;
        outline:none !important;
        box-shadow:none !important;
    }
    .product-search form[name="product-search"] .input-after{
        display:none !important;
    }
    .product-search form[name="product-search"] .va-search-filter-toggle{
        position:absolute;
        left:6px;
        top:6px;
        z-index:2;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:32px;
        height:32px;
        padding:0;
        border:none;
        border-radius:6px;
        background:transparent;
        color:#29405B;
        cursor:pointer;
    }
    .product-search form[name="product-search"] input[type="submit"]{
        position:absolute;
        right:6px;
        top:6px;
        z-index:2;
        width:32px !important;
        height:32px !important;
        min-width:0 !important;
        padding:0 !important;
        font-size:0 !important;
        line-height:0;
        color:transparent;
        background-color:#29405B;
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
        background-repeat:no-repeat;
        background-position:center;
        background-size:16px 16px;
        border-radius:6px;
    }
    .product-search form[name="product-search"] .va-search-spinner{
        right:44px;
    }
}

/* Vista "Lista" del catálogo (categoría/shop/búsqueda) en celular: ajustes
   pedidos sobre lo que ya trae el tema — sin ícono de "vista rápida", el
   corazón como link de texto (no ícono flotante circular), y la cantidad
   como campo de texto simple, sin los botones -/+. */
@media (max-width:767px){
    /* Flecha del botón "Añadir al carrito" (::after, viene del CSS propio
       del sitio, no del tema ni de este plugin — el HTML/JS no la puede
       tocar, hay que anular el pseudo-elemento desde CSS). */
    a.button.product_type_simple.add_to_cart_button.ajax_add_to_cart::after{
        content:none !important;
        display:none !important;
    }
    .list ul.products .post .en-quick-view{
        display:none !important;
    }
    .list ul.products .post-image .wishlist-toggle{
        display:none !important;
    }
    .va-wishlist-row{margin-top:10px;}
    /* El corazón es un ::before (pseudo-elemento, sin nodo propio en el
       HTML) — no se le puede aplicar estilo en línea por JS. Estaba pensado
       como ícono absoluto dentro de un botón circular; acá lo volvemos un
       ícono en línea normal, del tamaño justo, adentro del mismo link. */
    .va-wishlist-row .wishlist-toggle::before{
        position:static !important;
        display:inline-block !important;
        width:14px !important;
        height:14px !important;
        vertical-align:middle !important;
    }
    .va-wishlist-row .wishlist-toggle{
        position:static !important;
        width:14px !important;
        height:14px !important;
        line-height:normal !important;
        border-radius:0 !important;
        background:none !important;
        box-shadow:none !important;
        opacity:1 !important;
        display:inline-block !important;
        vertical-align:middle !important;
    }
    .va-wishlist-row .wishlist-title{
        display:inline-block !important;
        vertical-align:middle !important;
        margin-left:6px !important;
        font-size:13px !important;
        color:#333 !important;
    }
    /* Selector de cantidad: solo el número, sin los botones -/+ que agrega
       el script propio del sitio (no es de este plugin, ver footer). */
    .price-button-wrapp .comp-counter .minus,
    .price-button-wrapp .comp-counter .plus{
        display:none !important;
    }
    .price-button-wrapp .comp-counter-btn{
        border:1px solid #ddd !important;
    }
    .price-button-wrapp .comp-counter input{
        border-left:none !important;
        border-right:none !important;
        width:44px !important;
    }
}

/* Escritorio: al agregar al carrito (ficha de producto o tarjeta), el tema
   hace 2 cosas que se pidió quitar — que el producto se agregue y listo,
   sin animaciones ni links extra:
   1) Clona la imagen del producto y la anima "volando" hacia el carrito
      (controller.js, animateProductFlow) — el destino se calcula mal con el
      header personalizado del sitio, así que vuela hacia la izquierda en
      vez de hacia el carrito. No se toca ese archivo del tema (se perdería
      en cada actualización); se oculta el resultado visual acá — el AJAX
      de agregar al carrito sigue funcionando igual, solo sin el efecto.
   2) Agrega un link "Ver carrito" (".added_to_cart", clase nativa de
      WooCommerce) al lado del botón — rompe el layout de la fila. */
.cart-product-animate{
    display:none !important;
}
.added_to_cart{
    display:none !important;
}