/*!
 * Fr_Project — Product Card (restyles WooCommerce/WoodMart native markup)
 * Path: woodmart-child/assets/css/components/product-card.css
 */

/* ==========================================================================
   IMAGE TILE — consistent frame regardless of source photo dimensions
   ========================================================================== */
ul.products li.product a img,
ul.products li.product .wd-product-grid-item img {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  background-color: var(--color-background-soft) !important;
  padding: var(--space-sm) !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   CARD CONTAINER
   ========================================================================== */
ul.products li.product {
  background-color: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
}

/* ==========================================================================
   TITLE / PRICE
   ========================================================================== */
ul.products li.product .wd-entities-title,
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h3 {
  font-size: var(--fs-md) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-text) !important;
}

ul.products li.product .price ins {
  text-decoration: none !important;
  color: var(--color-accent) !important;
  font-weight: var(--fw-bold) !important;
}
ul.products li.product .price del {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   DISCOUNT BADGE
   ========================================================================== */
ul.products li.product .onsale,
ul.products li.product .wd-onsale {
  background-color: var(--color-discount) !important;
  color: #ffffff !important;
  border-radius: var(--radius-pill) !important;
}

/* ==========================================================================
   BUTTONS (Add to cart, wishlist, compare, quick-view)
   ========================================================================== */
ul.products li.product a.add_to_cart_button,
ul.products li.product .ajax_add_to_cart,
ul.products li.product .wd-add-btn,
ul.products li.product .button.product_type_simple {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #ffffff !important;
  border-radius: var(--radius-md) !important;
}
ul.products li.product a.add_to_cart_button:hover,
ul.products li.product .wd-add-btn:hover {
  background-color: var(--color-accent-hover) !important;
  border-color: var(--color-accent-hover) !important;
}

/* ==========================================================================
   PREVENT HORIZONTAL OVERFLOW FROM HOVER / QUICK-SHOP PANELS
   Constrain any absolutely-positioned hover panel to its own card width
   instead of letting it expand past the viewport edge.
   ========================================================================== */
ul.products li.product {
  position: relative !important;
}
ul.products li.product .wd-hover-content,
ul.products li.product .hover-content,
ul.products li.product .wd-quick-shop {
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   IMAGE BORDER RADIUS (Phase 03.4 refinement)
   ========================================================================== */
ul.products li.product a img,
ul.products li.product .wd-product-grid-item img {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* If the card itself has square corners underneath (some WoodMart hover
   layouts add an inner wrapper), round it too so nothing looks clipped */
ul.products li.product .product-image-link,
ul.products li.product .box-image {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  overflow: hidden;
}

/* ==========================================================================
   PREMIUM REFINEMENT (visual polish pass)
   Path addition: woodmart-child/assets/css/components/product-card.css
   ========================================================================== */

/* Card: subtle lift + shadow on hover, smoother than before */
ul.products li.product {
  transition: box-shadow var(--transition-normal), transform var(--transition-normal), border-color var(--transition-normal) !important;
}
ul.products li.product:hover {
  box-shadow: 0 16px 40px rgba(34, 34, 34, 0.12) !important;
  transform: translateY(-4px) !important;
  border-color: var(--color-border) !important;
}

/* Image: subtle zoom on hover for a livelier feel */
ul.products li.product a img {
  transition: transform var(--transition-slow) !important;
}
ul.products li.product:hover a img {
  transform: scale(1.04) !important;
}

/* Title: a bit bigger, better spacing */
ul.products li.product .wd-entities-title,
ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--fs-md) !important;
  font-weight: var(--fw-bold) !important;
  color: var(--color-text) !important;
  margin-bottom: 2px !important;
  padding-inline: var(--space-sm) !important;
}

/* Category label under the title, lighter and smaller */
ul.products li.product .wd-product-cats {
  font-size: var(--fs-xs) !important;
  color: var(--color-text-muted) !important;
  padding-inline: var(--space-sm) !important;
  margin-bottom: var(--space-xs) !important;
}

/* ==========================================================================
   PRICE — the main visual upgrade: a warm bronze chip instead of plain text
   ========================================================================== */
ul.products li.product .price {
  padding-inline: var(--space-sm) !important;
  padding-block-end: var(--space-sm) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--space-xs) !important;
  flex-wrap: wrap !important;
}

ul.products li.product .price ins {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  background-color: var(--color-accent-soft) !important;
  color: var(--color-accent) !important;
  font-weight: var(--fw-bold) !important;
  font-size: var(--fs-md) !important;
  padding: 4px var(--space-sm) !important;
  border-radius: var(--radius-pill) !important;
}

/* When there's no discount (price has no <ins>), style the plain amount
   the same way so every card looks consistent */
ul.products li.product .price > .woocommerce-Price-amount:only-child,
ul.products li.product .price > bdi:only-child {
  display: inline-flex !important;
  align-items: center !important;
  background-color: var(--color-accent-soft) !important;
  color: var(--color-accent) !important;
  font-weight: var(--fw-bold) !important;
  font-size: var(--fs-md) !important;
  padding: 4px var(--space-sm) !important;
  border-radius: var(--radius-pill) !important;
}

ul.products li.product .price del {
  color: var(--color-text-muted) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-regular) !important;
  opacity: 1 !important;
  text-decoration: line-through !important;
  order: 2; /* shown after the bronze chip, visually de-emphasized */
}

/* ==========================================================================
   DISCOUNT BADGE — rounder, with a soft shadow to lift it off the image
   ========================================================================== */
ul.products li.product .onsale,
ul.products li.product .wd-onsale {
  background-color: var(--color-discount) !important;
  color: #ffffff !important;
  border-radius: var(--radius-pill) !important;
  font-weight: var(--fw-bold) !important;
  font-size: var(--fs-xs) !important;
  padding: 4px 10px !important;
  box-shadow: 0 4px 10px rgba(211, 47, 47, 0.35) !important;
}