/* ===============================
🔥 GRID CONTAINER (ISOLATED)
=============================== */

#gridContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 280px));
  justify-content: center;
  gap: 20px;
  padding: 20px;
}

/* ===============================
🔥 CARD BASE
=============================== */

.latest-card {
  width: 100%;
  max-width: 280px;

  background: linear-gradient(145deg, #0f172a, #020617);
  border-radius: 16px;
  padding: 14px;

  border: 1px solid rgba(255,255,255,0.06);

  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* ===============================
🔥 GLOW BORDER
=============================== */

.latest-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;

  background: linear-gradient(120deg, #00f0ff, #7c3aed, #00f0ff);

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity: 0;
  transition: 0.3s;
}

/* ===============================
🔥 HOVER
=============================== */

.latest-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

.latest-card:hover::before {
  opacity: 1;
}

/* ===============================
🔥 IMAGE
=============================== */

.latest-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 10px;
}

/* ===============================
🔥 TEXT
=============================== */

.latest-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.latest-tag {
  font-size: 12px;
  color: #00f0ff;
  opacity: 0.8;
}

/* ===============================
🔥 PRICE
=============================== */

.latest-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.old-price {
  text-decoration: line-through;
  color: #888;
  font-size: 13px;
}

.new-price {
  color: #00f0ff;
  font-weight: bold;
  font-size: 15px;
}

/* ===============================
🔥 ACTIONS
=============================== */

.latest-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.btn-buy {
  flex: 1;
  background: linear-gradient(135deg, #00f0ff, #7c3aed);
  border: none;
  padding: 8px;
  border-radius: 8px;
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: 0.25s;
}

.btn-buy:hover {
  opacity: 0.85;
}

.btn-free {
  flex: 1;
  background: transparent;
  border: 1px solid #00f0ff;
  padding: 8px;
  border-radius: 8px;
  color: #00f0ff;
  font-size: 13px;
  cursor: pointer;
  transition: 0.25s;
}

.btn-free:hover {
  background: #00f0ff;
  color: #000;
}

/* ===============================
🔥 MOBILE SCROLL FIX
=============================== */

.latest-container {
  touch-action: pan-y;
}

/* ===============================
🔥 ⚠️ CRITICAL FIX (LIST PROTECTION)
=============================== */

/* This prevents grid styles from affecting wave list */

#arsenalSection .arsenal-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px;
  padding: 20px;
}

/* ensure rows behave correctly */
.wave-row {
  width: 100%;
}
.latest-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.btn-free {
  flex: 1;
  height: 36px;

  border-radius: 10px;
  border: none;

  background: linear-gradient(135deg, #00ffd0, #00bfff);
  color: #02110f;

  font-size: 13px;
  font-weight: 600;

  cursor: pointer;
}
.latest-card {
  height: auto !important;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  overflow: visible !important;
}
.latest-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.latest-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.btn-free {
  flex: 1;
  height: 36px;
  border-radius: 10px;
  border: none;

  background: linear-gradient(135deg, #00ffd0, #00bfff);
  color: #02110f;

  font-weight: 600;
  cursor: pointer;
}
.latest-card {
  overflow: visible !important;
}
.card-image-wrap {
  position: relative;
}

.overlay-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 52px;
  height: 52px;

  border-radius: 50%;
  border: none;

  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 999; /* 💀 THIS WAS YOUR PROBLEM */
  cursor: pointer;
}
/* ============================= */
/* 📱 MOBILE GRID FIX (3 CARDS) */
/* ============================= */

@media (max-width: 768px) {

  #gridContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 🔥 3 per row */
    gap: 10px;
    padding: 10px;
  }

  .grid-card {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
  }

  .grid-media img {
    width: 100%;
    height: 90px; /* 🔥 keeps it compact */
    object-fit: cover;
    border-radius: 10px;
  }

  .grid-title {
    font-size: 11px;
    margin-top: 4px;
  }

  .grid-tag {
    font-size: 10px;
    opacity: 0.7;
  }

  .grid-price-row {
    font-size: 11px;
  }

  .grid-actions {
    margin-top: 5px;
  }

  .grid-buy {
    padding: 6px;
    font-size: 11px;
    border-radius: 8px;
  }

  /* 🔥 shrink play button */
  .grid-play {
    font-size: 14px;
    padding: 4px;
  }
}
/* =========================================
   ALL BEATS PAGE SCROLL FIX
========================================= */


/* allow natural scrolling */
html,
body{
    height:auto !important;
    overflow-y:auto !important;
}


/* space for floating player */
body{
    min-height:100vh;
    padding-bottom:140px !important;
}


/* beats sections */
#arsenalSection,
#gridSection,
#waveList{
    padding-bottom:40px !important;
}


/* keep player floating */
.global-player{
    position:fixed !important;
    bottom:12px !important;
    left:50% !important;


    transform:translateX(-50%) !important;


    z-index:99999 !important;


    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
}


/* MOBILE */
@media(max-width:768px){


    body{
        padding-bottom:180px !important;
    }


    .global-player{
        width:96% !important;


        bottom:10px !important;


        display:grid !important;
        visibility:visible !important;
        opacity:1 !important;
    }


}