/* Game account product page (body.nx-account-product), 2026-10 redesign. Loaded after buy-v4.css and account-detail.css, only for account listings.
   Mobile first: gallery, buy box, details, info. From 992px: a large gallery on the start side, the key facts + price + buy box on the end side, the details full width below.
   Logical properties only (RTL mirrors for free); colours are the site's tokens with the same fallbacks the UI v2 layer (assets/css/nx-ui-v2.css) uses. */

/* ---- layout ------------------------------------------------------------------------------------------------------------------------ */
.nx-account-product #prod-view .nx4b{grid-template-columns:minmax(0,1fr);grid-template-areas:"gallery" "side" "specs" "info";gap:16px}
.nx-account-product .nx4b-top{display:contents}
.nx-account-product .nx4b-head{grid-area:gallery}
.nx-account-product .nx4b-box{grid-area:side}
/* the buy box is not sticky here: the details row below spans both columns, and a pinned box would slide over it */
.nx-account-product #prod-view .nx4b-box{position:static!important;top:auto}
.nx-account-product #prod-account-specs{grid-area:specs}
.nx-account-product .nx4b-info{grid-area:info}
@media (min-width:992px){
  .nx-account-product #prod-view .nx4b.nx4b--page{grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);grid-template-areas:"gallery side" "specs specs" "info info";column-gap:32px;row-gap:24px;align-items:start}
}
/* there is nothing to choose on a one-off account: no "Choose an amount" step (also server-rendered hidden), no duplicate title block, no generic about text */
.nx-account-product #nx4b-step-amount,.nx-account-product .prod-qty-row,.nx-account-product .nx4b-id,.nx-account-product .prod-about,.nx-account-product #prod-safe-badge{display:none!important}

/* ---- header band: the long listing title uses the whole width ------------------------------------------------------------------------ */
.nx-account-product .nxp-head .breadcumb-title{max-width:none;font-size:clamp(20px,1.4vw + 12px,36px);line-height:1.2;overflow-wrap:anywhere}
@media (max-width:767.98px){.nx-account-product .nxp-head .breadcumb-menu li:last-child{display:none}.nx-account-product .nxp-head .nxp-head-img{width:48px;height:48px}.nx-account-product .nxp-head{padding-block:18px 14px!important}}

/* ---- gallery ---------------------------------------------------------------------------------------------------------------------- */
.nx-account-product #prod-view .nx4b-head{display:block;padding:12px!important}
/* the older product / phone rules pin this box to an 88px or square thumbnail with !important: answer them, on every width */
body.nx-account-product .nx4b--page .nx4b-head .prod-image-box{width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:16/10!important;padding:0!important;margin:0!important;border-radius:12px;background:#070a08!important;cursor:zoom-in}
body.nx-account-product .nx4b--page .nx4b-head{grid-template-columns:minmax(0,1fr)!important}
.nx-account-product .nx4b-head .prod-image-box img{object-fit:contain}
.nx-account-product .nx4b-head .prod-thumbs[style*="flex"]{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:10px;overflow:visible;padding:0}
.nx-account-product .nx4b-head .prod-thumb{width:100%;height:auto;aspect-ratio:16/10;border-radius:10px;border:2px solid var(--nx-line,rgba(255,255,255,.12));background:#070a08}
.nx-account-product .nx4b-head .prod-thumb img{object-fit:cover}
.nx-account-product .nx4b-head .prod-thumb.on,.nx-account-product .nx4b-head .prod-thumb[aria-pressed="true"]{border-color:var(--nx-signal,#45F882);box-shadow:0 0 0 1px var(--nx-signal,#45F882)}
@media (min-width:992px){.nx-account-product #prod-view .nx4b-head{padding:16px!important}}

/* ---- key facts above the price (the end column) ------------------------------------------------------------------------------------ */
.accx-summary[hidden]{display:none}
.accx-sum{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.accx-sum li{display:flex;flex-direction:column;gap:2px;min-width:0;padding:9px 12px;border-radius:10px;background:var(--nx-s2,rgba(255,255,255,.04));border:1px solid var(--nx-line,rgba(255,255,255,.08))}
.accx-sum .accx-k{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.accx-sum b{color:var(--nx-text,#fff);font-size:15px;line-height:1.3;overflow-wrap:anywhere}

/* ---- details: a clean spec grid, rarity bars, about, video button ------------------------------------------------------------------ */
.nx-account-product #prod-view .prod-account-specs{padding:18px!important}
@media (min-width:992px){.nx-account-product #prod-view .prod-account-specs{padding:28px!important}}
.nx-account-product #prod-account-specs>*+*{margin-top:24px}
.accx-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;background:var(--nx-line,rgba(255,255,255,.1));border:1px solid var(--nx-line,rgba(255,255,255,.1));border-radius:12px;overflow:hidden}
@media (min-width:768px){.accx-facts{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}
.accx-fact{display:block;min-width:0;padding:12px 16px;border:0;border-radius:0;background:var(--nx-panel,#0e1210)}
.accx-fact dt{margin:0 0 4px;color:var(--nx-text-3,#8d948f);font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.accx-fact dd{margin:0;color:var(--nx-text,#fff);font-size:16px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.accx-rows{gap:14px}
.accx-bar{height:10px}
.accx-about p{margin:0 0 10px;max-width:72ch;color:var(--nx-text-2,#c3c9c5);font-size:15px;line-height:1.65}
.accx-about p:last-child,.accx-about .accx-list:last-child{margin-bottom:0}
.accx-list{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:7px;max-width:72ch}
.accx-list li{position:relative;padding-inline-start:20px;color:var(--nx-text-2,#c3c9c5);font-size:15px;line-height:1.55}
.accx-list li::before{content:"";position:absolute;inset-inline-start:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--nx-signal,#45F882)}
.accx-video.th-btn{display:inline-flex;align-items:center;gap:10px;width:auto;max-width:100%;padding:12px 20px;background:var(--nx-signal,#45F882);border:0;color:#07110a;text-decoration:none}
.accx-video.th-btn:hover{filter:brightness(1.08)}
.accx-video.th-btn>i{color:#07110a}
.accx-video.th-btn .accx-video-t b{color:#07110a}.accx-video.th-btn .accx-video-t small{color:rgba(7,17,10,.7)}
.accx-video.th-btn>i:last-of-type{margin-inline-start:4px}
@media (min-width:768px){.accx-handover{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.accx-video.th-btn{transition:none}}