/* MP Shop (profile.js shopHTML: .mx.v2). Built from the same pieces as Home: cards with an h2 header, tinted tiles, white pill buttons.
   Loads after mp-shop.css and mp-shop-items.css. */
#shc .mx.v2{--r-free:#cbd5e1;--r-common:#cbd5e1;--r-rare:#60a5fa;--r-epic:#c084fc;--r-legend:#fbbf24;--r-own:#4ade80;display:flex;flex-direction:column;gap:14px}

/* ---------- header ---------- */
.mx2-top{display:flex;align-items:center;gap:12px;margin:0 0 -2px}
.mx2-bk{all:unset;cursor:pointer;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08)}
.mx2-bk svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mx3-ttl{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mx3-ttl h2{margin:0;font:850 26px/1 ui-rounded,"SF Pro Rounded",-apple-system,system-ui,sans-serif;letter-spacing:-.03em}
.mx3-ttl small{font-size:12.5px;font-weight:600;color:rgba(235,235,245,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx2-bal{flex:none;height:38px!important;padding:0 14px 0 10px!important;gap:7px!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.08);font-variant-numeric:tabular-nums}
.mx2-bal .mp-i{width:18px!important;height:18px!important}

/* ---------- categories: pills with the illustrated icons, stuck to the top while you scroll ---------- */
.mx2-cats{position:sticky;top:-1px;z-index:5;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--pad,16px) * -1);padding:8px var(--pad,16px) 10px;background:rgba(16,16,24,.9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.mx2-cats::-webkit-scrollbar{display:none}
.mx2-cat{all:unset;cursor:pointer;flex:none;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 15px 0 5px;border-radius:99px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07);
  font-size:14px;font-weight:750;color:rgba(255,255,255,.78);white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.mx2-cat>svg{width:18px;height:18px;margin-left:8px}
.mx2-cat.on{background:#fff;color:#0b0b10;border-color:#fff}
.mx2-cat.drop{background:linear-gradient(135deg,rgba(234,88,12,.32),rgba(124,45,18,.28));border-color:rgba(251,146,60,.45);color:#fed7aa}
.mx2-cat.drop.on{background:linear-gradient(135deg,#fed7aa,#fb923c);color:#3b1203;border-color:transparent}
.mx3-ci{position:relative;flex:none;width:32px;height:32px;border-radius:10px;overflow:hidden;box-shadow:0 4px 10px -5px rgba(0,0,0,.8)}
.mx3-ci>.gic>svg{width:82%!important;height:82%!important}

/* ---------- section card (same as the cards on Home) ---------- */
.mx3-sec{padding:16px;border-radius:24px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
.mx3-sec .h14-h,.mx3-lead .h14-h{margin-bottom:12px}
.mx3-lead .h14-h{margin:2px 2px 0}
.mx3-own{flex:none;height:28px;line-height:28px;padding:0 11px;border-radius:99px;background:rgba(255,255,255,.07);font-size:12.5px;font-weight:800;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
.mx3-gh{display:flex;align-items:center;gap:7px;margin:14px 2px 8px;font-size:12px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--rc)}
.mx3-gh:first-of-type{margin-top:2px}
.mx3-gh i{width:7px;height:7px;border-radius:50%;background:var(--rc);box-shadow:0 0 8px var(--rc)}
.mx3-gh span{margin-left:2px;color:rgba(255,255,255,.4);letter-spacing:0}
.mx3-gh.r-own{--rc:var(--r-own)}.mx3-gh.r-common{--rc:var(--r-common)}.mx3-gh.r-rare{--rc:var(--r-rare)}.mx3-gh.r-epic{--rc:var(--r-epic)}.mx3-gh.r-legend{--rc:var(--r-legend)}

/* ---------- preview ---------- */
.mx2-pv{position:relative}
.mx2-pv .mx-card,.mx2-pv .mx-app{margin:0}
.mx2-pv .mx-card{border-radius:24px}
.mx2-pv .mx-ban{height:72px}
.mx2-pv .mx-body{display:flex;align-items:flex-end;gap:12px;padding:0 14px 14px}
.mx2-pv .mx-av{flex:none;margin-top:-30px}
.mx2-pv .mx-id{min-width:0;margin:0 0 4px}
.mx2-pv .mx-id .pname{font-size:20px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx2-pv .mx-bdgs{flex-basis:100%}
.mx2-pv .mx-body:has(.mx-bdgs){flex-wrap:wrap}
.mx2-pv:has(.mx-app) .mx2-pl{right:auto;left:50%;transform:translateX(-50%)}
.mx2-pl{position:absolute;top:10px;right:12px;z-index:3;height:24px;line-height:24px;padding:0 10px;border-radius:99px;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff}

/* ---------- tiles ---------- */
.mx2-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:560px){.mx2-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.mx2-t{all:unset;cursor:pointer;box-sizing:border-box;position:relative;display:flex;flex-direction:column;gap:9px;padding:6px 6px 10px;border-radius:18px;min-width:0;
  background:linear-gradient(160deg,color-mix(in srgb,var(--rc) 13%,transparent),rgba(255,255,255,.025) 70%);border:1px solid color-mix(in srgb,var(--rc) 22%,rgba(255,255,255,.05));transition:transform .12s,border-color .15s,box-shadow .15s}
.mx2-t:active{transform:scale(.97)}
.mx2-t.r-free,.mx2-t.r-common{--rc:var(--r-common)}.mx2-t.r-rare{--rc:var(--r-rare)}.mx2-t.r-epic{--rc:var(--r-epic)}.mx2-t.r-legend{--rc:var(--r-legend)}
.mx2-t.r-legend{box-shadow:0 12px 28px -20px var(--r-legend)}
.mx2-t.sel{border-color:#fff;box-shadow:0 0 0 1.5px #fff,0 14px 30px -18px var(--rc)}
.mx2-art{position:relative;display:grid;place-items:center;aspect-ratio:4/3;border-radius:13px;overflow:hidden;--rc2:var(--rc,#cbd5e1);
  background:radial-gradient(80% 90% at 50% 40%,color-mix(in srgb,var(--rc2) 20%,#1d1d29),#0e0e15)}
.mx2-art>*{max-width:100%;max-height:100%}
.mx2-art.mx2-art{grid-template-columns:1fr}
.mx2-art .sw-bg,.mx2-art .sw-th{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.mx2-art.k-theme .sw-th{transform:none}
.mx2-art .sw-fr{display:grid;place-items:center;width:100%;height:100%}
.mx2-art .sw-fr .pav{--s:60px!important;width:60px;height:60px}
.mx2-art .sw-nm{display:grid;place-items:center;width:100%;height:100%;padding:0 8px;box-sizing:border-box}
.mx2-art .sw-nm b{max-width:100%;font-size:26px;font-weight:900;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:clip}
.mx2-art .sw-glw{position:relative;display:grid;place-items:center}
.mx2-art .sw-glw::before{content:"";position:absolute;inset:-26px;border-radius:50%;background:radial-gradient(closest-side,var(--c),transparent);opacity:.85}
.mx2-art .sw-glw .pav{--s:50px!important;position:relative;filter:drop-shadow(0 0 10px var(--c))}
.mx2-art .sw-ac{width:46px;height:46px;margin:0}
.mx2-art .mx-bd{width:58px;height:58px;font-size:22px}.mx2-art .mx-bd svg{width:28px!important;height:28px!important}
.mx2-art.k-fx canvas.pfx{position:absolute;inset:0;width:100%;height:100%}
.mx2-rib{position:absolute;top:7px;left:7px;z-index:2;display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 7px;border-radius:99px;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-style:normal;font-size:10px;font-weight:800;letter-spacing:.03em;color:rgba(255,255,255,.88)}
.mx2-rib.lim{background:linear-gradient(135deg,#f59e0b,#c2410c);color:#fff}
.mx2-rib svg{width:11px;height:11px;fill:currentColor}
.mx2-ok{position:absolute;top:7px;right:7px;z-index:2;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#30d158;color:#04170a;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.mx2-ok svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.mx2-nm{display:flex;flex-direction:column;gap:4px;padding:0 5px;min-width:0}
.mx2-nm>b{font-size:14.5px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx2-mt{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.mx2-mt small{display:inline-flex;align-items:center;gap:5px;min-width:0;font-size:11.5px;font-weight:700;color:color-mix(in srgb,var(--rc) 85%,#fff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx2-mt small i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--rc)}
.mx2-st{flex:none;display:inline-flex;align-items:center;gap:4px;font-style:normal;font-size:13px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.mx2-st .mp-i{width:14px;height:14px;margin:0}
.mx2-st.on{height:22px;padding:0 8px;border-radius:99px;background:rgba(48,209,88,.16);color:#30d158;font-size:11.5px}
.mx2-st.own{color:rgba(255,255,255,.5);font-size:12px;font-weight:700}
.mx2-t.own:not(.on):not(.sel){background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07)}

/* ---------- the buy bar: a floating card at the bottom ---------- */
#shc .mx.v2 .mx-act{margin:0 calc(var(--pad) * -1) 0;padding:10px var(--pad) calc(10px + var(--sab));background:linear-gradient(180deg,rgba(16,16,24,0),rgba(16,16,24,.96) 22%);border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
#shc .mx.v2 .mx-act.on .mpa{padding:8px 8px 8px 8px;border-radius:22px;background:rgba(32,32,44,.92);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 40px -16px #000}
#shc .mx.v2 .mx-act:not(.on){padding:0;height:calc(10px + var(--sab));background:none}
.mx3-bt{flex:none;width:52px;height:52px;aspect-ratio:auto;border-radius:14px}
.mx3-bt.r-free,.mx3-bt.r-common{--rc2:var(--r-common)}.mx3-bt.r-rare{--rc2:var(--r-rare)}.mx3-bt.r-epic{--rc2:var(--r-epic)}.mx3-bt.r-legend{--rc2:var(--r-legend)}
.mx3-bt .sw-fr .pav{--s:40px!important;width:40px;height:40px}.mx3-bt .sw-glw .pav{--s:30px!important}.mx3-bt .sw-glw::before{inset:-14px}
.mx3-bt .sw-nm b{font-size:15px}.mx3-bt .mx-bd{width:36px;height:36px}.mx3-bt .mx-bd svg{width:18px!important;height:18px!important}
.mx3-bt .mx2-rib,.mx3-bt .mx2-ok{display:none}
.mx-act .mpa-i small{gap:5px}
.mx2-rd{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rc,#cbd5e1)}
.mx2-rd.r-free,.mx2-rd.r-common{--rc:#cbd5e1}.mx2-rd.r-rare{--rc:#60a5fa}.mx2-rd.r-epic{--rc:#c084fc}.mx2-rd.r-legend{--rc:#fbbf24}
#shc .mx.v2 .mx-act{margin-top:-4px}
.mx.v2 .mx-go{height:52px;border-radius:99px;font-weight:800;padding:0 24px;min-width:0}
.mx.v2 .mx-sell{height:52px;border-radius:99px}

/* ---------- full looks ---------- */
.mx.v2 .bx-list{gap:14px;padding:0}
@media (min-width:640px){.mx.v2 .bx-list{display:grid;grid-template-columns:1fr 1fr}}
.mx3-bx{position:relative;border-radius:24px!important;padding:6px;
  background:radial-gradient(120% 70% at 100% 0%,color-mix(in srgb,var(--ta) 16%,transparent),transparent 60%),rgba(255,255,255,.035)!important;border:1px solid color-mix(in srgb,var(--ta) 30%,rgba(255,255,255,.07))!important}
.mx3-bx .bx-pv{border-radius:19px!important;overflow:hidden}
.mx3-bx .bx-pv .mx-ban{height:104px}
.mx3-bx .mx-body{display:flex;align-items:flex-end;gap:12px;padding:0 12px 12px}
.mx3-bx .mx-av{flex:none;margin-top:-34px}
.mx3-bx .mx-id{min-width:0;margin:0 0 4px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.mx3-bx .mx-id .pname{font-size:19px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mx3-bdg{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 4px;border-radius:99px;background:rgba(255,255,255,.08);font-size:11.5px;font-weight:750;color:#fff}
.mx3-bdg i{display:grid;place-items:center;width:16px;height:16px;border-radius:50%}
.mx3-bdg i svg{width:10px;height:10px;fill:#fff}
.mx3-bx .bx-info{padding:12px 8px 8px;gap:14px}
.mx3-bx .bx-hd{align-items:flex-start}
.mx3-bx .bx-hd>span{display:flex;flex-direction:column;gap:3px;min-width:0}
.mx3-bx .bx-hd b{font:850 20px/1.1 ui-rounded,"SF Pro Rounded",-apple-system,system-ui,sans-serif;letter-spacing:-.02em}
.mx3-bx .bx-hd small{font-size:13px;font-weight:600;color:rgba(235,235,245,.55)}
.mx3-bx .bx-hd em{margin-top:1px;padding:5px 10px;font-size:12px}
/* what's in the look */
.mx3-in{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -8px;padding:0 8px}
.mx3-in::-webkit-scrollbar{display:none}
.mx3-pc{flex:none;width:64px;display:flex;flex-direction:column;align-items:center;gap:5px}
.mx3-pc .mx2-art{width:64px;height:56px;aspect-ratio:auto;border-radius:14px;--rc2:var(--ta);border:1px solid rgba(255,255,255,.07)}
.mx3-pc small{max-width:100%;font-size:10.5px;font-weight:700;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx3-pc .sw-fr .pav{--s:40px!important;width:40px;height:40px}.mx3-pc .sw-glw .pav{--s:30px!important}.mx3-pc .sw-glw::before{inset:-14px}
.mx3-pc .sw-nm{padding:0 4px}.mx3-pc .sw-nm b{font-size:13px}.mx3-pc .mx-bd{width:36px;height:36px}.mx3-pc .mx-bd svg{width:18px!important;height:18px!important}
.mx3-pc .sw-th{transform:none!important}
.mx3-pc.own{opacity:.5}
.mx3-pc.own .mx2-art::after{content:"";position:absolute;top:4px;right:4px;width:14px;height:14px;border-radius:50%;background:#30d158 url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M5 12.5l4.5 4.5L19 7.5" fill="none" stroke="%2304170a" stroke-width="3.6" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E') center/10px no-repeat}
.mx3-bx .bx-buy{padding:12px 4px 0;border-top:1px solid rgba(255,255,255,.07)}
.mx3-bx .bx-pr b{font-size:21px}
.mx3-bx .bx-pr b .mp-i{width:18px;height:18px}
.mx3-bx.lim{border-color:rgba(251,146,60,.45)!important;box-shadow:0 20px 44px -28px rgba(234,88,12,.9)}
.mx3-bx.got{opacity:.92}
.bx-rib{top:10px!important;left:10px!important;right:auto!important}

/* ---------- the season's drop ---------- */
.mx3-drop{position:relative;overflow:hidden;isolation:isolate;min-height:230px;border-radius:24px;background:#120601;border:1px solid rgba(251,146,60,.32);box-shadow:0 22px 44px -28px rgba(234,88,12,.9)}
.mx3-drop>.ssn-scene{position:absolute;inset:0;z-index:-2}
.mx3-drop::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(18,6,1,.94) 0%,rgba(18,6,1,.7) 46%,rgba(18,6,1,.05) 80%),linear-gradient(0deg,rgba(18,6,1,.85),transparent 52%)}
.mx3-drop>canvas.pfx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.85}
.mx3-db{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 16px 16px}
.mx3-db>b{margin-top:10px;font:850 28px/1.02 ui-rounded,"SF Pro Rounded",-apple-system,system-ui,sans-serif;letter-spacing:-.03em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.mx3-db>p{margin:0;max-width:30ch;font-size:13.5px;line-height:1.4;color:rgba(255,232,200,.8)}
.mx3-dm{display:flex;gap:18px;margin-top:14px}
.mx3-dm span{display:flex;flex-direction:column;gap:1px}
.mx3-dm b{font-size:18px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mx3-dm small{font-size:11px;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:rgba(253,230,138,.65)}
.mx3-dt{align-self:stretch;height:5px;margin-top:12px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.mx3-dt i{display:block;height:100%;width:var(--p);min-width:6px;border-radius:99px;background:linear-gradient(90deg,#fde68a,#f97316)}
@media (prefers-reduced-motion:reduce){.mx3-drop canvas.pfx{display:none}}