/* ==========================================================================
   Product Card — single canonical style for the entire theme.
   Applied everywhere ul.products li.product exists:
     - Shop / category archive grid
     - Home "Productos Destacados" slider
     - Home "Ofertas Imperdibles" grid
     - Home "Super Descuentos" slider
   Slider contexts override card width via their own parent selectors
   (see home.css .pc-featured__track, .pc-discounts__track).
   ========================================================================== */


/* ── 1. Card shell ──────────────────────────────────────────────────────── */

ul.products li.product {
  /* Box model — WooCommerce float-reset */
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  width: auto !important;       /* grid / flex parent controls width */

  /* Visual */
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  background: #fff;

  /* Layout: vertical flex so body fills leftover height */
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  min-height: 280px;
  position: relative;

  transition: box-shadow 200ms ease, transform 200ms ease;
}

ul.products li.product:hover {
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}


/* ── 2. Image zone ──────────────────────────────────────────────────────── */

ul.products li.product .pc-card__img-link {
  display: block;
  flex: 0 0 150px;
  height: 150px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  position: relative;
}

/* Product image */
ul.products li.product .pc-card__img-link img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;        /* fills the 150px zone */
  padding: 8px !important;
  box-sizing: border-box !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  transition: transform 300ms ease;
}

ul.products li.product .pc-card__img-link:hover img {
  transform: scale(1.04);
}

/* No-image fallback block */
ul.products li.product .pc-card__no-image {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f3f4f6;
  color: #9ca3af;
}

ul.products li.product .pc-card__no-image-icon svg {
  display: block;
  color: #d1d5db;
}

ul.products li.product .pc-card__no-image-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Sale badge */
ul.products li.product .onsale {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  right: auto !important;
  z-index: 2;
  margin: 0 !important;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Mobile: slightly smaller image zone for 2-col layout */
@media (max-width: 600px) {
  ul.products li.product .pc-card__img-link {
    flex: 0 0 125px;
    height: 125px;
  }
}


/* ── 3. Body zone ───────────────────────────────────────────────────────── */

ul.products li.product .pc-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #f3f4f6;
  padding: 10px 12px 12px;
  overflow: hidden;
}

/* Title link — flex:1 pushes price + button to the bottom */
ul.products li.product .pc-card__name-link,
ul.products li.product .pc-card__title-link {
  display: block;
  text-decoration: none;
  flex: 1 1 auto;
  margin-bottom: 8px;
  width: 100%;
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2.woocommerce-loop-product__title {
  color: #111827 !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;

  /* Clamp to 2 lines — all cards same height */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

ul.products li.product .pc-card__name-link:hover .woocommerce-loop-product__title,
ul.products li.product .pc-card__title-link:hover .woocommerce-loop-product__title {
  color: var(--pc-color-primary) !important;
}


/* ── 4. Price ───────────────────────────────────────────────────────────── */

ul.products li.product .price {
  display: block;
  color: var(--pc-color-primary) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2;
  margin: 0 0 10px !important;
  padding: 0 !important;
  text-align: center !important;
  width: 100%;
}

ul.products li.product .price ins {
  text-decoration: none;
}

ul.products li.product .price del {
  font-size: 12px;
  opacity: 0.5;
  margin-right: 4px;
}


/* ── 5. Add to cart button ──────────────────────────────────────────────── */
/*
 * Targets ALL WooCommerce loop button types:
 *   .add_to_cart_button — simple products (AJAX-ready)
 *   .product_type_variable — variable products (goes to product page — correct)
 *   .product_type_grouped
 *   .product_type_external
 */

ul.products li.product a.button {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;

  background: var(--pc-color-primary) !important;
  color: #fff !important;
  font-size: 12.5px;
  font-weight: 700 !important;
  line-height: 1.2;

  padding: 9px 12px !important;
  border-radius: 8px !important;
  border: 2px solid transparent !important;

  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  cursor: pointer;
}

ul.products li.product a.button:hover {
  background: #fff !important;
  color: var(--pc-color-primary) !important;
  border-color: var(--pc-color-primary) !important;
}

/* Loading state */
ul.products li.product a.button.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* After add-to-cart: hide original button */
ul.products li.product a.button.added {
  display: none !important;
}


/* ── 6. "Ver carrito" link (shown after successful AJAX add) ────────────── */

ul.products li.product a.added_to_cart.wc-forward {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none !important;
  margin-top: 0 !important;

  background: #15803d !important;
  color: #fff !important;
  font-size: 12.5px;
  font-weight: 700 !important;

  padding: 9px 12px !important;
  border-radius: 8px !important;
  border: 2px solid transparent !important;

  transition: background 150ms ease;
}

ul.products li.product a.added_to_cart.wc-forward:hover {
  background: #166534 !important;
}


/* ── 7. Slider context overrides ────────────────────────────────────────── */
/*
 * Inside home sliders the cards are fixed-width (220px desktop, fluid mobile).
 * The image zone adapts to the narrower column.
 * These rules use parent selectors from home.css so they don't affect the archive.
 */

.pc-featured__track li.product .pc-card__img-link,
.pc-discounts__track li.product .pc-card__img-link {
  flex: 0 0 130px;
  height: 130px;
}

.pc-featured__track li.product,
.pc-discounts__track li.product {
  min-height: 250px;
}