/* =====================================================
   Saste Tools — Product & Category Cards (Luxury polish)
   Load after variables.css + animations.css + style.css.
   ===================================================== */

/* ---------- Category cards ---------- */
.category-card {
  transition: var(--transition);
}
.category-card:hover {
  border-color: var(--gold) !important;
  background: var(--card-bg-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

/* ---------- Product cards ---------- */
.product-card {
  position: relative;
  transition: var(--transition);
}
.product-card:hover {
  transform: translateY(-6px);
  border-color: var(--card-border-hover);
  box-shadow: var(--shadow-card);
}

/* Ribbon badge: Bestseller / Hot / Trending / Popular */
.product-ribbon {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #111;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.product-ribbon.badge-bestseller { background: linear-gradient(135deg, var(--gold-light), var(--gold)); }
.product-ribbon.badge-hot        { background: linear-gradient(135deg, #ff9a5a, #ff5b5b); color: #1a0a05; }
.product-ribbon.badge-trending   { background: linear-gradient(135deg, #c084fc, #ec4899); color: #fff; }
.product-ribbon.badge-popular    { background: linear-gradient(135deg, #6ee7b7, #34d399); color: #062018; }

/* Out-of-stock ribbon (top-right, only shown when actually out of stock) */
.product-stock-badge.stock-out {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  background: rgba(255,107,107,0.15);
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
}
/* In-stock status is the default assumption — no ribbon clutter for it */
.product-stock-badge.stock-in { display: none; }