/* ============================================================
   Project Goldie — small additions on top of the mockup's design system
   (styles.css + goldie.css are ported verbatim and stay untouched; this
   file only adds the handful of bits the real build needs that the
   mockup didn't already have a class for). Brand tokens/vars all come
   from styles.css :root — nothing here invents a new color.
   ============================================================ */

/* Product image placeholder — used only when the fallback chain in
   x-storefront.product-image (exact slug → base single's photo) comes up
   empty. Constrained so it can never overflow/overlap a sibling element —
   the same box lives in a bare <img>'s spot inside cards, thumbs and the
   PDP media frame, all of very different sizes. */
.product-placeholder {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 96px;
  max-height: 100%;
  background: var(--paper);
  border: 2px dashed var(--gold);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-family: "DM Sans", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;
  text-align: center;
  padding: 12px;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.card__media .product-placeholder,
.item-row .thumb .product-placeholder,
.thumb-sm.product-placeholder {
  min-height: 0;
  font-size: 0.78rem;
  padding: 8px;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Prepaid packs section — ported from mockup/shop.html's page-local <style> block. */
.pack-note { max-width: 62ch; margin: 0 auto 26px; text-align: center; }
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 880px) { .pack-grid { grid-template-columns: 1fr; } }
.pack-card__save { margin-bottom: 10px; }
.pack-card h3 { font-size: 1.18rem; margin-bottom: 2px; }
.pack-card .price { display: block; margin: 6px 0 4px; }
.pack-card .buy-opt__meta { margin-bottom: 16px; }
.note-strip { max-width: 74ch; margin: 0 auto; text-align: center; }

/* Disabled payment-method row (docs/11 item 9) — Curlec is still in
   merchant application (docs/02 "MY payments"), so these mirror
   mockup/checkout.html's .pay-opt icons for visual parity but aren't
   selectable yet. */
.pay-opt--disabled {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}