/* KeyGIF Trending Style Everywhere (stable version for Kadence + WC loops)
   - No absolute positioning of product-details (prevents text jumping)
   - Rectangular image area using aspect-ratio
   - Gradient overlay on image area for "Trending" vibe
*/

ul.products li.keygif-trending-card,
ul.kgf-products li.keygif-trending-card{
  border-radius: 28px !important;
  overflow: hidden !important;
  background: rgba(0,0,0,0.40) !important;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35) !important;
  padding: 14px !important;
}

/* IMAGE LINK wrapper */
ul.products li.keygif-trending-card > a.woocommerce-loop-image-link,
ul.kgf-products li.keygif-trending-card > a.woocommerce-loop-image-link{
  position: relative !important;
  display: block !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* Rectangular image area (like Trending) */
ul.products li.keygif-trending-card > a.woocommerce-loop-image-link img,
ul.kgf-products li.keygif-trending-card > a.woocommerce-loop-image-link img{
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;   /* rectangle; change to 3/4 or 2/3 if you want taller */
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Bottom gradient overlay on image area (Trending look, without moving text) */
ul.products li.keygif-trending-card > a.woocommerce-loop-image-link::after,
ul.kgf-products li.keygif-trending-card > a.woocommerce-loop-image-link::after{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 55% !important;
  background: linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0)) !important;
  pointer-events: none !important;
}

/* DETAILS area — keep in normal flow (no jumping) */
ul.products li.keygif-trending-card .product-details,
ul.kgf-products li.keygif-trending-card .product-details{
  margin-top: 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Title (white, bold) */
ul.products li.keygif-trending-card .woocommerce-loop-product__title,
ul.kgf-products li.keygif-trending-card .woocommerce-loop-product__title{
  margin: 0 0 8px !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

ul.products li.keygif-trending-card .woocommerce-loop-product__title a,
ul.kgf-products li.keygif-trending-card .woocommerce-loop-product__title a{
  color: #fff !important;
  text-decoration: none !important;
}

/* Price (green) */
ul.products li.keygif-trending-card .price,
ul.kgf-products li.keygif-trending-card .price{
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #35d05a !important;
}

/* Hide excerpt to match Trending clean card */
ul.products li.keygif-trending-card .product-excerpt,
ul.kgf-products li.keygif-trending-card .product-excerpt{
  display: none !important;
}

/* Optional: hide buttons (Trending slider usually doesn’t show Add to cart) */
ul.products li.keygif-trending-card .product-action-wrap,
ul.kgf-products li.keygif-trending-card .product-action-wrap{
  display: none !important;
}

/* Sale badge: keep visible */
ul.products li.keygif-trending-card span.onsale,
ul.kgf-products li.keygif-trending-card span.onsale{
  border-radius: 999px !important;
  padding: 6px 12px !important;
  min-height: unset !important;
  line-height: 1 !important;
}

/* Hover lift */
ul.products li.keygif-trending-card:hover,
ul.kgf-products li.keygif-trending-card:hover{
  transform: translateY(-2px) !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}