/* Account listing detail on /product?id=<account> (body.nx-account-product).
   Markup comes from assets/js/pages/account-listing.js; rarity colours match assets/css/pages/accounts.css.
   Logical properties only, so Arabic (RTL) mirrors without a second sheet. */
.nx-account-product .prod-image-box{position:relative}
.accx-gallery-count{position:absolute;bottom:12px;inset-inline-start:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.72);color:#e6edf0;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700;pointer-events:none;backdrop-filter:blur(8px)}
.accx-gallery-count i{display:inline-flex;color:#45F882}.accx-gallery-count .nx-i{width:14px;height:14px}
.nx-account-product .prod-thumbs{gap:10px;overflow-x:auto;flex-wrap:nowrap;padding:2px 2px 6px}
.nx-account-product .prod-thumb{width:76px;height:76px;flex:0 0 auto}
.nx-account-product .prod-thumb[aria-pressed="true"]{border-color:#45F882;box-shadow:0 0 12px rgba(69,248,130,.4)}
.nx-account-product .prod-thumb:focus-visible{outline:2px solid #45F882;outline-offset:2px}

#prod-account-specs>*+*{margin-top:20px}
#prod-account-specs .prod-account-specs-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
#prod-account-specs .prod-account-specs-head span{display:block;color:#45F882;font-size:11px;font-weight:800;letter-spacing:.12em}
#prod-account-specs .prod-account-specs-head h2{margin:2px 0 0;color:#fff;font-family:'Rajdhani',sans-serif;font-size:24px;line-height:1.2}
#prod-account-specs .prod-account-specs-head>i{display:inline-flex;color:#45F882}#prod-account-specs .prod-account-specs-head .nx-i{width:26px;height:26px}
.accx-sec h3{margin:0 0 10px;color:#e6edf0;font-family:'Rajdhani',sans-serif;font-size:16px;letter-spacing:.04em;text-transform:uppercase}
.accx-k{color:#a9aeab}

/* Key facts */
.accx-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0}
.accx-fact{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);min-width:0}
.accx-fact>i{display:inline-flex;color:#45F882;flex:none}.accx-fact .nx-i{width:18px;height:18px}
.accx-fact>div{min-width:0}
.accx-fact dt{margin:0;color:#a9aeab;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.accx-fact dd{margin:2px 0 0;color:#fff;font-weight:700;font-size:15px;overflow-wrap:anywhere}

/* Rarity breakdown with progress bars */
.accx-r--ultimate{--rc:#ffd36b}.accx-r--legendary{--rc:#ff9060}.accx-r--mythic{--rc:#c9a0ff}.accx-r--epic{--rc:#52d8ee}
.accx-rows{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.accx-row-h{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:14px}
.accx-row-h b{margin-inline-start:auto;color:var(--rc);font-weight:800;font-variant-numeric:tabular-nums}
.accx-dot{width:9px;height:9px;border-radius:50%;background:var(--rc);flex:none}
.accx-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden}
.accx-bar>i{display:block;height:100%;width:var(--pct,0%);background:var(--rc);border-radius:inherit;transition:width .6s ease}

/* Seller video: an external link, never an embed */
.accx-video{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid rgba(69,248,130,.3);background:rgba(69,248,130,.06);color:#fff;text-decoration:none}
.accx-video:hover{border-color:#45F882;background:rgba(69,248,130,.1)}
.accx-video:focus-visible{outline:2px solid #45F882;outline-offset:3px}
.accx-video>i{display:inline-flex;color:#45F882;flex:none}.accx-video .nx-i{width:22px;height:22px}
.accx-video-t{display:flex;flex-direction:column;min-width:0}.accx-video-t b{font-size:15px}.accx-video-t small{color:#a9aeab;font-size:12px;overflow-wrap:anywhere}
.accx-video>i:last-of-type{margin-inline-start:auto}.accx-video>i:last-of-type .nx-i{width:16px;height:16px;opacity:.8}

/* More information */
.accx-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px 14px;margin:0}
.accx-more>div{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.07);min-width:0}
.accx-more dt{margin:0;color:#a9aeab;font-size:11.5px}.accx-more dd{margin:2px 0 0;color:#fff;font-weight:600;overflow-wrap:anywhere}

/* What you get / how handover works */
.accx-handover{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;padding:14px;border-radius:14px;border:1px solid rgba(69,248,130,.18);background:rgba(69,248,130,.04)}
.accx-handover h3{margin-bottom:8px}
.accx-gets,.accx-steps{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.accx-gets li{display:flex;align-items:flex-start;gap:9px;color:#d5dad7;font-size:13.5px;line-height:1.45}
.accx-gets i{display:inline-flex;color:#45F882;margin-top:2px;flex:none}.accx-gets .nx-i{width:15px;height:15px}
.accx-gets b{color:#fff}
.accx-steps{counter-reset:accx}
.accx-steps li{counter-increment:accx;position:relative;padding-inline-start:32px;color:#b6bbb8;font-size:13px;line-height:1.45}
.accx-steps li::before{content:counter(accx);position:absolute;inset-inline-start:0;top:0;width:22px;height:22px;border-radius:50%;background:#45F882;color:#08110b;font-weight:800;font-size:12px;display:grid;place-items:center}
.accx-steps b{display:block;color:#fff;font-size:14px}

@media(max-width:575px){.accx-facts{grid-template-columns:repeat(2,minmax(0,1fr))}#prod-account-specs .prod-account-specs-head h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){.accx-bar>i{transition:none}}