/* Shop workspace: accounts branch into compact character cards and rewards. */
.mb-shop-workspace { --mb-shop-sidebar-width:300px; --mb-shop-content-gap:20px; position:relative; }
.mb-shop-workspace [hidden] { display:none !important; }
.mb-shop-workspace, [data-shop-accounts], .mb-shop-form { min-width:0; }
.mb-shop-global-toolbar, .mb-shop-layout { display:grid; grid-template-columns:minmax(0,1fr) var(--mb-shop-sidebar-width); gap:var(--mb-shop-content-gap); align-items:start; }
.mb-shop-global-toolbar { align-items:end; margin-bottom:18px; }
.mb-shop-global-toolbar .mb-shop-workspace-toolbar { grid-column:1; grid-row:1; margin:0; }
.mb-shop-global-toolbar .mb-shop-account-actions { grid-column:2; grid-row:1; width:100%; }
.mb-shop-layout > [data-shop-accounts] { min-width:0; }
.mb-shop-layout > .mb-shop-sidebar { margin-top:94px; align-self:start; max-height:calc(100vh - 140px); max-height:calc(100dvh - 140px); overflow:auto; scrollbar-width:thin; scrollbar-color:#9d7a38 #171719; }
.mb-shop-layout > .mb-shop-sidebar::-webkit-scrollbar { width:10px; }
.mb-shop-layout > .mb-shop-sidebar::-webkit-scrollbar-track { border-left:1px solid var(--mb-line); border-radius:999px; background:#171719; }
.mb-shop-layout > .mb-shop-sidebar::-webkit-scrollbar-thumb { min-height:48px; border:2px solid #171719; border-radius:999px; background:linear-gradient(180deg,#d9a441,#80642f); }
.mb-shop-layout > .mb-shop-sidebar::-webkit-scrollbar-thumb:hover { background:linear-gradient(180deg,#e8bd65,#a27d38); }
.mb-shop-layout > .mb-shop-sidebar::-webkit-scrollbar-button { display:none; width:0; height:0; }
.mb-shop-layout > .mb-shop-sidebar::-webkit-scrollbar-corner { background:#171719; }
.mb-shop-workspace-toolbar { grid-column:1/-1; grid-row:1; display:flex; justify-content:flex-end; min-width:0; margin-bottom:4px; }
.mb-shop-expansions { display:flex; align-items:stretch; gap:4px; min-width:0; max-width:100%; height:44px; box-sizing:border-box; padding:3px; border:1px solid var(--mb-line); border-radius:10px; background:var(--mb-panel); }
.mb-shop-expansion { --mb-expansion-accent:#d7b85e; --mb-expansion-tint:rgba(207,169,74,.12); display:flex; align-items:center; justify-content:center; gap:7px; min-height:0; padding:5px 9px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--mb-muted); font:600 12px/1.4 var(--mb-ui,sans-serif); white-space:nowrap; cursor:pointer; transition:background .16s,border-color .16s,color .16s; }
.mb-shop-expansion[data-shop-expansion-select="tbc"] { --mb-expansion-accent:#8fcb7a; --mb-expansion-tint:rgba(108,166,86,.13); }
.mb-shop-expansion[data-shop-expansion-select="wrath"] { --mb-expansion-accent:#8bc6e8; --mb-expansion-tint:rgba(82,150,190,.13); }
.mb-shop-expansion img { flex:none; }
.mb-shop-expansion:hover, .mb-shop-expansion[aria-pressed="true"] { color:var(--mb-expansion-accent); border-color:var(--mb-expansion-accent); background:var(--mb-expansion-tint); }
.mb-shop-expansion[aria-pressed="true"] { box-shadow:inset 0 -2px 0 var(--mb-expansion-accent); }
.mb-shop-expansion:focus-visible { outline:2px solid var(--mb-expansion-accent); outline-offset:3px; }
.mb-shop-expansion-label { display:inline-flex; align-items:center; gap:6px; color:var(--mb-muted); font:12px/1.4 var(--mb-ui,sans-serif); }
.mb-shop-expansion-label img { flex:none; }
.mb-shop-form { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-items:start; }
[data-shop-accounts] > .mb-shop-form + .mb-shop-form { margin-top:30px; padding-top:0; border-top:0; }
.mb-shop-account-toolbar { display:flex; align-items:flex-end; gap:8px; min-width:0; }
.mb-shop-form .mb-shop-account-picker { flex:0 1 352px; width:352px; max-width:100%; min-width:0; line-height:24px; gap:8px; }
.mb-shop-account-actions { grid-column:3; grid-row:2; display:flex; align-items:stretch; justify-content:center; justify-self:end; gap:8px; width:min(100%,var(--mb-shop-sidebar-width)); min-width:0; }
.mb-shop-account-actions .mb-btn { flex:1 1 0; justify-content:center; min-width:0; min-height:44px; margin:0; padding-right:12px; padding-left:12px; white-space:nowrap; }
.mb-shop-account-actions .mb-shop-empty-cart[hidden] { display:inline-flex !important; visibility:hidden; pointer-events:none; }
.mb-shop-empty-cart { color:var(--mb-muted); border-color:var(--mb-line); }
.mb-shop-empty-cart:hover { color:var(--mb-head); border-color:var(--mb-gold); }
.mb-shop-remove-account { grid-column:2; grid-row:2; align-self:end; white-space:nowrap; }
.mb-shop-account-content { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--mb-shop-content-gap); align-items:start; margin-left:14px; padding-left:22px; border-left:1px solid var(--mb-line); min-width:0; }
.mb-shop-draft-note, .mb-shop-catalog-empty { grid-column:1/-1; }
.mb-shop-account-content > .repeater { min-width:0; }
.mb-shop-form .mb-order { position:relative; padding:16px 18px; border-radius:10px; margin-bottom:12px; }
.mb-shop-form .mb-order::before { content:''; position:absolute; left:-23px; top:35px; width:22px; height:1px; background:var(--mb-line); }
.mb-shop-more-accounts { margin-top:26px; }
.mb-shop-more-accounts .mb-btn { max-width:100%; white-space:normal; text-align:center; }
[data-shop-workspace-status] { margin:16px 0 0; color:var(--mb-muted); font:14px/1.6 var(--mb-ui, sans-serif); }
.mb-shop-form .mb-order-head { align-items:flex-end; margin:0; }
.mb-shop-form .mb-order-character { min-width:0; flex:1; max-width:420px; }
.mb-shop-form .mb-shop-account-toolbar .mb-shop-account-picker { flex:0 1 352px; width:352px; max-width:352px; }
.mb-shop-form .mb-order-character select { width:100%; border-radius:6px; }
.mb-shop-form .mb-order-character select[data-parent-input="character_name"] { color:var(--mb-class-color,var(--mb-head)); }
.mb-shop-character-caption { display:none; }
.mb-shop-remove, .mb-shop-remove-account { flex:none; display:inline-flex; align-items:center; justify-content:center; min-height:44px; box-sizing:border-box; padding:10px 15px; border:1px solid var(--mb-line); border-radius:6px; background:rgba(255,255,255,.025); color:var(--mb-muted); font:13px/1.4 var(--mb-ui,sans-serif); text-decoration:none; cursor:pointer; transition:color .16s,border-color .16s,background .16s; }
.mb-shop-remove:hover, .mb-shop-remove-account:hover { color:var(--mb-head); border-color:var(--mb-gold); background:rgba(207,169,74,.07); text-decoration:none; }
.mb-shop-remove:disabled { opacity:.35; cursor:default; text-decoration:none; }
.mb-character-items { margin-top:14px; border-top:1px solid var(--mb-line); }
.mb-character-items > summary { display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; padding:16px 0 2px; color:var(--mb-gold); font:600 15px var(--mb-ui, sans-serif); }
.mb-character-items > summary::before { content:'+'; font-size:22px; font-weight:400; width:16px; }
.mb-character-items[open] > summary::before { content:'−'; }
.mb-character-items > summary::-webkit-details-marker { display:none; }
.mb-character-items-label { flex:none; }
.mb-character-icons { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:4px; margin-left:auto; }
.mb-character-icons:empty { display:none; }
.mb-character-icons img { display:block; width:26px; height:26px; object-fit:cover; border:1px solid var(--mb-line); border-radius:5px; }
.mb-character-icons > span { position:relative; display:inline-flex; }
.mb-character-icons small { position:absolute; right:-3px; bottom:-3px; min-width:13px; padding:0 2px; border-radius:3px; background:var(--mb-bg); color:var(--mb-head); text-align:center; font:10px/1.3 var(--mb-ui,sans-serif); }
.mb-character-selection { flex:none; margin-left:auto; color:var(--mb-muted); font-size:12px; font-weight:400; }
.mb-character-icons:not(:empty) + .mb-character-selection { margin-left:2px; }
.mb-shop-search { display:block; margin-top:12px; }
.mb-shop-search input { width:100%; box-sizing:border-box; border:1px solid var(--mb-line); border-radius:6px; padding:11px 13px; color:var(--mb-head); background:var(--mb-bg); font:14px var(--mb-ui, sans-serif); }
.mb-shop-form .mb-shop-category { margin-top:16px; }
.mb-shop-form .mb-shop-grid { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.mb-shop-form .mb-shop-item { border-radius:8px; transition:border-color .16s,background-color .16s; }
.mb-shop-form .mb-shop-item.is-selected { border-color:var(--mb-gold); background:rgba(207,169,74,.075); }
.mb-shop-form .mb-shop-item[hidden] { display:none; }
.mb-shop-form .mb-shop-item-top { align-items:center; }
.mb-shop-form .mb-shop-icon { flex:none; width:48px; height:48px; border-radius:6px; background-size:cover; }
.mb-shop-item-details { font:13px/1.65 var(--mb-ui, sans-serif); color:var(--mb-muted); }
.mb-shop-item-details > summary { cursor:pointer; color:var(--mb-gold); }
.mb-shop-item-details > div, .mb-shop-item-details > p { margin:10px 0 0; }
.mb-shop-item-details p { font-size:13px; }
.mb-shop-item-details img { max-width:100%; height:auto; }
.mb-shop-form .mb-shop-item-bottom { margin-top:auto; }
.mb-shop-form .mb-qty-btn { border:0; background:transparent; color:inherit; font:20px var(--mb-ui, sans-serif); cursor:pointer; }
.mb-shop-sidebar { display:grid; gap:14px; position:sticky; top:116px; min-width:0; }
.mb-shop-checkout { display:flex; flex-direction:column; align-items:stretch; gap:18px; padding:20px; border-radius:10px; margin:0; }
.mb-shop-transfer-faq { margin:0; padding:18px 20px; border-radius:10px; }
.mb-shop-transfer-faq h3 { margin:0 0 12px; font-size:20px; line-height:1.3; }
.mb-shop-transfer-faq p { margin:10px 0 0; color:var(--mb-muted); font:12px/1.65 var(--mb-ui,sans-serif); }
.mb-shop-transfer-faq > p { color:#e7a943; font-weight:700; }
.mb-shop-faq-details { margin-top:12px; font:12px/1.5 var(--mb-ui,sans-serif); }
.mb-shop-faq-details > summary { padding:6px 0; color:var(--mb-gold); cursor:pointer; }
.mb-shop-faq-details > summary:focus-visible { outline:2px solid var(--mb-gold); outline-offset:3px; }
.mb-shop-transfer-path { display:flex; flex-wrap:wrap; align-items:center; gap:4px 7px; margin:14px 0; color:var(--mb-head); font:600 11px/1.7 var(--mb-ui,sans-serif); }
.mb-shop-transfer-path [aria-hidden] { color:var(--mb-gold); }
.mb-shop-transfer-faq .mb-shop-faq-planned { padding-top:10px; border-top:1px solid var(--mb-line); font-size:11px; }
.mb-shop-summary-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mb-shop-summary-head h3 { margin:0; font-size:24px; }
.mb-shop-summary-head .mb-caps { font-size:10px; }
.mb-shop-summary { display:grid; gap:18px; font:14px/1.5 var(--mb-ui, sans-serif); }
.mb-shop-summary > p { margin:0; font:14px/1.6 var(--mb-ui, sans-serif); color:var(--mb-muted); }
.mb-shop-summary .mb-shop-recipient-heading { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:8px; }
.mb-shop-summary-recipient h4 { margin:0; color:var(--mb-class-color,var(--mb-head)); font:600 14px/1.4 var(--mb-ui, sans-serif); }
.mb-shop-summary .mb-shop-recipient-heading .mb-shop-expansion-label { line-height:1.4; }
.mb-shop-summary-line { display:flex; gap:14px; justify-content:space-between; margin-top:6px; color:var(--mb-muted); font-size:13px; }
.mb-shop-summary-line span { overflow-wrap:anywhere; }
.mb-shop-summary-line strong, .mb-shop-grand-value { font-family:var(--mb-text); }
.mb-shop-summary-line strong { flex:none; color:var(--mb-head); font-weight:600; font-variant-numeric:tabular-nums; }
.mb-shop-grand { display:flex; border-top:1px solid var(--mb-line); padding-top:18px; flex-direction:row; align-items:center; justify-content:space-between; gap:10px; }
.mb-shop-grand-value { font-size:25px; }
.mb-shop-checkout .buy-button { width:100%; padding:15px 10px; }
.mb-paypal-button { display:flex; align-items:center; justify-content:center; min-height:56px; gap:10px; border-radius:6px; }
.mb-paypal-button img { display:block; width:101px; height:36px; object-fit:contain; }
.mb-paypal-button[aria-busy="true"] { font:600 15px/1.5 var(--mb-ui,sans-serif); letter-spacing:0; text-transform:none; }
.mb-paypal-button:focus-visible { outline:2px solid var(--mb-head); outline-offset:4px; }
.mb-shop-recipient-account { display:block; margin:-2px 0 8px; color:var(--mb-muted); font:11px/1.4 var(--mb-ui,sans-serif); }
.mb-shop-checkout-status { margin:0; color:var(--mb-gold); font:13px/1.6 var(--mb-ui,sans-serif); }
.mb-cart-combined-footer { border:1px solid var(--mb-line); border-radius:8px; margin:18px 0; padding:18px; }
.mb-shop-checkout-note { margin:0; color:var(--mb-muted); font:12px/1.65 var(--mb-ui, sans-serif); }
.mb-shop-catalog-empty { padding:22px 24px; border:1px solid var(--mb-line); border-radius:12px; background:var(--mb-panel); }
.mb-shop-catalog-empty h3 { font-size:25px; margin:6px 0; }
.mb-shop-catalog-empty p, .mb-shop-draft-note, .mb-shop-no-results { font:14px/1.7 var(--mb-ui, sans-serif); color:var(--mb-muted); margin:8px 0 0; }
.mb-shop-draft-note { color:var(--mb-gold); }
.mb-shop-order-limit { margin:0; color:var(--mb-gold); font:13px/1.6 var(--mb-ui, sans-serif); }
.mb-shop-form button:focus-visible, .mb-shop-form summary:focus-visible, .mb-shop-form input:focus-visible, .mb-shop-form select:focus-visible { outline:2px solid var(--mb-gold); outline-offset:3px; }
@media (min-width:1400px) {
    .mb-shop-global-toolbar { position:absolute; top:32px; right:0; width:calc(100% - 490px); margin:0; }
    .mb-shop-account-toolbar { grid-template-columns:minmax(0,352px) max-content; gap:0; justify-content:start; }
    .mb-shop-form .mb-shop-account-picker { grid-column:1; grid-row:1; }
    .mb-shop-remove-account { grid-column:2; grid-row:1; margin-left:8px; }
    .mb-shop-workspace-toolbar { grid-column:3; grid-row:1; margin:0 0 0 12px; }
    .mb-shop-account-actions { grid-column:4; grid-row:1; }
}
@media (max-width:1000px) {
    .mb-shop-workspace { --mb-shop-sidebar-width:260px; --mb-shop-content-gap:16px; }
    .mb-shop-form .mb-shop-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px) {
    .mb-shop-global-toolbar { grid-template-columns:minmax(0,1fr); gap:12px; }
    .mb-shop-global-toolbar .mb-shop-account-actions { grid-column:1; grid-row:2; width:min(100%,300px); }
    .mb-shop-global-toolbar .mb-shop-workspace-toolbar { grid-column:1; grid-row:1; justify-content:stretch; }
    .mb-shop-layout { grid-template-columns:minmax(0,1fr); }
    .mb-shop-layout > .mb-shop-sidebar { margin-top:0; max-height:none; overflow:visible; }
    .mb-shop-character-caption:not(:empty) { display:block; margin-top:8px; color:var(--mb-muted); font:12px/1.5 var(--mb-ui,sans-serif); }
    .mb-shop-account-toolbar { display:flex; gap:8px; }
    .mb-shop-workspace-toolbar { grid-column:1/-1; grid-row:1; }
    .mb-shop-account-toolbar .mb-shop-account-picker { grid-column:1/-1; grid-row:2; }
    .mb-shop-remove-account { grid-column:1; grid-row:3; justify-self:start; }
    .mb-shop-account-actions { grid-column:2; grid-row:3; }
    .mb-shop-account-content { grid-template-columns:minmax(0,1fr); gap:16px; margin-left:8px; padding-left:14px; }
    .mb-shop-sidebar { position:static; }
    .mb-shop-form .mb-order { padding:14px; }
    .mb-shop-form .mb-order::before { left:-15px; width:14px; }
    .mb-shop-form .mb-shop-grid { grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)); }
    .mb-shop-form .mb-order-head { flex-wrap:nowrap; gap:8px; }
    .mb-character-selection { font-size:11px; }
    .mb-shop-summary-head h3 { font-size:22px; }
}
@media (max-width:460px) {
    .mb-shop-workspace-toolbar { justify-content:stretch; margin-bottom:8px; }
    .mb-shop-expansions { flex:1; min-width:0; height:auto; gap:3px; padding:4px; }
    .mb-shop-expansion { flex:1 1 0; min-width:0; min-height:46px; flex-direction:column; gap:5px; padding:9px 4px; font-size:10px; white-space:normal; text-align:center; }
    .mb-shop-expansion img { width:20px; height:20px; }
    .mb-shop-account-toolbar { grid-template-columns:minmax(0,1fr) auto; }
    .mb-shop-account-actions { grid-column:1/-1; grid-row:4; justify-self:stretch; width:100%; }
    .mb-shop-form .mb-order-character select { padding:0 8px; font-size:15px; }
    .mb-shop-form .mb-order-head { align-items:flex-end; }
    .mb-shop-remove { padding:10px; font-size:12px; }
    .mb-character-items > summary { flex-wrap:wrap; gap:6px; }
    .mb-character-icons { margin-left:22px; justify-content:flex-start; }
    .mb-character-selection { margin-left:auto; }
    .mb-character-icons:not(:empty) + .mb-character-selection { margin-left:auto; }
}
@media (prefers-reduced-motion:reduce) { .mb-shop-form .mb-shop-item, .mb-shop-expansion, .mb-shop-remove, .mb-shop-remove-account { transition:none; } }
/* Long actions must fit small phones without a horizontal page scroll. */
.mb-shop-add .mb-btn { max-width: 100%; height: auto; min-height: 44px; white-space: normal; text-align: center; }