/* SKINHAJP modern theme – layered over style.css */
:root {
    --primary: #02F895;
    --primary-glow: rgba(2,248,149, 0.35);
    --primary-hover: #5cffb0;
    --bg-dark: #0d0f12;
    --bg-card: #151920;
    --panel: #171c24;
    --panel-2: #1d232d;
    --line: rgba(255, 255, 255, 0.07);
    --glass: rgba(21, 25, 32, 0.9);
    --glass-border: rgba(255, 255, 255, 0.07);
    --text-gray: #8b95a5;
}
* { cursor: auto; }
.cursor-dot, .cursor-outline { display: none !important; }
body { background: var(--bg-dark); font-family: 'Manrope', system-ui, sans-serif; }
.btn-primary { background: var(--primary) !important; color: #0d0f12 !important; box-shadow: 0 6px 24px -8px var(--primary-glow) !important; border: none !important; }
.btn-primary:hover { background: var(--primary-hover) !important; }
.hidden { display: none !important; }

/* Steam login gate – opens the sell view after login */
.sh-gate { border: 1px solid var(--line); border-radius: 18px; padding: 3rem 2rem; text-align: center; background: radial-gradient(120% 120% at 50% 0%, rgba(2,248,149,.07), transparent 60%), rgba(255,255,255,.02); }
.sh-gate-icon { width: 64px; height: 64px; margin: 0 auto 1.2rem; border-radius: 50%; display: grid; place-items: center; background: rgba(2,248,149,.1); border: 1px solid rgba(2,248,149,.35); color: var(--primary); font-size: 1.8rem; }
.sh-gate h3 { font-family: 'Sora', sans-serif; font-size: 1.5rem; margin: 0 0 .5rem; color: #fff; }
.sh-gate p { color: var(--text-gray); margin: 0 auto 1.6rem; max-width: 42ch; line-height: 1.6; }
.sh-gate-btn { display: inline-flex; align-items: center; gap: .6rem; background: var(--primary); color: #06120a; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .95rem 1.8rem; border-radius: 999px; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.sh-gate-btn:hover { box-shadow: 0 0 26px rgba(2,248,149,.45); transform: translateY(-1px); }
.inventory-section.not-signed-in #checkout-section { display: none !important; }
.inventory-section.not-signed-in .inventory-container { grid-template-columns: minmax(0,1fr) !important; }

/* Header */
.sh-nav {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: 0.7rem 2rem; background: rgba(13, 15, 18, 0.92);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.sh-nav .nav-links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.sh-nav .nav-links a { color: #c9d1dc; text-decoration: none; font-size: 0.88rem; font-weight: 600; }
.sh-nav .nav-links a:hover { color: var(--primary); }
.sh-nav-right { display: flex; align-items: center; gap: 1rem; }
@keyframes shpulse { 50% { opacity: 0.35; } }
.sh-steam-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 0.6rem 1.1rem;
    border-radius: 10px; background: var(--primary); color: #0d0f12; font-weight: 800;
    font-size: 0.85rem; text-decoration: none; white-space: nowrap;
}
.sh-steam-btn:hover { background: var(--primary-hover); }
.sh-profile { display: flex; align-items: center; gap: 10px; padding: 0.35rem 0.6rem; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.sh-profile img { width: 34px; height: 34px; border-radius: 8px; }
.sh-profile-text { display: flex; flex-direction: column; line-height: 1.2; }
.sh-profile-text #sh-name { font-weight: 700; font-size: 0.85rem; }
.sh-profile-meta { font-size: 0.72rem; color: var(--text-gray); }
#sh-balance { color: var(--primary); font-weight: 700; }
.sh-trade-ok { color: var(--primary); }
.sh-trade-missing { color: #f59e0b; }
.sh-logout { color: var(--text-gray); }

/* Stats */
.sh-tp-stars { display: inline-flex; gap: 2px; }
.sh-tp-stars i { background: #00b67a; color: #fff; font-size: 0.75rem; padding: 4px; border-radius: 2px; }

/* Panels */
.feature-card, .step-card, .inventory-basket, .search-panel, .modal-content, .skin-item {
    background: var(--panel) !important; border: 1px solid var(--line) !important;
}
.skin-item:hover { border-color: var(--primary) !important; }
.skin-price, .payout-amount { color: var(--primary) !important; }

/* Toolbar */
.sh-toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 0.9rem; }
.sh-select { background: var(--panel-2); border: 1px solid var(--line); color: #fff; padding: 0.5rem 0.8rem; border-radius: 10px; font-family: inherit; }
.sh-cashout { font-size: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.5px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; }

/* Footer */
.sh-footer { padding: 2.3rem 1.5rem 1.6rem; }

@media (max-width: 900px) {
    .sh-nav { flex-wrap: wrap; padding: 0.6rem 1rem; background: #0A0A0C; }
    .sh-nav .nav-links { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; gap: 1rem; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
    .sh-nav .nav-links a { white-space: nowrap; font-size: .82rem; }
    .sh-footer-pay { gap: 1.2rem; }
    .sh-footer-links { gap: 1rem; }
}

/* Round 2: inventory rarity glow, payout options, contract */
.sh-inv { margin-bottom: 2rem; }
.sh-game { background: #161b22; border: 1px solid #2a313c; color: #c9d1d9; padding: .45rem .9rem; border-radius: 999px; cursor: pointer; font-weight: 600; }
.sh-game.active { border-color: #02F895; color: #02F895; }
.skin-item.sh-rarity { border: 1px solid color-mix(in srgb, var(--glow) 55%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--glow) 35%, transparent); }
.skin-item.sh-rarity:hover, .skin-item.sh-rarity.selected { box-shadow: 0 0 24px color-mix(in srgb, var(--glow) 70%, transparent); }
.sh-options { display: grid; gap: .6rem; }
.sh-option { display: flex; gap: .7rem; align-items: flex-start; background: #161b22; border: 1px solid #2a313c; border-radius: 12px; padding: .8rem 1rem; cursor: pointer; }
.sh-option:has(input:checked) { border-color: #02F895; box-shadow: 0 0 12px rgba(2,248,149,.2); }
.sh-option strong { display: block; color: #fff; }
.sh-option small { color: #8b949e; font-size: .8rem; line-height: 1.35; }
.sh-option input, .sh-contract input { accent-color: #02F895; margin-top: 4px; }
.sh-opt-body { display: grid; gap: .3rem; flex: 1; }
.sh-opt-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sh-opt-tag { font-style: normal; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0A0A0C; background: #02F895; padding: .2rem .55rem; border-radius: 999px; }
.sh-opt-perks { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .76rem; color: #c9d1d9; }
.sh-opt-perks i { color: #02F895; font-size: .7rem; margin-right: .2rem; }
.sh-option-best { padding: 1rem 1.1rem; background: linear-gradient(180deg, rgba(2,248,149,.07), rgba(2,248,149,.01)) , #11161c; border-color: rgba(2,248,149,.35); }
.sh-option-best strong { font-size: 1.05rem; }
.sh-contract { display: flex; gap: .6rem; font-size: .85rem; color: #c9d1d9; line-height: 1.4; }
.sh-contract a { color: #02F895; }

/* Round 3: cleaner izzotrades/skinstugan-like theme */
:root { --primary: #02F895; --primary-hover: #5CFF99; --primary-glow: rgba(2,248,149,.35); --bg-dark: #0A0A0C; --panel: #111116; --panel-2: #16161d; --line: rgba(255,255,255,.06); }
body, input, select, textarea, button { font-family: 'Manrope', system-ui, sans-serif !important; }
body { background: radial-gradient(1200px 500px at 50% -10%, rgba(2,248,149,.08), transparent 60%), #0A0A0C !important; }
h1, h2, h3, h4, .payout-amount, .skin-price, .step-number, .sh-nav .nav-links a { font-family: 'Sora', sans-serif !important; letter-spacing: -.01em; }
.sh-nav { background: rgba(10,10,12,.85); }
.sh-nav .nav-links { align-items: center; gap: 1.6rem; }
.sh-nav .nav-links a { text-transform: none; }
.sh-nav .nav-links a.sh-nav-main { color: #fff; font-weight: 700; letter-spacing: .04em; }
.sh-nav .nav-links a.sh-nav-give { background: var(--primary); color: #0A0A0C !important; padding: .45rem .9rem; border-radius: 999px; font-weight: 700; box-shadow: 0 0 18px var(--primary-glow); }
.feature-card, .step-card, .inventory-basket, .search-panel, .modal-content, .sh-option, .skin-item {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)) !important;
  border: 1px solid var(--line) !important; border-radius: 18px !important; box-shadow: none;
}
.feature-card:hover, .step-card:hover, .skin-item:hover { border-color: rgba(2,248,149,.35) !important; transform: translateY(-2px); transition: .2s; }
.skin-item.selected { border-color: var(--primary) !important; box-shadow: 0 0 20px var(--primary-glow) !important; }
.search-input, .lookup-input, .premium-input, .sh-select, #checkout-contact-method { background: #0f0f13 !important; border: 1px solid var(--line) !important; border-radius: 12px !important; }
.search-input:focus, .lookup-input:focus { border-color: var(--primary) !important; outline: none; }
.sh-chip.active, .sh-game.active { background: rgba(2,248,149,.1); border-color: var(--primary); color: var(--primary); }
#checkout-submit-btn, .premium-apply-btn { background: var(--primary) !important; color: #0A0A0C !important; box-shadow: 0 0 20px var(--primary-glow) !important; }
#modal-payout-price { color: var(--primary) !important; text-shadow: 0 0 15px var(--primary-glow) !important; }
.checkout-summary-card { background: rgba(2,248,149,.06) !important; border-color: rgba(2,248,149,.2) !important; }
.hero-content { background: transparent !important; border: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.hero h1 span { color: var(--primary) !important; text-shadow: 0 0 30px var(--primary-glow); }
.hero p { font-family: 'Manrope', sans-serif !important; }

/* Round 4: izzotrades-style layout */
/* Göm muspekaren bara där den egna markören fakt ritas (main.js sätter klassen) */
@media (pointer: fine) { html.has-custom-cursor, html.has-custom-cursor *, html.has-custom-cursor *::before, html.has-custom-cursor *::after { cursor: none !important; } }
.cursor-dot, .cursor-outline { display: block !important; }
.cursor-dot, .cursor-outline { transition: width .15s, height .15s, opacity .2s !important; will-change: left, top; }

/* Den egna markörens utseende ligger här så den fungerar även på sidor som inte laddar style.css */
.cursor-dot {
    width: 4px;
    height: 4px;
    background-color: var(--primary);
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
}
.cursor-outline {
    width: 30px;
    height: 30px;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    mask: radial-gradient(circle, transparent 4px, black 5px);
    -webkit-mask: radial-gradient(circle, transparent 4px, black 5px);
}
.cursor-outline::before, .cursor-outline::after {
    content: '';
    position: absolute;
    background-color: var(--primary);
    box-shadow: 0 0 5px var(--primary);
}
.cursor-outline::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.cursor-outline::after { top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); }
.bg-glow {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at var(--x) var(--y), rgba(2,248,149, .15) 0%, transparent 50%);
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
}
.hero { height: auto !important; min-height: 0 !important; padding: 7rem 2rem 4rem !important; }
.hero::before { background: radial-gradient(800px 380px at 50% 30%, rgba(2,248,149,.12), transparent 70%), #0A0A0C !important; filter: none !important; }
.hero-content { max-width: 980px; padding: 0 !important; }
.sh-hero-title { font-family: 'Sora', sans-serif !important; font-size: clamp(2.4rem, 6vw, 4.6rem) !important; font-weight: 700 !important; line-height: 1.02 !important; letter-spacing: -.03em !important; color: #fff; text-transform: uppercase; margin-bottom: 1.4rem; }
.sh-hero-title span { color: var(--primary); text-shadow: 0 0 40px var(--primary-glow); }
.sh-tp-badge { display: inline-flex; align-items: center; gap: .7rem; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: #e6e6ea; text-decoration: none; font-size: .9rem; margin-bottom: 1.4rem; }
.sh-tp-badge .sh-tp-stars i { background: var(--primary); color: #0A0A0C; padding: 3px; font-size: .7rem; border-radius: 3px; }
.hero p { max-width: 620px; margin: 0 auto; color: #9a9aa6; }
.inventory-section { max-width: 1400px; margin: 0 auto; padding: 2rem; }
.inventory-container { grid-template-columns: minmax(0,1fr) 360px !important; background: transparent !important; border: none !important; padding: 0 !important; align-items: start; }
.inventory-container:has(.checkout-hidden) { grid-template-columns: minmax(0,1fr) 360px !important; }
#checkout-section, #checkout-section.checkout-hidden { opacity: 1 !important; visibility: visible !important; height: auto !important; transform: none !important; pointer-events: auto !important; position: sticky; top: 90px; }
.inventory-basket { padding: 1.5rem !important; background: #101014 !important; border: 1px solid rgba(2,248,149,.18) !important; }
.inventory-basket h3 { font-family: 'Sora', sans-serif; }
.payout-amount { color: var(--primary) !important; font-size: 2.2rem !important; }
.sh-cashout { font-family: 'Sora', sans-serif !important; font-size: 1.15rem !important; padding: 1.1rem !important; border-radius: 14px !important; letter-spacing: .04em; box-shadow: 0 0 28px var(--primary-glow) !important; }
.sh-cashout:disabled { opacity: .45; box-shadow: none !important; }
.skin-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; gap: 1rem !important; }
.skin-item { --glow: #02F895; border: 1px solid color-mix(in srgb, var(--glow) 30%, transparent) !important; box-shadow: inset 0 -40px 60px -40px color-mix(in srgb, var(--glow) 35%, transparent) !important; }
.skin-item:hover { box-shadow: 0 0 22px color-mix(in srgb, var(--glow) 45%, transparent), inset 0 -40px 60px -40px color-mix(in srgb, var(--glow) 50%, transparent) !important; }
@media (max-width: 960px) { .inventory-container, .inventory-container:has(.checkout-hidden) { grid-template-columns: 1fr !important; } #checkout-section { position: static; } }
.search-panel { background: transparent !important; border: none !important; padding: 0 !important; }
.skin-item { display: flex !important; flex-direction: column !important; align-items: stretch !important; padding: 1rem !important; text-align: left; }
.skin-item .skin-img-wrapper { width: 100% !important; height: 110px !important; display: flex; align-items: center; justify-content: center; margin-bottom: .7rem; }
.skin-item .skin-img-wrapper img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--glow) 35%, transparent)); }
.skin-item .skin-name { white-space: normal !important; font-size: .85rem; line-height: 1.25; min-height: 2.1em; }
.skin-item .manual-wear-badge { align-self: flex-start; margin: .4rem 0; }
#checkout-open-btn { width: 100% !important; display: flex; justify-content: center; }
.inventory-basket .empty-text { color: #8b8b96; font-size: .9rem; }
.skin-item .skin-img-wrapper img { width: auto !important; height: 100% !important; }
.skin-item .skin-name { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ===== v4: izzotrades/skinstugan-style hero ===== */
body { background: #0A0A0C; }
.sh-ticker { overflow: hidden; background: #111316; border-bottom: 1px solid rgba(255,255,255,.06); font-family: 'Sora', monospace; font-size: .78rem; letter-spacing: .06em; color: #cfd3da; }
.sh-ticker-track { display: flex; gap: 2.2rem; width: max-content; padding: .65rem 0; animation: sh-tick 40s linear infinite; }
.sh-ticker b { color: var(--ticker-accent, var(--primary)); font-weight: 600; }
@keyframes sh-tick { to { transform: translateX(-50%); } }
.sh-hero2 { position: relative; display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 3.5rem; align-items: center; max-width: 1280px; margin: 0 auto; padding: 5rem 2rem 4rem; }
.sh-hero2-float { position: absolute; inset: 0 -50vw; z-index: -1; overflow: hidden; pointer-events: none; mask-image: radial-gradient(ellipse at 50% 55%, #000 45%, transparent 92%); }
.sh-hero2-float::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 45%, rgba(2,248,149,.06), transparent 70%); }
.sh-float-skin { position: absolute; opacity: .22; filter: saturate(1.2) drop-shadow(0 18px 30px rgba(0,0,0,.5)); animation: shFloatDrift 14s ease-in-out infinite alternate; }
.sh-float-skin.f1 { width: 150px; top: 6%; left: 4%; transform: rotate(-14deg); animation-duration: 13s; }
.sh-float-skin.f2 { width: 190px; top: 52%; left: 1%; transform: rotate(9deg); animation-duration: 17s; animation-delay: -4s; opacity: .16; }
.sh-float-skin.f3 { width: 130px; top: 2%; right: 8%; transform: rotate(12deg); animation-duration: 15s; animation-delay: -7s; }
.sh-float-skin.f4 { width: 170px; bottom: 4%; right: 2%; transform: rotate(-8deg); animation-duration: 18s; animation-delay: -2s; opacity: .18; }
.sh-float-skin.f5 { width: 120px; top: 8%; left: 44%; transform: rotate(18deg); animation-duration: 12s; animation-delay: -9s; opacity: .12; }
.sh-float-skin.f6 { width: 140px; top: 62%; left: 30%; transform: rotate(-16deg); animation-duration: 16s; animation-delay: -5s; opacity: .14; }
@keyframes shFloatDrift {
  from { translate: 0 0; }
  to { translate: 0 -26px; }
}
@media (prefers-reduced-motion: reduce) { .sh-float-skin { animation: none; } }
.sh-hero2 .sh-hero-title { text-transform: none !important; font-size: clamp(2.6rem, 5vw, 4.4rem) !important; text-align: left; margin-bottom: 1.2rem; }
.sh-hero-sub { color: #c4c8cf; font-size: 1.15rem; line-height: 1.6; max-width: 30rem; margin-bottom: 2rem; }
.sh-hero-sub span { color: var(--primary); font-weight: 600; }
.sh-cta { position: relative; display: flex; align-items: center; gap: .85rem; width: max-content; max-width: 100%; min-height: 72px; padding: .62rem .8rem .62rem .62rem; background: linear-gradient(180deg, #10814c, #0a6a3e); color: #fff; text-decoration: none; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 10px 26px -20px rgba(0,0,0,.8); transition: background .18s ease, box-shadow .18s ease; }
.sh-cta:hover { background: linear-gradient(180deg, #129056, #0b7545); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 12px 28px -20px rgba(0,0,0,.85); }
.sh-cta-skins { position: relative; flex: none; width: 112px; height: 50px; }
.sh-cta-skins img { position: absolute; top: 50%; left: 0; width: 46px; height: 46px; object-fit: contain; padding: 5px; background: linear-gradient(180deg, #1d2229, #14171b); border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 6px 12px -8px rgba(0,0,0,.7); transition: transform .25s ease; }
.sh-cta-skins img:nth-child(1) { z-index: 1; transform: translate(0,-50%) rotate(-5deg); }
.sh-cta-skins img:nth-child(2) { z-index: 2; transform: translate(22px,-50%) rotate(-2deg); }
.sh-cta-skins img:nth-child(3) { z-index: 3; transform: translate(44px,-50%) rotate(2deg); }
.sh-cta-skins img:nth-child(4) { z-index: 4; transform: translate(66px,-50%) rotate(5deg); }
.sh-cta-labels { display: flex; flex-direction: column; gap: .14rem; line-height: 1.08; text-align: left; }
.sh-cta-labels strong { font-family: 'Sora', sans-serif; font-size: 1.16rem; font-weight: 700; letter-spacing: -.01em; }
.sh-cta-labels small { font-size: .72rem; font-weight: 600; letter-spacing: .06em; opacity: .72; }
.sh-cta-go { position: relative; flex: none; width: 38px; height: 38px; border-radius: 11px; background: rgba(0,0,0,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); display: grid; place-items: center; font-size: .85rem; transition: transform .18s ease, background .18s ease; }
.sh-cta:hover .sh-cta-go { transform: translateX(2px); background: rgba(0,0,0,.3); }
@media (max-width: 620px) {
  .sh-cta { width: 100%; max-width: none; justify-content: center; min-height: 66px; gap: .6rem; padding: .55rem .7rem .55rem .55rem; }
  .sh-cta-skins { width: 84px; height: 40px; }
  .sh-cta-skins img { width: 36px; height: 36px; padding: 4px; border-radius: 8px; }
  .sh-cta-skins img:nth-child(1) { transform: translate(0,-50%) rotate(-5deg); }
  .sh-cta-skins img:nth-child(2) { transform: translate(16px,-50%) rotate(-2deg); }
  .sh-cta-skins img:nth-child(3) { transform: translate(32px,-50%) rotate(2deg); }
  .sh-cta-skins img:nth-child(4) { transform: translate(48px,-50%) rotate(5deg); }
  .sh-cta-labels strong { font-size: 1rem; }
  .sh-cta-labels small { font-size: .66rem; }
  .sh-cta-go { width: 34px; height: 34px; border-radius: 9px; font-size: .78rem; }
}

.sh-tp { display: grid; grid-template-columns: auto auto; gap: .3rem .9rem; align-items: center; margin: 1.8rem 0 1.6rem; color: #fff; text-decoration: none; width: max-content; }
.sh-tp small { grid-column: 1 / -1; color: #9aa0a8; font-size: .85rem; }
.sh-tp small i { color: #00b67a; }
.sh-tp-boxes { display: flex; gap: 3px; }
.sh-tp-boxes i { background: #00b67a; color: #fff; font-size: .7rem; padding: 4px; }
.sh-hero2 .affiliate-row { max-width: 26rem; margin: 0; }
.sh-showcase { background: #111316; border: 1px solid rgba(255,255,255,.07); border-radius: 6px; padding: 1.2rem; }
.sh-show-head { font-family: 'Sora', monospace; font-size: .8rem; letter-spacing: .08em; color: #8a9099; margin-bottom: .9rem; }
.sh-show-head b { color: #fff; }
.sh-show-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.sh-show-card { position: relative; display: flex; flex-direction: column; padding: .6rem .7rem .7rem; background: linear-gradient(180deg, #16181c 40%, var(--rc-bg)); border: 1px solid rgba(255,255,255,.05); border-bottom: 2px solid var(--rc); border-radius: 3px; transition: transform .15s, box-shadow .15s; }
.sh-show-card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px -8px var(--rc); }
.sh-show-card.r-gold { --rc: #e4ae39; --rc-bg: rgba(228,174,57,.12); }
.sh-show-card.r-covert { --rc: #eb4b4b; --rc-bg: rgba(235,75,75,.12); }
.sh-show-card.r-classified { --rc: #d32ce6; --rc-bg: rgba(211,44,230,.12); }
.sh-show-wear { align-self: flex-start; font-family: 'Sora', monospace; font-size: .6rem; letter-spacing: .06em; color: #9aa0a8; background: rgba(255,255,255,.06); padding: 2px 5px; }
.sh-show-card img { width: 100%; height: 78px; object-fit: contain; margin: .4rem 0; filter: drop-shadow(0 6px 12px rgba(0,0,0,.5)); }
.sh-show-type { font-family: 'Sora', monospace; font-size: .62rem; letter-spacing: .05em; color: #8a9099; text-transform: uppercase; }
.sh-show-name { font-weight: 700; font-size: .85rem; color: #fff; }
@media (max-width: 960px) {
  .sh-hero2 { grid-template-columns: 1fr; padding: 3rem 1.2rem; gap: 2.5rem; }
  .sh-show-grid { grid-template-columns: repeat(2, 1fr); }
}

/* v5: affiliate box + animated showcase demo */
.sh-aff-box { max-width: 26rem; margin-top: 1.6rem; padding: 1rem 1.1rem 1.1rem; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; }
.sh-aff-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.sh-aff-icon { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; background: rgba(2,248,149,.1); color: var(--primary); font-size: .8rem; }
.sh-aff-title { font-size: .88rem; font-weight: 600; color: #c9ced6; }
#sh-aff-chip { margin-left: auto; font-family: 'Sora', sans-serif; font-size: .7rem; letter-spacing: .05em; color: var(--primary); background: rgba(2,248,149,.08); padding: 3px 10px; border-radius: 999px; }
.sh-hero2 .affiliate-row { display: flex !important; gap: .5rem !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; }
.sh-hero2 .premium-input { flex: 1; min-width: 0; background: #0d0f11 !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 10px !important; padding: .8rem 1rem !important; font-family: 'Sora', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; box-shadow: none !important; outline: none; transition: border-color .15s, box-shadow .15s; }
.sh-hero2 .premium-input::placeholder { text-transform: none; letter-spacing: 0; color: #6b7280; }
.sh-hero2 .premium-input:focus { border-color: rgba(2,248,149,.55) !important; box-shadow: 0 0 0 3px rgba(2,248,149,.1) !important; }
.sh-hero2 .premium-apply-btn { border-radius: 10px !important; padding: 0 1.3rem !important; font-family: 'Sora', sans-serif; font-weight: 700; letter-spacing: .04em; box-shadow: none !important; }
.sh-hero2 .premium-success { margin-top: .7rem; font-size: .82rem; color: var(--primary); }

.sh-show-grid { position: relative; }
.sh-show-card.sel { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), 0 0 24px -6px var(--primary-glow); }
.sh-show-card::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: .5rem; right: .5rem; width: 20px; height: 20px; display: grid; place-items: center; font-size: .65rem; border-radius: 3px; border: 1px solid rgba(255,255,255,.2); color: transparent; transition: all .15s; }
.sh-show-card.sel::after { background: var(--primary); border-color: var(--primary); color: #0A0A0C; }
.sh-show-card.tap { transform: scale(.96); }
.sh-demo-cursor { position: absolute; z-index: 5; left: 50%; top: 50%; font-size: 1.4rem; color: #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.8)); transition: left .7s cubic-bezier(.5,0,.2,1), top .7s cubic-bezier(.5,0,.2,1), transform .12s; pointer-events: none; }
.sh-demo-cursor.down { transform: scale(.8); }
.sh-swish { position: absolute; z-index: 6; left: 50%; bottom: 1rem; width: min(92%, 360px); display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; background: rgba(245,246,248,.97); color: #111; border-radius: 14px; box-shadow: 0 20px 50px -10px rgba(0,0,0,.7), 0 0 40px -10px var(--primary-glow); transform: translate(-50%, 140%); opacity: 0; transition: transform .5s cubic-bezier(.2,1.3,.4,1), opacity .3s; pointer-events: none; }
.sh-swish.show { transform: translate(-50%, 0); opacity: 1; }
.sh-swish-logo { flex: none; height: 26px; width: auto; display: block; }
.sh-swish b { display: block; font-size: .9rem; }
.sh-swish span { font-size: .82rem; color: #444; }
.sh-swish em { margin-left: auto; align-self: flex-start; font-style: normal; font-size: .72rem; color: #888; }
@media (prefers-reduced-motion: reduce) { .sh-demo-cursor { display: none; } }

/* v6: seamless showcase flow */
.sh-showcase { position: relative; overflow: hidden; border-radius: 16px; background: radial-gradient(120% 80% at 100% 0%, rgba(2,248,149,.08), transparent 60%), #0f1113; transform: perspective(1400px) rotateY(-6deg) rotateX(3deg); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06); transition: transform .6s; }
.sh-showcase:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.sh-show-head { display: flex; align-items: center; gap: .55rem; font-family: 'Manrope', sans-serif; font-size: .9rem; letter-spacing: 0; color: #fff; font-weight: 600; }
.sh-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px var(--primary); animation: sh-pulse 1.6s ease-in-out infinite; }
@keyframes sh-pulse { 50% { opacity: .35; } }
.sh-show-steps { margin-left: auto; display: flex; gap: .35rem; }
.sh-show-steps i { font-style: normal; font-size: .7rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; color: #6b717a; background: rgba(255,255,255,.04); transition: all .4s; }
.sh-show-steps i.on { color: #0A0A0C; background: var(--primary); }
.sh-show-card { border-radius: 10px; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s, opacity .4s; }
.sh-show-card::after { border-radius: 50%; }
.sh-show-card.sel { transform: translateY(-4px); }
.sh-showcase.reset .sh-show-card.sel { opacity: .4; }
.sh-demo-cursor { left: 0; top: 0; opacity: 0; transform: translate(50%, 120%); transition: transform .75s cubic-bezier(.65,0,.25,1), opacity .4s; }
.sh-demo-cursor.show { opacity: 1; }
.sh-demo-cursor.down i { transform: scale(.8); display: inline-block; }
.sh-showcase .sh-demo-cursor { position: absolute; }
.sh-fly { position: absolute; z-index: 7; object-fit: contain; pointer-events: none; transition: transform .8s cubic-bezier(.5,-0.3,.3,1), opacity .8s ease-in; filter: drop-shadow(0 0 12px var(--primary-glow)); }
.sh-demo-bar { position: relative; margin-top: .8rem; height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 .6rem 0 1rem; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); transition: border-color .4s, background .4s; }
.sh-demo-bar.has { border-color: rgba(2,248,149,.35); background: rgba(2,248,149,.05); }
.sh-demo-bar.bump .sh-bar-cart { animation: sh-bump .35s; }
@keyframes sh-bump { 40% { transform: scale(1.08); } }
.sh-bar-cart { color: #cfd3da; font-size: .9rem; }
.sh-bar-cart i, .sh-bar-cart span { color: var(--primary); font-weight: 700; }
.sh-bar-cart #sh-bar-unit { color: #cfd3da; font-weight: 400; }
.sh-bar-btn { padding: .6rem 1rem; border-radius: 8px; font-family: 'Sora', sans-serif; font-weight: 700; font-size: .85rem; color: #0A0A0C; background: rgba(2,248,149,.35); transition: background .3s, box-shadow .3s; }
.sh-demo-bar.has .sh-bar-btn { background: var(--primary); box-shadow: 0 0 20px var(--primary-glow); }
.sh-bar-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; border-radius: 0 0 12px 12px; }
.sh-bar-progress span { display: block; height: 100%; width: 0; background: var(--primary); box-shadow: 0 0 10px var(--primary); }
.sh-demo-bar.sending .sh-bar-progress span { width: 100%; transition: width 1.4s cubic-bezier(.4,0,.2,1); }
.sh-demo-bar .sh-swish { position: absolute; inset: 0; left: 0; bottom: auto; width: auto; height: 100%; transform: translateY(12px) scale(.96); border-radius: 12px; padding: .5rem .8rem; opacity: 0; transition: transform .55s cubic-bezier(.2,1.2,.4,1), opacity .35s; }
.sh-demo-bar.paid .sh-swish { transform: none; opacity: 1; }
.sh-demo-bar .sh-swish-logo { height: 26px; }
.step-icon img { height: 3rem; width: auto; display: inline-block; }
@media (max-width: 960px) { .sh-showcase, .sh-showcase:hover { transform: none; } .sh-show-steps { display: none; } }

/* ===== Fot v2: två rader, vänsterställd, lugn ===== */
footer.sh-footer {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "mascot pay tp" "copy links social";
    align-items: center;
    column-gap: 2rem;
    row-gap: 1.4rem;
    text-align: left;
    padding: 2rem max(1.5rem, calc((100% - 1160px) / 2)) 1.5rem;
    background: #0A0A0C;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
footer.sh-footer::after {
    content: "";
    position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    width: 160px; height: 1px;
    background: linear-gradient(90deg, transparent, #02F895, transparent);
    opacity: .55;
}
footer.sh-footer::before {
    content: "";
    grid-row: 2; grid-column: 1 / -1;
    align-self: start;
    margin-top: -0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
footer.sh-footer .sh-footer-inner { display: contents; }
footer.sh-footer .sh-footer-mascot { grid-area: mascot; height: 34px; opacity: .9; }
footer.sh-footer .sh-footer-pay { grid-area: pay; gap: 1.1rem; justify-content: flex-end; }
footer.sh-footer .sh-pay-chip { color: #8a8a96; font-size: .78rem; letter-spacing: .02em; }
footer.sh-footer .sh-footer-tp { grid-area: tp; padding-left: 2rem; border-left: 1px solid rgba(255,255,255,.07); opacity: .85; transition: opacity .2s; }
footer.sh-footer .sh-footer-tp:hover { opacity: 1; }
footer.sh-footer .sh-footer-tp img { height: 16px; }
/* Betalningsikonerna håller alltid samma storlek – även på sidor som inte laddar style.css */
footer.sh-footer .sh-pay-chip { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
footer.sh-footer .sh-pay-chip img { height: 15px; width: auto; display: block; }
footer.sh-footer .sh-pay-chip i { font-size: .95rem; color: #6e6e7c; }
/*政策länkerna i foten: ingen understrykning och jämnt avstånd – även utan style.css */
footer.sh-footer .sh-footer-links { display: flex; flex-wrap: wrap; }
footer.sh-footer .sh-footer-links a { text-decoration: none; transition: color .2s ease; }
footer.sh-footer .sh-footer-links a:hover { color: #02F895; }
footer.sh-footer .sh-footer-copy { margin: 0; }
footer.sh-footer .sh-footer-copy { grid-area: copy; font-size: .72rem; color: #5f5f6b; }
footer.sh-footer .sh-footer-links { grid-area: links; gap: 1.4rem; justify-content: flex-end; }
footer.sh-footer .sh-footer-links a { font-size: .76rem; color: #8a8a96; }
footer.sh-footer .sh-footer-social { grid-area: social; position: static; gap: .55rem; padding-left: 2rem; border-left: 1px solid rgba(255,255,255,.07); }
footer.sh-footer .sh-footer-social a {
    width: 28px; height: 28px; justify-content: center; align-items: center;
    border-radius: 50%; color: #6b6b78; font-size: .82rem;
    transition: color .2s, background .2s;
}
footer.sh-footer .sh-footer-social a:hover { color: #02F895; background: rgba(2,248,149,.08); }

@media (max-width: 900px) {
    footer.sh-footer {
        grid-template-columns: 1fr;
        grid-template-areas: "mascot" "pay" "tp" "links" "social" "copy";
        justify-items: center; text-align: center; row-gap: 1rem;
    }
    footer.sh-footer::before { display: none; }
    footer.sh-footer .sh-footer-tp, footer.sh-footer .sh-footer-social { padding-left: 0; border-left: 0; }
    footer.sh-footer .sh-footer-pay, footer.sh-footer .sh-footer-links { justify-content: center; }
}

/* ===== Fot v3: proffsigare ===== */
footer.sh-footer {
    padding: 3rem max(1.5rem, calc((100% - 1160px) / 2)) 1.75rem;
    row-gap: 2.2rem;
    background: radial-gradient(600px 180px at 15% 0%, rgba(2,248,149,.06), transparent 70%), #0A0A0C;
}
footer.sh-footer::before { margin-top: -1.1rem; border-top-color: rgba(255,255,255,.06); }
footer.sh-footer .sh-footer-brand { grid-area: mascot; display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; }
footer.sh-footer .sh-footer-mascot { height: 46px; opacity: 1; filter: drop-shadow(0 0 14px rgba(2,248,149,.25)); }
.sh-footer-brandtext { display: flex; flex-direction: column; gap: .2rem; }
.sh-footer-brandtext strong { font-family: 'Sora', sans-serif; font-size: 1.15rem; letter-spacing: .08em; color: #f2f2f5; }
.sh-footer-brandtext small { font-size: .8rem; color: #7d7d8a; }
footer.sh-footer .sh-footer-brandcol { grid-area: mascot; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.sh-footer-org { margin: 0; font-size: .74rem; color: #7d7d8a; letter-spacing: .01em; }
footer.sh-footer .sh-footer-pay { gap: .6rem; }
footer.sh-footer .sh-pay-chip, footer.sh-footer .sh-footer-tp {
    height: 38px; padding: 0 .95rem; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025);
    color: #c9c9d2; font-size: .8rem;
}
footer.sh-footer .sh-footer-tp { display: inline-flex; align-items: center; opacity: 1; border-left: 1px solid rgba(255,255,255,.08); margin-left: 0; transition: border-color .2s; }
footer.sh-footer .sh-footer-tp:hover { border-color: rgba(2,248,149,.4); }
footer.sh-footer { column-gap: .6rem; }
footer.sh-footer .sh-footer-links { gap: 1.6rem; margin-right: 1.4rem; }
footer.sh-footer .sh-footer-links a { color: #9a9aa8; font-size: .8rem; }
footer.sh-footer .sh-footer-copy { font-size: .75rem; color: #666673; }
footer.sh-footer .sh-footer-social { border-left: 0; padding-left: 0; gap: .45rem; }
footer.sh-footer .sh-footer-social a {
    width: 34px; height: 34px; border-radius: 9px;
    border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025);
    color: #9a9aa8; font-size: .85rem;
}
footer.sh-footer .sh-footer-social a:hover { border-color: rgba(2,248,149,.45); background: rgba(2,248,149,.08); }
@media (max-width: 900px) {
    footer.sh-footer .sh-footer-brand { flex-direction: column; text-align: center; }
    footer.sh-footer .sh-footer-brandcol { align-items: center; text-align: center; }
    footer.sh-footer .sh-footer-links { margin-right: 0; }
}
footer.sh-footer .sh-footer-tp{justify-self:end}

/* Sociala medier-ikoner: inga understrykningar, skarpa varumärkeslogotyper */
footer.sh-footer .sh-footer-social a,
.sh-footer-social a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
footer.sh-footer .sh-footer-social svg,
.sh-footer-social svg {
    width: 17px;
    height: 17px;
    display: block;
    fill: currentColor;
}
/* Trustpilot: stjärnor fylls efter riktigt betyg */
.sh-tp-boxes { position: relative; display: inline-flex; gap: 2px; border-radius: 2px; }
.sh-tp-boxes i { font-size: .6rem; padding: 3px; background: #3a3d44; color: #fff; }
.sh-tp-boxes.is-live { background: linear-gradient(90deg, #00b67a var(--tp-fill), #3a3d44 var(--tp-fill)); }
.sh-tp-boxes.is-live i { background: transparent; box-shadow: 0 0 0 1.5px #0A0A0C; }
.sh-footer-tp { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: #fff; }
.sh-footer-tp-score { font-size: .8rem; font-weight: 700; }
.sh-footer-tp-score:empty { display: none; }
/* Förtroendemärken under köpknappen: Trustpilot och Swish som små piller */
.sh-trust-row { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin: 1.7rem 0 1.5rem; }
.sh-trust-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border-radius: 999px; background: #16171a; border: 1px solid rgba(255,255,255,.08); color: #fff; text-decoration: none; font-family: 'Manrope', sans-serif; font-size: .82rem; font-weight: 600; line-height: 1; transition: border-color .2s, transform .2s, box-shadow .2s; }
a.sh-trust-pill:hover { border-color: rgba(0,182,122,.5); transform: translateY(-1px); box-shadow: 0 10px 26px -16px rgba(0,182,122,.6); }
.sh-trust-logo { height: 13px; width: auto; display: block; }
.sh-trust-mark { height: 15px; width: auto; display: block; }
.sh-trust-score { color: #a1a1aa; font-weight: 500; font-size: .78rem; }
@media (max-width: 620px) {
    .sh-trust-row { gap: .45rem; }
    .sh-trust-pill { padding: .4rem .7rem; font-size: .76rem; }
    .sh-trust-logo { height: 12px; }
    .sh-trust-mark { height: 13px; }
}


/* ===== Så går en affär till (animerad steg-guide) ===== */
.sh-how { padding: 5.5rem 1.5rem; max-width: 1080px; margin: 0 auto; }
.sh-how-head { text-align: center; margin-bottom: 2.6rem; }
.sh-how-kicker { display: inline-block; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #02F895; margin-bottom: .8rem; }
.sh-how-head h2 { font-family: 'Sora', sans-serif; font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 700; letter-spacing: -.025em; color: #fff; margin: 0 0 .5rem; }
.sh-how-head p { color: #8b919b; margin: 0; }
.sh-how-steps { list-style: none; margin: 0 auto 1.8rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; max-width: 780px; }
.sh-how-steps li { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; padding: .95rem 1.1rem; border-radius: 16px; background: linear-gradient(165deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); border: 1px solid rgba(255,255,255,.06); cursor: pointer; overflow: hidden; transition: background .35s, border-color .35s, box-shadow .35s, transform .35s; }
.sh-how-steps .n { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: 'Sora', sans-serif; font-weight: 700; font-size: .85rem; color: #6b717b; border: 1px solid rgba(255,255,255,.1); transition: .35s; }
.sh-how-steps b { font-family: 'Sora', sans-serif; color: #8b919b; font-size: .98rem; transition: color .35s; }
.sh-how-steps small { color: #5b616b; font-size: .78rem; }
.sh-how-steps li.on { background: linear-gradient(165deg, rgba(2,248,149,.12), rgba(2,248,149,.03)); border-color: rgba(2,248,149,.4); box-shadow: 0 8px 28px -10px rgba(2,248,149,.35), inset 0 1px 0 rgba(255,255,255,.06); transform: translateY(-2px); }
.sh-how-steps li.on .n { background: #02F895; border-color: #02F895; color: #0A0A0C; box-shadow: 0 0 14px rgba(2,248,149,.55); }
.sh-how-steps li.on b { color: #fff; }
.sh-how-steps .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: linear-gradient(90deg, #02F895, rgba(2,248,149,.3)); }
.sh-how-steps li.on .bar { animation: shHowBar var(--dur, 4s) linear forwards; }
@keyframes shHowBar { to { width: 100%; } }

.sh-how-stage { position: relative; display: grid; grid-template-columns: 1fr 250px; gap: 2.5rem; align-items: center; padding: 2.6rem; border-radius: 28px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, #131418, #0b0c0f); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05); }
.sh-how-stage::before { content: ''; position: absolute; right: -10%; top: -30%; width: 60%; height: 160%; background: radial-gradient(closest-side, rgba(2,248,149,.10), transparent); pointer-events: none; }
.sh-how-stage::after { content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(2,248,149,.45), transparent); pointer-events: none; }
.sh-how-inv .ph { display: flex; align-items: center; gap: .55rem; font-family: 'Sora', sans-serif; font-weight: 600; color: #d6d9de; margin-bottom: 1rem; font-size: .95rem; }
.sh-how-inv .tag { margin-left: auto; font-size: .7rem; color: #02F895; display: flex; align-items: center; gap: .35rem; opacity: 0; transition: opacity .4s; }
.sh-how-inv .tag i { font-size: .4rem; }
.sh-how-stage .sh-how-inv .tag { opacity: 1; }
.sh-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.sh-how-tile { position: relative; aspect-ratio: 1.25; border-radius: 16px; background: linear-gradient(180deg, #181a1f, #121316); border: 1px solid rgba(255,255,255,.06); display: grid; place-items: center; opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .45s, border-color .3s, box-shadow .3s; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.sh-how-tile::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 70%, var(--c) -60%, transparent 65%); opacity: .5; }
.sh-how-tile img { position: relative; width: 74%; max-height: 76%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0,0,0,.55)); }
.sh-how-tile.in { opacity: 1; transform: none; }
.sh-how-tile.sel { border-color: rgba(2,248,149,.7); transform: translateY(-3px); box-shadow: 0 10px 26px -10px rgba(2,248,149,.4), inset 0 1px 0 rgba(255,255,255,.06); }
.sh-how-tile.gone { opacity: .15; transform: scale(.96); }
.sh-how-tile .ck { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: #02F895; color: #0A0A0C; font-size: .55rem; display: grid; place-items: center; opacity: 0; transform: scale(.4); transition: .25s; box-shadow: 0 0 10px rgba(2,248,149,.6); }
.sh-how-tile.sel .ck { opacity: 1; transform: none; }

.sh-how-phone { position: relative; height: 420px; border-radius: 36px; padding: 10px; background: linear-gradient(160deg, #101114, #050506); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.6), 0 0 44px -18px rgba(2,248,149,.28); }
.sh-how-phone .notch { position: absolute; top: 18px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 10px; background: #000; z-index: 2; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.sh-how-phone .scr { height: 100%; border-radius: 27px; background: linear-gradient(180deg, #14151a, #0e0f12); padding: 48px 14px 14px; display: flex; flex-direction: column; }
.sh-how-ptitle { font-family: 'Sora', sans-serif; color: #fff; font-weight: 700; margin-bottom: .8rem; }
.sh-how-list { flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.sh-how-empty { color: #4f555e; font-size: .8rem; text-align: center; margin-top: 2rem; }
.sh-how-row { display: flex; align-items: center; gap: .6rem; padding: .45rem; border-radius: 12px; background: rgba(255,255,255,.03); animation: shHowRow .45s ease both; }
.sh-how-row .th { width: 42px; height: 32px; border-radius: 8px; background: radial-gradient(circle, var(--c) -70%, #1b1c21 70%); display: grid; place-items: center; }
.sh-how-row .th img { width: 88%; }
.sh-how-row small { display: block; color: #6f7580; font-size: .68rem; }
.sh-how-row b { color: #fff; font-size: .82rem; }
@keyframes shHowRow { from { opacity: 0; transform: translateY(8px); } }
.sh-how-btn { padding: .8rem; border-radius: 12px; text-align: center; font-weight: 700; font-size: .88rem; font-family: 'Sora', sans-serif; background: rgba(255,255,255,.05); color: #6f7580; transition: .4s; }
.sh-how-stage[data-step="1"] .sh-how-btn { background: rgba(2,248,149,.12); color: #02F895; }
.sh-how-stage[data-step="2"] .sh-how-btn { background: #02F895; color: #0A0A0C; box-shadow: 0 8px 22px -6px rgba(2,248,149,.55); }
.sh-how-swish { position: absolute; left: 18px; right: 18px; top: 46px; display: flex; gap: .6rem; align-items: center; padding: .7rem .8rem; border-radius: 16px; background: rgba(245,245,247,.97); color: #111; box-shadow: 0 16px 30px rgba(0,0,0,.5); opacity: 0; transform: translateY(-16px); transition: .5s cubic-bezier(.2,.9,.3,1.15); z-index: 3; }
.sh-how-swish img { width: 28px; height: 28px; }
.sh-how-swish b { display: block; font-size: .8rem; }
.sh-how-swish span { display: block; font-size: .72rem; color: #555; line-height: 1.3; }
.sh-how-stage.paid .sh-how-swish { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .sh-how-steps { grid-template-columns: 1fr; }
  .sh-how-stage { grid-template-columns: 1fr; padding: 1.4rem; }
  .sh-how-phone { width: 250px; margin: 0 auto; height: 380px; }
}

/* Checklista: varför man väljer Skinhajp */
.sh-why { max-width: 1080px; margin: 0 auto; padding: 3rem 1.5rem 4.5rem; }
.sh-why-head { text-align: center; margin-bottom: 1.9rem; }
.sh-why-head .sh-how-kicker { margin-bottom: .6rem; }
.sh-why-head h2 { font-family: 'Sora', sans-serif; font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 700; letter-spacing: -.025em; color: #fff; margin: 0; }
.sh-why-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1.3rem; }
.sh-why-item { display: flex; align-items: flex-start; gap: .85rem; padding: 1.05rem 1.15rem; border-radius: 16px; border: 1px solid rgba(255,255,255,.06); background: linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.008)); transition: border-color .25s ease, background .25s ease; }
.sh-why-item:hover { border-color: rgba(2,248,149,.28); }
.sh-why-item.key { border-color: rgba(2,248,149,.3); background: linear-gradient(165deg, rgba(2,248,149,.1), rgba(2,248,149,.02) 55%, rgba(255,255,255,.006)); }
.sh-why-ic { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(2,248,149,.13); border: 1px solid rgba(2,248,149,.32); color: var(--primary); font-size: .7rem; margin-top: .12rem; }
.sh-why-tx b { display: block; font-family: 'Sora', sans-serif; font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: .22rem; }
.sh-why-tx span { display: block; font-size: .88rem; line-height: 1.6; color: #9aa2ae; }
@media (max-width: 900px) { .sh-why-grid { grid-template-columns: 1fr; } .sh-why { padding-bottom: 3rem; } }

/* Steam-inloggningsspärr */
.sh-login-modal{max-width:420px;text-align:center;position:relative;background:#0f1013;border:1px solid rgba(2,248,149,.18);border-radius:20px;padding:2.2rem 2rem}
.sh-login-modal .modal-close-x{position:absolute;right:16px;top:14px;background:none;border:0;color:#8a8f98;font-size:1.2rem;cursor:pointer}
.sh-login-icon{width:56px;height:56px;margin:0 auto 1rem;border-radius:16px;display:grid;place-items:center;background:rgba(2,248,149,.1);color:#02F895;font-size:1.8rem}
.sh-login-modal h3{font-family:'Sora',sans-serif;font-size:1.35rem;margin:0 0 .5rem;color:#fff}
.sh-login-modal p{color:#9aa0a8;font-size:.95rem;margin:0 0 1.4rem}
.sh-login-go{display:inline-flex;gap:.55rem;align-items:center;justify-content:center;width:100%;padding:.9rem 1rem;border-radius:12px;background:#02F895;color:#0A0A0C;font-weight:800;text-decoration:none}
.sh-login-go:hover{filter:brightness(1.08)}

.sh-opt-price{font-family:'Sora',sans-serif;font-weight:800;font-size:2rem;line-height:1.1;margin:.2rem 0;color:#02F895;text-shadow:0 0 18px rgba(2,248,149,.35)}
.sh-tm{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);padding:1rem}
.sh-tm.hidden{display:none}
.sh-tm-card{position:relative;width:100%;max-width:440px;background:#0f1216;border:1px solid rgba(2,248,149,.25);border-radius:20px;padding:2rem 1.6rem 1.6rem;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(2,248,149,.08);animation:shTmIn .25s ease}
@keyframes shTmIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.sh-tm-x{position:absolute;top:12px;right:14px;background:none;border:0;color:#8b949e;font-size:1.6rem;cursor:pointer}
.sh-tm-x:hover{color:#fff}
.sh-tm-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(2,248,149,.12);color:#02F895;font-size:1.2rem;margin-bottom:.9rem}
.sh-tm-card h3{font-family:'Sora',sans-serif;color:#fff;font-size:1.35rem;margin:0 0 .3rem}
.sh-tm-card p{color:#8b949e;font-size:.9rem;margin:0 0 1.1rem}
.sh-tm-find{display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem;border-radius:14px;background:linear-gradient(135deg,#171a21,#1b2838);border:1px solid #2a475e;color:#fff;text-decoration:none;transition:.2s}
.sh-tm-find:hover{border-color:#02F895;transform:translateY(-1px)}
.sh-tm-find .fa-steam{font-size:1.6rem;color:#66c0f4}
.sh-tm-find span{flex:1;display:grid}
.sh-tm-find small{color:#8b949e;font-size:.75rem}
.sh-tm-steps{margin:1rem 0;padding-left:1.2rem;color:#c9d1d9;font-size:.85rem;line-height:1.7}
.sh-tm-card input{width:100%;box-sizing:border-box;background:#0A0A0C;border:1px solid #2a313c;border-radius:12px;padding:.85rem 1rem;color:#fff;font-size:.85rem;outline:none}
.sh-tm-card input:focus{border-color:#02F895;box-shadow:0 0 0 3px rgba(2,248,149,.15)}
.sh-tm-err{display:block;min-height:1rem;color:#ff6b6b;font-size:.75rem;margin:.4rem 0}
.sh-tm-save{width:100%;padding:.9rem;border:0;border-radius:12px;background:#02F895;color:#0A0A0C;font-weight:800;font-size:.95rem;cursor:pointer;transition:.2s}
.sh-tm-save:hover{box-shadow:0 0 24px rgba(2,248,149,.45)}

/* Clean dropdowns */
.sh-select, #checkout-contact-method {
  appearance: none; -webkit-appearance: none;
  background: #111114 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2300FF66' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center !important;
  border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 12px !important;
  color: #f2f2f2 !important; font: 600 0.9rem 'Sora', inherit; padding: 0.7rem 2.6rem 0.7rem 1rem !important;
  cursor: pointer; outline: none; transition: border-color .15s, box-shadow .15s;
}
.sh-select--full { width: 100%; }
.sh-select:hover, #checkout-contact-method:hover { border-color: rgba(2,248,149,0.35) !important; }
.sh-select:focus, #checkout-contact-method:focus { border-color: #02F895 !important; box-shadow: 0 0 0 3px rgba(2,248,149,0.15); }
.sh-select option, #checkout-contact-method option { background: #111114; color: #f2f2f2; }

/* Custom dropdown */
.sh-dd { position: relative; display: inline-block; min-width: 170px; }
.sh-dd--full { display: block; width: 100%; }
.sh-dd-native { position: absolute !important; opacity: 0; pointer-events: none; width: 1px !important; height: 1px; }
.sh-dd-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: linear-gradient(180deg, #141418, #0e0e11); border: 1px solid rgba(255,255,255,.08); border-radius: 12px;
  color: #f2f2f2; font: 600 .92rem 'Sora', sans-serif; padding: .75rem 1rem; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.sh-dd-btn svg { color: #02F895; transition: transform .2s; flex-shrink: 0; }
.sh-dd-btn:hover { border-color: rgba(2,248,149,.35); }
.sh-dd.open .sh-dd-btn { border-color: #02F895; box-shadow: 0 0 0 3px rgba(2,248,149,.12); }
.sh-dd.open .sh-dd-btn svg { transform: rotate(180deg); }
.sh-dd-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; padding: 6px;
  background: #121215; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.8);
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .15s, transform .15s; }
.sh-dd.open .sh-dd-menu { opacity: 1; transform: none; pointer-events: auto; }
.sh-dd-item { padding: .6rem .8rem; border-radius: 8px; color: #cfcfd4; font: 500 .9rem 'Sora', sans-serif; cursor: pointer; }
.sh-dd-item:hover { background: rgba(2,248,149,.08); color: #fff; }
.sh-dd-item.is-active { color: #02F895; background: rgba(2,248,149,.1); }

/* ===== Inventory card v2 ===== */
#sh-inv-grid { gap: 14px !important; }
#sh-inv-grid .skin-item { position: relative; overflow: hidden; padding: .85rem !important; border-radius: 16px !important;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--glow) 14%, transparent), transparent 60%), linear-gradient(180deg, #121216, #0c0c0f) !important;
  border: 1px solid rgba(255,255,255,.06) !important; box-shadow: none !important; transition: transform .18s, border-color .18s, box-shadow .18s; cursor: pointer; }
#sh-inv-grid .skin-item::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--glow); opacity: .85; box-shadow: 0 0 14px var(--glow); }
#sh-inv-grid .skin-item:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--glow) 45%, transparent) !important; box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--glow) 60%, transparent) !important; }
#sh-inv-grid .skin-item.selected { border-color: #02F895 !important; box-shadow: 0 0 0 1px #02F895, 0 14px 34px -14px rgba(2,248,149,.6) !important; }
.sh-c-top { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.sh-c-wear, .sh-c-tag { font: 700 .66rem 'Sora', sans-serif; letter-spacing: .04em; padding: 3px 7px; border-radius: 6px; background: rgba(255,255,255,.06); color: #b8bcc6; }
.sh-c-tag.st { background: rgba(255,140,0,.14); color: #ff9d3a; }
.sh-c-tag.sv { background: rgba(255,215,0,.12); color: #ffd54a; }
.sh-c-check { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 800;
  border: 1px solid rgba(255,255,255,.15); color: transparent; transition: .15s; }
.skin-item.selected .sh-c-check { background: #02F895; border-color: #02F895; color: #0A0A0C; }
#sh-inv-grid .skin-item .skin-img-wrapper { height: 104px !important; margin: .35rem 0 .6rem; }
#sh-inv-grid .skin-item .skin-img-wrapper img { transition: transform .25s; }
#sh-inv-grid .skin-item:hover .skin-img-wrapper img { transform: scale(1.06) rotate(-2deg); }
.sh-c-weapon { font: 600 .7rem 'Sora', sans-serif; color: #8b8f99; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sh-inv-grid .skin-item .skin-name { font: 700 .9rem 'Sora', sans-serif !important; color: #fff; min-height: 2.3em; margin-top: 2px; }
.sh-c-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: .55rem; padding-top: .55rem; border-top: 1px solid rgba(255,255,255,.06); }
.sh-c-foot .skin-price { font: 800 1rem 'Sora', sans-serif !important; color: #02F895 !important; margin: 0 !important; }
.sh-c-foot .manual-wear-badge { margin: 0 !important; font-size: .58rem !important; padding: 2px 6px !important; color: var(--glow) !important; background: color-mix(in srgb, var(--glow) 12%, transparent) !important; border: 0 !important; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Search + chips */

/* Basket rows */
.basket-item { display: flex !important; align-items: center; gap: 10px; padding: 8px !important; margin-bottom: 6px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); }
.bi-thumb { width: 46px; height: 36px; flex-shrink: 0; border-radius: 8px; background: rgba(2,248,149,.06); display: grid; place-items: center; }
.bi-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bi-text { display: flex; flex-direction: column; min-width: 0; flex: 1; text-align: left; }
.bi-text .basket-item-name { font-size: .78rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bi-price { font: 800 .85rem 'Sora', sans-serif; color: #02F895; }
.remove-basket-item { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); background: transparent; color: #8b8f99; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.remove-basket-item:hover { color: #ef4444; border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.08); }

/* ===== Krediter (Alternativ B) ===== */
#sh-balance { cursor: pointer; border-bottom: 1px dashed currentColor; }
#sh-balance.sh-bal-ready { animation: shBalPulse 1.6s ease-in-out infinite; }
@keyframes shBalPulse { 50% { text-shadow: 0 0 10px var(--primary); } }
.sh-cr { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.sh-cr.hidden { display: none; }
.sh-cr-card { position: relative; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; background: #111114; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 28px; color: #fff; font-family: 'Sora', sans-serif; }
.sh-cr-x { position: absolute; top: 14px; right: 16px; background: none; border: 0; color: #888; font-size: 26px; cursor: pointer; }
.sh-cr-title { margin: 0 0 6px; font-size: 22px; }
.sh-cr-sub { margin: 0 0 18px; color: #9a9aa3; font-size: 13.5px; line-height: 1.5; }
.sh-cr-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.sh-cr-sum > div { background: #0A0A0C; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 12px 14px; }
.sh-cr-sum small { display: block; color: #8a8a93; font-size: 12px; }
.sh-cr-sum strong { font-size: 20px; }
.sh-cr-sum > div:first-child strong { color: var(--primary); }
.sh-cr-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.sh-cr-item { background: #0A0A0C; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 12px 14px; }
.sh-cr-item small { color: #7d7d86; font-size: 12px; }
.sh-cr-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.sh-cr-tag { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.06); color: #ccc; }
.sh-cr-tag b { font-variant-numeric: tabular-nums; font-weight: 600; }
.sh-cr-tag.ok { background: rgba(2,248,149,.12); color: var(--primary); }
.sh-cr-tag.req { background: rgba(245,166,35,.12); color: #f5a623; }
.sh-cr-tag.paid { color: #888; }
.sh-cr-bar { height: 4px; border-radius: 4px; background: rgba(255,255,255,.06); margin-top: 8px; overflow: hidden; }
.sh-cr-bar i { display: block; height: 100%; background: var(--primary); transition: width 1s linear; }
.sh-cr-empty { color: #8a8a93; font-size: 13.5px; text-align: center; padding: 14px 0; }
.sh-cr-skins { margin-top: 10px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 8px; }
.sh-cr-skins summary { cursor: pointer; color: #8f8f98; font-size: 12px; list-style: none; }
.sh-cr-skins summary::-webkit-details-marker { display: none; }
.sh-cr-skins summary::before { content: '▸ '; color: #02F895; }
.sh-cr-skins[open] summary::before { content: '▾ '; }
.sh-cr-skins ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.sh-cr-skins li { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: #d6d6db; }
.sh-cr-skins li em { color: #7d7d86; font-style: normal; }
.sh-cr-skins li b { color: #02F895; white-space: nowrap; }
.sh-cr-form { border-top: 1px solid rgba(255,255,255,.08); padding-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.sh-cr-form.hidden, .sh-cr-done.hidden, .sh-cr-form .hidden { display: none; }
.sh-cr-form h4 { margin: 0 0 4px; font-size: 16px; }
.sh-cr-form h4 span { color: var(--primary); }
.sh-cr-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sh-cr-methods label { cursor: pointer; }
.sh-cr-methods input { display: none; }
.sh-cr-methods span { display: block; text-align: center; padding: 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); color: #bbb; font-weight: 600; }
.sh-cr-methods input:checked + span { border-color: var(--primary); color: var(--primary); background: rgba(2,248,149,.06); }
.sh-cr-in { width: 100%; box-sizing: border-box; background: #0A0A0C; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 11px 13px; color: #fff; font: inherit; font-size: 14px; }
.sh-cr-in:focus { outline: none; border-color: var(--primary); }
#sh-cr-bank { display: flex; flex-direction: column; gap: 9px; }
.sh-cr-row { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.sh-cr-err { color: #ff5c5c; font-size: 13px; margin: 0; min-height: 0; }
.sh-cr-btn { background: var(--primary); color: #0A0A0C; border: 0; border-radius: 12px; padding: 13px; font-weight: 700; font-size: 15px; cursor: pointer; font-family: inherit; }
.sh-cr-btn:disabled { opacity: .6; cursor: wait; }
.sh-cr-done { text-align: center; padding: 14px 0 0; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.sh-cr-done i { color: var(--primary); font-size: 32px; }
.sh-cr-done span { color: #9a9aa3; font-size: 13px; }

/* Profilchip v2 */
.sh-profile { gap: 9px; padding: 4px; border-radius: 12px; background: linear-gradient(180deg,#141418,#0e0e11); border: 1px solid rgba(255,255,255,.08); }
.sh-profile img { width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(2,248,149,.35); object-fit: cover; }
.sh-profile-text { gap: 3px; }
.sh-profile-text #sh-name { font-size: .78rem; letter-spacing: .01em; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-profile-meta { display: flex; gap: 5px; font-size: .7rem; }
#sh-balance, #sh-trade { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: 999px; font-weight: 600; font-size: .6rem; line-height: 1.6; white-space: nowrap; flex-shrink: 0; cursor: pointer; border: 1px solid transparent; transition: background .15s, border-color .15s; }
#sh-balance { color: var(--primary); background: rgba(2,248,149,.08); border-color: rgba(2,248,149,.25); border-bottom: 1px solid rgba(2,248,149,.25); }
#sh-balance::before { content: "\f555"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .58rem; }
#sh-balance:hover { background: rgba(2,248,149,.16); }
#sh-trade::before { font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .58rem; }
#sh-trade.sh-trade-ok { color: #cfd3da; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
#sh-trade.sh-trade-ok::before { content: "\f00c"; color: var(--primary); }
#sh-trade.sh-trade-missing { color: #f59e0b; background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.3); }
#sh-trade.sh-trade-missing::before { content: "\2b"; }
#sh-trade:hover { border-color: rgba(255,255,255,.25); }
.sh-logout { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-size: .8rem; color: var(--text-gray); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); transition: color .15s, background .15s; }
.sh-logout:hover { color: #ff5c5c; background: rgba(255,92,92,.1); }

/* Affiliate i kassan */
.sh-co-aff-row { display: flex; gap: 8px; }
.sh-co-aff-row input { flex: 1; padding: .8rem 1rem; text-transform: uppercase; letter-spacing: .05em; }
.sh-co-aff-row input.valid { border-color: rgba(2,248,149,.5) !important; }
#checkout-aff-btn { padding: 0 1.1rem; border-radius: 12px; border: 1px solid rgba(2,248,149,.4); background: rgba(2,248,149,.1); color: var(--primary); font-weight: 700; cursor: pointer; transition: background .15s; }
#checkout-aff-btn:hover { background: rgba(2,248,149,.2); }
.sh-co-aff-msg { font-size: .75rem; color: var(--text-gray); margin-top: 4px; }
.sh-co-aff-msg.ok { color: var(--primary); }
.sh-co-aff-msg.bad { color: #ff6b6b; }

/* Kontakt: ren och lugn – men med liv i bakgrunden */
.sh-contact-main { position: relative; padding-top: 46px; overflow: hidden; }
.sh-contact-main::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(76% 56% at 50% 14%, #000, transparent 72%);
    mask-image: radial-gradient(76% 56% at 50% 14%, #000, transparent 72%);
}
.sh-contact-main::after {
    content: ""; position: absolute; left: 50%; top: -190px; width: 900px; height: 560px;
    translate: -50% 0; pointer-events: none;
    background: radial-gradient(closest-side, rgba(2,248,149,.16), transparent 72%);
    animation: sh-contact-drift 16s ease-in-out infinite alternate;
}
@keyframes sh-contact-drift {
    from { transform: translate3d(-90px, 0, 0) scale(1); opacity: .8; }
    to { transform: translate3d(90px, 30px, 0) scale(1.12); opacity: 1; }
}
@keyframes sh-contact-spin { to { rotate: 360deg; } }
@keyframes sh-contact-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Svävande skins i bakgrunden */
.sh-contact-skins { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.sh-contact-skins .sk {
    position: absolute; width: 120px; opacity: .16;
    filter: drop-shadow(0 18px 26px rgba(0,0,0,.55)) saturate(1.1);
    animation: sh-skin-float 11s ease-in-out infinite alternate;
}
.sh-contact-skins .sk1 { left: 4%; top: 9%; rotate: -14deg; }
.sh-contact-skins .sk2 { right: 5%; top: 13%; width: 140px; rotate: 11deg; animation-duration: 13s; animation-delay: -3s; }
.sh-contact-skins .sk3 { left: 8%; top: 52%; width: 100px; rotate: 9deg; animation-duration: 12s; animation-delay: -6s; }
.sh-contact-skins .sk4 { right: 8%; top: 56%; width: 110px; rotate: -9deg; animation-duration: 14s; animation-delay: -2s; }
.sh-contact-skins .sk5 { left: 44%; top: 78%; width: 92px; rotate: 6deg; opacity: .12; animation-duration: 10s; animation-delay: -8s; }
@keyframes sh-skin-float {
    from { transform: translate3d(0, -10px, 0); }
    to { transform: translate3d(0, 14px, 0); }
}
@media (max-width: 860px) {
    .sh-contact-skins .sk { width: 84px; opacity: .12; }
    .sh-contact-skins .sk3, .sh-contact-skins .sk5 { display: none; }
}

.contact-section { position: relative; z-index: 1; max-width: 1120px; margin-inline: auto; padding: 0 24px 5rem; }
.contact-section .section-header { margin-bottom: 2.4rem; }
.contact-section .section-header h2 { font-size: 2.35rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .6rem; }
.contact-section .section-header p { font-size: .98rem; color: #a4aab4; max-width: 46ch; margin-inline: auto; text-wrap: balance; }
@media (max-width: 640px) { .contact-section .section-header p .sh-hdr-br { display: none; } }

.contact-section .contact-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; max-width: 1000px; margin-inline: auto; }
.contact-section .contact-grid > .contact-card { flex: 1 1 400px; max-width: 470px; }
.sh-owner-card {
    --t: var(--primary);
    position: relative; overflow: hidden; padding: 2.5rem 1.9rem 1.9rem;
    border: 1px solid rgba(255,255,255,.09); border-radius: 26px;
    background:
        radial-gradient(120% 80% at 50% -12%, rgba(2,248,149,.11), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
    box-shadow: 0 34px 70px -46px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06);
    animation: sh-contact-rise .6s cubic-bezier(.2,.8,.2,1) backwards;
    transition: transform .3s, border-color .3s, box-shadow .3s;
}
.sh-owner-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(2,248,149,.6), transparent); }
.sh-owner-card:hover { transform: translateY(-4px); border-color: rgba(2,248,149,.26); box-shadow: 0 44px 80px -46px rgba(0,0,0,.95), 0 0 44px -18px rgba(2,248,149,.5), inset 0 1px 0 rgba(255,255,255,.06); }

.contact-section .contact-avatar { width: 118px; height: 118px; margin: 0 auto 1.3rem; }
.contact-section .contact-avatar::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px dashed rgba(2,248,149,.22); animation: sh-contact-spin 26s linear infinite; }
.contact-section .contact-avatar { position: relative; }
.contact-section .contact-avatar img { width: 118px; height: 118px; border-width: 3px; box-shadow: 0 0 0 8px rgba(2,248,149,.07), 0 0 42px rgba(2,248,149,.3); }

.contact-section .contact-card h3 { margin-bottom: .3rem; font-family: 'Sora', sans-serif; font-size: 1.38rem; }
.sh-owner-role { display: flex; align-items: center; justify-content: center; gap: .65rem; margin: 0 0 1.4rem; color: var(--primary); font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.sh-owner-role::before, .sh-owner-role::after { content: ""; width: 26px; height: 1px; }
.sh-owner-role::before { background: linear-gradient(90deg, rgba(2,248,149,0), rgba(2,248,149,.55)); }
.sh-owner-role::after { background: linear-gradient(90deg, rgba(2,248,149,.55), rgba(2,248,149,0)); }

.contact-section .contact-methods { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .55rem; }
.contact-section .contact-method { --t: var(--primary); --tg: rgba(2,248,149,.14); width: auto; max-width: none; padding: .58rem 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.04); color: #dfe3e8; font-family: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; transition: transform .2s, color .2s, background .2s, border-color .2s, box-shadow .2s; }
.contact-section .contact-method:hover { transform: translateY(-2px); color: #fff; border-color: var(--t); background: var(--tg); box-shadow: 0 12px 26px -16px var(--t); }
.contact-section .contact-method i { font-size: .95rem; color: var(--t); }
.contact-section .contact-methods > *:nth-child(1) { --t: #5b8def; --tg: rgba(91,141,239,.16); }
.contact-section .contact-methods > *:nth-child(2) { --t: #7f93f5; --tg: rgba(127,147,245,.16); }

.sh-owner-copy .sh-owner-handle { font-weight: 700; color: #fff; }
.sh-owner-copy .sh-owner-copy-ico { font-size: .58rem; opacity: .32; margin-left: .1rem; }
.sh-owner-copy.copied { border-color: rgba(2,248,149,.45); }
.sh-owner-copy.copied .sh-owner-copy-ico, .sh-owner-copy.copied .sh-owner-handle { color: var(--primary); opacity: 1; }

.contact-section .general-contact { margin-top: 2.6rem; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; background: transparent; border: 0; border-radius: 0; overflow: visible; padding: 0; }
.contact-section .general-contact .gen-item { --t: var(--primary); --tg: rgba(2,248,149,.16); position: relative; isolation: isolate; overflow: hidden; flex-direction: column; align-items: flex-start; gap: .1rem; padding: 1.4rem 1.3rem 1.45rem; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); box-shadow: 0 24px 50px -44px rgba(0,0,0,.95); transition: transform .25s, border-color .25s, box-shadow .25s; animation: sh-contact-rise .55s cubic-bezier(.2,.8,.2,1) backwards; text-decoration: none; color: inherit; cursor: pointer; }
.contact-section .general-contact .gen-item::after { content: ""; position: absolute; z-index: -1; right: -40px; top: -46px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(closest-side, var(--tg), transparent 72%); opacity: .5; transition: opacity .25s; }
.contact-section .general-contact .gen-item:hover { transform: translateY(-4px); border-color: var(--t); box-shadow: 0 30px 55px -34px rgba(0,0,0,.95), 0 0 34px -14px var(--t); }
.contact-section .general-contact .gen-item:hover::after { opacity: 1; }
.contact-section .general-contact .gen-item:focus-visible { outline: 2px solid var(--t); outline-offset: 3px; border-color: var(--t); }
.contact-section .general-contact .gen-item:nth-child(1) { --t: #5b8def; --tg: rgba(91,141,239,.2); }
.contact-section .general-contact .gen-item:nth-child(2) { --t: #ff5b7a; --tg: rgba(255,91,122,.18); animation-delay: .07s; }
.contact-section .general-contact .gen-item:nth-child(3) { --t: #d86fd0; --tg: rgba(216,111,208,.18); animation-delay: .14s; }
.contact-section .general-contact .gen-item:nth-child(4) { --t: #7f93f5; --tg: rgba(127,147,245,.2); animation-delay: .21s; }
.contact-section .general-contact .gen-ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--tg); border: 1px solid rgba(255,255,255,.07); color: var(--t); font-size: 1rem; transition: transform .25s; }
.contact-section .general-contact .gen-item:hover .gen-ico { transform: scale(1.08); }
.contact-section .general-contact h4 { margin: .85rem 0 3px; font-size: .66rem; letter-spacing: .14em; color: #8b9299; }
.contact-section .general-contact .gen-link { display: inline-block; font-size: .92rem; font-weight: 700; color: var(--text-white); text-decoration: none; }
.contact-section .general-contact .gen-link::after { content: "\2192"; display: inline-block; margin-left: .45rem; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.contact-section .general-contact .gen-item:hover .gen-link, .contact-section .general-contact .gen-item:focus-visible .gen-link { color: var(--t); }
.contact-section .general-contact .gen-item:hover .gen-link::after, .contact-section .general-contact .gen-item:focus-visible .gen-link::after { opacity: 1; transform: none; }

@media (max-width: 860px) { .contact-section .general-contact { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) {
    .sh-contact-main { padding-top: 26px; }
    .contact-section { padding-bottom: 3.5rem; }
    .contact-section .general-contact { grid-template-columns: 1fr; }
    .sh-owner-card { padding: 1.9rem 1.15rem 1.5rem; }
    .contact-section .contact-method { font-size: .82rem; padding: .5rem .8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sh-contact-main::after, .contact-section .contact-avatar::before,
    .sh-owner-card, .contact-section .general-contact .gen-item { animation: none; }
}

/* Mobil: solid meny saa innehållet inte skiner genom headern (ma ligga efter den allmanna .sh-nav-regeln) */
@media (max-width: 900px) { .sh-nav { background: #0A0A0C; } }

#checkout-modal .sh-opt-price{font-size:1.25rem!important;color:#cfd6df!important;text-shadow:none!important}
#checkout-modal .sh-option-best .sh-opt-price{font-size:2.4rem!important;color:#02F895!important;text-shadow:0 0 18px rgba(2,248,149,.35)!important}

/* Affiliate-ruta i korgen (inloggat läge) – kompakt en-radsfält */
.sh-aff-basket { margin: 0 0 1.1rem; }
.sh-aff-brow { display: flex; align-items: center; gap: .5rem; padding: .3rem .3rem .3rem .7rem; background: rgba(255,255,255,.028); border: 1px solid rgba(255,255,255,.08); border-radius: 11px; transition: border-color .15s, background .15s; }
.sh-aff-brow:focus-within { border-color: rgba(2,248,149,.4); background: rgba(2,248,149,.035); }
.sh-aff-brow > i { flex: none; color: var(--primary); font-size: .72rem; opacity: .75; }
.sh-aff-basket .premium-input { flex: 1; min-width: 0; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: .3rem 0 !important; font-size: .8rem; font-family: 'Sora', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; box-shadow: none !important; outline: none; }
.sh-aff-basket .premium-input::placeholder { text-transform: none; letter-spacing: 0; color: #6b7280; }
.sh-aff-basket .premium-input.valid-affiliate { color: var(--primary); }
.sh-aff-basket .premium-apply-btn { flex: none; border-radius: 8px !important; padding: .42rem .75rem !important; font-size: .72rem; font-family: 'Sora', sans-serif; font-weight: 700; letter-spacing: .04em; box-shadow: none !important; }
.sh-aff-basket .premium-success { margin: .4rem 0 0 .15rem; font-size: .74rem; color: var(--primary); }

/* ===== Juridiska sidor (villkor, integritet, cookies) i sajtens stil ===== */
.sh-legal { background: radial-gradient(900px 500px at 50% -10%, rgba(0,255,127,.10), transparent 70%), linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0/44px 44px, linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0/44px 44px, #0A0A0C; }
@media (max-width: 900px) { .sh-legal main { padding-top: 125px !important; } }
.sh-legal main { padding-left: 1rem; padding-right: 1rem; cursor: pointer; }
.sh-legal main > div { cursor: auto; }
.sh-legal main > div { max-width: 860px !important; padding: clamp(1.4rem, 4vw, 3rem) !important; background: linear-gradient(180deg, rgba(22,25,30,.92), rgba(14,16,19,.92)) !important; border: 1px solid rgba(0,255,127,.14) !important; border-radius: 22px !important; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02) inset, 0 0 60px rgba(0,255,127,.05) !important; position: relative; overflow: hidden; }
.sh-legal main > div::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--primary), transparent); opacity: .7; }
.sh-legal main h1 { font-size: clamp(1.7rem, 6vw, 2.6rem) !important; letter-spacing: -.02em; line-height: 1.1; }
.sh-legal main section { padding: 1.3rem 0 0; margin-bottom: 1.3rem !important; border-top: 1px solid rgba(255,255,255,.06); }
.sh-legal main h3 { color: #fff !important; font-size: clamp(1.05rem, 3.6vw, 1.3rem) !important; display: flex; align-items: baseline; gap: .6rem; }
.sh-legal main h3::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px var(--primary-glow); transform: translateY(-2px); }
.sh-legal main p, .sh-legal main li { color: #aeb6c2 !important; line-height: 1.75 !important; }
.sh-legal main ul { list-style: none !important; padding-left: 0 !important; }
.sh-legal main li { position: relative; padding-left: 1.2rem; margin-bottom: .4rem; }
.sh-legal main li::before { content: "›"; position: absolute; left: 0; color: var(--primary); font-weight: 800; }
.sh-legal main a:not([class]) { color: var(--primary); }
.sh-legal main table { font-size: .9rem; min-width: 480px; }
.sh-legal main thead tr { background: rgba(0,255,127,.07); }
.sh-legal main div[style*="overflow-x"] { border: 1px solid rgba(255,255,255,.07); border-radius: 12px; }

/* ===== Mobilanpassning för hela sajten ===== */
html, body { overflow-x: clip; max-width: 100%; }
img, video, svg { max-width: 100%; }
.sh-hero2 { overflow: hidden; }
@media (max-width: 900px) {
  .sh-nav { display: grid !important; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .55rem .75rem; }
  .sh-nav .logo-link img { height: 36px !important; }
  .sh-nav-right { min-width: 0; justify-content: flex-end; }
  .sh-nav .nav-links { grid-column: 1 / -1; padding-bottom: .2rem; scrollbar-width: none; }
  .sh-nav .nav-links::-webkit-scrollbar { display: none; }
  .sh-steam-btn { padding: .55rem .9rem !important; font-size: .82rem !important; white-space: nowrap; }
}
@media (max-width: 620px) {
  .sh-legal main { padding-top: 120px !important; }
  input, select, textarea { font-size: 16px !important; }
  .sh-footer { padding-left: 1rem; padding-right: 1rem; }
}

/* Startsida: öppningsbara frågor samlade i en panel. */
.sh-faq { padding: 4.5rem 1.5rem 5rem; }
.sh-faq-inner { max-width: 900px; margin-inline: auto; }
.sh-faq-head { text-align: center; margin-bottom: 2.4rem; }
.sh-faq-head .sh-how-kicker { margin-bottom: .7rem; }
.sh-faq h2 { font-family: 'Sora', sans-serif; font-size: clamp(2rem, 4.2vw, 2.9rem); line-height: 1.15; letter-spacing: -.025em; color: #fff; margin: 0 0 .6rem; }
.sh-faq-head p { color: #8b919b; margin: 0; font-size: .98rem; }
.sh-faq-panel { border: 1px solid rgba(255,255,255,.07); border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.038), rgba(255,255,255,.008)); box-shadow: 0 40px 90px -50px rgba(2,248,149,.35), inset 0 1px 0 rgba(255,255,255,.05); overflow: hidden; }
.sh-faq-item + .sh-faq-item { border-top: 1px solid rgba(255,255,255,.06); }
.sh-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 70px; padding: 1.15rem 1.6rem; cursor: pointer; list-style: none; font-size: 1.02rem; font-weight: 600; line-height: 1.5; letter-spacing: 0; color: #e6ebf2; transition: background .2s, color .2s; }
.sh-faq-item summary:hover { background: rgba(2,248,149,.04); color: #fff; }
.sh-faq-item summary::-webkit-details-marker { display: none; }
.sh-faq-item summary > span:first-child { min-width: 0; }
.sh-faq-toggle { position: relative; display: block; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #98a2b0; transition: color .2s, background .2s, border-color .2s; }
.sh-faq-toggle::before, .sh-faq-toggle::after { content: ''; position: absolute; top: 13px; left: 8px; width: 12px; height: 2px; border-radius: 2px; background: currentColor; }
.sh-faq-toggle::after { transform: rotate(90deg); transition: transform .25s; }
.sh-faq-item[open] .sh-faq-toggle::after { transform: rotate(0deg); }
.sh-faq-item[open] .sh-faq-toggle { background: rgba(2,248,149,.14); border-color: rgba(2,248,149,.45); color: var(--primary); }
.sh-faq-item summary:hover .sh-faq-toggle { border-color: rgba(2,248,149,.4); color: var(--primary); }
.sh-faq-item summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; border-radius: 20px; }
.sh-faq-answer { max-width: 70ch; margin: 0 1.6rem 1.5rem; padding: .1rem 0 .1rem 1.05rem; border-left: 2px solid rgba(2,248,149,.28); color: #98a3b2; font-size: .95rem; line-height: 1.75; }
.sh-faq-answer p { margin: 0; }
.sh-faq-answer a { display: inline-flex; align-items: center; gap: .5rem; margin-top: .75rem; color: var(--primary); text-decoration: none; font-weight: 600; }
.sh-faq-answer a:hover { text-decoration: underline; }
.sh-faq-item[open] .sh-faq-answer { animation: shfaqin .28s ease; }
@keyframes shfaqin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.sh-faq-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.15rem 1.6rem; border-top: 1px solid rgba(255,255,255,.06); background: rgba(2,248,149,.045); }
.sh-faq-foot span { color: #a7b1bf; font-size: .92rem; }
.sh-faq-foot a { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: 999px; background: var(--primary); color: #06120a; font-weight: 800; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.sh-faq-foot a:hover { box-shadow: 0 0 22px rgba(2,248,149,.4); transform: translateY(-1px); }
@media (max-width: 620px) {
  .sh-faq { padding: 2.75rem 1.1rem 3.25rem; }
  .sh-faq-head { margin-bottom: 1.5rem; }
  .sh-faq-panel { border-radius: 18px; }
  .sh-faq-item summary { gap: 1rem; min-height: 64px; padding: 1rem 1.05rem; font-size: .93rem; }
  .sh-faq-answer { margin: 0 1.05rem 1.15rem; padding-left: .8rem; font-size: .9rem; }
  .sh-faq-foot { padding: 1rem 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .sh-faq-toggle, .sh-faq-toggle::after, .sh-faq-item summary { transition: none; } .sh-faq-item[open] .sh-faq-answer { animation: none; } }

/* Större logga, lite indragen */
@media (min-width: 901px) {
  nav .logo-link { margin-left: 28px; display: inline-flex; align-items: center; }
  nav .logo-link img { height: 60px !important; width: auto; }
}

/* Byt skins-knapp i menyn */
a.sh-nav-trade{display:inline-flex!important;align-items:center;gap:.45rem;padding:.38rem .8rem!important;border-radius:999px;white-space:nowrap;border:1px solid rgba(2,248,149,.45);background:linear-gradient(135deg,rgba(2,248,149,.14),rgba(2,248,149,.04));color:#7dffc0!important;font-weight:700;transition:all .2s ease}
a.sh-nav-trade svg{transition:transform .35s ease}
a.sh-nav-trade:hover,a.sh-nav-trade[aria-current=page]{border-color:#02F895;background:rgba(2,248,149,.2);color:#fff!important;box-shadow:0 0 18px rgba(2,248,149,.35)}
a.sh-nav-trade:hover svg{transform:rotate(180deg)}
@media (min-width: 900px){ .sh-nav .nav-links{flex-wrap:nowrap;gap:1.1rem} .sh-nav .nav-links a{white-space:nowrap} }

/* Guide-tiles i samma stil som säljkorten */
.sh-how-tile { aspect-ratio: auto; display: flex; flex-direction: column; align-items: stretch; padding: .6rem .7rem .7rem; border-radius: 12px; background: linear-gradient(180deg, #16181c 40%, color-mix(in srgb, var(--c) 14%, #121316)); border: 1px solid rgba(255,255,255,.06); border-bottom: 2px solid var(--c); }
.sh-how-tile::before { background: radial-gradient(circle at 50% 45%, var(--c) -70%, transparent 60%); opacity: .35; }
.sh-how-tile .wr { position: relative; align-self: flex-start; font-family: 'Sora', monospace; font-size: .58rem; letter-spacing: .06em; color: #9aa0a8; background: rgba(255,255,255,.06); padding: 2px 6px; border-radius: 4px; }
.sh-how-tile img { width: 100%; height: 80px; max-height: none; margin: .45rem 0 .5rem; }
.sh-how-tile small { position: relative; font-family: 'Sora', monospace; font-size: .6rem; letter-spacing: .05em; color: #8a9099; text-transform: uppercase; }
.sh-how-tile b { position: relative; font-size: .85rem; color: #fff; line-height: 1.2; }
.sh-how-tile .ck { width: 20px; height: 20px; border: 1px solid rgba(255,255,255,.22); background: transparent; color: transparent; opacity: 1; transform: none; box-shadow: none; }
.sh-how-tile.sel { border-color: #02F895; border-bottom-color: #02F895; box-shadow: 0 0 0 1px #02F895, 0 10px 26px -8px rgba(2,248,149,.45); }
.sh-how-tile.sel .ck { background: #02F895; border-color: #02F895; color: #0A0A0C; box-shadow: 0 0 10px rgba(2,248,149,.6); }
a.sh-nav-sell:hover svg{transform:translateY(-2px) scale(1.12)}
.sh-why-wide { grid-column: 1 / -1; text-decoration: none; color: inherit; }
.sh-live-give { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.4rem; padding: 1rem 1.3rem; border-radius: 18px; text-decoration: none; color: inherit; position: relative;
  border: 1px solid rgba(2,248,149,.35); background: radial-gradient(circle at 12% 50%, rgba(2,248,149,.16), transparent 45%), linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); box-shadow: 0 0 30px rgba(2,248,149,.08); transition: transform .25s, box-shadow .25s; }
.sh-live-give[hidden] { display: none; }
.sh-live-give:hover { transform: translateY(-3px); box-shadow: 0 0 36px rgba(2,248,149,.18); }
.sh-live-tag { position: absolute; top: -11px; left: 18px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: #02F895; color: #04140d; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.sh-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #04140d; animation: sh-live-p 1.4s ease-in-out infinite; }
@keyframes sh-live-p { 50% { opacity: .25; } }
.sh-live-img { width: 110px; height: 70px; flex-shrink: 0; display: grid; place-items: center; }
.sh-live-img img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.sh-live-img i { font-size: 2rem; color: #02F895; }
.sh-live-tx { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sh-live-tx b { font-size: 1.1rem; }
.sh-live-tx small { color: rgba(255,255,255,.65); }
.sh-live-btn { padding: .65rem 1.1rem; border-radius: 10px; background: #02F895; color: #04140d; font-weight: 800; white-space: nowrap; }
@media (max-width: 600px) { .sh-live-give { flex-wrap: wrap; padding-top: 1.4rem; } .sh-live-btn { width: 100%; text-align: center; } }
.sh-live-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem 1.3rem; margin-top: 1.4rem; }
.sh-live-list:empty { display: none; }
.sh-live-list .sh-live-give { margin-top: 0; }
.sh-live-list .sh-live-give:first-child:last-child { grid-column: 1 / -1; }
@media (max-width: 900px) { .sh-live-list { grid-template-columns: 1fr; } }

/* ===== Sidfot v4: kolumnlayout ===== */
footer.sh-footer {
    display: block;
    padding: 3.4rem max(3rem, calc((100% - 1360px) / 2)) 1.4rem;
    background: radial-gradient(700px 240px at 10% 0%, rgba(2,248,149,.07), transparent 70%), #0A0A0C;
    border-top: 1px solid rgba(255,255,255,.05);
    text-align: left;
}
footer.sh-footer::before { display: none; }
.sh-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.15fr;
    gap: 3.6rem;
    align-items: start;
}
footer.sh-footer .sh-footer-brandcol { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
footer.sh-footer .sh-footer-brand { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; }
footer.sh-footer .sh-footer-mascot { height: 46px; opacity: 1; filter: drop-shadow(0 0 14px rgba(2,248,149,.25)); }
.sh-footer-brandtext { display: flex; flex-direction: column; gap: .2rem; }
.sh-footer-brandtext strong { font-family: 'Sora', sans-serif; font-size: 1.15rem; letter-spacing: .08em; color: #f2f2f5; }
.sh-footer-brandtext small { font-size: .8rem; color: #7d7d8a; }
.sh-footer-org { margin: 0; font-size: .74rem; color: #7d7d8a; letter-spacing: .01em; }
footer.sh-footer .sh-footer-pay { display: flex; gap: .6rem; justify-content: flex-start; }
footer.sh-footer .sh-pay-chip, footer.sh-footer .sh-footer-tp {
    display: inline-flex; align-items: center; gap: .5rem;
    height: 38px; padding: 0 .95rem; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025);
    color: #c9c9d2; font-size: .8rem; font-weight: 600; text-decoration: none;
}
footer.sh-footer .sh-pay-chip img { height: 15px; width: auto; display: block; }
footer.sh-footer .sh-pay-chip i { font-size: .95rem; color: #6e6e7c; }
footer.sh-footer .sh-footer-tp { opacity: 1; border-left: 1px solid rgba(255,255,255,.08); padding-left: .95rem; margin-left: 0; transition: border-color .2s; }
footer.sh-footer .sh-footer-tp img { height: 16px; }
footer.sh-footer .sh-footer-tp:hover { border-color: rgba(2,248,149,.4); }
.sh-footer-col { display: flex; flex-direction: column; gap: .75rem; }
.sh-footer-col h4, .sh-footer-socialcol h4 {
    margin: 0 0 .35rem; font-family: 'Sora', sans-serif;
    font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: #f2f2f5;
}
.sh-footer-col a { color: #8a8a96; font-size: .86rem; text-decoration: none; transition: color .2s ease; }
.sh-footer-col a:hover { color: #02F895; }
.sh-footer-socialcol { display: flex; flex-direction: column; }
footer.sh-footer .sh-footer-social { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; position: static; padding-left: 0; border-left: 0; }
footer.sh-footer .sh-footer-social a {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    width: auto; height: auto; padding: .62rem .7rem; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.03);
    color: #c9c9d2; font-size: .8rem; font-weight: 600; text-decoration: none;
    transition: color .2s, border-color .2s, background .2s;
}
footer.sh-footer .sh-footer-social a svg { width: 15px; height: 15px; fill: currentColor; }
footer.sh-footer .sh-footer-social a:hover { color: #02F895; border-color: rgba(2,248,149,.4); background: rgba(2,248,149,.07); }
.sh-footer-bottom {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.06);
}
footer.sh-footer .sh-footer-copy { margin: 0; font-size: .75rem; color: #666673; }
footer.sh-footer .sh-footer-links { display: flex; gap: 1.5rem; justify-content: flex-end; margin-right: 0; }
footer.sh-footer .sh-footer-links a { color: #9a9aa8; font-size: .78rem; text-decoration: none; transition: color .2s ease; }
footer.sh-footer .sh-footer-links a:hover { color: #02F895; }
@media (max-width: 1000px) {
    .sh-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    footer.sh-footer .sh-footer-brandcol { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .sh-footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
    .sh-footer-bottom { justify-content: center; text-align: center; }
    footer.sh-footer .sh-footer-links { justify-content: center; }
}

/* Nollställ gamla grid-area-placeringar i nya sidfoten */
.sh-footer-grid > * { grid-area: auto !important; }

.sh-cr-history { margin-top: 14px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px; }
.sh-cr-history > summary { cursor: pointer; color: #8f8f98; font-size: 13px; font-weight: 600; list-style: none; }
.sh-cr-history > summary::-webkit-details-marker { display: none; }
.sh-cr-history > summary::before { content: '▸ '; color: #02F895; }
.sh-cr-history[open] > summary::before { content: '▾ '; }
.sh-cr-history .sh-cr-item { margin-top: 10px; opacity: .8; }