/* ============================================================================
   THE STORE — player commerce chrome (LEG3+5).
   Buy (primary sale) + Market (secondary listings) reuse the explore.css grid
   (.ex-grid / .ex-card / .ex-frame / .ex-img / .ex-cap). This sheet adds only
   the commerce surface: tabs, price chip, remaining, and the BUY/LIST/DELIST/
   APPROVE actions. Palette tokens from threshold.css. Everything ships DARK on
   null addresses (the register states below).
   ========================================================================= */

/* --- connect / refresh (treasury lineage) --- */
.st-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 2vh; flex-wrap: wrap; }
.st-actions[hidden] { display: none; }
.st-connect {
  font-family: var(--display, "Cinzel", serif); font-weight: 600; letter-spacing: 0.08em;
  font-size: 0.9rem; color: var(--gold-burnished, #d9a84e); cursor: pointer;
  padding: 10px 22px; border-radius: 2px; border: 1px solid var(--gold-aged, #6b5426);
  background: rgba(232, 200, 116, 0.06); transition: color 150ms, border-color 150ms, background 150ms;
}
.st-connect:hover, .st-connect:focus-visible {
  color: var(--flame-core, #ffc96b); border-color: var(--gold-hairline, #8a6f3a); background: rgba(232, 200, 116, 0.12);
}
.st-connect:disabled { opacity: 0.5; cursor: default; }
.st-refresh {
  width: 34px; height: 34px; border-radius: 50%; line-height: 1; cursor: pointer;
  color: var(--gold-burnished, #d9a84e); border: 1px solid var(--gold-aged, #6b5426);
  background: rgba(232, 200, 116, 0.06); font-size: 1rem; transition: color 150ms, border-color 150ms;
}
.st-refresh:hover { color: var(--flame-core, #ffc96b); border-color: var(--gold-hairline, #8a6f3a); }
.st-refresh[hidden], .st-connect[hidden] { display: none; }
.st-wallet { font-family: var(--text, "EB Garamond", serif); font-size: 0.82rem; color: var(--gold-aged, #6b5426); }
.st-wallet b { color: var(--gold-burnished, #d9a84e); font-weight: 600; }

/* --- tabs (Buy | Market) --- */
.st-tabs { display: flex; justify-content: center; gap: 8px; margin: 0 auto 2.4vh; }
.st-tab {
  font-family: var(--display, "Cinzel", serif); font-weight: 600; letter-spacing: 0.07em; font-size: 0.82rem;
  color: var(--gold-aged, #6b5426); cursor: pointer; padding: 8px 20px; border-radius: 2px;
  border: 1px solid transparent; background: transparent; transition: color 150ms, border-color 150ms;
}
.st-tab[aria-selected="true"] { color: var(--flame-core, #ffc96b); border-color: var(--gold-aged, #6b5426); background: rgba(232, 200, 116, 0.06); }
.st-tab:hover { color: var(--gold-burnished, #d9a84e); }
.st-panel[hidden] { display: none; }

/* --- register / dark states --- */
.st-register {
  max-width: 40rem; margin: 3vh auto; padding: 22px 20px; text-align: center;
  border: 1px solid var(--gold-aged, #6b5426); border-radius: 3px;
  background: linear-gradient(180deg, rgba(26, 22, 17, 0.55), rgba(11, 10, 8, 0.5));
  font-family: var(--text, "EB Garamond", serif); color: var(--gold-aged, #6b5426);
}
.st-register b { font-family: var(--display, "Cinzel", serif); color: var(--gold-burnished, #d9a84e); display: block; margin-bottom: 6px; letter-spacing: 0.05em; }
.st-register.bad b { color: var(--vermilion, #b33a1f); }

/* --- the price chip + remaining, laid over the frame bottom --- */
.st-frame-wrap { position: relative; }
.st-chip {
  position: absolute; left: 6px; bottom: 6px; z-index: 2;
  font-family: var(--display, "Cinzel", serif); font-size: 0.7rem; letter-spacing: 0.03em;
  color: var(--flame-core, #ffc96b); background: rgba(11, 10, 8, 0.82);
  border: 1px solid var(--gold-aged, #6b5426); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.st-chip.muted { color: var(--gold-aged, #6b5426); }
.st-chip.bad { color: var(--vermilion, #b33a1f); }
.st-remaining {
  font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--gold-aged, #6b5426); padding: 0 0.5rem 0.2rem;
}
.st-remaining.soldout { color: var(--vermilion, #b33a1f); }
.st-seller { font-size: 0.6rem; color: var(--gold-aged, #6b5426); padding: 0 0.5rem 0.2rem; font-family: var(--text, "EB Garamond", serif); }

/* --- card action buttons (BUY / LIST / DELIST / APPROVE) --- */
.st-card-actions { display: flex; gap: 6px; padding: 0.1rem 0.5rem 0.55rem; }
.st-btn {
  flex: 1 1 auto; font-family: var(--display, "Cinzel", serif); font-weight: 600; letter-spacing: 0.05em;
  font-size: 0.72rem; cursor: pointer; padding: 7px 8px; border-radius: 2px;
  color: var(--gold-burnished, #d9a84e); border: 1px solid var(--gold-aged, #6b5426);
  background: rgba(232, 200, 116, 0.06); transition: color 150ms, border-color 150ms, background 150ms;
}
.st-btn:hover:not(:disabled), .st-btn:focus-visible:not(:disabled) {
  color: var(--flame-core, #ffc96b); border-color: var(--gold-hairline, #8a6f3a); background: rgba(232, 200, 116, 0.12);
}
.st-btn:disabled { opacity: 0.4; cursor: default; }
.st-btn.danger { color: var(--vermilion, #b33a1f); border-color: rgba(179, 58, 31, 0.5); }
.st-btn.danger:hover:not(:disabled) { color: #d8623f; border-color: var(--vermilion, #b33a1f); background: rgba(179, 58, 31, 0.1); }
.st-msg { font-size: 0.66rem; padding: 0 0.5rem 0.5rem; min-height: 0.9rem; font-family: var(--text, "EB Garamond", serif); color: var(--gold-aged, #6b5426); }
.st-msg.ok { color: var(--flame-core, #ffc96b); }
.st-msg.bad { color: var(--vermilion, #b33a1f); }

/* --- list dialog (price + 95/5 disclosure) --- */
.st-dialog-back {
  position: fixed; inset: 0; z-index: 120; background: rgba(6, 5, 3, 0.72);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.st-dialog-back[hidden] { display: none; }
.st-dialog {
  max-width: 24rem; width: 100%; border: 1px solid var(--gold-hairline, #8a6f3a); border-radius: 4px;
  background: linear-gradient(180deg, rgba(28, 24, 18, 0.98), rgba(14, 12, 9, 0.98)); padding: 20px;
  font-family: var(--text, "EB Garamond", serif); color: var(--parchment, #e8dcc0);
}
.st-dialog h3 { font-family: var(--display, "Cinzel", serif); color: var(--gold-burnished, #d9a84e); letter-spacing: 0.05em; margin: 0 0 4px; font-size: 1rem; }
.st-dialog .st-dsub { font-size: 0.82rem; color: var(--gold-aged, #6b5426); margin: 0 0 14px; }
.st-dialog label { display: block; font-size: 0.78rem; color: var(--gold-aged, #6b5426); margin: 0 0 5px; letter-spacing: 0.03em; }
.st-dialog input {
  width: 100%; box-sizing: border-box; font-family: var(--text, "EB Garamond", serif); font-size: 0.95rem;
  color: var(--flame-core, #ffc96b); background: rgba(11, 10, 8, 0.7);
  border: 1px solid var(--gold-aged, #6b5426); border-radius: 2px; padding: 9px 11px;
}
.st-fee {
  margin: 12px 0 4px; padding: 11px 12px; border: 1px dashed var(--gold-aged, #6b5426); border-radius: 3px;
  font-size: 0.8rem; line-height: 1.5; color: var(--parchment, #e8dcc0); background: rgba(232, 200, 116, 0.04);
}
.st-fee b { color: var(--flame-core, #ffc96b); }
.st-fee .st-fee-note { display: block; margin-top: 6px; font-size: 0.72rem; color: var(--gold-aged, #6b5426); }
.st-dialog-actions { display: flex; gap: 10px; margin-top: 16px; }
.st-dialog-actions .st-btn { padding: 9px 12px; font-size: 0.8rem; }

/* ============ S-STORE-UX-1: faction filter + card zoom ============ */
.st-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 auto 2.2vh; }
.st-filter-chip {
  font-family: var(--display, "Cinzel", serif); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  background: transparent; color: var(--gold-aged, #6b5426); cursor: pointer; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--gold-aged, #6b5426);
}
.st-filter-chip.on { color: var(--flame-core, #ffc96b); border-color: var(--gold-hairline, #8a6f3a); background: rgba(232, 200, 116, 0.1); }
.st-filter-chip:hover:not(.on) { color: var(--gold-burnished, #d9a84e); }

/* the card art is the zoom trigger */
.st-zoomable { cursor: zoom-in; }
.st-zoomable:focus-visible { outline: 2px solid var(--gold-hairline, #8a6f3a); outline-offset: 2px; }

/* the ZOOM lightbox: large 720 art (the powers) + name/rarity/price/supply + the same buy flow */
.st-zoom {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(6, 4, 2, 0.86); padding: 3vh 3vw; opacity: 0; transition: opacity 0.18s ease;
}
.st-zoom.show { opacity: 1; }
.st-zoom[hidden] { display: none; }
.st-zoom-inner { position: relative; display: flex; gap: 22px; align-items: center; max-width: 900px; width: 100%; max-height: 94vh; }
.st-zoom-close {
  position: absolute; top: -6px; right: -6px; z-index: 2; width: 40px; height: 40px; line-height: 1;
  font-size: 1.6rem; background: rgba(6, 4, 2, 0.7); color: var(--gold-burnished, #d9a84e);
  border: 1px solid var(--gold-aged, #6b5426); border-radius: 999px; cursor: pointer;
}
.st-zoom-close:hover { color: var(--flame-core, #ffc96b); border-color: var(--gold-hairline, #8a6f3a); }
.st-zoom-art { flex: 1 1 58%; display: flex; align-items: center; justify-content: center; min-width: 0; }
.st-zoom-img { max-width: 100%; max-height: 90vh; width: auto; height: auto; border-radius: 8px; display: block; }
.st-zoom-info {
  flex: 1 1 42%; min-width: 0; display: flex; flex-direction: column; gap: 8px;
  font-family: var(--text, "EB Garamond", serif); color: var(--gold-aged, #6b5426);
}
.st-zoom-name { font-family: var(--display, "Cinzel", serif); font-size: 1.4rem; color: var(--flame-core, #ffc96b); letter-spacing: 0.04em; }
.st-zoom-sub { font-size: 0.9rem; color: var(--gold-burnished, #d9a84e); }
.st-zoom-price { font-size: 1.1rem; color: var(--gold-burnished, #d9a84e); margin-top: 4px; }
.st-zoom-price b { color: var(--flame-core, #ffc96b); }
.st-zoom-supply { font-size: 0.8rem; color: var(--gold-aged, #6b5426); }
.st-zoom-info .st-card-actions { margin-top: 8px; }

/* phone: stack art over info; art fits the viewport, no page overflow */
@media (max-width: 640px) {
  .st-zoom { padding: 2vh 3vw; }
  .st-zoom-inner { flex-direction: column; gap: 12px; align-items: stretch; max-height: 96vh; overflow-y: auto; }
  .st-zoom-art { flex: 0 0 auto; }
  .st-zoom-img { max-height: 62vh; }
  .st-zoom-info { flex: 0 0 auto; align-items: center; text-align: center; }
  .st-zoom-close { top: 2px; right: 2px; }
}

/* ============================================================================
   S-BUNDLE-1 — THE BUNDLE TILE (the Torana + 500 DYC). Reuses the page's own
   vocabulary: .st-btn for every control (the class the wave-card Buy/List/Delist
   already wear — S-BUNDLE-1 wrote .st-act, which is defined in no stylesheet, so
   all four bundle controls rendered as raw browser buttons), .st-msg / .ok / .bad
   for act voice,
   .torana-ph (rite.html's) as the art's onerror placeholder. Mobile-first: the
   card stacks under 560px and sits art-left from there up.
   ========================================================================= */
.b-sec { max-width: 46rem; margin: 0 auto 3vh; }
.b-head-row { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-bottom: 1.4vh; }
.b-sec-title { font-family: "Cinzel", Georgia, serif; font-size: clamp(1.05rem, 3.6vw, 1.4rem); letter-spacing: .1em; text-transform: uppercase; margin: 0; color: var(--gold, #e8c874); }
.b-host { min-height: 6rem; }

/* S-BUNDLE-4 — TWO COLUMNS: the PICTURE (the Torana card, then the coin line) and the words. On a phone the picture
   goes FIRST and the words beneath it, centred; the card is CAPPED so the price still clears the fold (the card
   scales, the price never moves — owner's rule). From 560px they stand side by side. */
.b-card { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; padding: 1rem; border: 1px solid rgba(232, 200, 116, .28); border-radius: 10px; background: rgba(8, 5, 3, .5); backdrop-filter: blur(3px); }
@media (min-width: 560px) { .b-card { grid-template-columns: minmax(160px, 32%) 1fr; gap: 1.6rem; padding: 1.4rem; align-items: start; } }

.b-pic { display: flex; flex-direction: column; align-items: center; gap: .55rem; }
@media (min-width: 560px) { .b-pic { align-items: flex-start; } }

.b-art { position: relative; width: 100%; aspect-ratio: 2 / 3; max-width: 160px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(232, 200, 116, .22); background: rgba(4, 3, 1, .6); }
@media (min-width: 560px) { .b-art { max-width: 240px; } }

/* the coin line: "+ [the DYC mark] 500 DYC" — the site's own 96px coin, the one rite.html serves */
.b-coinline { display: flex; align-items: center; gap: .4rem; font-family: "Cinzel", Georgia, serif; font-size: 1.15rem; line-height: 1; color: var(--hi, #f4e3ab); }
.b-coin-plus { font-size: 1.25rem; opacity: .85; }
.b-coin { width: 30px; height: 30px; display: block; }
.b-coin-n { white-space: nowrap; }
@media (min-width: 560px) { .b-coinline { font-size: 1.3rem; } .b-coin { width: 34px; height: 34px; } }
.b-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.b-art .torana-ph { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; }

.b-body { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.b-title { font-family: "Cinzel", Georgia, serif; font-size: 1rem; letter-spacing: .06em; color: var(--gold, #e8c874); text-transform: uppercase; }

/* S-BUNDLE-3 (F1/F2) — THE TWO HERO NUMBERS: what you get and what it costs, at the same weight and the same gold.
   The price used to be body text in the muted voice under the sales line, so the tile shouted the DYC and whispered
   the price. On a narrow screen they STACK PRICE FIRST (column-reverse); from 560px they stand side by side, the DYC
   figure first. */
.b-hero { font-family: "Cinzel", Georgia, serif; font-size: 1.5rem; line-height: 1; color: var(--hi, #f4e3ab); }
.b-hero-price { display: flex; flex-direction: column; gap: .15rem; }
.b-hero-n { font: inherit; }
.b-hero-s { font-family: var(--text, "EB Garamond", serif); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(240, 232, 214, .6); }
.b-p9 { color: rgba(240, 232, 214, .72); font-size: .88rem; }
.b-line { margin: .2rem 0 .1rem; font-size: .95rem; line-height: 1.5; color: rgba(240, 232, 214, .9); }
.b-price { font-size: .9rem; letter-spacing: .04em; color: rgba(240, 232, 214, .72); }
.b-commit { margin: .3rem 0 .1rem; font-size: .86rem; line-height: 1.5; color: rgba(240, 232, 214, .68); }

.b-stock { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.b-stock.ok { color: #7fbf8a; }
.b-stock.bad { color: #d98c8c; }
.b-stock.busy { color: rgba(240, 232, 214, .55); text-transform: none; letter-spacing: 0; font-style: italic; }
.b-head { font-size: .86rem; color: rgba(240, 232, 214, .8); }
.b-cap { margin: .2rem 0; font-size: .88rem; line-height: 1.5; color: #d9b98c; }

.b-assets, .b-packs { display: flex; gap: .5rem; flex-wrap: wrap; }
.b-asset, .b-pack { font: inherit; font-size: .82rem; padding: .35rem .7rem; border-radius: 6px; cursor: pointer; color: rgba(240, 232, 214, .8); background: rgba(0, 0, 0, .35); border: 1px solid rgba(232, 200, 116, .22); }
.b-asset.on, .b-pack.on { color: #120c04; background: var(--gold, #e8c874); border-color: var(--gold, #e8c874); }
.b-pack { min-width: 2.6rem; text-align: center; }

/* S-BUNDLE-2 (F1) — the chip is the CHOICE ("Pay with USDC"), the balance is small print beneath it. A chip the
   wallet cannot afford for THIS FACE is dimmed, unselectable, and says so before the tap. */
.b-asset { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; text-align: left; line-height: 1.25; }
.b-asset-l { font-size: .82rem; letter-spacing: .02em; }
.b-asset-b { font-size: .68rem; opacity: .68; }
.b-asset.on .b-asset-b { opacity: .8; }
.b-asset.short { opacity: .5; cursor: default; }
.b-asset.short .b-asset-b { color: var(--vermilion, #b33a1f); opacity: 1; }

/* S-BUNDLE-2 (F3) — .st-btn is built for the card grid's flex row (flex: 1 1 auto); the bundle's controls stand
   alone, and one of them is an anchor. */
.b-buy, .b-topup, .b-connect, .b-door { flex: 0 0 auto; display: inline-block; text-decoration: none; padding: 9px 14px; font-size: .78rem; }

.b-buy, .b-topup, .b-connect, .b-door { align-self: start; margin-top: .45rem; }
.b-receipt { display: flex; flex-direction: column; gap: .45rem; padding: .9rem; border-radius: 8px; border: 1px solid rgba(127, 191, 138, .35); background: rgba(20, 40, 24, .3); }
.b-rc-h { font-family: "Cinzel", Georgia, serif; font-size: 1.05rem; color: #a8dcae; }
.b-rc-l { font-size: .9rem; color: rgba(240, 232, 214, .85); }
.b-rc-tx { font-size: .8rem; color: rgba(232, 200, 116, .8); }