/*
Theme Name: Divi Child
Theme URI: http://www.elegantthemes.com/gallery/divi/
Template: Divi
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Version: 4.27.4.1767568614
Updated: 2026-01-04 20:16:54

*/

/* =========================================
   ListoMarket - Botón Comprar estilo “píldora”
   (Divi + WooCommerce loop)
   ========================================= */

/* Asegura centrado del contenido en tarjeta */
.woocommerce ul.products li.product,
.et_pb_shop .woocommerce ul.products li.product{
  text-align: center !important;
}

/* Forzar visibilidad del botón (por si tema/Divi lo oculta) */
.woocommerce ul.products li.product a.lm-buy-btn,
.et_pb_shop .woocommerce ul.products li.product a.lm-buy-btn{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;

  align-items: center;
  justify-content: center;
  gap: 8px;

  background: #f3f4f6 !important;   /* gris claro */
  border: 1px solid #e5e7eb !important;
  color: #6b7280 !important;

  border-radius: 999px !important;  /* “pill” */
  padding: 10px 18px !important;

  box-shadow: none !important;
  text-transform: none !important;
  font-weight: 600 !important;

  float: none !important;
  margin-top: 10px !important;
  position: relative !important;
  z-index: 20 !important;           /* evita que quede tapado */
}

/* Ícono: hereda color del texto */
.woocommerce ul.products li.product a.lm-buy-btn .lm-cart-icon svg,
.et_pb_shop .woocommerce ul.products li.product a.lm-buy-btn .lm-cart-icon svg{
  fill: currentColor;
  display: block;
}

/* Hover */
.woocommerce ul.products li.product a.lm-buy-btn:hover,
.et_pb_shop .woocommerce ul.products li.product a.lm-buy-btn:hover{
  background: #e5e7eb !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}

/* Si algún contenedor recorta el botón */
.woocommerce ul.products li.product,
.et_pb_shop .woocommerce ul.products li.product,
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.et_pb_shop .woocommerce ul.products li.product .woocommerce-LoopProduct-link{
  overflow: visible !important;
}
/* =========================================
   ListoMarket - Ajustes tarjeta producto (Divi + Woo)
   Referencia: botón 14px + hover naranjo + ícono pequeño
   ========================================= */

/* Título del producto en negrita */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.et_pb_shop .woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-weight: 700 !important;
  color: #1f2937 !important;
}

/* Precio en naranjo */
.woocommerce ul.products li.product .price,
.et_pb_shop .woocommerce ul.products li.product .price{
  color: #ff6a00 !important; /* naranjo */
  font-weight: 700 !important;
}

/* Botón Comprar (texto 14px) */
.woocommerce ul.products li.product a.lm-buy-btn,
.et_pb_shop .woocommerce ul.products li.product a.lm-buy-btn{
  font-size: 14px !important;     /* requerido */
  line-height: 1 !important;
  padding: 10px 18px !important;
  background: #f3f4f6 !important; /* gris claro normal */
  border: 1px solid #e5e7eb !important;
  color: #9ca3af !important;      /* gris texto */
}

/* Hover: fondo naranjo + texto blanco */
.woocommerce ul.products li.product a.lm-buy-btn:hover,
.et_pb_shop .woocommerce ul.products li.product a.lm-buy-btn:hover{
  background: #ff6a00 !important; /* naranjo hover */
  border-color: #ff6a00 !important;
  color: #ffffff !important;
}

/* Ícono carrito más pequeño */
.woocommerce ul.products li.product a.lm-buy-btn .lm-cart-icon svg,
.et_pb_shop .woocommerce ul.products li.product a.lm-buy-btn .lm-cart-icon svg{
  width: 14px !important;   /* más chico */
  height: 14px !important;  /* más chico */
}

/* Separación entre ícono y texto */
.woocommerce ul.products li.product a.lm-buy-btn,
.et_pb_shop .woocommerce ul.products li.product a.lm-buy-btn{
  gap: 6px !important;
}
/* =========================================================
   YITH Filters en MÓVIL: arregla superposición / z-index / scroll
   ========================================================= */
@media (max-width: 980px){

  /* 1) Asegura que el bloque del filtro esté por encima del grid */
  body.post-type-archive-product #sidebar,
  body.tax-product_cat #sidebar,
  body.tax-product_tag #sidebar{
    position: relative !important;
    z-index: 9999 !important;
    background: #fff !important;
  }

  /* 2) Contenedor de YITH (varias versiones) */
  #sidebar .yith-wcan,
  #sidebar .yith-wcan-filters,
  #sidebar .yith-wcan-filter,
  #sidebar .yith-wcan-filter-content,
  #sidebar .yith-wcan-widget{
    position: relative !important;
    z-index: 10000 !important;
    background: #fff !important;
  }

  /* 3) Si el filtro usa Select2 (muy común en YITH): dropdown bien visible */
  .select2-container{
    width: 100% !important;
  }

  .select2-container--open .select2-dropdown{
    z-index: 999999 !important;          /* clave: queda arriba de todo */
    background: #fff !important;          /* evita “ver” productos debajo */
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.12) !important;
    overflow: hidden !important;
  }

  /* 4) Scroll usable dentro del dropdown (iPhone/Android) */
  .select2-results__options{
    max-height: 55vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: #fff !important;
  }

  /* 5) Campo buscar a ancho completo */
  .select2-search__field{
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 6) Evita que productos se “metan visualmente” dentro del filtro */
  body.post-type-archive-product #left-area,
  body.tax-product_cat #left-area,
  body.tax-product_tag #left-area{
    position: relative !important;
    z-index: 1 !important;
    background: #fff !important;
  }
}

.yith-wcan-filters .yith-wcan-filter .yith-wcan-dropdown .dropdown-wrapper {
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 4px;
    box-shadow: 0 0 7px 0 #000;
    display: none;
    left: 0;
    padding: 15px;
    position: relative !important;
    right: 0;
    top: calc(100% + 10px);
    z-index: 1011;
}




#lm-infinite-loader{
  text-align:center;
  padding: 18px 0;
  font-size: 14px;
  color: #6b7280;
}