/* HOLDz account & commerce journey — 2026.08 */
.store-page .store-terminal-layout { width: var(--shell); }

.commerce-rail {
  position: relative;
  z-index: 8;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: rgba(8, 11, 14, .98);
}

.commerce-rail-inner {
  min-height: 78px;
  display: grid;
  grid-template-columns: repeat(5, minmax(108px, auto)) minmax(250px, 1fr);
  align-items: stretch;
}

.commerce-rail a,
.commerce-rail button {
  position: relative;
  min-width: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 7px;
  padding: 16px 20px;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255, .08);
  color: #9da6ae;
  background: transparent;
  text-align: left;
  transition: color .2s ease, background .2s ease;
}

.commerce-rail a:hover,
.commerce-rail button:hover,
.commerce-rail .is-current {
  color: #fff;
  background: rgba(255, 255, 255, .035);
}

.commerce-rail .is-current::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -1px;
  left: 18px;
  height: 2px;
  background: var(--store-cyan, #65e7df);
}

.commerce-rail small,
.commerce-rail strong { display: block; }
.commerce-rail small { color: #59636c; font: 750 7px/1 var(--mono); letter-spacing: .13em; }
.commerce-rail strong { font-size: 12px; line-height: 1; }

.commerce-rail-inner > p {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  gap: 5px 10px;
  margin: 0;
  padding: 14px 20px;
  border-inline: 1px solid rgba(255, 255, 255, .08);
}

.commerce-rail-inner > p i {
  grid-row: 1 / 3;
  align-self: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #65e7df;
  box-shadow: 0 0 14px rgba(101, 231, 223, .42);
}

.commerce-rail-inner > p span {
  color: #59636c;
  font: 750 7px/1 var(--mono);
  letter-spacing: .12em;
}

.commerce-rail-inner > p b {
  overflow: hidden;
  color: #cbd2d7;
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-page .profile-hero { min-height: 450px; }
.account-page .profile-hero-inner { padding-bottom: 64px; }

.account-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.account-hero-actions a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  color: #dce1e5;
  background: rgba(255, 255, 255, .035);
  font-size: 11px;
  font-weight: 750;
}

.account-hero-actions a:last-child {
  border-color: rgba(255, 181, 77, .35);
  color: #ffe0aa;
  background: rgba(255, 181, 77, .07);
}

.account-page .profile-dashboard {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 14px;
}

.account-page .gamecard { grid-column: 1; }
.account-page .wallet { grid-column: 2; grid-template-columns: 1fr; }
.account-page .purchase-history-panel,
.account-page .referral-panel,
.account-page .mailbox-panel,
.account-page .profile-actions { grid-column: 1 / -1; }

.purchase-history-panel {
  border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(145deg, rgba(101, 231, 223, .035), transparent 42%), #0d1115;
}

.purchase-history-head {
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

.purchase-history-head p {
  color: #65e7df;
  font: 750 8px/1 var(--mono);
  letter-spacing: .14em;
}

.purchase-history-head h2 { margin-top: 9px; font-size: 27px; line-height: 1; letter-spacing: -.04em; }
.purchase-history-head div > span { display: block; margin-top: 10px; color: #8f98a0; font-size: 12px; }
.purchase-history-head > a { flex: none; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .13); color: #d8dde1; font-size: 10px; font-weight: 750; }
.purchase-history-head > a span { color: #65e7df; }

.purchase-history-list { display: grid; }

.profile-order {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 94px;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.profile-order:last-child { border-bottom: 0; }
.profile-order small { display: block; color: #59636c; font: 700 8px/1 var(--mono); }
.profile-order time { display: block; margin-top: 8px; color: #9ba4ac; font-size: 10px; }
.profile-order h3 { overflow: hidden; font-size: 14px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.profile-order p { margin-top: 7px; color: #7f8991; font-size: 10px; }
.profile-order > strong { color: #ffd38d; font: 800 14px/1 var(--mono); white-space: nowrap; }

.purchase-history-empty { padding: 34px 28px; }
.purchase-history-empty strong { color: #d8dde1; font-size: 14px; }
.purchase-history-empty p { margin-top: 7px; color: #77818a; font-size: 11px; }

@media (max-width: 1120px) {
  .commerce-rail { overflow-x: auto; }
  .commerce-rail-inner { width: max-content; min-width: 100%; grid-template-columns: repeat(5, 130px) minmax(280px, 1fr); }
}

@media (max-width: 900px) {
  .account-page .profile-dashboard { grid-template-columns: 1fr; }
  .account-page .gamecard,
  .account-page .wallet { grid-column: 1; }
  .account-page .wallet { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .commerce-rail-inner { grid-template-columns: repeat(5, 116px) 260px; }
  .commerce-rail a,
  .commerce-rail button { padding-inline: 14px; }
  .account-page .profile-hero { min-height: 430px; }
  .account-hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .account-hero-actions a { justify-content: center; }
  .account-hero-actions a:last-child { grid-column: 1 / -1; }
  .account-page .wallet { grid-template-columns: 1fr; }
  .purchase-history-head { align-items: flex-start; flex-direction: column; padding: 22px 20px; }
  .profile-order { grid-template-columns: 1fr auto; gap: 12px; padding: 18px 20px; }
  .profile-order > div:first-child { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; }
  .profile-order time { margin-top: 0; }
}