/* ===============
   Obepro Luxury Product Cards (WooCommerce)
   Safe, reversible, and theme-agnostic.
   =============== */

/* Target common WooCommerce product cards */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 16px;
  padding: 14px 14px 12px;
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: hidden; /* keeps it neat */
}

/* Subtle hover elevation (desktop) */
@media (hover:hover){
  .woocommerce ul.products li.product:hover,
  .woocommerce-page ul.products li.product:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(17, 24, 39, 0.08);
    border-color: rgba(17, 24, 39, 0.12);
  }
}

/* Consistent image presentation */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link{
  display: block;
  text-decoration: none;
}

/* Image wrapper: create a soft "gallery" feel */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link .woocommerce-loop-product__thumbnail,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link .attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link img,
.woocommerce-page ul.products li.product a.woocommerce-LoopProduct-link img{
  border-radius: 14px;
}

/* JS adds .obepro-lpc-thumb to the thumb container when possible */
.woocommerce ul.products li.product .obepro-lpc-thumb{
  aspect-ratio: 1 / 1;
  background: #f7f7f8;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

/* Ensure the image covers nicely */
.woocommerce ul.products li.product .obepro-lpc-thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain; /* cleaner for tools/products */
  display: block;
}

/* Typography hierarchy */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size: 15px;
  line-height: 1.25;
  font-weight: 600;
  color: #111827;
  margin: 6px 0 8px;
}

/* Price: calm, strong, no promo color */
.woocommerce ul.products li.product .price{
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px;
}

/* Strike-through and discount text should whisper */
.woocommerce ul.products li.product .price del{
  color: rgba(17, 24, 39, 0.45);
  font-weight: 500;
}
.woocommerce ul.products li.product .price ins{
  background: transparent;
  text-decoration: none;
}

/* Any small meta text inside cards: make it luxury-muted */
.woocommerce ul.products li.product small,
.woocommerce ul.products li.product .woocommerce-product-details__short-description,
.woocommerce ul.products li.product .obepro-luxury-delivery-badge{
  color: #6B7280 !important;
  font-weight: 500;
}

/* If your delivery line is a link/span, keep it calm (no orange) */
.woocommerce ul.products li.product .obepro-luxury-delivery-badge,
.woocommerce ul.products li.product .obepro-luxury-delivery-badge *{
  color: #6B7280 !important;
}

/* Reduce "Save up to" prominence (common in some themes/plugins) */
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .saved,
.woocommerce ul.products li.product .save,
.woocommerce ul.products li.product .discount,
.woocommerce ul.products li.product .you-save{
  color: rgba(107,114,128,0.9);
  font-size: 12.5px;
  font-weight: 500;
}

/* Buttons: luxury pill */
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button{
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 600;
  letter-spacing: .1px;
}

/* Spacing tidy */
.woocommerce ul.products li.product .star-rating{
  margin: 6px 0 8px;
}

/* Mobile: keep padding comfortable, avoid cramped look */
@media (max-width: 768px){
  .woocommerce ul.products li.product,
  .woocommerce-page ul.products li.product{
    border-radius: 14px;
    padding: 12px 12px 10px;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size: 14.5px;
  }
}