/* v4: buscador en vivo, ancho completo, icono integrado, fondo violeta #532DF5, grid izquierda, tarjetas centradas */

/* Montserrat en contenedor filtro + grid */
#productos-filtrados-container,
#productos-filtrados-container *,
.woocommerce-filters,
.woocommerce-filters *{
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Oculta etiqueta del filtro si existiera */
.woocommerce-filters label{ display:none; }

/* Contenedor del filtro a la izquierda */
.woocommerce-filters{
  display:flex;
  width:100%;               /* ocupa el ancho completo */
  padding:8px 0;
  border:0;
  background:transparent;
  justify-content:flex-start;
  align-items:center;
}

/* ====== INPUT buscador destacado ====== */
#buscador_ciudad{
  width:100%;
  max-width:100%;              /* ocupa todo el ancho del contenedor */
  background:#532DF5 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'><path d='M10 2a8 8 0 015.29 13.71l5 5a1 1 0 01-1.42 1.42l-5-5A8 8 0 1110 2zm0 2a6 6 0 100 12 6 6 0 000-12z'/></svg>") no-repeat 16px center;
  background-size:18px 18px;   /* tamaño del icono */
  padding:12px 16px 12px 48px; /* espacio para el icono */
  border-radius:999px;
  border:0;
  box-shadow:0 4px 14px rgba(83,45,245,.3);
  font-size:16px;
  font-weight:600;
  color:#fff;
  outline:none;
}
#buscador_ciudad::placeholder{
  color:rgba(255,255,255,.75);
}
#buscador_ciudad:focus{
  box-shadow:0 6px 20px rgba(83,45,245,.5);
}

/* ====== GRID: 4 columnas, alineado izquierda ====== */
#productos-filtrados-container ul.products{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:24px;
  margin:0 !important;
  padding:0 !important;
  justify-content:start;   /* alinea el grid a la izquierda */
  align-content:start;
  justify-items:stretch;   /* tarjetas ocupan su columna */
}

/* Quita listas/viñetas y floats del theme */
#productos-filtrados-container ul.products,
#productos-filtrados-container ul.products li.product{ list-style:none !important; }
#productos-filtrados-container ul.products li.product{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start !important;
  text-align:center;
}

/* Centrado de textos dentro de la tarjeta */
#productos-filtrados-container ul.products li.product .woocommerce-loop-product__title,
#productos-filtrados-container ul.products li.product .price,
#productos-filtrados-container ul.products li.product .button{
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  display:block;
}

/* Elimina pseudo-elemento vacío de algunos themes al inicio del loop */
.woocommerce ul.products::before{ display:none !important; }

#productos-filtrados-container .woocommerce-loop-product__title{ text-align:center; }

/* Oculta contador y ordering de Woo */
.woocommerce-result-count, .woocommerce-ordering{ display:none; }

/* Asegura columna vertical en el enlace de la tarjeta */
.woocommerce ul.products li.product a.woocommerce-loop-product__link{
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

/* ====== RESPONSIVE unificado ====== */
@media (max-width: 1024px){
  #productos-filtrados-container ul.products{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }
}
@media (max-width: 768px){
  #productos-filtrados-container ul.products{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:18px;
  }
}
@media (max-width: 440px){
  #productos-filtrados-container ul.products{
    grid-template-columns:1fr;
  }
}

/* ====== LOADING: toast discreto abajo a la derecha ====== */
#loading-overlay{
  position:fixed;
  right:16px;
  bottom:16px;
  display:none;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  background:#0f1a2b;
  color:#fff;
  border-radius:8px;
  font-weight:700;
  font-size:13px;
  line-height:1;
  z-index:9999;
  pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}
#loading-overlay::before{
  content:"";
  width:16px; height:16px; margin-right:8px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation:tbafc2_spin .8s linear infinite;
}
@keyframes tbafc2_spin{ to{ transform:rotate(360deg);} }