/* ==========================================================================
   WooCommerce Product Card — BASE ESTABLE (DESKTOP) PARA ITERAR
   - NO inventa wrappers
   - NO pseudo-elementos
   - NO depende de .woocommerce
   - Card fija + botón abajo
   - Footer gris “tipo div padre” para: título + precio + botón
   ========================================================================== */

/* =========================
   1) CARD
   ========================= */
ul.products li.product{
  box-sizing: border-box;
  padding: 8px !important;

  border: 1px solid rgba(0,0,0,.10);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  overflow: hidden;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  height: 360px !important;       /* ✅ compacta para desktop */
  position: relative;

  /* ✅ “footer gris” real por altura fija (simula un div padre abajo) */
  --pc-footer-h: 150px;           /* ajusta aquí si quieres más/menos footer */
  background: linear-gradient(
    to bottom,
    #fff 0,
    #fff calc(100% - var(--pc-footer-h)),
    #f3f4f6 calc(100% - var(--pc-footer-h)),
    #f3f4f6 100%
  ) !important;
}

/* =========================
   2) LINK PRINCIPAL (imagen + title + price)
   ========================= */
ul.products li.product > a.woocommerce-LoopProduct-link{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;      /* ocupa todo antes del botón */
  width: 100% !important;
  text-decoration: none;
}

/* =========================
   3) IMAGEN (bloque controlable)
   ========================= */
ul.products li.product > a.woocommerce-LoopProduct-link img{
  display: block !important;
  width: 100% !important;

  height: 170px !important;       /* ✅ control del bloque imagen */
  padding: 12px !important;       /* ✅ padding interno real */
  box-sizing: border-box !important;

  object-fit: contain !important; /* ✅ no deforma */
  object-position: center;
  margin: 0 !important;
}

/* =========================
   4) FOOTER: título + precio “viven” abajo
   ========================= */

/* Empuja el texto hacia el footer (zona gris) */
ul.products li.product > a.woocommerce-LoopProduct-link .woocommerce-loop-product__title{
  margin-top: auto !important;
}

/* Centrado */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .price,
ul.products li.product .button{
  text-align: center;
}

/* Título */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2.woocommerce-loop-product__title{
  color: #000 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;

  margin: 0 !important;
  padding: 12px 12px 6px 12px !important;
}

/* Precio */
ul.products li.product .price{
  color: var(--pc-color-primary, #0b4db8) !important;
  font-size: 20px !important;
  font-weight: 700 !important;

  margin: 0 !important;
  padding: 0 12px 10px 12px !important;
}

/* Si hay <ins>/<del> por ofertas, que no se vuelva loco */
ul.products li.product .price ins{
  text-decoration: none;
}

/* =========================
   5) BOTÓN (hermano del <a>) — pegado abajo en el footer
   ========================= */
ul.products li.product a.button.add_to_cart_button,
ul.products li.product a.button.product_type_simple{
  margin-top: auto !important;    /* ✅ abajo del todo */
  display: block !important;
  width: 100% !important;

  background: var(--pc-color-primary, #0b4db8) !important;
  color: #fff !important;
  font-weight: 800 !important;

  padding: 12px 14px !important;
  border-radius: 8px !important;
  border: 0 !important;
}

/* Hover */
ul.products li.product a.button.add_to_cart_button:hover,
ul.products li.product a.button.product_type_simple:hover{
  background: #fff !important;
  color: var(--pc-color-primary, #0b4db8) !important;
  border: 2px solid var(--pc-color-primary, #0b4db8) !important;
}