/* Commerce owns its catalogue, search and transaction surfaces. */
.commerce-page[data-commerce-loading] button:disabled:not([data-quantity-step]):not([data-purchase-confirm]) { opacity:1; }
.commerce-page .commerce-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr)); gap:16px; margin:0 0 18px; }
.commerce-page .commerce-card { min-width:0; padding:0; overflow:hidden; border:1px solid var(--theme-line,#c4dfe2); border-radius:20px; background:var(--theme-surface,#ffffffd9); box-shadow:0 10px 24px #1549580a; display:flex; flex-direction:column; transition:box-shadow .25s,border-color .25s; }
.commerce-page .commerce-card:hover,.commerce-card:focus-within { border-color:var(--theme-line,#7fc3c5); box-shadow:0 15px 35px #15495814; }
.item-showcase { height:132px; position:relative; isolation:isolate; overflow:hidden; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 85%,var(--theme-soft,#a3ddd76b),transparent 65%),linear-gradient(150deg,var(--theme-surface,#f0faf8),var(--theme-soft,#e3f2f5)); }
.item-showcase:after { content:""; position:absolute; bottom:12px; width:112px; height:14px; background:#377e8722; filter:blur(8px); border-radius:50%; z-index:-1; opacity:.8; transition:width .25s ease-out,opacity .25s ease-out; }
.commerce-page .item-showcase img,.item-showcase .item-picture { width:92px; height:92px; float:none; object-fit:contain; filter:none; }
.item-halo { position:absolute; width:104px; height:104px; border:1px solid var(--theme-line,#71bdbb55); border-radius:50%; box-shadow:0 0 0 12px #7bcac815; z-index:-1; }
.item-halo:after { content:"✦"; position:absolute; right:-5px; top:12px; color:var(--theme-gold,#dcb159); font-size:15px; animation:surface-orbit 25s linear infinite; }
.item-level,.item-count { position:absolute; top:10px; font-size:10px; padding:4px 8px; border-radius:20px; background:var(--theme-surface,#ffffffb5); border:1px solid var(--theme-line,#c4dedf); color:var(--theme-muted,#59838b); }
.item-level { left:10px; }
.item-count { right:10px; font-weight:700; color:var(--theme-ink,#207c82); }
.item-copy { min-width:0; padding:16px; display:flex; flex-direction:column; flex:1; }
.item-copy>small { font-size:8px; letter-spacing:.18em; color:var(--theme-accent,#269a9d); }
.commerce-page .item-copy h2 { font-size:18px; line-height:1.3; margin:5px 0 7px; overflow-wrap:anywhere; }
.item-copy>p { font-size:12px; line-height:1.5; color:var(--theme-muted,#66828b); margin:0 0 10px; }
.item-effects { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:12px; }
.item-effects>span { font-size:11px; padding:4px 8px; border-radius:8px; background:var(--theme-soft,#f4efdf); color:var(--theme-gold,#9a772a); }
.item-effects .item-hp { background:var(--theme-soft,#ffedef); color:var(--theme-danger,#bb586b); }
.item-effects .item-ep { background:var(--theme-soft,#def4f2); color:var(--theme-accent,#198a98); }
.item-price { display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; border-top:1px solid var(--theme-line,#dfeded); padding-top:12px; margin-top:auto; margin-bottom:10px; }
.item-price strong { font-size:20px; }
.item-price strong small { font-size:11px; }
.item-price>span { font-size:10px; color:var(--theme-muted,#69878e); }
.item-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:auto; }
.item-actions>button,.item-actions>a { flex:1; margin:0!important; font-size:12px!important; }
.commerce-page .market-own { padding:18px; background:var(--theme-surface,#ffffffba); border:1px solid var(--theme-line,#c9e2e4); border-radius:20px; margin-top:18px; }
.market-own h2 { margin-top:0; }
.market-own h2 small { font-size:13px; color:var(--theme-muted,#408d92); }
.market-own p,.market-own a { font-size:12px; }
.commerce-own { display:flex; justify-content:space-between; gap:15px; border-bottom:1px solid var(--theme-line,#cde2e2); }
.commerce-page .commerce-own { font-size:12px; padding:13px 0; align-items:center; }
.commerce-own button { border:1px solid var(--theme-line,#a9ced3); background:var(--theme-surface,#fff); border-radius:9px; padding:9px 14px; cursor:pointer; }
.commerce-history { margin-top:20px; border:1px solid var(--surface-line); border-radius:16px; background:var(--theme-surface,#ffffffa6); padding:16px 20px; font-size:13px; }
.commerce-history summary { cursor:pointer; font-weight:600; }
.commerce-history p { line-height:1.7; border-top:1px solid var(--theme-line,#d6e6e8); padding-top:10px; }
.commerce-page dialog.commerce-checkout { position:fixed; z-index:101; inset:0; margin:auto; height:fit-content; width:min(520px,calc(100vw - 24px)); max-height:85dvh; overflow:auto; padding:26px; box-sizing:border-box; border:1px solid var(--theme-line,#abd8d9); border-radius:20px; color:var(--surface-ink); background:linear-gradient(135deg,var(--theme-surface,#fff),var(--theme-soft,#eef9f5)); box-shadow:0 25px 80px #122f4266; }
.commerce-checkout::backdrop { background:#102d3d77; backdrop-filter:blur(5px); }
.commerce-checkout h2 { overflow-wrap:anywhere; }
.commerce-checkout label { display:block; margin:12px 0; font-size:13px; }
.commerce-checkout input[type=range] { width:100%; accent-color:var(--teal); }
.commerce-checkout small { display:block; margin-top:12px; }
.commerce-checkout input[type=number] { width:130px; border:1px solid var(--theme-line,#a9ced3); border-radius:10px; padding:10px 12px; background:var(--theme-surface,white); color:var(--ink); font:inherit; max-width:100%; box-sizing:border-box; }
.commerce-checkout button { margin:4px; }
.commerce-checkout>p { background:var(--theme-soft,#e0f1ec); padding:15px; border-radius:12px; }
.commerce-checkout>p strong { font-size:20px; }
.commerce-quantity { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:16px 0 12px; }
.commerce-quantity>span { flex:1 0 100%; }
.commerce-checkout .commerce-quantity .commerce-quantity-step { display:inline-grid; place-items:center; min-width:44px; min-height:44px; margin:0; padding:0; font-size:1.25rem; line-height:1; }
.commerce-quantity input[type=number] { min-height:44px; text-align:center; appearance:textfield; -moz-appearance:textfield; }
.commerce-quantity input[type=number]::-webkit-inner-spin-button,.commerce-quantity input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.avatar-overview { position:relative; z-index:2; border-radius:50%; display:block; width:92px; height:92px; }
.avatar-overview:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
/* Artwork keeps its size and existing restrained hover treatment. */
.item-showcase:before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 50% 46%,var(--theme-soft,#f7ffefcc) 0%,var(--theme-soft,#9ce8df70) 33%,transparent 68%); opacity:0; transition:opacity .3s ease-out; }
.commerce-card:hover .item-showcase:before,.commerce-card:focus-within .item-showcase:before { opacity:.55; }
.item-showcase>.item-picture,.item-showcase>img { position:relative; top:0; transition:top .2s steps(4,end); }
.commerce-card:hover .item-showcase>.item-picture,.commerce-card:focus-within .item-showcase>.item-picture,.commerce-card:hover .item-showcase>img,.commerce-card:focus-within .item-showcase>img { top:-4px; }
.commerce-card:hover .item-showcase:after,.commerce-card:focus-within .item-showcase:after { width:124px; opacity:.45; }
@media(max-width:600px) {
 .commerce-page .commerce-grid { gap:14px; }
 .item-showcase { height:120px; }
 .commerce-own { flex-wrap:wrap; }
 .commerce-page dialog.commerce-checkout { padding:20px; }
 .commerce-history { padding:14px; }
}
@media(hover:none),(pointer:coarse) { .commerce-card:hover .item-showcase>.item-picture,.commerce-card:focus-within .item-showcase>.item-picture,.commerce-card:hover .item-showcase>img,.commerce-card:focus-within .item-showcase>img { top:0; } }
@media(prefers-reduced-motion:reduce) {
 .commerce-card,.item-showcase:before,.item-showcase:after { transition:none; }
 .commerce-card .item-showcase>.item-picture,.commerce-card .item-showcase>img { top:0; transition:none; }
 .item-halo:after { animation:none; }
}