/* ==========================================================================
   MIMEON — Product card & product detail additions
   Extends mimeon-home.css. New status/availability states and a disabled
   commerce-CTA treatment — no existing rule is overridden.
   ========================================================================== */

/* ─── Product card: image fallback ─────────────────────── */
.shop-card-image.no-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-card-image-fallback {
  width: 64px;
  height: 64px;
  opacity: .28;
}

/* ─── Product card: availability badges ────────────────── */
.badge-preorder    { background: var(--cyan);  color: var(--navy); }
.badge-lowstock    { background: var(--yellow); color: #281600; }
.badge-outofstock  { background: var(--muted); color: #fff; }

/* ─── Product card: missing price ──────────────────────── */
.shop-card-price.price-tbd {
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

/* ─── Product detail: missing price ────────────────────── */
.product-price .price-tbd {
  color: var(--muted);
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-body);
}

/* ─── Compare-at (original) price, struck through ──────── */
.price-compare {
  text-decoration: line-through;
  color: var(--muted);
  font-weight: 600;
  font-size: .85em;
  margin-left: 6px;
}

/* ─── Product detail: status chips beyond "available" ──── */
.status-chip.low {
  border-color: #eab308;
  color: #92660a;
  background: rgba(234,179,8,.1);
}

.status-chip.unavailable {
  border-color: var(--muted);
  color: var(--muted);
  background: rgba(102,112,133,.08);
}

.status-chip.preorder {
  border-color: var(--cyan);
  color: #007b91;
  background: rgba(0,213,255,.1);
}

/* ─── Product detail: disabled commerce CTAs ───────────── */
.btn-cart[disabled],
.btn-fav[disabled] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Product detail: gallery fallback ─────────────────── */
.product-main-image.no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--light);
}

.product-main-image-fallback {
  width: 96px;
  height: 96px;
  opacity: .25;
}

/* ─── Related products: empty state (compact variant) ──── */
.related-section .empty-state {
  padding: 40px 24px;
  margin-top: 20px;
}