/* ============================================================================
   heroes-store.css - Heroes Store page. Page prefix: sh-
   Rides on ez42-ui.css + trade.css + my-heroes.css (shared big flip card:
   .mh-wide .mh-grid .mh-stack .mh-flip ...). Geometry only, tokens only.
   ========================================================================= */

/* ---- header: balance pill + my heroes --------------------------------------- */
.sh-balance { display: inline-flex; align-items: center; gap: var(--space-2);
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--surface); border-radius: var(--radius-pill); padding: 0.55rem 1.1rem;
  font-weight: var(--fw-bold); white-space: nowrap; }
.sh-balance strong { font-size: 1.15rem; font-weight: var(--fw-black); font-variant-numeric: tabular-nums; }
.sh-myheroes { background: transparent; color: var(--surface); border-color: rgba(255, 255, 255, 0.6); }
.sh-myheroes:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); color: var(--surface); border-color: var(--surface); }
/* beats trade.css ".tr-page a.ez-btn--outline" (dark text on white) */
.tr-page a.ez-btn.sh-myheroes, .tr-page a.ez-btn.sh-myheroes:hover { background: transparent; color: var(--surface);
  border-color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.tr-page a.ez-btn.sh-myheroes:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--surface); }

/* ---- refresh countdown -------------------------------------------------------- */
.sh-countdown { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--space-4) var(--space-5); margin-block-end: var(--space-5); }
.sh-countdown__text { display: flex; flex-direction: column; gap: var(--space-1); }
.sh-countdown__title { font-size: var(--fs-h3); font-weight: var(--fw-black); color: var(--text); }
.sh-countdown__sub { font-size: var(--fs-body-sm); color: var(--text-muted); }
.sh-timer { display: flex; align-items: center; gap: var(--space-2); direction: ltr; }
.sh-timer__unit { display: flex; flex-direction: column; align-items: center; min-inline-size: 3.6rem;
  background: var(--purple-tint); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.sh-timer__num { font-size: 1.6rem; font-weight: var(--fw-black); color: var(--purple-dark);
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.sh-timer__label { font-size: var(--fs-footnote); color: var(--text-muted); direction: rtl; }
.sh-timer__sep { font-size: 1.4rem; font-weight: var(--fw-black); color: var(--purple); }
.sh-refreshing { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--fw-bold); color: var(--purple-dark); }

/* ---- card chips (premium chip comes from my-heroes.css .mh-premium) ------------ */
.sh-free { position: absolute; inset-block-start: var(--space-3); inset-inline-start: var(--space-3); z-index: 1;
  display: inline-flex; align-items: center; gap: var(--space-1); background: var(--success-border); color: var(--surface);
  border-radius: var(--radius-pill); padding: 0.25rem 0.75rem; font-size: var(--fs-body-sm); font-weight: var(--fw-bold);
  box-shadow: 0 0 0 3px var(--surface), var(--shadow-card); }
.sh-owned { position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); z-index: 1;
  display: inline-flex; align-items: center; gap: var(--space-1); background: var(--surface); color: var(--success-text);
  border: 1px solid var(--success-border); border-radius: var(--radius-pill); padding: 0.2rem 0.7rem;
  font-size: var(--fs-body-sm); font-weight: var(--fw-bold); box-shadow: var(--shadow-card); }

/* ---- tile: flip card + price/buy bar framed as ONE unit (TRADE-B3-FIX1) ---------- */
.sh-tile { gap: 0; background: var(--surface); border: 2px solid var(--border);
  border-radius: calc(var(--radius-lg) + 4px); box-shadow: var(--shadow-card); overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.sh-tile:hover, .sh-tile:focus-within { border-color: var(--purple); box-shadow: var(--shadow-hover); }
.sh-tile .mh-flip { border-radius: 0; }
.sh-tile .mh-flip:focus-visible { outline-offset: -3px; }
.sh-tile .mh-flip__face { border-radius: 0; box-shadow: none; }
.sh-tile .mh-flip__front { border: none; }
.sh-tile .mh-flip:hover .mh-flip__inner { transform: none; }
.sh-tile.is-flipped .mh-flip__inner { transform: rotateY(180deg); }

/* price + buy bar = the tile's footer */
.sh-buy { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  background: var(--purple-tint); border-block-start: 1px solid var(--tip-border);
  padding: var(--space-3) var(--space-4); }
.sh-price { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 1.2rem;
  font-weight: var(--fw-black); color: var(--text); font-variant-numeric: tabular-nums; }
.sh-price--free { color: var(--success-text); }
.sh-buy .ez-btn { min-inline-size: 7rem; }
.sh-buy .ez-btn:disabled { opacity: 1; background: var(--border-soft); color: var(--text-muted);
  border-color: var(--border); box-shadow: none; }

/* ---- purchase modal ------------------------------------------------------------ */
.sh-modal-hero { display: flex; align-items: center; gap: var(--space-4); background: var(--bg);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-block-end: var(--space-4); }
.sh-modal-hero .tr-thumb { inline-size: 88px; block-size: 88px; background: var(--surface); }
.sh-modal-hero__name { margin: 0 0 var(--space-2); font-size: var(--fs-h3); font-weight: var(--fw-black); color: var(--text); }
.sh-modal-hero__price { font-size: 1.35rem; font-weight: var(--fw-black); color: var(--purple-dark); }
.sh-modal-hero__price--free { color: var(--success-text); }
.sh-balance-box { background: var(--bg); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-body-sm); color: var(--text-muted); }
.sh-balance-box__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sh-balance-box__row strong { color: var(--text); font-variant-numeric: tabular-nums; }
.sh-balance-box__row + .sh-balance-box__row { border-block-start: 1px dashed var(--border); padding-block-start: var(--space-2); }
.sh-balance-box__after { color: var(--success-text) !important; }

@media (max-width: 600px) {
  .sh-countdown { flex-direction: column; align-items: stretch; text-align: center; }
  .sh-timer { justify-content: center; gap: var(--space-2); inline-size: 100%; }
  .sh-timer__sep { display: none; }
  .sh-timer__unit { flex: 1 1 0; min-inline-size: 0; padding: var(--space-2) var(--space-1); }
  .sh-timer__num { font-size: 1.3rem; }
  .tr-page .ez-hero__actions { flex-direction: column; }
  .sh-balance { justify-content: center; }
}