/* Aniyab UI — Product card + Price
 * From Figma: Components / Product card, price
 *
 * Usage:
 *   <article class="ay-product-card">
 *     <div class="ay-product-card__media">
 *       <img class="ay-product-card__image" src="…" alt="" />
 *     </div>
 *     <div class="ay-product-card__body">
 *       <div class="ay-product-card__head">
 *         <h3 class="ay-product-card__title">آنی‌پارک</h3>
 *         <span class="ay-badge ay-badge--green ay-badge--soft">
 *           <span class="ay-badge__label">۴.۵</span>
 *           <span class="ay-badge__icon">…star…</span>
 *         </span>
 *       </div>
 *       <p class="ay-product-card__desc">…</p>
 *       <div class="ay-price">
 *         <span class="ay-price__current">۱۷۹,۰۰۰ تومان</span>
 *         <span class="ay-price__original">۱۹۰,۰۰۰ تومان</span>
 *       </div>
 *       <!-- or out of stock: -->
 *       <!-- <span class="ay-badge ay-badge--red ay-badge--soft"><span class="ay-badge__label">ناموجود</span></span> -->
 *     </div>
 *   </article>
 *
 * Modifier: .ay-product-card--oos (out of stock layout helper)
 */

.ay-product-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 312px;
  padding: 16px;
  background: var(--ay-surface-white, #FFFFFF);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(163, 163, 163, 0.25);
  font-family: var(--ay-font-family, dana, IRANSansfanum, Tahoma, sans-serif);
  transition: box-shadow 0.2s ease;
}

.ay-product-card:hover,
.ay-product-card.is-hover {
  box-shadow:
    0 -4px 12px rgba(97, 155, 254, 0.22),
    0 4px 6px rgba(97, 155, 254, 0.12);
}

a.ay-product-card {
  text-decoration: none;
  color: inherit;
}

.ay-product-card__media {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 185px;
  overflow: hidden;
  background: var(--ay-bg-light, #FAFAFA);
  border-radius: 12px;
}

.ay-product-card__image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.ay-product-card__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 16px;
  color: var(--ay-text-secondary, #737373);
  background:
    linear-gradient(135deg, rgba(0, 45, 113, 0.04), rgba(255, 111, 28, 0.06)),
    var(--ay-bg-light, #FAFAFA);
  text-align: center;
}

.ay-product-card__placeholder[hidden] {
  display: none !important;
}

.ay-product-card__placeholder-icon {
  width: 40px;
  height: 40px;
  flex: none;
  opacity: 0.7;
}

.ay-product-card__placeholder-text {
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
}

.ay-product-card__body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  padding-bottom: 8px;
}

.ay-product-card__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.ay-product-card__title {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 28px;
  color: var(--ay-text-title, #302E2E);
  text-align: center;
}

.ay-product-card__desc {
  margin: 0;
  font-weight: 500;
  font-size: 12px;
  line-height: 24px;
  color: var(--ay-text-secondary, #737373);
  text-align: start;
}

.ay-product-card--oos .ay-product-card__body {
  gap: 17px;
}

.ay-product-card__body > .ay-badge {
  align-self: flex-start;
}

/* ----- Price ----- */

.ay-price {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  width: 100%;
  font-family: var(--ay-font-family, dana, IRANSansfanum, Tahoma, sans-serif);
  font-weight: 500;
  text-align: start;
}

.ay-price__current {
  font-size: 16px;
  line-height: 28px;
  color: var(--ay-text-title, #302E2E);
}

.ay-price__original {
  font-size: 14px;
  line-height: 28px;
  color: var(--ay-text-secondary, #737373);
  text-decoration: line-through;
}

.ay-price--single {
  justify-content: flex-end;
}

.ay-price--single .ay-price__original {
  display: none;
}