
/* ── SHOP — live products ── */
.shop__loading { color: var(--white-dim); font-size: 0.85rem; letter-spacing: 0.1em; padding: 3rem 0; text-align: center; }
.shop__empty   { color: var(--white-dim); font-size: 0.85rem; padding: 3rem 0; text-align: center; }
.shop__cta     { text-align: center; margin-top: 3rem; }
.product-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: rgba(201,168,76,0.2); background: var(--black-card); }
.product-card__price { font-family: var(--ff-display); font-size: 1.1rem; color: var(--gold); margin-top: 0.4rem; }

/* ── ORDER MODAL (shop page only) ── */
.order-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.order-modal.open { opacity: 1; pointer-events: all; }
.order-modal__backdrop { position: absolute; inset: 0; background: rgba(5,5,5,0.85); }
.order-modal__box {
  position: relative; z-index: 1;
  background: var(--black-soft); border: 1px solid rgba(201,168,76,0.2);
  padding: 2.5rem; width: 100%; max-width: 480px; max-height: 90vh;
  overflow-y: auto; margin: 1rem;
  animation: fadeUp 0.3s ease both;
}
.order-modal__close {
  position: absolute; top: 1rem; right: 1.2rem;
  background: none; border: none; color: var(--white-dim);
  font-size: 1.2rem; cursor: pointer; transition: color var(--transition);
}
.order-modal__close:hover { color: var(--gold); }
.order-modal__title { font-family: var(--ff-display); font-size: 1.6rem; font-weight: 300; color: var(--white); margin: 0.5rem 0 0.3rem; }
.order-modal__price { font-family: var(--ff-display); font-size: 1.2rem; color: var(--gold); margin-bottom: 1.5rem; }
.order-modal__form { display: flex; flex-direction: column; gap: 0.9rem; }
.order-modal__qty {
  display: flex; align-items: center; gap: 1rem;
  border: 1px solid rgba(201,168,76,0.15); background: var(--black-card);
  padding: 0.8rem 1.2rem;
}
.qty-btn {
  background: none; border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold); width: 28px; height: 28px;
  font-size: 1.1rem; cursor: pointer; transition: var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.qty-btn:hover { background: rgba(201,168,76,0.1); border-color: var(--gold); }
#qtyValue { font-family: var(--ff-display); font-size: 1.2rem; color: var(--white); min-width: 24px; text-align: center; }
