/* Sell workspace retains the legacy inventory and checkout contracts. */
#inventory {
  --sell-surface: color-mix(in srgb, var(--bg-card) 85%, var(--bg-dark));
  --sell-tint: color-mix(in srgb, var(--primary) 9%, var(--bg-card));
  --sell-border: color-mix(in srgb, var(--primary) 20%, var(--line));
  --sell-shadow: 0 16px 35px color-mix(in srgb, var(--bg-dark) 70%, transparent);
  --warn: #ff3b3b;
  --warn-line: color-mix(in srgb, var(--warn) 72%, var(--line));
  --warn-tint: color-mix(in srgb, var(--warn) 16%, var(--sell-surface));
  max-width: 1600px; padding: 2rem 1.5rem 3rem; scroll-margin-top: 90px;
  font-family: 'Manrope', sans-serif;
}
#inventory :not(i) { letter-spacing: 0; }
#inventory .section-header { display: flex; align-items: center; justify-content: flex-start; gap: 2.25rem; text-align: left; margin-bottom: 1.75rem; }
#inventory .section-header-copy { flex: 0 1 auto; min-width: 0; }
#inventory .section-header h2 { font-family: 'Sora', sans-serif; font-size: 2rem; margin-bottom: .4rem; }
#inventory .section-header p { margin: 0; max-width: 58ch; font-size: .85rem; color: var(--text-gray); }
#inventory .inventory-container { grid-template-columns: minmax(0,1fr) 300px !important; gap: 1rem; }
#inventory .inventory-grid-area { min-width: 0; }
#inventory.not-signed-in .inventory-container { grid-template-columns: minmax(0,1fr) !important; }
#inventory .sh-toolbar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; min-height: 60px; padding: .75rem .85rem; margin-bottom: .75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--sell-surface); }
#inventory .sell-inventory-title { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: .88rem; color: var(--text-white); }
#inventory .sell-inventory-title i { color: var(--primary); }
#inventory .sh-select, #inventory .sh-dd-btn { background: var(--sell-surface); border: 1px solid var(--line); border-radius: 6px; color: var(--text-white); font-size: .73rem; }
#inventory .sell-limit { font-size: .7rem; color: var(--text-gray); margin: 0 0 .75rem; }
#inventory #sh-inv-grid { grid-template-columns: repeat(5,minmax(0,1fr)) !important; gap: .55rem !important; padding: 2px 2px 12px; }
#inventory #sh-inv-grid .skin-item { min-width: 0; min-height: 228px; padding: .7rem !important; border-radius: 8px !important; background: linear-gradient(155deg,var(--sell-tint),var(--sell-surface) 65%) !important; border: 1px solid var(--line) !important; border-bottom: 2px solid color-mix(in srgb,var(--glow) 50%,var(--line)) !important; box-shadow: inset 0 1px 0 var(--line) !important; }
#inventory #sh-inv-grid .skin-item::before { display: none; }
#inventory #sh-inv-grid .skin-item:hover { transform: translateY(-2px); border-color: var(--sell-border) !important; box-shadow: var(--sell-shadow) !important; }
#inventory #sh-inv-grid .skin-item.selected { border-color: var(--primary) !important; background: linear-gradient(155deg,var(--sell-tint),var(--sell-surface)) !important; box-shadow: inset 0 0 0 1px var(--primary),0 8px 24px var(--primary-glow) !important; }
#inventory .sh-c-wear { background: none; padding: 0; color: var(--text-gray); font-size: .62rem; }
#inventory .sh-c-check { width: 18px; height: 18px; border-radius: 4px; border-color: var(--glass-border); }
#inventory .selected .sh-c-check { background: var(--primary); border-color: var(--primary); color: var(--bg-dark); }
#inventory #sh-inv-grid .skin-img-wrapper { height: 100px !important; margin: .25rem 0 .5rem; }
#inventory #sh-inv-grid .skin-img-wrapper img { filter: drop-shadow(0 8px 8px var(--bg-dark)); }
#inventory .skin-info-wrapper { display: flex; flex: 1; flex-direction: column; min-width: 0; }
#inventory .sh-c-weapon { font-size: .63rem; color: var(--text-gray); }
#inventory #sh-inv-grid .skin-name { font-size: .75rem !important; line-height: 1.35; min-height: 2.7em; color: var(--text-white); display: block; overflow: visible; overflow-wrap: anywhere; }
#inventory .sh-c-foot { flex-wrap: wrap; margin-top: auto; padding-top: .6rem; border: 0; }
#inventory .sh-c-foot .skin-price { color: var(--text-white) !important; font-size: 1rem !important; }
#inventory .sh-c-foot .manual-wear-badge { background: none !important; padding: 0 !important; }
#inventory #checkout-section { top: 98px; min-width: 0; }
#inventory .inventory-basket { background: var(--sell-surface) !important; border: 1px solid var(--sell-border) !important; border-radius: 8px; padding: 1rem !important; box-shadow: var(--sell-shadow); }
#inventory .inventory-basket h3 { display: flex; align-items: center; gap: .6rem; font-size: .9rem; margin: 0 0 1rem; }
#inventory .inventory-basket h3 i { color: var(--primary); }
#inventory .basket-items { max-height: 330px; overflow-y: auto; scrollbar-color: var(--sell-border) transparent; }
#inventory .basket-item { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: .65rem 0 !important; }
#inventory .bi-thumb { background: var(--sell-tint); border-radius: 5px; }
#inventory .bi-text .basket-item-name { white-space: normal; overflow-wrap: anywhere; font-size: .7rem; }
#inventory .bi-price { color: var(--text-white); font-size: .8rem; }
#inventory .remove-basket-item { border-radius: 5px; color: var(--text-gray); border-color: var(--line); }
#inventory .sh-aff-basket { border-color: var(--line); padding-top: .8rem; }
#inventory .sh-aff-brow { gap: .35rem; }
#inventory .premium-input { min-width: 0; background: var(--bg-dark); color: var(--text-white); border-color: var(--line); border-radius: 6px; font-size: .73rem; }
#inventory .premium-apply-btn { border-radius: 6px; font-size: .68rem; padding: .6rem; }
#inventory .payout-box { margin: 1rem 0; padding: 1rem .5rem; border-radius: 6px; border: 1px solid var(--sell-border); background: var(--sell-tint); }
#inventory .payout-title, #inventory .payout-factor { color: var(--text-gray); font-size: .7rem; letter-spacing: 0; }
#inventory .payout-amount { font-family: 'Sora',sans-serif; font-size: 1.85rem !important; }
#inventory .swish-notice { font-size: .7rem; color: var(--text-gray); line-height: 1.6; }
#inventory .sh-cashout { border-radius: 6px !important; padding: .85rem !important; font-size: .85rem !important; letter-spacing: 0; }
#inventory .offer-match { position: relative; flex: 0 0 auto; width: 380px; max-width: 46%; display: flex; gap: .85rem; align-items: flex-start; padding: 1.05rem 1.15rem 1.05rem 1.35rem; border-radius: 10px; text-decoration: none; background: linear-gradient(155deg, var(--warn-tint), var(--sell-surface) 74%); border: 2px solid var(--warn-line); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--warn) 25%, transparent), 0 16px 38px color-mix(in srgb, var(--warn) 24%, transparent); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; overflow: hidden; }
#inventory .offer-match::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: repeating-linear-gradient(-45deg, var(--warn) 0 7px, color-mix(in srgb, var(--warn) 32%, var(--bg-dark)) 7px 14px); }
#inventory .offer-match::after { content: ""; position: absolute; inset: -2px; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 55%, transparent); animation: sh-offer-pulse 2.6s ease-in-out infinite; }
@keyframes sh-offer-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 42%, transparent); } 50% { box-shadow: 0 0 26px 3px color-mix(in srgb, var(--warn) 34%, transparent); } }
#inventory .offer-match:hover { transform: translateY(-2px); border-color: var(--warn); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 55%, transparent), 0 20px 46px color-mix(in srgb, var(--warn) 34%, transparent); }
#inventory .offer-match-icon { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--warn) 26%, var(--bg-dark)); border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); font-size: 1.15rem; }
#inventory .offer-match-body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
#inventory .offer-match-chip { align-self: flex-start; padding: .12rem .5rem; border-radius: 999px; background: color-mix(in srgb, var(--warn) 22%, var(--bg-dark)); border: 1px solid color-mix(in srgb, var(--warn) 60%, transparent); color: var(--warn); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
#inventory .offer-match-title { font-family: 'Sora', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--text-white); line-height: 1.3; }
#inventory .offer-match-text { font-size: .85rem; color: color-mix(in srgb, var(--text-white) 80%, var(--text-gray)); line-height: 1.55; }
#inventory .offer-match-cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: .2rem; font-size: .85rem; font-weight: 700; color: var(--warn); }
#inventory .offer-match-cta i { font-size: .75rem; transition: transform .2s ease; }
#inventory .offer-match:hover .offer-match-cta i { transform: translateX(3px); }
@media (max-width:1150px) { #inventory .offer-match { width: 330px; max-width: 44%; } #inventory .offer-match-text { font-size: .78rem; } #inventory .offer-match-title { font-size: .95rem; } }
@media (max-width:960px) { #inventory .section-header { flex-direction: column; align-items: stretch; gap: 1rem; } #inventory .offer-match { width: auto; max-width: none; } }
@media (prefers-reduced-motion:reduce) { #inventory .offer-match::after { animation: none; } #inventory .offer-match, #inventory .offer-match-cta i { transition: none; } }
#inventory .sh-gate { border-radius: 8px; background: linear-gradient(155deg,var(--sell-tint),var(--sell-surface) 65%); border: 1px dashed var(--sell-border); }
#inventory .sh-gate-btn { border-radius: 6px; color: var(--bg-dark); }
@media (min-width:1450px) { #inventory #sh-inv-grid { grid-template-columns: repeat(6,minmax(0,1fr)) !important; } }
@media (max-width:1150px) { #inventory #sh-inv-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; } }
@media (max-width:960px) { #inventory .inventory-container { grid-template-columns: minmax(0,1fr) !important; } #inventory #checkout-section { position: static; } }
@media (max-width:600px) { #inventory { padding: 1.5rem .85rem 2rem; } #inventory .section-header h2 { font-size: 1.6rem; } #inventory #sh-inv-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } #inventory .sh-toolbar { flex-wrap: wrap; } #inventory .sh-gate { padding: 2rem 1rem; } #inventory .sh-gate h3 { font-size: 1.2rem; } }
@media (prefers-reduced-motion:reduce) { #inventory #sh-inv-grid .skin-item, #inventory #sh-inv-grid .skin-img-wrapper img { transition: none; } }
.sh-insp { font-size: .68rem; line-height: 1.3; color: var(--muted, #9fb3a8); margin: .2rem 0; font-variant-numeric: tabular-nums; }
.sh-insp b { color: #02F895; font-weight: 700; }

/* Staplade likadana föremål (t.ex. cases) */
.sh-stack-n{position:absolute;top:8px;right:34px;padding:2px 8px;border-radius:999px;background:hsl(155 98% 49% / .16);color:#02F895;font-weight:800;font-size:12px;border:1px solid hsl(155 98% 49% / .4)}
.sh-qty{display:flex;align-items:center;gap:4px;margin-top:8px;font-size:12px;color:hsl(0 0% 75%)}
.sh-qty button{min-width:28px;height:28px;border-radius:8px;border:1px solid hsl(155 98% 49% / .35);background:hsl(155 98% 49% / .08);color:#02F895;font-weight:800;cursor:pointer}
.sh-qty button[data-q="all"],.sh-qty .sh-qty-all{padding:0 8px;font-size:11px}
.sh-qty input{width:44px;height:28px;text-align:center;border-radius:8px;border:1px solid hsl(0 0% 100% / .15);background:hsl(0 0% 0% / .35);color:inherit;font-weight:700;-moz-appearance:textfield}
.sh-qty input::-webkit-inner-spin-button{display:none}
#sh-inv-grid .skin-item{position:relative}