:root {
  --bg: #060b14;
  --bg2: #0a101d;
  --panel: rgba(15, 22, 38, .92);
  --panel2: rgba(18, 27, 46, .88);
  --line: rgba(255,255,255,.08);
  --line2: rgba(139, 92, 246, .32);
  --text: #f4f7ff;
  --muted: #8f9bb8;
  --muted2: #b8c0d9;
  --purple: #8b5cf6;
  --green: #54e38f;
  --red: #ff5c6c;
  --card: #0b1220;
  --radius: 18px;
  --shadow: 0 20px 80px rgba(0,0,0,.35);
}
.grid.is-loading{
  opacity:.45;
  pointer-events:none;
  transition:opacity .15s ease;
}
.tabs .tab small:empty,
.tabs .tab small {
  display: none;
}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:radial-gradient(circle at top left,rgba(139,92,246,.14),transparent 28%),radial-gradient(circle at top right,rgba(56,189,248,.08),transparent 30%),var(--bg);color:var(--text);min-height:100vh}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.topbar{height:72px;border-bottom:1px solid var(--line);background:rgba(6,11,20,.86);backdrop-filter:blur(16px);display:flex;align-items:center;padding:0 22px;position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:12px;min-width:250px}.brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#facc15,#8b5cf6);display:grid;place-items:center;font-weight:900;color:#080b12}.brand-text{line-height:1}.brand-text strong{display:block;font-size:18px;letter-spacing:.08em}.brand-text span{display:block;font-size:10px;letter-spacing:.16em;color:var(--muted2);margin-top:3px}.nav{display:flex;align-items:center;gap:26px;font-size:14px;color:#d8def1}.nav a{opacity:.9;padding:27px 0 23px;border-bottom:2px solid transparent}.nav a.active{color:#c084fc;border-bottom-color:#8b5cf6}.top-actions{margin-left:auto;display:flex;align-items:center;gap:16px;color:#dbe3f7;font-size:14px}.icon-btn{width:34px;height:34px;border:1px solid transparent;border-radius:10px;display:grid;place-items:center;color:#dbe3f7;background:transparent}.layout{display:grid;grid-template-columns:260px minmax(0,1fr) 300px;gap:28px;max-width:1680px;margin:0 auto;padding:0 18px 36px}.sidebar{border-right:1px solid var(--line);min-height:calc(100vh - 72px);padding:22px 12px 24px 0}.side-search{height:42px;border:1px solid var(--line);background:rgba(13,20,34,.9);border-radius:10px;display:flex;align-items:center;padding:0 12px;color:var(--muted);margin-bottom:26px}.side-search input{width:100%;background:transparent;border:0;outline:0;color:#fff;padding-left:8px;font-size:13px}.side-title{font-size:12px;text-transform:uppercase;color:var(--muted);letter-spacing:.08em;margin:0 0 12px 4px}.side-link,.side-parent{display:flex;align-items:center;gap:10px;height:36px;border-radius:8px;padding:0 12px;color:#b8c0d9;font-size:14px;margin-bottom:4px}.side-parent.active{background:rgba(139,92,246,.22);color:#fff}.side-link.active{background:rgba(139,92,246,.14);color:#c084fc}.side-link span:last-child{margin-left:auto;width:7px;height:7px;background:#8b5cf6;border-radius:50%}.side-sub{margin-left:24px;margin-bottom:12px}.side-card{margin-top:26px;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:14px}.mini-chart{height:38px;margin-top:10px;background:linear-gradient(135deg,rgba(139,92,246,.2),rgba(139,92,246,.04)),repeating-linear-gradient(135deg,transparent 0 8px,rgba(255,255,255,.03) 8px 9px);border-radius:8px}main{padding-top:24px;min-width:0}.rightbar{padding-top:24px}.crumbs{color:var(--muted);font-size:13px;margin-bottom:14px;display:flex;gap:10px;align-items:center}.hero{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:linear-gradient(90deg,rgba(12,18,32,.96),rgba(12,18,32,.7)),radial-gradient(circle at 80% 40%,rgba(139,92,246,.2),transparent 35%),var(--panel);padding:30px 26px;min-height:160px;box-shadow:var(--shadow)}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,11,20,.15),rgba(6,11,20,.5)),var(--hero-image, none);background-size:cover;background-position:center;opacity:.18;pointer-events:none}.hero-inner{position:relative;z-index:1;max-width:680px}.hero h1{font-size:36px;margin:0 0 10px;letter-spacing:-.03em}.hero p{margin:0;color:var(--muted2);font-size:15px}.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:28px;max-width:640px}.stat{background:rgba(9,15,28,.8);border:1px solid var(--line);border-radius:8px;padding:12px 14px;display:flex;align-items:center;gap:10px}.stat-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(139,92,246,.22);color:#c084fc}.stat strong{display:block;font-size:17px}.stat span{display:block;color:var(--muted);font-size:12px;margin-top:2px}.filters{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 145px 145px;gap:10px;margin:18px 0 16px}.control{background:rgba(13,20,34,.9);border:1px solid var(--line);color:#fff;height:56px;border-radius:8px;padding:0 14px;outline:0}.control:focus{border-color:rgba(139,92,246,.65);box-shadow:0 0 0 3px rgba(139,92,246,.14)}.filter-btn{background:rgba(13,20,34,.9);border:1px solid var(--line);color:#fff;border-radius:8px;cursor:pointer}.view-toggle{display:flex;background:rgba(13,20,34,.9);border:1px solid var(--line);border-radius:8px;overflow:hidden}.view-toggle button{flex:1;border:0;background:transparent;color:var(--muted);cursor:pointer}.view-toggle button.active{background:rgba(139,92,246,.25);color:#c084fc}.tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:16px}.tab{height:42px;padding:0 16px;border:1px solid var(--line);background:rgba(13,20,34,.9);color:#dbe3f7;border-radius:8px;white-space:nowrap;display:inline-flex;align-items:center;gap:10px;cursor:pointer}.tab.active{border-color:rgba(139,92,246,.7);background:rgba(139,92,246,.18);color:#c084fc}.tab small{color:var(--muted);background:rgba(255,255,255,.07);padding:2px 7px;border-radius:999px}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.item-card{position:relative;min-height:210px;border:1px solid var(--line);border-left:1px solid rgba(255,255,255,.09);background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.05),transparent 38%),linear-gradient(180deg,rgba(17,26,44,.96),rgba(9,14,26,.96));border-radius:8px;padding:14px;overflow:hidden;transition:transform .15s ease,border-color .15s ease,background .15s ease}.item-card:hover{transform:translateY(-2px);border-color:rgba(139,92,246,.45)}.fav{position:absolute;right:12px;top:12px;color:#aab3c8;font-size:18px;z-index:2}.imgbox{height:94px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}.imgbox img{max-width:100%;max-height:96px;object-fit:contain;filter:drop-shadow(0 14px 18px rgba(0,0,0,.45))}.weapon{color:var(--muted);font-size:13px;margin-bottom:3px}.skin-name{font-size:15px;font-weight:700;line-height:1.2;min-height:36px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.wear{color:var(--muted);font-size:12px;margin-top:4px}.price-row{display:flex;align-items:end;justify-content:space-between;margin-top:12px}.price{font-size:19px;font-weight:800;letter-spacing:-.02em}.change{font-size:13px;color:var(--green)}.change.neg{color:var(--red)}.pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin:22px 0 0}.page-btn{width:36px;height:36px;border:1px solid var(--line);background:rgba(13,20,34,.9);color:#dbe3f7;border-radius:8px;cursor:pointer}.page-btn.active{background:#5b35d5;color:#fff;border-color:#5b35d5}.empty{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:24px;color:var(--muted)}.info-card{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:20px;margin-bottom:16px}.info-card h3{margin:0 0 14px;font-size:14px;text-transform:uppercase;letter-spacing:.04em}.info-card p{color:var(--muted2);font-size:13px;line-height:1.5;margin:0 0 18px}.side-stat{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line);font-size:13px}.side-stat:first-of-type{border-top:0}.side-stat strong{display:block;font-size:13px}.side-stat span{display:block;color:var(--muted);margin-top:2px}.side-stat b{font-size:13px}.view-all{width:100%;height:42px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;border-radius:8px;margin-top:8px;cursor:pointer}.popular-item{display:grid;grid-template-columns:76px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-left:2px solid #ff3d5a;padding-left:10px}.popular-item img{width:76px;height:42px;object-fit:contain}.popular-item strong{display:block;font-size:13px}.popular-item span{display:block;color:var(--muted);font-size:12px}.popular-item b{display:block;font-size:13px;text-align:right}.popular-item em{display:block;font-style:normal;font-size:12px;color:var(--green);text-align:right}.bottom-strip{max-width:1240px;margin:26px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 18px 34px}.strip-card{border:1px solid var(--line);background:var(--panel);border-radius:8px;padding:18px;display:flex;align-items:center;gap:14px}.strip-icon{width:42px;height:42px;border-radius:12px;background:rgba(139,92,246,.16);display:grid;place-items:center;color:#c084fc;font-size:20px}.strip-card strong{display:block;font-size:15px}.strip-card span{display:block;color:var(--muted);font-size:13px;margin-top:3px}@media(max-width:1280px){.layout{grid-template-columns:220px minmax(0,1fr)}.rightbar{display:none}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.filters{grid-template-columns:1fr 1fr 1fr}}@media(max-width:900px){.topbar{height:64px}.brand{min-width:auto}.brand-text strong{font-size:15px}.nav{display:none}.layout{display:block;padding:0 12px 28px}.sidebar{display:none}main{padding-top:14px}.hero{padding:22px 18px;min-height:auto}.hero h1{font-size:30px}.stat-row{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.item-card{padding:11px;min-height:205px}.imgbox{height:86px}.skin-name{font-size:13px}.price{font-size:16px}.bottom-strip{grid-template-columns:1fr 1fr;padding:0 12px 28px}}@media(max-width:520px){.top-actions .watch{display:none}.stat-row{grid-template-columns:1fr}.hero p{font-size:13px}.tab{height:38px;font-size:13px}.bottom-strip{grid-template-columns:1fr}}


/* Item page market variant labels */
.variant-name{
  font-weight:800;
}

.variant-name.is-normal{
  color:#f8fafc;
}

.variant-name.is-stattrak{
  color:#f59e0b; /* StatTrak orange */
}

.variant-name.is-souvenir{
  color:#ffd700; /* Souvenir gold/yellow */
}

/* ================================
   Grouped skin category cards - market style
   Shows one skin card with stronger image/price/volume layout.
   Keep this block at the bottom so it overrides older card rules.
   ================================ */
.item-card{
  min-height:280px;
  padding:14px 14px 12px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.07), transparent 42%),
    linear-gradient(180deg, rgba(20,30,50,.98), rgba(9,14,26,.98));
  border:1px solid rgba(255,255,255,.09);
  border-left:1px solid rgba(255,255,255,.09);
  border-radius:8px;
}

.item-card:hover{
  transform:translateY(-2px);
  border-color:rgba(56,189,248,.42);
  background:
    radial-gradient(circle at 50% 8%, rgba(56,189,248,.09), transparent 44%),
    linear-gradient(180deg, rgba(24,36,58,.98), rgba(9,14,26,.98));
}

.fav{
  right:12px;
  top:12px;
  color:#aab3c8;
}

.imgbox{
  height:150px;
  margin:0 0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.imgbox img{
  max-width:100%;
  max-height:150px;
  object-fit:contain;
  transform:scale(1.45);
  transition:transform .15s ease;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.45));
}

.item-card:hover .imgbox img{
  transform:scale(1.52);
}

.weapon{
  color:#9aa7c3;
  font-size:13px;
  margin-bottom:3px;
}

.skin-name{
  font-size:16px;
  font-weight:800;
  min-height:auto;
  color:#f8fafc;
}

.wear{
  color:#9aa7c3;
  font-size:13px;
  margin-top:8px;
}

.price-row{
  margin-top:12px;
  align-items:flex-end;
}

.price{
  font-size:22px;
  font-weight:900;
  letter-spacing:-.03em;
}

.change{
  color:#54e38f;
  font-size:13px;
  font-weight:700;
}

@media(max-width:900px){
  .item-card{
    min-height:226px;
    padding:12px;
  }

  .imgbox{
    height:100px;
  }

  .imgbox img{
    max-height:98px;
  }

  .skin-name{
    font-size:14px;
  }

  .price{
    font-size:19px;
  }
}

/* Hide ugly native horizontal scrollbar on weapon tabs, but keep scrolling */
/* Weapon tabs: hidden scrollbar with edge fade */
.tabs{
  position:relative;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-right:34px;
  mask-image:linear-gradient(to right, #000 0%, #000 calc(100% - 42px), transparent 100%);
  -webkit-mask-image:linear-gradient(to right, #000 0%, #000 calc(100% - 42px), transparent 100%);
}

.tabs::-webkit-scrollbar{
  display:none;
}





/* Shared header support */
@media(max-width:900px){.topbar .cs-mega-nav{display:flex}}


/* =========================================================
   NO LEFT SIDEBAR LAYOUT
   Top mega-nav is now the main database navigation.
   Keeps existing PHP markup safe by hiding .sidebar only.
   ========================================================= */

.layout{
  grid-template-columns:minmax(0,1fr) 300px !important;
  max-width:1480px !important;
}

.sidebar{
  display:none !important;
}

main{
  min-width:0 !important;
}

.bottom-strip{
  max-width:1480px !important;
}

@media(max-width:1280px){
  .layout{
    grid-template-columns:1fr !important;
    max-width:1120px !important;
  }

  .rightbar{
    display:none !important;
  }
}

@media(max-width:900px){
  .layout{
    display:block !important;
    padding:0 12px 28px !important;
  }
}


/* =========================================================
   DB WEAPON PAGE TIDY — PATCHED ON CURRENT NO-SIDEBAR FILE
   Keeps the no-left-sidebar layout intact.
   ========================================================= */

/* Remove currently-dead controls */
#collectionSelect,
.filter-btn,
.view-toggle{
  display:none !important;
}

/* Only Sort / Rarity / Exterior remain */
.filters{
  grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) minmax(180px,1fr) !important;
  align-items:center !important;
}

/* Weapon tabs: usable horizontal scrolling */
.tabs{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  overscroll-behavior-inline:contain !important;
  scroll-behavior:smooth !important;
  -webkit-overflow-scrolling:touch !important;
  padding-bottom:10px !important;
  margin-bottom:16px !important;
  cursor:grab !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(139,92,246,.85) rgba(255,255,255,.06) !important;
  mask-image:none !important;
  -webkit-mask-image:none !important;
}

.tabs:active{
  cursor:grabbing !important;
}

.tabs::-webkit-scrollbar{
  display:block !important;
  height:8px !important;
}

.tabs::-webkit-scrollbar-track{
  background:rgba(255,255,255,.06) !important;
  border-radius:999px !important;
}

.tabs::-webkit-scrollbar-thumb{
  background:rgba(139,92,246,.85) !important;
  border-radius:999px !important;
}

.tabs .tab{
  flex:0 0 auto !important;
}

@media(max-width:900px){
  .filters{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   ALL SKINS LANDING TIDY
   /skins/ should not behave like a weapon category page.
   Weapon tabs stay available on actual category pages.
   ========================================================= */

body.is-all-skins-landing #weaponTabs,
body.is-all-skins-landing .tabs{
  display:none !important;
}

/* On /skins/ keep just Sort + Rarity; exterior is already hidden globally */
body.is-all-skins-landing .filters{
  grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) !important;
}

/* If /skins/?q=Knives or similar shortcut is active, it can show category results cleanly */
body.is-all-skins-shortcut .crumbs strong#crumbCategory::after{
  content:" results";
}

@media(max-width:900px){
  body.is-all-skins-landing .filters{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   SMART FILTER TIDY — RESTORED
   Keeps dead/irrelevant filters hidden after All Skins tidy.
   ========================================================= */

body.hide-wear-filter #wearSelect,
body.hide-rarity-filter #raritySelect{
  display:none !important;
}

/* Collection select / More Filters / grid-list toggle are not useful currently */
#collectionSelect,
.filter-btn,
.view-toggle{
  display:none !important;
}

/* Default: Sort + possible Rarity */
.filters{
  grid-template-columns:minmax(180px, 1fr) minmax(180px, 1fr) !important;
  align-items:center !important;
}

/* If rarity and wear are both hidden, leave just Sort */
body.hide-wear-filter.hide-rarity-filter .filters{
  grid-template-columns:minmax(180px, 320px) !important;
}

/* If only one of them is hidden, keep the row balanced */
body.hide-wear-filter:not(.hide-rarity-filter) .filters,
body.hide-rarity-filter:not(.hide-wear-filter) .filters{
  grid-template-columns:minmax(180px, 1fr) minmax(180px, 1fr) !important;
}

@media(max-width:900px){
  .filters,
  body.hide-wear-filter.hide-rarity-filter .filters,
  body.hide-wear-filter:not(.hide-rarity-filter) .filters,
  body.hide-rarity-filter:not(.hide-wear-filter) .filters{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   CSPROFILE LOGO COLOUR THEME UPDATE
   Orange/purple/blue accents pulled from the logo.
   Safe override block: keep existing layout, just modernise colours.
   ========================================================= */
:root{
  --bg:#050914;
  --bg2:#080d18;
  --panel:rgba(13,20,36,.94);
  --panel2:rgba(17,26,45,.90);
  --card:#0b1220;
  --line:rgba(255,255,255,.085);
  --line2:rgba(139,92,246,.34);
  --text:#f5f7ff;
  --muted:#9aa6c3;
  --muted2:#c7d2fe;
  --purple:#8b5cf6;
  --purple2:#6d3df2;
  --brand-purple:#8b5cf6;
  --brand-purple-soft:#a78bfa;
  --brand-orange:#f59e0b;
  --brand-orange-soft:#fbbf24;
  --brand-blue:#60a5fa;
  --accent:var(--brand-purple);
  --accent2:var(--brand-orange);
  --green:#54e38f;
  --red:#ff5c6c;
  --yellow:#facc15;
  --shadow:0 20px 80px rgba(0,0,0,.38);
  --glow-purple:0 0 28px rgba(139,92,246,.26);
  --glow-orange:0 0 26px rgba(245,158,11,.20);
}
body{
  background:
    radial-gradient(circle at top left,rgba(245,158,11,.10),transparent 24%),
    radial-gradient(circle at top right,rgba(139,92,246,.14),transparent 30%),
    radial-gradient(circle at 55% 0%,rgba(96,165,250,.06),transparent 28%),
    var(--bg) !important;
}
.hero{
  background:
    linear-gradient(90deg,rgba(12,18,32,.96),rgba(12,18,32,.70)),
    radial-gradient(circle at 78% 34%,rgba(245,158,11,.13),transparent 30%),
    radial-gradient(circle at 88% 44%,rgba(139,92,246,.18),transparent 38%),
    var(--panel) !important;
}
.stat-icon,.strip-icon{
  background:linear-gradient(135deg,rgba(139,92,246,.24),rgba(245,158,11,.16)) !important;
  color:var(--brand-orange-soft) !important;
}
.control:focus{
  border-color:rgba(245,158,11,.55) !important;
  box-shadow:0 0 0 3px rgba(245,158,11,.12),0 0 0 1px rgba(139,92,246,.18) !important;
}
.tab.active,.view-toggle button.active,.page-btn.active{
  border-color:rgba(139,92,246,.75) !important;
  background:linear-gradient(135deg,rgba(139,92,246,.28),rgba(245,158,11,.10)) !important;
  color:var(--brand-purple-soft) !important;
}
.item-card:hover,.related-card:hover{
  border-color:rgba(245,158,11,.35) !important;
  box-shadow:0 0 0 1px rgba(245,158,11,.14),0 18px 45px rgba(0,0,0,.35),var(--glow-purple) !important;
}
.primary,.btn-primary,.search-submit,.header-search button{
  background:linear-gradient(135deg,var(--brand-purple),var(--brand-blue)) !important;
}
.badge.orange,.float-marker,.cs-suggest-item mark{
  color:var(--brand-orange-soft) !important;
}


/* =========================================================
   MOBILE CATEGORY PAGE CLEANUP
   Safer mobile-only pass for DB category/search pages.
   ========================================================= */

@media(max-width: 760px){
  body{
    overflow-x:hidden !important;
  }

  .layout{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    padding:0 12px 28px !important;
  }

  main{
    padding-top:14px !important;
  }

  .crumbs{
    font-size:12px !important;
    gap:7px !important;
    overflow-x:auto !important;
    white-space:nowrap !important;
    padding-bottom:2px !important;
  }

  .hero{
    border-radius:12px !important;
    padding:20px 16px !important;
    min-height:auto !important;
  }

  .hero h1{
    font-size:30px !important;
    line-height:1.05 !important;
  }

  .hero p{
    font-size:13px !important;
    line-height:1.45 !important;
  }

  .stat-row{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:8px !important;
    margin-top:18px !important;
  }

  .stat{
    min-width:0 !important;
    padding:10px !important;
    gap:8px !important;
  }

  .stat-icon{
    width:28px !important;
    height:28px !important;
    border-radius:8px !important;
  }

  .stat strong{
    font-size:14px !important;
  }

  .stat span{
    font-size:11px !important;
  }

  .filters,
  body.hide-wear-filter.hide-rarity-filter .filters,
  body.hide-wear-filter:not(.hide-rarity-filter) .filters,
  body.hide-rarity-filter:not(.hide-wear-filter) .filters,
  body.is-all-skins-landing .filters{
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin:14px 0 12px !important;
  }

  .control{
    height:46px !important;
    border-radius:10px !important;
    padding:0 12px !important;
    font-size:14px !important;
  }

  .tabs{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    gap:8px !important;
    margin:0 -12px 14px !important;
    padding:0 12px 8px !important;
    scroll-snap-type:x proximity !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .tabs .tab{
    flex:0 0 auto !important;
    height:38px !important;
    border-radius:10px !important;
    padding:0 13px !important;
    font-size:13px !important;
    scroll-snap-align:start !important;
  }

  .grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .item-card{
    min-height:218px !important;
    padding:11px !important;
    border-radius:12px !important;
  }

  .imgbox{
    height:96px !important;
    margin:2px 0 9px !important;
  }

  .imgbox img{
    max-height:94px !important;
    transform:none !important;
  }

  .weapon,
  .wear{
    font-size:11px !important;
  }

  .skin-name{
    font-size:13px !important;
    line-height:1.16 !important;
  }

  .price-row{
    margin-top:10px !important;
    gap:8px !important;
  }

  .price{
    font-size:17px !important;
  }

  .change{
    font-size:11px !important;
    text-align:right !important;
  }

  .pagination{
    gap:6px !important;
    flex-wrap:wrap !important;
  }

  .page-btn{
    width:34px !important;
    height:34px !important;
  }
}

@media(max-width: 420px){
  .grid{
    grid-template-columns:1fr !important;
  }

  .item-card{
    min-height:205px !important;
  }

  .imgbox{
    height:104px !important;
  }

  .imgbox img{
    max-height:104px !important;
  }

  .stat-row{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   TEMP HIDE FAV ON ITEM CARDS
   Hide favourite controls until the feature is ready.
   ========================================================= */

.item-card .fav,
.item-card .favorite,
.item-card .fav-btn,
.item-card .favorite-btn,
.item-card [data-fav],
.item-card [data-favorite],
.item-card button[aria-label*="Fav"],
.item-card button[aria-label*="fav"],
.item-card button[title*="Fav"],
.item-card button[title*="fav"]{
  display:none !important;
}


/* =========================================================
   CASES / COLLECTIONS PAGE TIDY
   They are source/container pages, not weapon category pages.
   ========================================================= */

body.is-source-page #weaponTabs,
body.is-source-page .tabs{
  display:none !important;
}

/* Cases/Collections: keep filters simple */
body.is-source-page:not(.is-source-content-page) #raritySelect{
  display:none !important;
}

body.is-source-page .filters{
  grid-template-columns:minmax(180px, 320px) !important;
  max-width:360px !important;
}

/* If the page is showing contents of a specific case/collection, keep the layout clean */
body.is-source-content-page .hero h1{
  max-width:720px !important;
}

body.is-source-content-page .hero p{
  max-width:760px !important;
}

@media(max-width:900px){
  body.is-source-page .filters{
    grid-template-columns:1fr !important;
    max-width:none !important;
  }
}


/* Specific case/collection contents should allow rarity filtering again */
body.is-source-content-page #raritySelect{
  display:block !important;
}

body.is-source-content-page .filters{
  grid-template-columns:repeat(2, minmax(180px, 1fr)) !important;
  max-width:none !important;
}

@media(max-width:700px){
  body.is-source-content-page .filters{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   SOURCE CONTENT FILTER ROW FIX
   On specific case/collection pages, keep Sort + Rarity side by side.
   ========================================================= */

body.is-source-content-page .filters{
  display:grid !important;
  grid-template-columns:minmax(220px, 320px) minmax(220px, 320px) !important;
  align-items:center !important;
  gap:14px !important;
  max-width:660px !important;
}

body.is-source-content-page .filters select,
body.is-source-content-page .filters .filter-select{
  width:100% !important;
}

@media(max-width:720px){
  body.is-source-content-page .filters{
    grid-template-columns:1fr !important;
    max-width:none !important;
  }
}


/* =========================================================
   HARD SOURCE CONTENT FILTER ROW FIX
   Direct class on .filters wins over older responsive/grid rules.
   ========================================================= */

.filters.source-content-filter-row{
  display:grid !important;
  grid-template-columns:minmax(220px, 1fr) minmax(220px, 1fr) !important;
  gap:12px !important;
  max-width:none !important;
  width:100% !important;
  align-items:center !important;
}

.filters.source-content-filter-row #sortSelect,
.filters.source-content-filter-row #raritySelect{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  grid-column:auto !important;
}

.filters.source-content-filter-row #wearSelect,
.filters.source-content-filter-row #collectionSelect,
.filters.source-content-filter-row .filter-btn,
.filters.source-content-filter-row .view-toggle{
  display:none !important;
}

.filters.source-index-filter-row{
  display:grid !important;
  grid-template-columns:minmax(220px, 320px) !important;
  max-width:340px !important;
}

@media(max-width:700px){
  .filters.source-content-filter-row{
    grid-template-columns:1fr !important;
  }

  .filters.source-index-filter-row{
    grid-template-columns:1fr !important;
    max-width:none !important;
  }
}


/* =========================================================
   FINAL SOURCE CONTENT FILTER FLEX OVERRIDE
   Specific case/collection pages only:
   force Sort + Rarity onto the same row.
   ========================================================= */

body.is-source-content-page .filters,
body.is-source-content-page .filters.source-content-filter-row{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:12px !important;
  width:100% !important;
  max-width:660px !important;
  grid-template-columns:none !important;
}

body.is-source-content-page .filters #sortSelect,
body.is-source-content-page .filters #raritySelect{
  display:block !important;
  flex:1 1 0 !important;
  width:auto !important;
  min-width:220px !important;
  max-width:none !important;
}

body.is-source-content-page .filters #wearSelect,
body.is-source-content-page .filters #collectionSelect,
body.is-source-content-page .filters .filter-btn,
body.is-source-content-page .filters .view-toggle{
  display:none !important;
}

@media(max-width:720px){
  body.is-source-content-page .filters,
  body.is-source-content-page .filters.source-content-filter-row{
    flex-direction:column !important;
    align-items:stretch !important;
    max-width:none !important;
  }

  body.is-source-content-page .filters #sortSelect,
  body.is-source-content-page .filters #raritySelect{
    width:100% !important;
    min-width:0 !important;
  }
}


/* =========================================================
   SOURCE CONTENT FILTER WIDTH MATCH
   Match weapon pages: Sort + Rarity span the full content width.
   ========================================================= */

body.is-source-content-page .filters,
body.is-source-content-page .filters.source-content-filter-row{
  max-width:none !important;
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  gap:12px !important;
  flex-direction:initial !important;
  flex-wrap:initial !important;
}

body.is-source-content-page .filters #sortSelect,
body.is-source-content-page .filters #raritySelect{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  flex:none !important;
}

@media(max-width:720px){
  body.is-source-content-page .filters,
  body.is-source-content-page .filters.source-content-filter-row{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   SOURCE CONTENT RARITY FUNCTION FIX
   Specific case/collection pages use active rarity filtering.
   ========================================================= */

body.is-source-content-page #raritySelect{
  display:block !important;
  pointer-events:auto !important;
  opacity:1 !important;
}

body.is-source-page:not(.is-source-content-page) #raritySelect{
  display:none !important;
}


/* =========================================================
   SOURCE CONTENT SORT FUNCTION FIX
   Specific case/collection pages use active sort filtering.
   ========================================================= */

body.is-source-content-page #sortSelect{
  display:block !important;
  pointer-events:auto !important;
  opacity:1 !important;
}


/* =========================================================
   FILTERED PAGES NO PAGINATION
   Specific weapon/case/collection/search pages show all loaded results.
   ========================================================= */

body.filtered-no-pagination #pagination,
body.filtered-no-pagination .pagination,
body.filtered-no-pagination .pager,
body.filtered-no-pagination .page-nav,
body.filtered-no-pagination [data-pagination]{
  display:none !important;
}


/* Strong hide pagination on filtered pages */
body.filtered-no-pagination .pagination,
body.filtered-no-pagination #pagination,
body.filtered-no-pagination .page-btn,
body.filtered-no-pagination #prevPage,
body.filtered-no-pagination #nextPage,
body.filtered-no-pagination #pageOne,
body.filtered-no-pagination #pageTwo,
body.filtered-no-pagination #pageThree,
body.filtered-no-pagination #lastPage{
  display:none !important;
}


/* Tab-selected weapon pages also hide pagination and load larger result sets */
body.filtered-no-pagination .pagination{
  display:none !important;
}


/* =========================================================
   HEAVY MEDIA CATEGORY SAFETY
   Stickers/patches/charms etc stay paginated/lazy instead of
   loading huge filtered sets at once.
   ========================================================= */

body.is-heavy-media-category .pagination{
  display:flex !important;
}

body.is-heavy-media-category.filtered-no-pagination #pagination,
body.is-heavy-media-category.filtered-no-pagination .pagination,
body.is-heavy-media-category.filtered-no-pagination .pager,
body.is-heavy-media-category.filtered-no-pagination .page-nav{
  display:flex !important;
}

body.filtered-no-pagination:not(.is-heavy-media-category) #pagination,
body.filtered-no-pagination:not(.is-heavy-media-category) .pagination,
body.filtered-no-pagination:not(.is-heavy-media-category) .pager,
body.filtered-no-pagination:not(.is-heavy-media-category) .page-nav,
body.filtered-no-pagination:not(.is-heavy-media-category) [data-pagination]{
  display:none !important;
}

/* =========================================================
   CATEGORY CARDS — CSFloat-first price display
   ========================================================= */
.price-row-csfloat{
  align-items:flex-end !important;
  gap:10px !important;
}

.price-source{
  display:inline-flex !important;
  align-items:center !important;
  height:18px !important;
  margin-bottom:3px !important;
  padding:0 7px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.045) !important;
  color:#a8b4d2 !important;
  font-size:9px !important;
  font-weight:950 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

.price-source.is-csfloat{
  color:#b8ffd2 !important;
  border-color:rgba(84,227,143,.26) !important;
  background:rgba(84,227,143,.08) !important;
}

.price-source.is-steam{
  color:#c4b5fd !important;
  border-color:rgba(139,92,246,.22) !important;
  background:rgba(139,92,246,.08) !important;
}

.price-row-csfloat .price{
  line-height:1 !important;
}

@media(max-width:520px){
  .price-source{
    font-size:8px !important;
    padding:0 6px !important;
  }
}



/* =========================================================
   MOBILE PASS SAFE — category/database pages
   Visual/layout only. Keeps existing API + pagination logic intact.
   ========================================================= */
@media(max-width:760px){
  body{overflow-x:hidden !important;}

  .layout{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    padding:0 10px 28px !important;
  }

  main{padding-top:12px !important;}

  .hero{
    border-radius:14px !important;
    padding:18px 15px !important;
    margin-bottom:14px !important;
  }

  .hero h1{
    font-size:28px !important;
    line-height:1.05 !important;
  }

  .hero p{
    font-size:13px !important;
    line-height:1.45 !important;
  }

  .stat-row{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-top:16px !important;
  }

  .stat{
    padding:10px !important;
    border-radius:12px !important;
  }

  .stat-icon{
    width:30px !important;
    height:30px !important;
  }

  .stat strong{font-size:14px !important;}
  .stat span{font-size:10px !important;}

  .filters{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
    margin:14px 0 !important;
  }

  .control,
  .filter-btn,
  .view-toggle{
    height:46px !important;
    border-radius:12px !important;
  }

  .tabs{
    gap:7px !important;
    margin-bottom:12px !important;
    padding-bottom:6px !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .tabs::-webkit-scrollbar{display:none !important;}

  .tab{
    height:36px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    font-size:12px !important;
  }

  .grid{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .item-card{
    min-height:190px !important;
    padding:11px !important;
    border-radius:13px !important;
  }

  .imgbox{
    height:118px !important;
    margin-bottom:8px !important;
  }

  .imgbox img{
    max-height:118px !important;
    transform:scale(1.18) !important;
  }
  .weapon{font-size:11px !important;}
  .skin-name{font-size:13px !important; min-height:32px !important;}
  .wear{font-size:11px !important;}
  .price{font-size:15px !important;}
  .change{font-size:11px !important;}

  .price-row-csfloat{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:5px !important;
  }

  .pagination{
    gap:6px !important;
    margin-top:16px !important;
    flex-wrap:wrap !important;
  }

  .page-btn{
    width:34px !important;
    height:34px !important;
    border-radius:10px !important;
  }

  .colour-filters {
  margin-bottom: 14px;
}

.colour-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.colour-pill-row a {
  padding: 9px 15px;
  border-radius: 999px;
  background: #101624;
  border: 1px solid rgba(255,255,255,.08);
  color: #cfd7ff;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
}

.colour-pill-row a:hover,
.colour-pill-row a.active {
  background: linear-gradient(135deg, #5865f2, #8b5cf6);
  color: #fff;
  border-color: rgba(255,255,255,.18);
}
}

@media(max-width:390px){
  .grid{grid-template-columns:1fr !important;}
  .item-card{min-height:185px !important;}
  .stat-row{grid-template-columns:1fr !important;}
}

/* =========================================================
   RARITY CARD GRADIENT UPGRADE
   Full-card rarity styling using existing JS variable:
   <a class="item-card" style="--rarity:#xxxxxx">
   ========================================================= */

.item-card{
  position:relative !important;
  overflow:hidden !important;
  border-left:1px solid rgba(255,255,255,.09) !important;
  background:
    radial-gradient(circle at 50% 7%, color-mix(in srgb, var(--rarity,#777) 20%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--rarity,#777) 16%, rgba(20,30,50,.98)) 0%, rgba(9,14,26,.98) 42%, rgba(7,11,21,.98) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 0 0 1px color-mix(in srgb, var(--rarity,#777) 18%, transparent) !important;
}

.item-card::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:3px !important;
  background:linear-gradient(90deg, var(--rarity,#777), color-mix(in srgb, var(--rarity,#777) 35%, transparent)) !important;
  z-index:2 !important;
  pointer-events:none !important;
}

.item-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:0 !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rarity,#777) 20%, transparent) 0%, transparent 24%),
    linear-gradient(90deg, color-mix(in srgb, var(--rarity,#777) 12%, transparent) 0%, transparent 18%, transparent 82%, color-mix(in srgb, var(--rarity,#777) 8%, transparent) 100%) !important;
  opacity:.95 !important;
}

.item-card > *{
  position:relative !important;
  z-index:1 !important;
}

.item-card:hover{
  border-color:color-mix(in srgb, var(--rarity,#777) 55%, rgba(255,255,255,.18)) !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--rarity,#777) 34%, transparent),
    0 18px 48px rgba(0,0,0,.42),
    0 0 28px color-mix(in srgb, var(--rarity,#777) 18%, transparent) !important;
  background:
    radial-gradient(circle at 50% 7%, color-mix(in srgb, var(--rarity,#777) 28%, transparent), transparent 40%),
    linear-gradient(180deg, color-mix(in srgb, var(--rarity,#777) 22%, rgba(24,36,58,.98)) 0%, rgba(9,14,26,.98) 44%, rgba(7,11,21,.98) 100%) !important;
}

@media(max-width:760px){
  .item-card{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 0 0 1px color-mix(in srgb, var(--rarity,#777) 15%, transparent) !important;
  }
}

/* =========================================================
   FINAL CARD RARITY EDGE CLEANUP
   Removes the loud rarity left bar. Rarity now shows via the
   top strip + subtle card gradient only.
   Keep this at the VERY bottom of csitems-category.css.
   ========================================================= */

.item-card{
  border-left:1px solid rgba(255,255,255,.09) !important;
}

.item-card::before{
  height:3px !important;
}



/* =========================================================
   COLOUR BROWSER PILLS
   Used by /skins/colours for swatches + live counts.
   ========================================================= */

.colour-pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 22px;
}

.colour-pill-row a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:9px 15px;
  border-radius:999px;
  background:#101624;
  border:1px solid rgba(255,255,255,.08);
  color:#cfd7ff;
  text-decoration:none;
  font-size:14px;
  line-height:1;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}

.colour-pill-row a:hover{
  transform:translateY(-1px);
}

.colour-pill-row a .colour-swatch{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--swatch);
  box-shadow:0 0 0 1px rgba(255,255,255,.25);
  flex:0 0 auto;
}

.colour-pill-row a em{
  font-style:normal;
  color:#8ea0d0;
  font-size:12px;
}

.colour-pill-row a:hover,
.colour-pill-row a.active{
  background:linear-gradient(135deg,#5865f2,#8b5cf6);
  color:#fff;
  border-color:rgba(255,255,255,.18);
}

.colour-pill-row a.active em,
.colour-pill-row a:hover em{
  color:rgba(255,255,255,.78);
}

.colour-pill-row a[data-colour="white"] .colour-swatch{
  box-shadow:0 0 0 1px rgba(15,23,42,.55),0 0 0 2px rgba(255,255,255,.25);
}

.colour-pill-row a[data-colour="black"] .colour-swatch{
  box-shadow:0 0 0 1px rgba(255,255,255,.35);
}

@media(max-width:760px){
  .colour-pill-row{
    gap:8px;
    margin:14px 0 18px;
  }

  .colour-pill-row a{
    padding:8px 12px;
    font-size:13px;
  }
}