/* Shop (/shop/) to the Wardrobe / Profile / Community standard: dark navy panels,
   ASM blue + violet accents, rarity-toned product cards, bold condensed uppercase
   headings. Mobile first (375px phones); the portal rail takes 245px from 751px,
   so wide layouts start at 1180px. Every rule is scoped to the shop page.
   The crate showcase markup and its base styles live in crates.js / crates.css;
   this file only re-skins its container and layout with shop-scoped selectors. */

body[data-page="shop"] {
  --shop-blue: #f2f2f0;
  --shop-blue-hover: #ffffff;
  --shop-blue-ink: #0b0b0c;
  --shop-violet: #e8e8e6;
  --shop-violet-hover: #ffffff;
  --shop-violet-ink: #0b0b0c;
  --shop-navy: #161616;
  --shop-navy-deep: #131313;
  --shop-stage: #1d1d1d;
  --shop-line: #3a3a3a;
  --shop-line-strong: #535353;
  --shop-ink: #f4f4f4;
  --shop-ink-soft: #c9c9c9;
  --shop-ink-dim: #a1a1a1;
  --shop-ease: cubic-bezier(.2, .7, .2, 1);
  --tone: var(--rarity-common);
  background: #0d0d0d;
  color: var(--shop-ink);
}
body[data-page="shop"] .portal-main { max-width: 1240px; overflow-x: clip; }

/* Shared type + controls ---------------------------------------------------- */
body[data-page="shop"] :is(h1, h2, h3, h4) { font-weight: 800; letter-spacing: -.035em; line-height: 1; text-transform: uppercase; }
body[data-page="shop"] .eyebrow { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #bcbcbc; }
body[data-page="shop"] :is(a, button, input, select, summary):focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
body[data-page="shop"] .button { min-height: 44px; padding: 12px 18px; border-radius: 9px; border-color: var(--shop-line); font-size: 11px; font-weight: 700; letter-spacing: .08em; white-space: normal; text-align: center; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s var(--shop-ease); }
body[data-page="shop"] .button:hover { border-color: var(--shop-blue); background: rgba(154, 154, 154, .08); }
body[data-page="shop"] .button.filled { background: var(--shop-blue); border-color: var(--shop-blue); color: var(--shop-blue-ink); }
body[data-page="shop"] .button.filled:hover { background: var(--shop-blue-hover); border-color: var(--shop-blue-hover); transform: translateY(-1px); }
body[data-page="shop"] .button:disabled, body[data-page="shop"] .button:disabled:hover { transform: none; }
.shop-icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Hero: art on a glowing navy stage, copy and calls to action ---------------- */
.shop-stage-hero { position: relative; isolation: isolate; display: grid; overflow: hidden; margin: 0 0 18px; border: 1px solid var(--shop-line); border-radius: 18px; background: radial-gradient(ellipse 80% 55% at 50% 34%, rgba(154, 154, 154, .30), transparent 70%), radial-gradient(70% 60% at 100% 0%, rgba(142, 142, 142, .24), transparent 62%), linear-gradient(180deg, #1c1c1c, var(--shop-navy-deep)); box-shadow: 0 20px 50px rgba(0, 0, 0, .3); }
.shop-stage-media { position: relative; margin: 0 -4%; }
.shop-stage-media::after { content: ''; position: absolute; left: 18%; right: 14%; bottom: 6%; height: 9%; border: 2px solid rgba(154, 154, 154, .42); border-radius: 50%; box-shadow: 0 0 40px rgba(154, 154, 154, .28), inset 0 0 24px rgba(154, 154, 154, .18); z-index: -1; }
.shop-stage-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%; }
.shop-stage-copy { position: relative; display: grid; gap: 14px; padding: 0 18px 22px; }
.shop-stage-copy .shop-eyebrow { margin: 0; color: var(--shop-blue); }
body[data-page="shop"] .shop-stage-copy h1 { margin: 0; font-size: clamp(38px, 11vw, 74px); line-height: .9; letter-spacing: -.05em; overflow-wrap: anywhere; }
/* The page name ("Shop") is the hero eyebrow, a separate line above the h1. */
body[data-page="shop"] .shop-stage-copy .shop-eyebrow { display: block; margin: 0 0 6px; color: #bcbcbc; font-size: 11px; font-weight: 700; letter-spacing: .14em; line-height: 1.3; overflow-wrap: normal; }
.shop-stage-lede { max-width: 46ch; color: var(--shop-ink-soft); font-size: 15px; line-height: 1.55; }
body[data-page="shop"] .shop-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 2px 0 0; }
body[data-page="shop"] .shop-hero-actions .button { flex: 1 1 140px; }
.shop-stage-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.shop-stage-facts li { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 6px 11px; border: 1px solid var(--shop-line); border-radius: 999px; background: rgba(255, 255, 255, .03); color: var(--shop-ink-soft); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.shop-stage-facts .shop-icon { width: 16px; height: 16px; color: #bcbcbc; }

/* How the portal is organised: compact icon rows ------------------------------ */
/* Phones: one grouped panel with divided rows. Wide screens: three cards. */
body[data-page="shop"] .shop-explainer { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 44px; overflow: hidden; border: 1px solid var(--shop-line); border-radius: 14px; background: var(--shop-navy); }
body[data-page="shop"] .shop-explainer > :is(article, a) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border: 0; border-radius: 0; background: transparent; color: inherit; transition: border-color .2s ease, transform .2s var(--shop-ease), background-color .2s ease; }
body[data-page="shop"] .shop-explainer > :is(article, a) + :is(article, a) { border-top: 1px solid var(--shop-line); }
body[data-page="shop"] .shop-explainer > a:hover { background: #1b1b1b; }
body[data-page="shop"] .shop-explainer .shop-icon { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: rgba(154, 154, 154, .14); color: #bcbcbc; }
body[data-page="shop"] .shop-explainer span { color: var(--shop-ink-dim); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
body[data-page="shop"] .shop-explainer h3 { margin: 3px 0 6px; font-size: 17px; }
body[data-page="shop"] .shop-explainer h3 b { color: #bcbcbc; font-weight: 700; }
body[data-page="shop"] .shop-explainer p { margin: 0; color: var(--shop-ink-soft); font-size: 13px; line-height: 1.5; }

/* Sections + headings --------------------------------------------------------- */
body[data-page="shop"] .shop-section { margin: 0 0 44px; scroll-margin-top: 20px; }
body[data-page="shop"] .shop-section-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
body[data-page="shop"] .shop-section-heading h2 { margin: 2px 0 8px; font-size: clamp(30px, 8vw, 48px); line-height: .92; letter-spacing: -.045em; }
body[data-page="shop"] .shop-section-heading p:not(.eyebrow) { max-width: 62ch; margin: 0; color: var(--shop-ink-soft); font-size: 14px; line-height: 1.55; }
body.portal[data-page="shop"] .shop-status-bar { display: flex; align-items: flex-start; gap: 10px; max-width: none; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--shop-line); border-radius: 12px; background: var(--shop-navy-deep); color: var(--shop-ink-soft); font-size: 13px; line-height: 1.5; text-align: left; }
body.portal[data-page="shop"] .shop-status-bar::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--shop-blue); box-shadow: 0 0 10px var(--shop-blue); }
body.portal[data-page="shop"] .shop-status-bar:empty { display: none; }
body.portal[data-page="shop"] .shop-status-bar.is-error { border-color: rgba(255, 77, 109, .45); color: #ffd3dc; }
body.portal[data-page="shop"] .shop-status-bar.is-error::before { background: #ff4d6d; box-shadow: 0 0 10px #ff4d6d; }

/* Filters: slot chips (same language as the Wardrobe categories) + tag select */
body[data-page="shop"] .shop-filters { display: grid; gap: 14px; margin: 0 0 22px; padding: 14px; border: 1px solid var(--shop-line); border-radius: 14px; background: var(--shop-navy); }
/* Reset the older portal.css filter rules (labels, spans) that this layout replaces. */
body[data-page="shop"] .shop-filters span { margin-left: 0; color: inherit; font-size: inherit; }
body[data-page="shop"] .shop-filters label { text-transform: none; letter-spacing: 0; font-weight: 400; color: inherit; }
.shop-filter-field { display: grid; gap: 8px; min-width: 0; margin: 0; }
body[data-page="shop"] .shop-filter-field[hidden] { display: none; }
body[data-page="shop"] .shop-filters .shop-filter-label { color: var(--shop-ink-dim); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.shop-chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.shop-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid #444444; border-radius: 9px; background: #212121; color: var(--shop-ink-soft); font-size: 12px; font-weight: 700; letter-spacing: .04em; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
.shop-chip:hover { border-color: var(--shop-blue); color: #fff; }
.shop-chip[aria-pressed="true"] { background: #f2f2f0; border-color: #ffffff; color: #0b0b0c; box-shadow: 0 0 18px rgba(154, 154, 154, .25); }
body[data-page="shop"] .shop-filters .shop-chip-count { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: inherit; font-size: 10px; font-variant-numeric: tabular-nums; text-align: center; }
body.portal[data-page="shop"] .shop-filters select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #444444; border-radius: 9px; background: var(--shop-navy-deep); color: #fff; font-size: 13px; }
body.portal[data-page="shop"] .shop-filters select:hover { border-color: var(--shop-line-strong); }
body.portal[data-page="shop"] .shop-filters select:focus { border-color: var(--shop-blue); }
body[data-page="shop"] .shop-filters .shop-filter-count { margin: 0; color: var(--shop-ink-dim); font-size: 12px; font-weight: 600; }

/* Collection group header ------------------------------------------------------ */
body[data-page="shop"] .shop-collection-group { margin: 0 0 32px; }
body[data-page="shop"] .shop-collection-group > .shop-collection-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: center; padding: 0 0 16px; }
.shop-collection-cover { display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--shop-line); border-radius: 14px; background: var(--shop-navy-deep); color: #bcbcbc; font-size: 11px; font-weight: 800; letter-spacing: .1em; object-fit: cover; }
.shop-collection-copy { min-width: 0; }
body[data-page="shop"] .shop-collection-group .eyebrow { margin: 0 0 4px; font-size: 10px; color: var(--shop-ink-dim); }
/* XRPL addresses are case-sensitive: never uppercase the issuer. */
body[data-page="shop"] .shop-issuer { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: 0; text-transform: none; }
body[data-page="shop"] .shop-collection-group h3 { margin: 0 0 4px; font-size: 22px; }
body[data-page="shop"] .shop-collection-copy > p:not(.eyebrow) { margin: 0; color: var(--shop-ink-soft); font-size: 13px; }
.shop-collection-count { grid-column: 1 / -1; justify-self: start; padding: 5px 10px; border: 1px solid rgba(154, 154, 154, .45); border-radius: 999px; background: rgba(154, 154, 154, .08); color: #cbcbcb; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* Product cards: rarity-toned border, bottom bar and glow ---------------------- */
body.portal[data-page="shop"] .shop-product-grid,
body.portal[data-page="shop"] #shop-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: start; gap: 12px; }
body[data-page="shop"] .shop-product,
body[data-page="shop"] #shop-products > .asset-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--tone) 40%, #424242); border-radius: 14px; background: var(--shop-navy); box-shadow: 0 10px 30px rgba(0, 0, 0, .22); transition: transform .2s var(--shop-ease), border-color .2s ease, box-shadow .2s ease; }
body[data-page="shop"] .shop-product::after,
body[data-page="shop"] #shop-products > .asset-card::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tone); pointer-events: none; }
body[data-page="shop"] .shop-product:hover,
body[data-page="shop"] .shop-product:focus-within { transform: translateY(-3px); border-color: var(--tone); box-shadow: 0 16px 36px color-mix(in srgb, var(--tone) 26%, transparent); }
body[data-page="shop"] .shop-product[data-tone="uncommon"] { --tone: var(--rarity-uncommon); }
body[data-page="shop"] .shop-product[data-tone="rare"] { --tone: var(--rarity-rare); }
body[data-page="shop"] .shop-product[data-tone="very-rare"] { --tone: var(--rarity-very-rare); }
body[data-page="shop"] .shop-product[data-tone="epic"] { --tone: var(--rarity-epic); }
body[data-page="shop"] .shop-product[data-tone="legendary"] { --tone: var(--rarity-legendary); }
body[data-page="shop"] .shop-product[data-tone="mythic"] { --tone: var(--rarity-mythic); }
body[data-page="shop"] .shop-product[data-tone="super-rare"] { --tone: var(--rarity-super-rare); }
body[data-page="shop"] .shop-product[data-tone="exotic"] { --tone: var(--rarity-exotic); }
body[data-page="shop"] .shop-product[data-tone="unspecified"] { --tone: #a1a1a1; }
body[data-page="shop"] :is(.shop-product, #shop-products > .asset-card) .asset-image { position: relative; aspect-ratio: 1; overflow: hidden; background: radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, var(--tone) 24%, #101010), #101010); }
body[data-page="shop"] :is(.shop-product, #shop-products > .asset-card) .asset-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--shop-ease); }
body[data-page="shop"] .shop-product:hover .asset-image img { transform: scale(1.04); }
body[data-page="shop"] :is(.shop-product, #shop-products > .asset-card) .badge { top: 10px; left: 10px; right: auto; padding: 5px 9px; border-radius: 999px; background: var(--shop-blue); color: var(--shop-blue-ink); font-size: 9px; font-weight: 800; letter-spacing: .12em; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.shop-product-slot { position: absolute; top: 10px; right: 10px; padding: 5px 8px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(12, 12, 12, .82); color: #f0f0f0; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
/* A square card: the art edge to edge, then name, edition and supply, price + rarity and the action
   in a tight block (cards keep their own height). The description leaves the card face but stays
   readable to screen readers (visually hidden, not display:none). */
.shop-product-body { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 10px 13px; }
body[data-page="shop"] .shop-product h4 { margin: 0; font-size: 15px; line-height: 1.12; letter-spacing: -.02em; overflow-wrap: anywhere; }
body[data-page="shop"] .shop-product .shop-product-description { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Edition and supply read as one muted line ("Genesis · 46 of 50 left"); the terms stay for screen readers. */
.shop-product-facts { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0; color: var(--shop-ink-dim); font-size: 11px; font-weight: 600; line-height: 1.35; }
.shop-product-facts > div { display: flex; gap: 6px; min-width: 0; }
.shop-product-facts > div + div::before { content: '\00b7'; content: '\00b7' / ''; }
.shop-product-facts dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.shop-product-facts dd { margin: 0; overflow-wrap: anywhere; }
body[data-page="shop"] .shop-product .shop-release-summary { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 8px; padding: 0; }
body[data-page="shop"] .shop-product .release-price { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; color: #fff !important; font-size: 16px !important; font-weight: 800; letter-spacing: .01em; line-height: 1.2; }
body[data-page="shop"] .shop-product .release-price small { display: block; margin: 0 0 2px; color: var(--shop-ink-dim); font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
body[data-page="shop"] .shop-rarity { --rarity-color: var(--tone); gap: 5px; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--rarity-color) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--rarity-color) 12%, transparent); color: color-mix(in srgb, var(--rarity-color) 70%, #fff); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
body[data-page="shop"] .shop-rarity > span { color: var(--shop-ink-dim); }
/* On a card the chip's colour and word say the rarity; the "Rarity" term stays for screen readers. */
body[data-page="shop"] .shop-product .shop-rarity > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body[data-page="shop"] .shop-product .button { width: 100%; margin: auto 0 0; padding-left: 8px; padding-right: 8px; letter-spacing: .06em; }
body[data-page="shop"] .shop-product .shop-release-summary + .button,
body[data-page="shop"] .shop-product .shop-release-summary + a.button { margin-top: auto; }
body[data-page="shop"] .shop-product-body > :last-child { margin-top: auto; }
body[data-page="shop"] #shop-products > .asset-card h2 { padding: 12px 12px 6px; font-size: 15px; }
body[data-page="shop"] #shop-products > .asset-card p { padding: 0 12px; color: var(--shop-ink-soft); font-size: 12px; }
body[data-page="shop"] #shop-products > .asset-card .button { width: calc(100% - 24px); margin: auto 12px 14px; }

/* Loading skeleton, empty and error states ------------------------------------- */
/* The skeleton mirrors the loaded layout (filter panel, collection header, product
   cards) so the crate section below does not jump when the drops arrive. */
.shop-skeleton { display: grid; gap: 22px; }
.shop-skeleton > span,
.shop-skeleton-grid span { display: block; border: 1px solid var(--shop-line); border-radius: 14px; background: linear-gradient(90deg, #1a1a1a 0%, #262626 50%, #1a1a1a 100%); background-size: 200% 100%; }
.shop-skeleton-filters { height: 129px; }
.shop-skeleton-head { width: min(100%, 380px); height: 97px; }
.shop-skeleton-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* A card is square art plus its body. */
.shop-skeleton-grid span::before { content: ''; display: block; aspect-ratio: 1; }
.shop-skeleton-grid span::after { content: ''; display: block; height: 236px; }
.shop-skeleton-grid span:nth-child(3) { display: none; }
body.portal[data-page="shop"] .shop-empty { grid-column: 1 / -1; display: grid; justify-items: center; gap: 10px; max-width: 640px; margin: 8px auto; padding: 40px 22px; border: 1px solid var(--shop-line); border-radius: 18px; background: radial-gradient(ellipse at 50% 0%, #373737, var(--shop-navy-deep) 70%); text-align: center; }
body[data-page="shop"] .shop-empty .eyebrow { color: var(--shop-blue); }
body[data-page="shop"] .shop-empty h3 { margin: 0; font-size: clamp(22px, 6vw, 30px); color: #fff; }
body[data-page="shop"] .shop-empty p:not(.eyebrow) { max-width: 44ch; margin: 0 0 6px; color: var(--shop-ink-soft); line-height: 1.6; }
body.portal[data-page="shop"] .shop-empty.is-error { border-color: rgba(255, 77, 109, .45); background: radial-gradient(ellipse at 50% 0%, rgba(255, 77, 109, .16), var(--shop-navy-deep) 70%); }

/* ASM crates: a premium feature card around the existing showcase -------------- */
body[data-page="shop"] #shop-crates { --crate-violet: var(--shop-violet); --crate-chalk: #f4f4f2; --crate-muted: #c1c1c1; position: relative; isolation: isolate; padding: 20px 14px 14px; border: 1px solid transparent; border-radius: 22px; background: radial-gradient(90% 60% at 0% 0%, rgba(142, 142, 142, .20), transparent 60%), radial-gradient(70% 50% at 100% 100%, rgba(154, 154, 154, .14), transparent 60%), linear-gradient(#151515, #151515) padding-box, linear-gradient(135deg, rgba(167, 167, 167, .85), rgba(154, 154, 154, .38) 45%, rgba(142, 142, 142, .22)) border-box; box-shadow: 0 30px 80px rgba(0, 0, 0, .38), 0 0 70px rgba(142, 142, 142, .12); }
body[data-page="shop"] #shop-crates > .shop-section-heading { margin-bottom: 18px; }
body[data-page="shop"] #shop-crates .shop-crates-eyebrow { color: #b8b8b8; }
body[data-page="shop"] #shop-crates > .shop-section-heading h2 { font-size: clamp(36px, 10vw, 64px); line-height: .9; letter-spacing: -.05em; }
body[data-page="shop"] #shop-crates > .shop-section-heading p:not(.eyebrow) { color: var(--crate-muted); }
body[data-page="shop"] #shop-crates .crate-preview-status { align-self: flex-start; min-height: 32px; padding: 7px 12px; border: 1px solid rgba(167, 167, 167, .55); border-radius: 999px; background: rgba(142, 142, 142, .14); color: #e3e3e3; font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.4; }
body[data-page="shop"] #shop-crates .crate-showcase { border: 1px solid var(--shop-line); border-radius: 16px; background: var(--shop-navy); box-shadow: inset 0 0 0 1px rgba(142, 142, 142, .06); }
body[data-page="shop"] #shop-crates .crate-vitrine { background: radial-gradient(ellipse 70% 58% at 50% 62%, rgba(142, 142, 142, .34), transparent 70%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(154, 154, 154, .22), transparent 70%), linear-gradient(180deg, #1a1a1a, #0e0e0e); }
body[data-page="shop"] #shop-crates .crate-stage-caption { color: #cdcdcd; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
body[data-page="shop"] #shop-crates .crate-stage-plinth { background: radial-gradient(ellipse at center, rgba(142, 142, 142, .22), rgba(14, 14, 14, .9) 70%); border: 2px solid rgba(167, 167, 167, .45); box-shadow: 0 0 44px rgba(142, 142, 142, .3); }
body[data-page="shop"] #shop-crates .crate-finish-controls { gap: 6px; padding: 0 12px 16px; flex-wrap: wrap; }
body[data-page="shop"] #shop-crates .crate-finish-controls button { min-height: 44px; border: 1px solid #444444; border-radius: 9px; background: rgba(33, 33, 33, .85); color: var(--shop-ink-soft); font-weight: 700; transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
body[data-page="shop"] #shop-crates .crate-finish-controls button:hover { border-color: var(--shop-violet); color: #fff; }
body[data-page="shop"] #shop-crates .crate-finish-controls button[aria-pressed="true"] { background: #f2f2f0; border-color: #ffffff; color: #0b0b0c; box-shadow: 0 0 18px rgba(142, 142, 142, .35); }
body[data-page="shop"] #shop-crates .crate-finish-dot { width: 8px; height: 8px; box-shadow: 0 0 8px var(--finish-tone); }
body[data-page="shop"] #shop-crates .crate-finish-detail .crate-display-label { color: #b8b8b8; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
body[data-page="shop"] #shop-crates .crate-finish-detail h3 { font-weight: 800; letter-spacing: -.05em; text-transform: uppercase; }
body[data-page="shop"] #shop-crates .crate-trial-strip { background: var(--shop-navy-deep); border-top-color: var(--shop-line); }
body[data-page="shop"] #shop-crates .crate-approved-odds h3 { color: var(--shop-ink-dim); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
body[data-page="shop"] #shop-crates .crate-approved-odds ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 14px 16px; }
body[data-page="shop"] #shop-crates .crate-approved-odds li { flex-wrap: nowrap; min-width: 0; border-top-width: 3px; }
body[data-page="shop"] #shop-crates .crate-trial-bottom { border-top-color: var(--shop-line); }
body[data-page="shop"] #shop-crates .crate-trial-terms strong { font-size: 20px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: #fff; }
body[data-page="shop"] #shop-crates .crate-trial-terms span { color: var(--shop-ink-dim); font-size: 11px; }
body[data-page="shop"] #shop-crates .crate-showcase .button { min-height: 46px; border-radius: 9px; font-size: 13px; font-weight: 700; letter-spacing: .01em; text-transform: none; }
body[data-page="shop"] #shop-crates .crate-showcase .button[data-crate-showcase-buy] { background: var(--shop-violet); border-color: #a7a7a7; color: var(--shop-violet-ink); box-shadow: 0 10px 30px rgba(142, 142, 142, .35); }
body[data-page="shop"] #shop-crates .crate-showcase .button[data-crate-showcase-buy]:hover:not(:disabled) { background: var(--shop-violet-hover); transform: translateY(-1px); }
body[data-page="shop"] #shop-crates .crate-showcase .button:is([data-crate-showcase-rules], [data-crate-preview]) { background: transparent; border-color: rgba(167, 167, 167, .55); color: #e3e3e3; }
body[data-page="shop"] #shop-crates .crate-showcase .button:is([data-crate-showcase-rules], [data-crate-preview]):hover { background: rgba(142, 142, 142, .12); border-color: #a7a7a7; }
body[data-page="shop"] #shop-crates .crate-preview-action { gap: 10px; }
body[data-page="shop"] #shop-crates .crate-preview-action > span { color: var(--shop-ink-dim); font-size: 11px; line-height: 1.5; }
body[data-page="shop"] #shop-crates .crate-showcase :is(button, a):focus-visible,
body[data-page="shop"] #shop-crates :is(summary, button, a):focus-visible { outline: 3px solid #cecece; outline-offset: 3px; }
body[data-page="shop"] #shop-crates .crate-release-note { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--shop-line); border-left: 3px solid var(--shop-violet); border-radius: 0 12px 12px 0; background: rgba(142, 142, 142, .06); color: var(--crate-muted); font-size: 13px; }
body[data-page="shop"] #shop-crates .crate-flow-note { margin: 14px 0 0; padding: 0 16px; border: 1px solid var(--shop-line); border-radius: 12px; background: var(--shop-navy); }
/* Same disclosure style as the "Purchase history & recovery" panel directly below. */
body[data-page="shop"] #shop-crates .crate-flow-note summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; color: #b0b0b0; font-size: 13px; font-weight: 400; list-style: none; }
body[data-page="shop"] #shop-crates .crate-flow-note summary::-webkit-details-marker { display: none; }
body[data-page="shop"] #shop-crates .crate-flow-note summary::before { content: '+'; color: #b6b6b6; font-size: 20px; }
body[data-page="shop"] #shop-crates .crate-flow-note[open] summary::before { content: '−'; }
body[data-page="shop"] #shop-crates .crate-flow-note[open] summary { margin-bottom: 6px; }
body[data-page="shop"] #shop-crates #crate-app { margin-top: 14px; }
body[data-page="shop"] #shop-crates #crate-app > .crate-history { padding: 0 16px; border: 1px solid var(--shop-line); border-radius: 12px; background: var(--shop-navy); }
body[data-page="shop"] #shop-crates #crate-app > .crate-history[open] { padding-bottom: 16px; }

/* Wearable order history ------------------------------------------------------- */
body[data-page="shop"] .orders.crate-history { margin: 28px 0 0; padding: 0 16px; border: 1px solid var(--shop-line); border-radius: 12px; background: var(--shop-navy); color: var(--shop-ink-soft); }
body[data-page="shop"] .orders.crate-history[open] { padding-bottom: 12px; }
body[data-page="shop"] .orders .order-row { border-bottom-color: var(--shop-line); }

/* Phones from 480px: hero copy breathes, explainer stays a list. */
@media (min-width: 480px) {
  .shop-stage-copy { padding: 0 24px 26px; }
  body[data-page="shop"] .shop-hero-actions .button { flex: 0 0 auto; }
  body[data-page="shop"] .shop-filters { grid-template-columns: minmax(0, 1fr) minmax(170px, 220px); align-items: end; }
  body[data-page="shop"] .shop-filters .shop-filter-field:first-child { grid-column: 1 / -1; }
  body[data-page="shop"] .shop-filters .shop-filter-count { grid-row: 2; grid-column: 1; align-self: center; }
  body[data-page="shop"] .shop-filter-tag { grid-row: 2; grid-column: 2; }
  .shop-collection-count { grid-column: auto; justify-self: end; }
  body[data-page="shop"] .shop-collection-group > .shop-collection-head { grid-template-columns: auto minmax(0, 1fr) auto; }
  body[data-page="shop"] #shop-crates { padding: 26px 22px 20px; }
  .shop-skeleton-head { height: 58px; }
}

/* Side rail from 751px: product cards grow to a comfortable width. */
@media (min-width: 751px) {
  body.portal[data-page="shop"] .shop-product-grid,
  body.portal[data-page="shop"] #shop-products,
  .shop-skeleton-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
  .shop-skeleton-grid span:nth-child(3) { display: block; }
  body[data-page="shop"] .shop-section-heading { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; }
  body[data-page="shop"] .shop-section-heading > .button { flex: none; }
  body[data-page="shop"] #shop-crates > .shop-section-heading { align-items: flex-start; }
  body[data-page="shop"] #shop-crates .crate-preview-status { flex: none; max-width: 340px; }
  body[data-page="shop"] .shop-section { margin-bottom: 56px; }
}

/* Small laptops and landscape tablets: the hero is still stacked, so a full-width 4:3
   image would push the headline and buttons below the fold. Crop it to a short band, and
   give the crate price room so "1 Testnet XRP" stays on one line. */
@media (min-width: 751px) and (max-width: 1179px) {
  .shop-stage-media img { aspect-ratio: 16 / 9; max-height: 40vh; min-height: 220px; object-position: 50% 8%; }
  body[data-page="shop"] #shop-crates .crate-trial-terms { flex: 1 1 auto; gap: 24px; }
  body[data-page="shop"] #shop-crates .crate-trial-terms strong { white-space: nowrap; }
  body[data-page="shop"] #shop-crates .crate-preview-action { flex: 0 1 280px; }
}

/* Wide: hero splits into copy + stage, explainer becomes three columns. */
@media (min-width: 1180px) {
  .shop-stage-hero { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; min-height: 440px; background: radial-gradient(ellipse 52% 70% at 74% 55%, rgba(154, 154, 154, .32), transparent 70%), radial-gradient(50% 60% at 100% 0%, rgba(142, 142, 142, .26), transparent 62%), linear-gradient(120deg, #151515 0%, #1c1c1c 55%, var(--shop-navy-deep)); }
  .shop-stage-media { grid-column: 2; grid-row: 1; margin: -4% -4% -6% -10%; }
  .shop-stage-copy { grid-column: 1; grid-row: 1; padding: 44px 0 44px 44px; gap: 16px; }
  body[data-page="shop"] .shop-stage-copy h1 { font-size: clamp(56px, 5.6vw, 84px); }
  body[data-page="shop"] .shop-stage-copy .shop-eyebrow { margin-bottom: 8px; }
  body[data-page="shop"] .shop-explainer { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 60px; overflow: visible; border: 0; border-radius: 0; background: none; }
  body[data-page="shop"] .shop-explainer > :is(article, a) { padding: 16px; border: 1px solid var(--shop-line); border-radius: 14px; background: var(--shop-navy); }
  body[data-page="shop"] .shop-explainer > :is(article, a) + :is(article, a) { border-top: 1px solid var(--shop-line); }
  body[data-page="shop"] .shop-explainer > a:hover { border-color: var(--shop-blue); transform: translateY(-2px); }
  body[data-page="shop"] #shop-crates { padding: 34px 32px 26px; }
  /* Filters on one row: slot chips, result count, tag select. */
  body[data-page="shop"] .shop-filters { grid-template-columns: minmax(0, 1fr) auto minmax(180px, 240px); align-items: end; padding: 14px 16px; }
  body[data-page="shop"] .shop-filters .shop-filter-field:first-child { grid-column: 1; }
  body[data-page="shop"] .shop-filters .shop-filter-count { grid-row: 1; grid-column: 2; align-self: center; margin-top: 18px; }
  body[data-page="shop"] .shop-filter-tag { grid-row: 1; grid-column: 3; }
  body[data-page="shop"] .shop-filters.is-slot-only { grid-template-columns: minmax(0, 1fr) auto; }
  .shop-skeleton-filters { height: 97px; }
}

/* Checkout: countdown to the paid offer's expiry (monochrome; the bar is a transform, no layout work). */
body[data-page="shop"] .shop-offer-countdown { max-width: 285px; margin: 18px auto 0; text-align: left; }
body[data-page="shop"] .shop-offer-countdown p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
body[data-page="shop"] .shop-offer-countdown strong { color: var(--ink); font-size: 18px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
body[data-page="shop"] .shop-offer-track { display: block; height: 3px; overflow: hidden; border-radius: 3px; background: var(--line); }
body[data-page="shop"] .shop-offer-track i { display: block; height: 100%; background: var(--ink); transform-origin: left center; }
body[data-page="shop"] #new-order { min-height: 44px; }

/* Price + mint fee, like shipping: Item price and Mint fee above the one Total (monochrome).
   A drop card names the fee under its price; the checkout lists both lines. */
body[data-page="shop"] .shop-product .shop-mint-fee { order: 2; flex: 1 1 100%; margin: 0; padding: 0; color: var(--shop-ink-dim); font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 1.35; }
body[data-page="shop"] .checkout-breakdown { display: grid; gap: 7px; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid #ffffff12; }
body[data-page="shop"] .checkout-breakdown > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
body[data-page="shop"] .checkout-breakdown dt { margin: 0; color: var(--shop-ink-dim); font-size: 12px; }
body[data-page="shop"] .checkout-breakdown dd { margin: 0; color: var(--shop-ink); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
body[data-page="shop"] .checkout-breakdown + .checkout-total { margin-top: 12px; }

/* Joey: one approval in the extension instead of a QR. */
body[data-page="shop"] .checkout-joey { max-width: 285px; margin: 18px auto 0; padding: 16px; border: 1px solid var(--shop-line); border-radius: 12px; background: #ffffff05; text-align: left; }
/* The label sits above the amount ("Total in Joey" / "5.5 XRP"), so neither wraps in the 285px panel. */
body[data-page="shop"] .checkout-joey-total { display: grid; gap: 4px; margin: 0 0 8px; }
body[data-page="shop"] .checkout-joey-total span { color: var(--shop-ink-dim); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
body[data-page="shop"] .checkout-joey-total strong { color: var(--shop-ink); font-size: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
body[data-page="shop"] .checkout-joey-note { margin: 0 0 14px; color: var(--shop-ink-soft); font-size: 11px; line-height: 1.55; }
body[data-page="shop"] .checkout-joey .button { width: 100%; min-height: 44px; justify-content: center; }

/* Phones: Open in Xaman is the primary, full-size action; the QR is smaller (it is for a second device). */
@media (max-width: 640px) {
  body[data-page="shop"] .checkout-dialog #payment-link { min-height: 44px; background: var(--accent-fill); border-color: var(--accent-fill); color: var(--accent-ink); }
  body[data-page="shop"] .checkout-dialog .checkout-qr-frame { width: 176px; height: 176px; }
  body[data-page="shop"] .checkout-dialog .checkout-scan-label { margin: 10px 0 12px; }
  /* Click, see the total, open Xaman: on a phone the button comes before the QR (the QR is for a
     second device) and the decorative heading steps aside, so OPEN IN XAMAN sits above the fold. */
  body[data-page="shop"] .checkout-dialog #payment-payload:not([hidden]) { display: flex; flex-direction: column; align-items: center; }
  body[data-page="shop"] .checkout-dialog #payment-link { order: -1; width: 100%; max-width: none; justify-content: center; gap: 8px; margin: 0 0 16px; }
  body[data-page="shop"] .checkout-dialog .checkout-scan-label::before { content: "Using another device? "; }
  body[data-page="shop"] .checkout-approval > .eyebrow,
  body[data-page="shop"] .checkout-approval > h2,
  body[data-page="shop"] .checkout-approval > .checkout-intro { display: none; }
  body[data-page="shop"] .checkout-approval { padding-top: 18px; }
  body[data-page="shop"] .checkout-terms { margin: 0 auto 14px; }
}
/* The receipt names the item price and the mint fee under "Total paid", like shipping. */
body[data-page="shop"] .purchase-receipt-summary > .purchase-receipt-breakdown { justify-content: flex-end; margin-top: -4px; color: var(--shop-ink-dim); font-size: 11px; }

@media (prefers-reduced-motion: no-preference) {
  .shop-skeleton > span,
  .shop-skeleton-grid span { animation: shop-shimmer 1.4s ease-in-out infinite; }
  @keyframes shop-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="shop"] *, body[data-page="shop"] *::before, body[data-page="shop"] *::after { transition: none !important; }
  body[data-page="shop"] .shop-product:hover,
  body[data-page="shop"] .shop-product:focus-within,
  body[data-page="shop"] .shop-explainer > a:hover,
  body[data-page="shop"] .button:hover,
  body[data-page="shop"] .button.filled:hover,
  body[data-page="shop"] #shop-crates .crate-showcase .button[data-crate-showcase-buy]:hover:not(:disabled) { transform: none; }
  body[data-page="shop"] .shop-product:hover .asset-image img { transform: none; }
}

/* Shop poses (shop-pose-preview.js): the pose loops on the starter character over the card artwork once on screen. */
body[data-page="shop"] .shop-pose-art asm-viewer { position: absolute !important; inset: 0; z-index: 1; min-height: 0 !important; opacity: 0; transition: opacity .3s var(--shop-ease); }
body[data-page="shop"] .shop-pose-art.is-live asm-viewer { opacity: 1; }
body[data-page="shop"] .shop-pose-art :is(.badge, .shop-product-slot) { z-index: 2; }
body[data-page="shop"] .shop-pose-tag { position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: 4px 8px; border-radius: 999px; background: rgba(10, 10, 10, .78); color: #f4f4f4; font: 700 9px/1.2 'Inter', system-ui, sans-serif; letter-spacing: .1em; }
body[data-page="shop"] .shop-pose-play { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); min-height: 44px; padding: 10px 16px; border: 1px solid #f2f2f0; border-radius: 999px; background: rgba(10, 10, 10, .82); color: #f4f4f4; font: 700 11px/1 'Inter', system-ui, sans-serif; letter-spacing: .1em; cursor: pointer; }
body[data-page="shop"] .shop-pose-play:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { body[data-page="shop"] .shop-pose-art asm-viewer { transition: none; } }

/* Hanging clothing tags (SITE-UPGRADE phase 2). Each drop card hangs from a clothes rail on a thin wire, like a
   garment tag. Layers: .hang (grid item, the rail segment) > .hang-swing (pivot at the hook: the wire and the eyelet;
   the sway-in and the pointer swing rotate it) > .hang-card (the flip) > the unchanged card as the front + .hang-back.
   Only transform, rotate and opacity move. The swing runs only while the pointer moves (motion/hang.js); touch gets a
   gentle idle sway; reduced motion or Save-Data: no sway, no swing, and the flip is an instant swap. */
body.portal[data-page="shop"] .shop-product-grid { --rail-gap: 12px; column-gap: var(--rail-gap); row-gap: 18px; }
body[data-page="shop"] .shop-skeleton-grid span { margin-top: 30px; }
body[data-page="shop"] .hang { --tone: var(--rarity-common); position: relative; min-width: 0; padding-top: 30px; }
body[data-page="shop"] .hang[data-tone="uncommon"] { --tone: var(--rarity-uncommon); }
body[data-page="shop"] .hang[data-tone="rare"] { --tone: var(--rarity-rare); }
body[data-page="shop"] .hang[data-tone="very-rare"] { --tone: var(--rarity-very-rare); }
body[data-page="shop"] .hang[data-tone="epic"] { --tone: var(--rarity-epic); }
body[data-page="shop"] .hang[data-tone="legendary"] { --tone: var(--rarity-legendary); }
body[data-page="shop"] .hang[data-tone="mythic"] { --tone: var(--rarity-mythic); }
body[data-page="shop"] .hang[data-tone="super-rare"] { --tone: var(--rarity-super-rare); }
body[data-page="shop"] .hang[data-tone="exotic"] { --tone: var(--rarity-exotic); }
body[data-page="shop"] .hang[data-tone="unspecified"] { --tone: #a1a1a1; }
/* The rail: one segment per tag, half a gap past each side, so a row of tags reads as one brushed-steel bar. */
body[data-page="shop"] .hang::before { content: ''; position: absolute; top: 3px; left: calc(var(--rail-gap) / -2 - .5px); right: calc(var(--rail-gap) / -2 - .5px); height: 5px; background: linear-gradient(#f3f4f6, #9ba0a8 45%, #4a4d53); box-shadow: 0 3px 6px rgba(0, 0, 0, .55); pointer-events: none; }
body[data-page="shop"] .hang-swing { position: relative; transform-origin: 50% -25px; }
body[data-page="shop"] .hang.is-3d .hang-swing { perspective: 1400px; }
/* The wire from the hook on the rail to the tag's eyelet, and the hook itself. */
body[data-page="shop"] .hang-swing::before { content: ''; position: absolute; z-index: 1; left: calc(50% - .75px); top: -24px; width: 1.5px; height: 26px; background: linear-gradient(#f5f5f5, #8f939a); pointer-events: none; }
body[data-page="shop"] .hang-swing::after { content: ''; position: absolute; z-index: 1; left: calc(50% - 6px); top: -31px; width: 8px; height: 8px; border: 2px solid #c9ccd1; border-bottom-color: transparent; border-radius: 50%; pointer-events: none; }
/* The eyelet: the tag's punched hole, and the flip control (44px hit area on a 30px ring). */
body[data-page="shop"] .hang-flip { position: absolute; z-index: 4; top: -14px; left: calc(50% - 15px); width: 30px; height: 30px; padding: 0; border: 2px solid #d4d7db; border-radius: 50%; background: radial-gradient(circle, #0b0b0b 0 5px, #34363a 6px 100%); box-shadow: 0 2px 6px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .25); cursor: pointer; transition: border-color .2s ease; }
body[data-page="shop"] .hang-flip::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; }
body[data-page="shop"] .hang-flip::after { content: 'FLIP'; position: absolute; left: 50%; top: calc(100% + 4px); translate: -50% 0; padding: 3px 7px; border-radius: 999px; background: #f2f2f0; color: #0b0b0c; font: 800 9px/1.2 'Inter', system-ui, sans-serif; letter-spacing: .14em; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
body[data-page="shop"] .hang-flip[aria-pressed="true"]::after { content: 'FRONT'; }
body[data-page="shop"] .hang-flip:is(:hover, :focus-visible) { border-color: var(--tone); }
body[data-page="shop"] .hang-flip:is(:hover, :focus-visible)::after { opacity: 1; }
body[data-page="shop"] .hang-card { position: relative; display: grid; transform-origin: 50% -25px; transition: transform .7s cubic-bezier(.2, .75, .2, 1); cursor: pointer; }
body[data-page="shop"] .hang.is-3d .hang-card { transform-style: preserve-3d; }
body[data-page="shop"] .hang.is-flipped .hang-card { transform: rotateY(180deg); }
body[data-page="shop"] .hang-card > :is(.shop-product, .hang-back, .hang-foil) { grid-area: 1 / 1; }
body[data-page="shop"] .hang.is-3d .hang-card > :is(.shop-product, .hang-back, .hang-foil) { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
body[data-page="shop"] .hang-back[hidden] { display: none; }
/* The front sets the tag's size (as before); the back lies over it and never makes the card taller. */
body[data-page="shop"] .hang-card > :is(.hang-back, .hang-foil) { position: absolute; inset: 0; }
/* The back: a care-label layout on card stock. */
body[data-page="shop"] .hang-back { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 22px 12px 12px; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; transform: rotateY(180deg); border: 1px solid color-mix(in srgb, var(--tone) 55%, #424242); border-radius: 14px; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--tone) 18%, #141414), #121212 60%); box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
body[data-page="shop"] .hang-back::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tone); }
body[data-page="shop"] .hang-back-brand { display: flex; justify-content: space-between; gap: 8px; margin: 0; color: var(--shop-ink-dim); font-size: 8.5px; font-weight: 800; letter-spacing: .16em; }
body[data-page="shop"] .hang-back-brand span { color: var(--shop-ink-soft); text-transform: uppercase; }
body[data-page="shop"] .hang-back-name { margin: 0; color: #fff; font-size: 15px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; overflow-wrap: anywhere; }
body[data-page="shop"] .hang-back-facts { display: grid; margin: 0; border-top: 1px dashed #ffffff26; }
body[data-page="shop"] .hang-back-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px dashed #ffffff26; }
body[data-page="shop"] .hang-back-facts dt { flex: none; color: var(--shop-ink-dim); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
body[data-page="shop"] .hang-back-facts dd { margin: 0; color: var(--shop-ink); font-size: 11.5px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body[data-page="shop"] .hang-back-facts b { color: #fff; font-size: 13px; }
body[data-page="shop"] .hang-rarity { padding: 2px 7px; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--tone) 60%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--tone) 14%, transparent); color: color-mix(in srgb, var(--tone) 72%, #fff); }
body[data-page="shop"] .hang-back-note { margin: 0; color: var(--shop-ink-soft); font-size: 10.5px; line-height: 1.4; }
body[data-page="shop"] .hang-back-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: auto; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
/* A woven-label strip: decoration only. */
body[data-page="shop"] .hang-back-code { display: block; flex: none; height: 12px; opacity: .45; background: repeating-linear-gradient(90deg, #f2f2f0 0 2px, transparent 2px 4px, #f2f2f0 4px 5px, transparent 5px 8px, #f2f2f0 8px 11px, transparent 11px 13px); }
/* Super Rare: a holo foil over the front that follows the pointer (motion/hang.js moves its two layers). */
body[data-page="shop"] .hang-foil { position: relative; z-index: 2; overflow: hidden; border-radius: 14px; pointer-events: none; mix-blend-mode: color-dodge; opacity: .42; }
body[data-page="shop"] .hang-foil i { position: absolute; inset: -50%; }
body[data-page="shop"] .hang-sheen { background: repeating-linear-gradient(115deg, transparent 0 6%, rgba(255, 40, 100, .5) 9%, rgba(255, 210, 60, .42) 12%, rgba(60, 255, 200, .42) 15%, rgba(90, 120, 255, .5) 18%, transparent 21% 34%); transform: translate3d(-8%, -6%, 0); }
body[data-page="shop"] .hang-glare { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 22%); opacity: .7; transform: translate3d(12%, -18%, 0); }
body[data-page="shop"] .hang.is-flipped .hang-foil { visibility: hidden; }
body[data-page="shop"] .hang.is-holo .shop-product { border-color: color-mix(in srgb, var(--rarity-super-rare) 70%, #fff); }

@keyframes hang-sway-in { 0% { rotate: -8deg; opacity: 0; } 30% { opacity: 1; } 46% { rotate: 4.5deg; } 64% { rotate: -2.2deg; } 82% { rotate: .9deg; } 100% { rotate: 0deg; opacity: 1; } }
@keyframes hang-idle { from { transform: rotate(-1.1deg); } to { transform: rotate(1.1deg); } }
@keyframes hang-foil-drift { from { transform: translate3d(-14%, -10%, 0); } to { transform: translate3d(14%, 10%, 0); } }
body[data-page="shop"] .hang:nth-child(3n + 2) { --sway-delay: -2.3s; }
body[data-page="shop"] .hang:nth-child(3n + 3) { --sway-delay: -4.1s; }
/* Motion is opt-in: html.motion-ok (the inline gate) is matched as :where(.motion-ok *) so every rule stays scoped to
   the shop page. The sway-in is scroll-driven (view()); a browser without view() drops the timeline, the animation
   resolves to its last frame at once, and hang.js plays it as a one-shot instead (html.hang-io, .in on first view). */
body[data-page="shop"]:where(.motion-ok *) .hang-swing { animation: hang-sway-in linear backwards; animation-timeline: view(); animation-range: entry 0% cover 38%; }
body[data-page="shop"]:where(.motion-ok.hang-io *) .hang.in .hang-swing { animation: hang-sway-in 1.3s cubic-bezier(.3, .7, .4, 1) both; }
/* Touch: a gentle idle sway (and a slow foil drift) while the tag is on screen (.awake from hang.js). */
@media (hover: none), (pointer: coarse) {
  body[data-page="shop"]:where(.motion-ok *) .hang.awake .hang-swing { animation: hang-sway-in linear backwards, hang-idle 6.4s ease-in-out var(--sway-delay, 0s) infinite alternate; animation-timeline: view(), auto; animation-range: entry 0% cover 38%, normal; }
  body[data-page="shop"]:where(.motion-ok.hang-io *) .hang.awake.in .hang-swing { animation: hang-sway-in 1.3s cubic-bezier(.3, .7, .4, 1) both, hang-idle 6.4s ease-in-out var(--sway-delay, 0s) infinite alternate; }
  body[data-page="shop"]:where(.motion-ok *) .hang.awake .hang-sheen { animation: hang-foil-drift 7s ease-in-out infinite alternate; }
}
/* Reduced motion or Save-Data (html.reduce-motion, set by the inline gate): no sway, and the flip is an instant swap. */
body[data-page="shop"]:where(.reduce-motion *) :is(.hang-card, .hang-flip) { transition: none; }
@media (prefers-reduced-motion: reduce) { body[data-page="shop"] :is(.hang-swing, .hang-sheen) { animation: none !important; } }

/* Phones: two narrow tags a row, so the back is tighter still (it scrolls inside the tag if a long name needs it). */
@media (max-width: 750px) {
  body[data-page="shop"] .hang-back { gap: 5px; padding: 20px 10px 8px; }
  body[data-page="shop"] .hang-back-facts > div { padding: 4px 0; }
  body[data-page="shop"] .hang-back-code { display: none; }
}
@media (min-width: 751px) {
  body.portal[data-page="shop"] .shop-product-grid { --rail-gap: 16px; row-gap: 22px; }
  body[data-page="shop"] .hang-back { gap: 7px; padding: 24px 14px 12px; }
  body[data-page="shop"] .hang-back-name { font-size: 17px; }
  body[data-page="shop"] .hang-back-facts dd { font-size: 12px; }
}