/*
 * Reyhoon Shop v21.5.75 — Product Card UI
 *
 * Reference-driven product-card layer.
 * Scope: WooCommerce shop/category/tag product grids only.
 * This file is intentionally loaded AFTER the legacy card/mobile CSS so that
 * the new card design is deterministic without deleting legacy styles.
 *
 * Main visual targets:
 * - portrait product image with rounded corners
 * - clean white card body
 * - centered Persian typography
 * - blue product title
 * - bold dark price
 * - compact brown add-to-cart button
 * - soft shadow and restrained hover
 */

:root {
  --rh-card-v75-radius: 18px;
  --rh-card-v75-image-radius: 17px;
  --rh-card-v75-title: #334862;
  --rh-card-v75-price: #111111;
  --rh-card-v75-button: #7e5329;
  --rh-card-v75-button-hover: #704012;
  --rh-card-v75-gap: 18px;
  --rh-card-v75-image-ratio: .78;
}

/* ---------------------------------------------------------
   GRID — shop/category archives
   --------------------------------------------------------- */
body.woocommerce-shop ul.products,
body.post-type-archive-product ul.products,
body.tax-product_cat ul.products,
body.tax-product_tag ul.products,
body.rh-product-category-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--rh-card-v75-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.woocommerce-shop ul.products::before,
body.woocommerce-shop ul.products::after,
body.post-type-archive-product ul.products::before,
body.post-type-archive-product ul.products::after,
body.tax-product_cat ul.products::before,
body.tax-product_cat ul.products::after,
body.tax-product_tag ul.products::before,
body.tax-product_tag ul.products::after,
body.rh-product-category-page ul.products::before,
body.rh-product-category-page ul.products::after {
  display: none !important;
}

/* ---------------------------------------------------------
   CARD SHELL
   --------------------------------------------------------- */
body.woocommerce-shop ul.products li.product,
body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product,
body.tax-product_tag ul.products li.product,
body.rh-product-category-page ul.products li.product {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: auto !important;
  min-width: 0 !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 0 19px !important;
  border: 0 !important;
  border-radius: var(--rh-card-v75-radius) !important;
  background: #fff !important;
  box-shadow: 0 5px 16px rgba(24, 34, 29, .13) !important;
  overflow: hidden !important;
  text-align: center !important;
  direction: rtl !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}

body.woocommerce-shop ul.products li.product:hover,
body.post-type-archive-product ul.products li.product:hover,
body.tax-product_cat ul.products li.product:hover,
body.tax-product_tag ul.products li.product:hover,
body.rh-product-category-page ul.products li.product:hover {
  transform: translateY(-2px) !important;
  border: 0 !important;
  box-shadow: 0 11px 25px rgba(24, 34, 29, .16) !important;
}

/* ---------------------------------------------------------
   PRODUCT LINK / IMAGE
   --------------------------------------------------------- */
body.woocommerce-shop ul.products li.product a.woocommerce-LoopProduct-link,
body.post-type-archive-product ul.products li.product a.woocommerce-LoopProduct-link,
body.tax-product_cat ul.products li.product a.woocommerce-LoopProduct-link,
body.tax-product_tag ul.products li.product a.woocommerce-LoopProduct-link,
body.rh-product-category-page ul.products li.product a.woocommerce-LoopProduct-link {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: inherit !important;
  text-decoration: none !important;
}

body.woocommerce-shop ul.products li.product a img,
body.post-type-archive-product ul.products li.product a img,
body.tax-product_cat ul.products li.product a img,
body.tax-product_tag ul.products li.product a img,
body.rh-product-category-page ul.products li.product a img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: var(--rh-card-v75-image-ratio) !important;
  object-fit: cover !important;
  object-position: center center !important;
  margin: 0 0 15px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--rh-card-v75-image-radius) !important;
  background: #f4f2ed !important;
  box-shadow: none !important;
  transform: none !important;
  transition: transform .25s ease !important;
}

body.woocommerce-shop ul.products li.product:hover a img,
body.post-type-archive-product ul.products li.product:hover a img,
body.tax-product_cat ul.products li.product:hover a img,
body.tax-product_tag ul.products li.product:hover a img,
body.rh-product-category-page ul.products li.product:hover a img {
  transform: none !important;
}

/* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */
body.woocommerce-shop ul.products li.product .woocommerce-loop-product__title,
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
body.tax-product_cat ul.products li.product .woocommerce-loop-product__title,
body.tax-product_tag ul.products li.product .woocommerce-loop-product__title,
body.rh-product-category-page ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box !important;
  min-height: 0 !important;
  margin: 0 13px 5px !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--rh-card-v75-title) !important;
  font-family: 'Estedad', Tahoma, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.85 !important;
  font-weight: 600 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* ---------------------------------------------------------
   PRICE
   --------------------------------------------------------- */
body.woocommerce-shop ul.products li.product .price,
body.post-type-archive-product ul.products li.product .price,
body.tax-product_cat ul.products li.product .price,
body.tax-product_tag ul.products li.product .price,
body.rh-product-category-page ul.products li.product .price {
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  min-height: 0 !important;
  margin: 0 10px 11px !important;
  padding: 0 !important;
  color: var(--rh-card-v75-price) !important;
  font-family: 'Estedad', Tahoma, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  font-weight: 900 !important;
  text-align: center !important;
}

body.woocommerce-shop ul.products li.product .price del,
body.post-type-archive-product ul.products li.product .price del,
body.tax-product_cat ul.products li.product .price del,
body.tax-product_tag ul.products li.product .price del,
body.rh-product-category-page ul.products li.product .price del {
  order: 2 !important;
  color: #999 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  opacity: .72 !important;
}

body.woocommerce-shop ul.products li.product .price ins,
body.post-type-archive-product ul.products li.product .price ins,
body.tax-product_cat ul.products li.product .price ins,
body.tax-product_tag ul.products li.product .price ins,
body.rh-product-category-page ul.products li.product .price ins {
  order: 1 !important;
  color: var(--rh-card-v75-price) !important;
  text-decoration: none !important;
  font-weight: 900 !important;
}

/* ---------------------------------------------------------
   ADD TO CART
   --------------------------------------------------------- */
body.woocommerce-shop ul.products li.product .button,
body.post-type-archive-product ul.products li.product .button,
body.tax-product_cat ul.products li.product .button,
body.tax-product_tag ul.products li.product .button,
body.rh-product-category-page ul.products li.product .button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  width: auto !important;
  min-width: 140px !important;
  min-height: 34px !important;
  margin: 0 auto !important;
  padding: 7px 17px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--rh-card-v75-button) !important;
  color: #fff !important;
  font-family: 'Estedad', Tahoma, sans-serif !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  font-weight: 800 !important;
  text-align: center !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .18s ease, transform .18s ease !important;
}

body.woocommerce-shop ul.products li.product .button:hover,
body.post-type-archive-product ul.products li.product .button:hover,
body.tax-product_cat ul.products li.product .button:hover,
body.tax-product_tag ul.products li.product .button:hover,
body.rh-product-category-page ul.products li.product .button:hover {
  background: var(--rh-card-v75-button-hover) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

body.woocommerce-shop ul.products li.product .added_to_cart,
body.post-type-archive-product ul.products li.product .added_to_cart,
body.tax-product_cat ul.products li.product .added_to_cart,
body.tax-product_tag ul.products li.product .added_to_cart,
body.rh-product-category-page ul.products li.product .added_to_cart {
  display: block !important;
  width: 100% !important;
  margin: 7px 0 0 !important;
  color: var(--rh-card-v75-title) !important;
  font-family: 'Estedad', Tahoma, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

/* ---------------------------------------------------------
   SALE BADGE — compact, unobtrusive, inside image area
   --------------------------------------------------------- */
body.woocommerce-shop ul.products li.product .onsale,
body.post-type-archive-product ul.products li.product .onsale,
body.tax-product_cat ul.products li.product .onsale,
body.tax-product_tag ul.products li.product .onsale,
body.rh-product-category-page ul.products li.product .onsale {
  top: 11px !important;
  right: 11px !important;
  left: auto !important;
  z-index: 4 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  background: rgba(126, 83, 41, .96) !important;
  color: #fff !important;
  font-family: 'Estedad', Tahoma, sans-serif !important;
  font-size: 8px !important;
  line-height: 1.5 !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

/* WooCommerce may inject a hidden clearfix/list item state. */
body.woocommerce-shop ul.products li.product::before,
body.woocommerce-shop ul.products li.product::after,
body.post-type-archive-product ul.products li.product::before,
body.post-type-archive-product ul.products li.product::after,
body.tax-product_cat ul.products li.product::before,
body.tax-product_cat ul.products li.product::after,
body.tax-product_tag ul.products li.product::before,
body.tax-product_tag ul.products li.product::after,
body.rh-product-category-page ul.products li.product::before,
body.rh-product-category-page ul.products li.product::after {
  display: none !important;
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */
@media (max-width: 1050px) {
  body.woocommerce-shop ul.products,
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  body.rh-product-category-page ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 15px !important;
  }
}

/* ---------------------------------------------------------
   MOBILE — keep the reference proportions instead of reverting
   to the old square cards.
   --------------------------------------------------------- */
@media (max-width: 700px) {
  body.woocommerce-shop ul.products,
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  body.rh-product-category-page ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.woocommerce-shop ul.products li.product,
  body.post-type-archive-product ul.products li.product,
  body.tax-product_cat ul.products li.product,
  body.tax-product_tag ul.products li.product,
  body.rh-product-category-page ul.products li.product {
    padding-bottom: 14px !important;
    border-radius: 15px !important;
    box-shadow: 0 4px 13px rgba(24, 34, 29, .11) !important;
  }

  body.woocommerce-shop ul.products li.product a img,
  body.post-type-archive-product ul.products li.product a img,
  body.tax-product_cat ul.products li.product a img,
  body.tax-product_tag ul.products li.product a img,
  body.rh-product-category-page ul.products li.product a img {
    margin-bottom: 10px !important;
    border-radius: 14px !important;
  }

  body.woocommerce-shop ul.products li.product .woocommerce-loop-product__title,
  body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
  body.tax-product_cat ul.products li.product .woocommerce-loop-product__title,
  body.tax-product_tag ul.products li.product .woocommerce-loop-product__title,
  body.rh-product-category-page ul.products li.product .woocommerce-loop-product__title {
    margin-right: 8px !important;
    margin-left: 8px !important;
    margin-bottom: 4px !important;
    font-size: 10px !important;
    line-height: 1.85 !important;
  }

  body.woocommerce-shop ul.products li.product .price,
  body.post-type-archive-product ul.products li.product .price,
  body.tax-product_cat ul.products li.product .price,
  body.tax-product_tag ul.products li.product .price,
  body.rh-product-category-page ul.products li.product .price {
    margin-bottom: 9px !important;
    font-size: 12px !important;
  }

  body.woocommerce-shop ul.products li.product .button,
  body.post-type-archive-product ul.products li.product .button,
  body.tax-product_cat ul.products li.product .button,
  body.tax-product_tag ul.products li.product .button,
  body.rh-product-category-page ul.products li.product .button {
    min-width: 112px !important;
    min-height: 32px !important;
    padding: 6px 11px !important;
    border-radius: 9px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 380px) {
  body.woocommerce-shop ul.products,
  body.post-type-archive-product ul.products,
  body.tax-product_cat ul.products,
  body.tax-product_tag ul.products,
  body.rh-product-category-page ul.products {
    gap: 8px !important;
  }

  body.woocommerce-shop ul.products li.product .woocommerce-loop-product__title,
  body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title,
  body.tax-product_cat ul.products li.product .woocommerce-loop-product__title,
  body.tax-product_tag ul.products li.product .woocommerce-loop-product__title,
  body.rh-product-category-page ul.products li.product .woocommerce-loop-product__title {
    font-size: 9px !important;
  }

  body.woocommerce-shop ul.products li.product .price,
  body.post-type-archive-product ul.products li.product .price,
  body.tax-product_cat ul.products li.product .price,
  body.tax-product_tag ul.products li.product .price,
  body.rh-product-category-page ul.products li.product .price {
    font-size: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.woocommerce-shop ul.products li.product,
  body.post-type-archive-product ul.products li.product,
  body.tax-product_cat ul.products li.product,
  body.tax-product_tag ul.products li.product,
  body.rh-product-category-page ul.products li.product,
  body.woocommerce-shop ul.products li.product .button,
  body.post-type-archive-product ul.products li.product .button,
  body.tax-product_cat ul.products li.product .button,
  body.tax-product_tag ul.products li.product .button,
  body.rh-product-category-page ul.products li.product .button {
    transition: none !important;
  }
}
