/* tienda.css - override controlado para tarjetas/imagenes de productos
   Forzar altura uniforme y centrar imagen sin cortar texto. */

:root {
  --herbo-card-height: 440px; /* altura total tarjeta, ajusta aquí */
  --herbo-media-ratio: 0.52;  /* proporción de la tarjeta que ocupa la imagen */
  --herbo-card-gap: 20px;
}

/* grid de productos */
.woocommerce ul.products,
.herbolive-products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: var(--herbo-card-gap) !important;
  align-items: start !important;
}

/* tarjeta (li.product) */
.woocommerce ul.products li.product,
.herbolive-products .product {
  display: flex !important;
  flex-direction: column !important;
  height: var(--herbo-card-height) !important;
  box-sizing: border-box !important;
  padding: 12px !important;
  border-radius: 8px !important;
  background: #fff !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}

/* contenedor media (imagen) */
.woocommerce ul.products li.product .herbolive-product-media,
.woocommerce ul.products li.product .product-media,
.woocommerce ul.products li.product .woocommerce-loop-product__link img,
.woocommerce ul.products li.product .woocommerce-loop-product__link .wp-post-image {
  width: 100% !important;
  height: calc(var(--herbo-card-height) * var(--herbo-media-ratio)) !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  background: #f8f8f8 !important;
}

/* imagen dentro: ocupa el contenedor y se recorta centrada */
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product .wp-post-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* estructura de texto dentro de la tarjeta */
.woocommerce ul.products li.product .product-info,
.woocommerce ul.products li.product .product-details,
.woocommerce ul.products li.product .product__info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding-top: 12px !important;
}

/* título: máximo 2 líneas (reserva espacio) */
.woocommerce-loop-product__title {
  font-size: 1rem !important;
  line-height: 1.2 !important;
  margin: 0 0 8px 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 2.4em !important;
}

/* precio y botón al final */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .product-footer,
.woocommerce ul.products li.product .button {
  margin-top: auto !important;
}

/* small screens adjustments */
@media (max-width: 768px) {
  :root { --herbo-card-height: 380px; }
  .woocommerce ul.products { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; }
}

/* ------------------------------------------------------------
   Ajuste solicitado: forzar ancho 100% para las reglas de 3 columnas
   ------------------------------------------------------------ */
.woocommerce-page.columns-3 ul.products li.product,
.woocommerce.columns-3 ul.products li.product {
  width: 100% !important;
  box-sizing: border-box !important;
}