/* HW · Tarjetas de producto
   Problemas que corrige:
   - Los titulos salian en MAYUSCULAS y muy grandes (el tema los pone asi).
   - Los titulos largos empujaban precio y boton a alturas distintas y
     descuadraban la rejilla.
   Solucion: titulo normal, mas pequeno, limitado a 3 lineas, y tarjetas
   en columna con el precio/boton anclados abajo. */

ul.products li.product {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}

/* Imagen con altura uniforme */
ul.products li.product a img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #fff;
  width: 100%;
  height: auto;
  margin-bottom: 12px;
}

/* Titulo: sin mayusculas, mas pequeno y a 3 lineas como maximo */
ul.products li.product .woocommerce-loop-product__title {
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  margin: 0 0 8px !important;
  /* El titulo se acorta en el servidor (mu-plugin hw-short-titles), asi que
     aqui basta reservar un alto uniforme para que la rejilla cuadre. */
  min-height: 38px;
}

/* Precio uniforme y pegado bajo el titulo */
ul.products li.product .price {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 10px !important;
  display: block;
}

/* El boton siempre abajo, a la misma altura en todas las tarjetas */
ul.products li.product .button {
  margin-top: auto !important;
  align-self: flex-start;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 13px !important;
}

/* La rejilla, con las celdas estiradas para que cuadren */
ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 22px;
  align-items: stretch;
  margin: 0 0 30px !important;
  padding: 0 !important;
}
ul.products::before,
ul.products::after { content: none !important; }
ul.products li.product {
  width: auto !important;
  margin: 0 !important;
  float: none !important;
  clear: none !important;
}

@media (max-width: 1024px) { ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { ul.products { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; } }

/* Titulo de la ficha de producto: tambien sin mayusculas forzadas */
.product_title.entry-title {
  text-transform: none !important;
  letter-spacing: normal !important;
}