:root{
  --bg:#0a0a0d;
  --panel:#111214;
  --panel2:#0f0f10;
  --border:#1f2228;
  --text:#f5f7ff;
  --muted:#a9aec4;
  --red:#e50914;
  --glow:#e50914;
  --radius:16px;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--text);margin:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
/* Header */
header{position:sticky;top:0;z-index:20;backdrop-filter:blur(12px) saturate(1.2);background:rgba(8,8,12,.55);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo-link{display:flex;align-items:center;gap:12px}
.logo-img { width: 720px !important; height: 400px !important; object-fit: contain !important; }
nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0}
nav a{color:var(--muted);font-weight:600;padding:8px 12px;border-radius:10px}
nav a:hover{color:var(--text);background:rgba(255,255,255,.06)}

/* User box */
#tdmUserBox{position:absolute; right:20px; top:16px; display:flex; align-items:center; gap:10px; z-index:1000;}
#tdmUserBox img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid #333}
#tdmUserBox .tdm-name{max-width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#tdmCredits{background:var(--red);color:#fff;padding:4px 10px;border-radius:16px;font-weight:700;}
.tdm-pill{font-size:11px;color:#00C8FF;border:1px solid var(--border);padding:2px 6px;border-radius:999px}

/* Blocks */
.tdm-block{margin:18px 0;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.tdm-block .hd{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border)}

.tdm-hero{display:grid;grid-template-columns:1fr 330px;gap:18px;margin:18px auto}
@media (max-width:980px){.tdm-hero{grid-template-columns:1fr}}

/* Top 10 */
.tdm-top10-list{max-height:430px;overflow:auto}
.tdm-top10-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border)}
.tdm-top10-item img{width:44px;height:44px;border-radius:8px;object-fit:cover}
.tdm-top10-item .meta{flex:1}

/* Grid */
.tdm-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;padding:14px}
@media (max-width:980px){.tdm-row{grid-template-columns:repeat(2,1fr)}}

/* Track card polish (GmodStore-ish) */
.tdm-tile{
  background:var(--panel2);border:1px solid var(--border);border-radius:16px;overflow:hidden;position:relative;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease; box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.tdm-tile:hover{ transform:translateY(-3px); border-color:#2a2a2a; box-shadow:0 16px 40px rgba(0,0,0,.45); }
.tdm-tile img{width:100%;height:160px;object-fit:cover;display:block}
.play-overlay{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.6);border:1px solid #333;border-radius:999px;padding:8px;cursor:pointer}
.play-overlay:hover{ background:rgba(229,9,20,.9); border-color:var(--red); }
.tdm-tile .pad{padding:10px}
.tdm-actions{display:flex;gap:10px;align-items:center;margin-top:8px}
.tdm-pill.badge{ display:inline-flex;align-items:center;gap:6px; font-size:11px; padding:4px 8px;border-radius:999px;border:1px solid #2a2a2a;background:#00C8FF;color:#ddd;}
.tdm-pill.badge.red{ border-color:var(--red); background:#1e0a0c; color:#fff; }
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid #2b2b2b;background:#141414;color:#fff;font-weight:800;cursor:pointer}
.btn:hover{border-color:var(--red)}
.btn-credits{background:#00FF2A;border:10px solid #333}
button.btn-credits {
  color: #fff !important;
  text-shadow: 0 0 3px rgba(0,0,0,0.7);
}
/* 🛒 Make credit buttons show a clickable pointer on hover */
button.btn-credits {
  cursor: pointer;
}
.price{font-weight:800}

/* Swiper */
.swiper{width:100%;height:100%}
.swiper-slide{position:relative;background:#0f0f0f;border-right:1px solid var(--border)}
.slide-inner{display:grid;grid-template-columns:260px 1fr;gap:16px;padding:16px;position:relative}
.slide-inner .play-overlay{left:16px;top:16px}

/* Cart Drawer */
#cartFab{position:fixed;right:18px;bottom:78px;background:var(--red);color:#fff;border:none;border-radius:999px;width:52px;height:52px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(229,9,20,.35);cursor:pointer;z-index:1001}
#cartDrawer{position:fixed;top:0;right:-420px;width:360px;height:100vh;background:#0e0e0e;border-left:1px solid #222;box-shadow:-10px 0 30px rgba(0,0,0,.4);z-index:1000;transition:right .25s ease}
#cartDrawer.open{right:0}
#cartDrawer .cart-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #222;background:#111}
#cartDrawer #cartItems{max-height:calc(100vh - 200px);overflow:auto;padding:8px 10px}
#cartDrawer .cart-item{display:grid;grid-template-columns:44px 1fr auto auto;gap:10px;align-items:center;padding:8px;border-bottom:1px solid #1d1d1d}
#cartDrawer .cart-item .thumb{width:44px;height:44px;border-radius:8px;object-fit:cover}
#cartDrawer .cart-item .meta .t{font-weight:700}
#cartDrawer .cart-item .meta .a{color:#bbb;font-size:12px}
#cartDrawer .cart-item .p{font-weight:800}
#cartDrawer .cart-item .rm{background:#1b1b1b;border:1px solid #333;color:#fff;border-radius:8px;cursor:pointer;padding:4px 8px}
#cartDrawer .cart-footer{position:absolute;left:0;right:0;bottom:0;border-top:1px solid #222;padding:14px 12px;display:flex;align-items:center;justify-content:space-between;background:#0f0f0f}

/* === TDM Featured Slider Fix v2 === */
#tdm-featured{ height:auto !important; }
#tdm-featured .swiper-wrapper{ align-items: stretch; }
#tdm-featured .swiper-slide{ background: transparent; }
#tdm-featured .slide-inner{
  display: block !important;              /* kill the 2-col grid */
  padding: 16px;
}
#tdm-featured .slide-inner img{
  width: 100% !important;
  height: 400px !important;               /* desktop height */
  object-fit: cover !important;
  border-radius: 12px;
  display: block;
}
@media (max-width: 768px){
  #tdm-featured .slide-inner img{ height: 250px !important; }
}

/* Top10 column balanced to hero */
.tdm-top10-list{ max-height: 400px !important; overflow: auto; scrollbar-width: thin; }
.tdm-top10-item .title{ font-weight: 600; line-height: 1.1; }
.tdm-top10-item .artist{ color: var(--muted); font-size: .9rem; }