/* ===== Product Cards — Sold Out Badge & States ===== */
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.product-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr;
  box-shadow:var(--shadow-soft);
  transition:transform var(--fast) var(--easing), box-shadow var(--fast) var(--easing);
  position:relative;
}
.product-card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 54px rgba(0,0,0,.40);
}

.product-card .media{
  position:relative;
  aspect-ratio: 4/3;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--border);
}
.product-card .media img{width:100%;height:100%;object-fit:cover}

.product-card .content{padding:12px;display:grid;gap:8px}
.product-card .title{margin:0;font-size:1.02rem;line-height:1.35}
.product-card .price{display:flex;align-items:baseline;gap:8px}
.product-card .price .current{font-weight:800}
.product-card .price .old{color:var(--text-dim);text-decoration:line-through}

/* Badge: نفد */
.badge.badge-sold{
  position:absolute; inset:10px auto auto 10px;
  z-index:2;
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.3px;
  color:#2a2520;
  background:linear-gradient(135deg,#ffe6b0,#c59d5f);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 6px 18px rgba(197,157,95,.28);
}

/* Dim when sold out */
.product-card.is-sold .media{opacity:.55; filter:grayscale(.3)}
.product-card.is-sold .content .btn{opacity:.65; pointer-events:none}

/* Small “نفد” ribbon alternative (optional) */
.product-card .ribbon{
  position:absolute; right:-36px; top:12px; width:160px; text-align:center;
  transform:rotate(35deg);
  background:linear-gradient(135deg,#7a1d1d,#c23c3c);
  color:#fff; font-weight:700; padding:6px 0; box-shadow:0 8px 24px rgba(0,0,0,.35);
}