/* Header */
.skins-header{ text-align:center; margin:0 auto 26px; max-width:780px; }
.skins-kicker{
  display:inline-block; padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  text-transform:uppercase; letter-spacing:.12em; font-size:12px;
}
.skins-title{ font-size:clamp(40px,6vw,64px); font-weight:900; margin:10px 0 6px; }
.skins-sub{ color:rgba(255,255,255,.62); letter-spacing:.12em; text-transform:uppercase; font-size:12px; }

/* Grid */
.skins-grid{
  list-style:none; margin:18px 0 0; padding:0;
  display:grid; gap:24px; grid-template-columns:repeat(3,minmax(0,1fr));
}
@media(max-width:1024px){ .skins-grid{ grid-template-columns:1fr; } }

/* Card */
.skin-card{
  position:relative; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  display:flex; flex-direction:column; min-height:560px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.skin-card:hover{ transform:translateY(-4px); box-shadow:0 18px 44px rgba(0,0,0,.45); }

/* Top media block with fixed height to match preview look */
.skin-media{ height:180px; background:radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,.06), transparent 70%); }
.skin-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Info */
.skin-info{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.skin-badge{ align-self:flex-start; display:inline-flex; padding:4px 10px; border-radius:999px; font-weight:900; font-size:11px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); letter-spacing:.08em; text-transform:uppercase; }
.skin-badge.a{ background:linear-gradient(90deg,#7bd3ff33,#c08bff33); }
.skin-badge.b{ background:linear-gradient(90deg,#ff9fb433,#ff676733); }

.skin-name{ font-size:18px; font-weight:900; margin:0; letter-spacing:.02em; }
.skin-desc{ color:rgba(255,255,255,.7); margin:0; line-height:1.5; font-size:14px; }
.skin-meta{ display:flex; gap:12px; color:rgba(255,255,255,.6); font-size:12px; flex-wrap:wrap; }

/* Footer */
.skins-footer{ text-align:center; margin-top:26px; }