/* ==========================================================================
   HIDRO KANK — tienda.css
   ========================================================================== */

.tienda-cabecera {
  background: var(--crema-alt);
  padding-block: var(--sp-xl) var(--sp-lg);
}
.tienda-cabecera h1 { font-size: var(--fs-2xl); }
.tienda-cabecera p { color: var(--carbon-suave); margin-top: var(--sp-2xs); }

.tienda-barra {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: var(--crema);
  border-bottom: 1px solid var(--borde-suave);
  padding-block: var(--sp-sm);
}
.tienda-barra__fila {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
}
.tienda-buscador {
  flex: 1;
  min-width: 220px;
  position: relative;
}
.tienda-buscador input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.6rem;
  border-radius: var(--radio-pill);
  border: 1.5px solid var(--borde-suave);
  background: var(--blanco);
}
.tienda-buscador input:focus { outline: none; border-color: var(--verde-hoja); box-shadow: 0 0 0 4px rgba(111,190,68,0.16); }
.tienda-buscador svg { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--carbon-suave); }

.tienda-filtro-categoria { position: relative; flex: 0 0 auto; min-width: 230px; }
.tienda-filtro-categoria select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 0.75rem 2.4rem 0.75rem 2.6rem;
  border-radius: var(--radio-pill);
  border: 1.5px solid var(--borde-suave);
  background: var(--blanco);
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.tienda-filtro-categoria select:focus { outline: none; border-color: var(--verde-hoja); box-shadow: 0 0 0 4px rgba(111,190,68,0.16); }
.tienda-filtro-categoria svg:first-of-type { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--carbon-suave); pointer-events: none; }
.tienda-filtro-categoria__flecha { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--carbon-suave); pointer-events: none; }
@media (max-width: 640px) { .tienda-filtro-categoria { flex: 1 1 100%; min-width: 0; } }

.tienda-resultado-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block: var(--sp-md);
  font-size: var(--fs-sm);
  color: var(--carbon-suave);
}

.tienda-vacio {
  text-align: center;
  padding: var(--sp-2xl) var(--sp-md);
  color: var(--carbon-suave);
}
.tienda-vacio svg { width: 72px; height: 72px; margin-inline: auto var(--sp-sm); opacity: 0.4; }