/* v20260711-wide-price-cart-column */
/* v20260711-cart-play-flex-fix: flex columns prevent cart from hiding behind play */
/*
 * 8Remixes public track rows — SINGLE AUTHORITY
 * Browse, remixer profile, remix-pack detail, and pack-search rows use this file only.
 */

/* ---------- row layout ---------- */
html body .er-unified-track-table,
html body table.er-unified-track-table,
html body .er-unified-track-table tbody{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  border-collapse:collapse!important;
  table-layout:auto!important;
  box-sizing:border-box!important;
}
html body .er-unified-track-table thead{display:none!important;}
html body .er-unified-track-table tr.track-row,
html body .er-unified-search-row{
  display:flex!important;
  flex-flow:row nowrap!important;
  gap:8px!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:58px!important;
  margin:0!important;
  padding:0 10px!important;
  box-sizing:border-box!important;
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  float:none!important;
  overflow:visible!important;
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  background:#111!important;
}
html body .er-unified-track-table tr.track-row > td,
html body .er-unified-search-row > *{
  display:block!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:8px 0!important;
  box-sizing:border-box!important;
  position:static!important;
  inset:auto!important;
  transform:none!important;
  float:none!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
  vertical-align:middle!important;
}
html body .er-unified-track-table td.col-num,
html body .er-unified-search-row .er-search-col-num{
  flex:0 0 28px!important;
  width:28px!important;
  text-align:center!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:400!important;
  white-space:nowrap!important;
}
html body .er-unified-track-table td.track-avatar-cell,
html body .er-unified-track-table tr.track-row > td:nth-child(2),
html body .er-unified-search-row > .er-track-avatar-link{
  flex:0 0 44px!important;
  width:44px!important;
}
html body .er-track-avatar-link{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:38px!important;
  height:40px!important;
  padding:0!important;
  margin:0!important;
  position:static!important;
  transform:none!important;
}
html body .er-track-avatar,
html body .er-track-avatar img{
  display:block!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  border-radius:3px!important;
  object-fit:cover!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}
html body .er-track-info-cell{
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
  overflow:hidden!important;
}
html body .er-track-title-line,
html body .er-track-title-line *{
  color:#fff!important;
  font-size:13px!important;
  font-weight:400!important;
  line-height:1.25!important;
  letter-spacing:0!important;
  margin:0!important;
  padding:0!important;
  text-shadow:none!important;
}
html body .er-track-title-line{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  margin-bottom:4px!important;
}
html body .er-track-meta-line,
html body .er-track-meta-line *{
  color:#b9b9b9!important;
  font-size:11px!important;
  font-weight:400!important;
  line-height:1.2!important;
  letter-spacing:0!important;
  text-shadow:none!important;
}
html body .er-track-meta-line{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
html body .er-track-meta-line .key-badge,
html body .er-track-meta-line .track-key,
html body .er-track-meta-line .key-pill{
  display:inline-block!important;
  padding:2px 5px!important;
  border-radius:2px!important;
  font-size:10px!important;
  line-height:1.1!important;
}

/* ---------- fixed buy column ---------- */
html body .er-unified-track-table td.er-track-buy-cell,
html body .er-unified-search-row > .er-track-buy-cell{
  flex:0 0 130px!important;
  width:130px!important;
  min-width:130px!important;
  max-width:130px!important;
  justify-self:end!important;
  overflow:visible!important;
  position:relative!important;
  z-index:3!important;
  margin:0!important;
}
html body .er-track-buy-action,
html body .track-buy-action{
  all:unset!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:92px 38px!important;
  width:130px!important;
  min-width:130px!important;
  max-width:130px!important;
  height:30px!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  overflow:hidden!important;
  border-radius:4px!important;
  background:#141414!important;
}
html body .er-track-buy-price,
html body .track-buy-price{
  all:unset!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:92px!important;
  height:30px!important;
  padding:0 5px!important;
  background:#1c1c1f!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:500!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}
html body .er-track-buy-price *,
html body .track-buy-price *{
  all:unset!important;
  display:inline!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:500!important;
  line-height:1!important;
  white-space:nowrap!important;
}
html body .er-track-buy-price .er-pack-label{display:none!important;}
html body .track-old-price{display:none!important;}

html body .er-track-buy-action .cart-btn,
html body .er-track-buy-action .pack-cart-btn,
html body .track-buy-action .cart-btn,
html body .track-buy-action .pack-cart-btn{
  all:unset!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:30px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:#050505!important;
  color:#fff!important;
  cursor:pointer!important;
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  overflow:hidden!important;
}
html body .er-track-buy-action .cart-btn > *,
html body .er-track-buy-action .pack-cart-btn > *,
html body .track-buy-action .cart-btn > *,
html body .track-buy-action .pack-cart-btn > *{display:none!important;}
html body .er-track-buy-action .cart-btn::before,
html body .er-track-buy-action .pack-cart-btn::before,
html body .track-buy-action .cart-btn::before,
html body .track-buy-action .pack-cart-btn::before{
  content:""!important;
  display:block!important;
  width:17px!important;
  height:17px!important;
  background:#fff!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2ZM1 2v2h2l3.6 7.59-1.35 2.45A2 2 0 0 0 7 17h12v-2H7.42a.25.25 0 0 1-.22-.37L8.1 13h7.45a2 2 0 0 0 1.75-1.03L20.88 5H5.21l-.94-2H1Zm16 16c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2Z'/%3E%3C/svg%3E") center/contain no-repeat!important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2ZM1 2v2h2l3.6 7.59-1.35 2.45A2 2 0 0 0 7 17h12v-2H7.42a.25.25 0 0 1-.22-.37L8.1 13h7.45a2 2 0 0 0 1.75-1.03L20.88 5H5.21l-.94-2H1Zm16 16c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2Z'/%3E%3C/svg%3E") center/contain no-repeat!important;
}
html body .er-track-buy-action.is-in-cart .er-track-buy-price,
html body .track-buy-action.is-in-cart .track-buy-price,
html body .er-track-buy-action:has(.cart-btn.in-cart) .er-track-buy-price,
html body .er-track-buy-action:has(.cart-btn.is-added) .er-track-buy-price,
html body .track-buy-action:has(.cart-btn.in-cart) .track-buy-price,
html body .track-buy-action:has(.cart-btn.is-added) .track-buy-price{
  background:#626878!important;
}
html body .er-track-buy-action .cart-btn.in-cart,
html body .er-track-buy-action .cart-btn.is-added,
html body .er-track-buy-action .pack-cart-btn.in-cart,
html body .er-track-buy-action .pack-cart-btn.is-added,
html body .track-buy-action .cart-btn.in-cart,
html body .track-buy-action .cart-btn.is-added,
html body .track-buy-action .pack-cart-btn.in-cart,
html body .track-buy-action .pack-cart-btn.is-added{
  background:#ff5d6c!important;
}
html body .er-track-buy-action .cart-btn.in-cart::before,
html body .er-track-buy-action .cart-btn.is-added::before,
html body .er-track-buy-action .pack-cart-btn.in-cart::before,
html body .er-track-buy-action .pack-cart-btn.is-added::before,
html body .track-buy-action .cart-btn.in-cart::before,
html body .track-buy-action .cart-btn.is-added::before,
html body .track-buy-action .pack-cart-btn.in-cart::before,
html body .track-buy-action .pack-cart-btn.is-added::before{
  width:14px!important;
  height:14px!important;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12Zm3.5-8h1v7h-1v-7Zm4 0h1v7h-1v-7ZM15.5 4l-1-1h-5l-1 1H5v2h14V4h-3.5Z'/%3E%3C/svg%3E") center/contain no-repeat!important;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12Zm3.5-8h1v7h-1v-7Zm4 0h1v7h-1v-7ZM15.5 4l-1-1h-5l-1 1H5v2h14V4h-3.5Z'/%3E%3C/svg%3E") center/contain no-repeat!important;
}

/* ---------- fixed play column ---------- */
html body .er-unified-track-table td.er-track-play-cell,
html body .er-unified-search-row > .preview-btn:last-child{
  flex:0 0 42px!important;
  width:42px!important;
  min-width:42px!important;
  max-width:42px!important;
  justify-self:end!important;
  text-align:center!important;
  overflow:visible!important;
  position:relative!important;
  z-index:1!important;
  margin:0!important;
}
html body .er-unified-track-table .preview-btn[data-track-id],
html body .er-unified-search-row > .preview-btn[data-track-id]:last-child{
  all:unset!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#000!important;
  color:#fff!important;
  cursor:pointer!important;
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  float:none!important;
  overflow:hidden!important;
  z-index:1!important;
}
html body .er-unified-track-table .preview-btn[data-track-id] > *,
html body .er-unified-search-row > .preview-btn[data-track-id]:last-child > *{display:none!important;}
html body .er-unified-track-table .preview-btn[data-track-id]::before,
html body .er-unified-search-row > .preview-btn[data-track-id]:last-child::before{
  content:""!important;
  display:block!important;
  width:0!important;
  height:0!important;
  margin-left:3px!important;
  border-top:7px solid transparent!important;
  border-bottom:7px solid transparent!important;
  border-left:11px solid #fff!important;
  background:transparent!important;
  position:static!important;
  transform:none!important;
}
html body .er-unified-track-table .preview-btn[data-track-id].playing::before,
html body .er-unified-track-table .preview-btn[data-track-id].is-playing::before,
html body .er-unified-track-table .preview-btn[data-track-id][aria-pressed="true"]::before,
html body .er-unified-search-row > .preview-btn[data-track-id].playing:last-child::before,
html body .er-unified-search-row > .preview-btn[data-track-id].is-playing:last-child::before,
html body .er-unified-search-row > .preview-btn[data-track-id][aria-pressed="true"]:last-child::before{
  width:12px!important;
  height:14px!important;
  margin-left:0!important;
  border:0!important;
  background:linear-gradient(90deg,#fff 0 4px,transparent 4px 8px,#fff 8px 12px)!important;
}

/* pack-search rows are no longer allowed to invent their own columns */
html body .pack-search-remix-row.er-unified-search-row,
html body .profile-pack-search-row.er-unified-search-row{
  display:flex!important;
  flex-flow:row nowrap!important;
  gap:8px!important;
}


/* Absolute protection: controls can never occupy each other's space. */
html body .er-unified-track-table tr.track-row > .er-track-buy-cell,
html body .er-unified-search-row > .er-track-buy-cell{
  order:4!important;
  flex-shrink:0!important;
}
html body .er-unified-track-table tr.track-row > .er-track-play-cell,
html body .er-unified-search-row > .preview-btn:last-child{
  order:5!important;
  flex-shrink:0!important;
  margin-left:0!important;
}
html body .er-unified-track-table tr.track-row > .er-track-info-cell,
html body .er-unified-search-row > .er-track-info-cell{order:3!important;}
html body .er-unified-track-table tr.track-row > .track-avatar-cell,
html body .er-unified-track-table tr.track-row > td:nth-child(2),
html body .er-unified-search-row > .er-track-avatar-link{order:2!important;}
html body .er-unified-track-table tr.track-row > .col-num,
html body .er-unified-search-row > .er-search-col-num{order:1!important;}

@media (max-width:720px){
  html body .er-unified-track-table tr.track-row,
  html body .er-unified-search-row{
    display:flex!important;
    flex-flow:row nowrap!important;
    gap:6px!important;
    padding:0 6px!important;
  }
  html body .er-unified-track-table td.track-avatar-cell,
  html body .er-unified-track-table tr.track-row > td:nth-child(2),
  html body .er-unified-search-row > .er-track-avatar-link{display:none!important;}
  html body .er-unified-track-table td.col-num,
  html body .er-unified-search-row .er-search-col-num{flex:0 0 24px!important;width:24px!important;}
  html body .er-track-info-cell{flex:1 1 auto!important;}
  html body .er-unified-track-table td.er-track-buy-cell,
  html body .er-unified-search-row > .er-track-buy-cell{flex:0 0 112px!important;width:90px!important;min-width:90px!important;max-width:90px!important;}
  html body .er-track-buy-action,
  html body .track-buy-action{grid-template-columns:76px 36px!important;width:90px!important;min-width:90px!important;max-width:90px!important;}
  html body .er-track-buy-price,
  html body .track-buy-price{width:76px!important;}
  html body .er-track-buy-action .cart-btn,
  html body .er-track-buy-action .pack-cart-btn,
  html body .track-buy-action .cart-btn,
  html body .track-buy-action .pack-cart-btn{width:36px!important;min-width:36px!important;max-width:36px!important;}
  html body .er-unified-track-table td.er-track-play-cell,
  html body .er-unified-search-row > .preview-btn:last-child{flex:0 0 38px!important;width:38px!important;min-width:38px!important;max-width:38px!important;}
  html body .er-unified-track-table .preview-btn[data-track-id],
  html body .er-unified-search-row > .preview-btn[data-track-id]:last-child{width:36px!important;min-width:36px!important;max-width:36px!important;height:34px!important;min-height:34px!important;max-height:34px!important;}
  html body .er-track-title-line, html body .er-track-title-line *{font-size:12px!important;}
  html body .er-track-meta-line, html body .er-track-meta-line *{font-size:10px!important;}
}


/* 2026-07-11: Browse-only tighter price/cart lane.
   Keeps Price+Cart and Play in separate non-overlapping columns. */
html body.browse-page .er-unified-track-table td.er-track-buy-cell,
html body.browse-page .er-unified-search-row > .er-track-buy-cell{
  box-sizing:border-box!important;
  flex:0 0 148px!important;
  width:132px!important;
  min-width:132px!important;
  max-width:132px!important;
  padding-left:8px!important;
  padding-right:10px!important;
  overflow:visible!important;
  z-index:4!important;
}
html body.browse-page .er-track-buy-action,
html body.browse-page .track-buy-action{
  box-sizing:border-box!important;
  grid-template-columns:94px 38px!important;
  width:132px!important;
  min-width:132px!important;
  max-width:132px!important;
  margin-left:auto!important;
  margin-right:0!important;
  overflow:hidden!important;
}
html body.browse-page .er-track-buy-price,
html body.browse-page .track-buy-price{
  width:94px!important;
  min-width:94px!important;
  max-width:94px!important;
}
html body.browse-page .er-track-buy-action .cart-btn,
html body.browse-page .er-track-buy-action .pack-cart-btn,
html body.browse-page .track-buy-action .cart-btn,
html body.browse-page .track-buy-action .pack-cart-btn{
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
}
html body.browse-page .er-unified-track-table td.er-track-play-cell,
html body.browse-page .er-unified-search-row > .preview-btn:last-child{
  box-sizing:border-box!important;
  flex:0 0 48px!important;
  width:48px!important;
  min-width:48px!important;
  max-width:48px!important;
  padding-left:8px!important;
  padding-right:6px!important;
  overflow:visible!important;
  z-index:1!important;
}
html body.browse-page .er-unified-track-table tr.track-row > .er-track-buy-cell + .er-track-play-cell{
  border-left:0!important;
}
html body.browse-page .pack-search-remix-row.er-unified-search-row,
html body.browse-page .profile-pack-search-row.er-unified-search-row{
  display:grid!important;
  grid-template-columns:28px 44px minmax(0,1fr) 148px 48px!important;
  column-gap:8px!important;
  align-items:center!important;
  overflow:visible!important;
}
html body.browse-page .er-unified-search-row > .er-track-buy-cell{
  justify-self:stretch!important;
}
html body.browse-page .er-unified-search-row > .preview-btn:last-child{
  justify-self:center!important;
  margin:0!important;
}
@media (max-width:900px){
  html body.browse-page .er-unified-track-table td.er-track-buy-cell,
  html body.browse-page .er-unified-search-row > .er-track-buy-cell{
    flex-basis:142px!important;width:142px!important;min-width:142px!important;max-width:142px!important;
    padding-left:8px!important;padding-right:12px!important;
  }
  html body.browse-page .er-track-buy-action,
  html body.browse-page .track-buy-action{
    grid-template-columns:90px 38px!important;width:128px!important;min-width:128px!important;max-width:128px!important;
  }
  html body.browse-page .er-track-buy-price,
  html body.browse-page .track-buy-price{width:90px!important;min-width:90px!important;max-width:90px!important;}
  html body.browse-page .pack-search-remix-row.er-unified-search-row,
  html body.browse-page .profile-pack-search-row.er-unified-search-row{
    grid-template-columns:28px 44px minmax(0,1fr) 142px 48px!important;
  }
}

/* 2026-07-11: Shorter price area on /browse.php only. */
html body.browse-page .er-unified-track-table td.er-track-buy-cell,
html body.browse-page .er-unified-search-row > .er-track-buy-cell{
  flex:0 0 126px!important;
  width:118px!important;
  min-width:118px!important;
  max-width:118px!important;
  padding-left:4px!important;
  padding-right:4px!important;
}
html body.browse-page .er-track-buy-action,
html body.browse-page .track-buy-action{
  grid-template-columns:72px 38px!important;
  width:110px!important;
  min-width:110px!important;
  max-width:110px!important;
}
html body.browse-page .er-track-buy-price,
html body.browse-page .track-buy-price{
  width:72px!important;
  min-width:72px!important;
  max-width:72px!important;
  padding-left:5px!important;
  padding-right:5px!important;
}
html body.browse-page .pack-search-remix-row.er-unified-search-row,
html body.browse-page .profile-pack-search-row.er-unified-search-row{
  grid-template-columns:28px 44px minmax(0,1fr) 126px 48px!important;
}
@media (max-width:900px){
  html body.browse-page .er-unified-track-table td.er-track-buy-cell,
  html body.browse-page .er-unified-search-row > .er-track-buy-cell{
    flex-basis:122px!important;
    width:114px!important;
    min-width:114px!important;
    max-width:114px!important;
    padding-left:3px!important;
    padding-right:3px!important;
  }
  html body.browse-page .er-track-buy-action,
  html body.browse-page .track-buy-action{
    grid-template-columns:68px 38px!important;
    width:106px!important;
    min-width:106px!important;
    max-width:106px!important;
  }
  html body.browse-page .er-track-buy-price,
  html body.browse-page .track-buy-price{
    width:68px!important;
    min-width:68px!important;
    max-width:68px!important;
  }
  html body.browse-page .pack-search-remix-row.er-unified-search-row,
  html body.browse-page .profile-pack-search-row.er-unified-search-row{
    grid-template-columns:28px 44px minmax(0,1fr) 122px 48px!important;
  }
}


/* 2026-07-11: Pack-search matched tracks use the exact same row layout as normal tracks. */
html body.browse-page .pack-search-remix-row.er-unified-search-row,
html body.browse-page .profile-pack-search-row.er-unified-search-row{
  display:flex!important;
  flex-flow:row nowrap!important;
  grid-template-columns:none!important;
  gap:8px!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  padding:0 10px!important;
  overflow:visible!important;
}
html body.browse-page .pack-search-remix-row.er-unified-search-row > .er-track-avatar-link,
html body.browse-page .profile-pack-search-row.er-unified-search-row > .er-track-avatar-link{
  order:2!important;
  flex:0 0 44px!important;
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
}
html body.browse-page .pack-search-remix-row.er-unified-search-row > .er-track-info-cell,
html body.browse-page .profile-pack-search-row.er-unified-search-row > .er-track-info-cell{
  order:3!important;
  flex:1 1 auto!important;
  width:auto!important;
  min-width:0!important;
}
html body.browse-page .pack-search-remix-row.er-unified-search-row > .er-track-buy-cell,
html body.browse-page .profile-pack-search-row.er-unified-search-row > .er-track-buy-cell{
  order:4!important;
  flex:0 0 126px!important;
  width:118px!important;
  min-width:118px!important;
  max-width:118px!important;
  padding-left:4px!important;
  padding-right:4px!important;
}
html body.browse-page .pack-search-remix-row.er-unified-search-row > .preview-btn:last-child,
html body.browse-page .profile-pack-search-row.er-unified-search-row > .preview-btn:last-child{
  order:5!important;
  flex:0 0 48px!important;
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  margin:0 5px!important;
  justify-self:auto!important;
}
/* Hide any legacy number left by cached/older browse markup. */
html body.browse-page .pack-search-remix-row .er-search-col-num,
html body.browse-page .profile-pack-search-row .er-search-col-num{display:none!important;}

/* Clean/Dirty colors. */
html body .er-track-title-line .er-track-title-version.is-clean{
  color:#18e56b!important;
  background:transparent!important;
}
html body .er-track-title-line .er-track-title-version.is-dirty{
  color:#ff4d57!important;
  background:transparent!important;
}

/* Key is colored text only. Identical Camelot keys keep the same color via --er-key-color. */
html body .er-track-meta-line .er-key-chip,
html body .er-track-meta-line .key-badge,
html body .er-track-meta-line .track-key,
html body .er-track-meta-line .key-pill{
  color:var(--er-key-color,#b8b8b8)!important;
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  padding:0!important;
  border-radius:0!important;
  font-weight:400!important;
}

@media (max-width:900px){
  html body.browse-page .pack-search-remix-row.er-unified-search-row > .er-track-buy-cell,
  html body.browse-page .profile-pack-search-row.er-unified-search-row > .er-track-buy-cell{
    flex-basis:122px!important;
    width:114px!important;
    min-width:114px!important;
    max-width:114px!important;
    padding-left:3px!important;
    padding-right:3px!important;
  }
}


/* 2026-07-11: clearer title/details and exact slash separators */
html body .er-track-title-line,
html body .er-track-title-line .er-track-title-text,
html body .er-track-title-line .er-track-title-bpm{
  font-weight:500!important;
}
html body .er-track-title-line .er-track-title-version{
  font-weight:500!important;
}
html body .er-track-meta-line .er-track-meta-separator{
  display:inline!important;
  color:#8d8d8d!important;
  font-size:11px!important;
  font-weight:400!important;
  margin:0 4px!important;
  white-space:nowrap!important;
}
html body .er-track-meta-line .er-track-main-key,
html body .er-track-meta-line .er-track-main-key .er-key-chip{
  white-space:nowrap!important;
}

/* Browse phone: remove left/right page spacing so the track table can use
   the full viewport width. Desktop and other pages are unchanged. */
@media (max-width:720px){
  html body.browse-page main.container{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  html body.browse-page .main-layout,
  html body.browse-page .main-content,
  html body.browse-page #ajax-results-area,
  html body.browse-page .table-wrapper,
  html body.browse-page .opm-table-wrapper{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  html body.browse-page .table-wrapper,
  html body.browse-page .opm-table-wrapper{
    overflow-x:hidden!important;
  }

  html body.browse-page .er-unified-track-table{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }

  html body.browse-page .er-unified-track-table tr.track-row,
  html body.browse-page .er-unified-search-row{
    padding-left:2px!important;
    padding-right:2px!important;
  }
}

/* Remixer Profile phone: preserve the full Price + Cart control.
   Previous mobile rule allocated 112px in flex-basis but forced width to 90px,
   which clipped the 36px cart button behind overflow:hidden. */
@media (max-width:720px){
  html body.remixer-profile-page .er-unified-track-table td.er-track-buy-cell{
    flex:0 0 112px!important;
    width:112px!important;
    min-width:112px!important;
    max-width:112px!important;
    padding-left:0!important;
    padding-right:0!important;
    overflow:visible!important;
  }

  html body.remixer-profile-page .er-track-buy-action,
  html body.remixer-profile-page .track-buy-action{
    grid-template-columns:76px 36px!important;
    width:112px!important;
    min-width:112px!important;
    max-width:112px!important;
    overflow:hidden!important;
  }

  html body.remixer-profile-page .er-track-buy-price,
  html body.remixer-profile-page .track-buy-price{
    width:76px!important;
    min-width:76px!important;
    max-width:76px!important;
  }

  html body.remixer-profile-page .er-track-buy-action .cart-btn,
  html body.remixer-profile-page .er-track-buy-action .pack-cart-btn,
  html body.remixer-profile-page .track-buy-action .cart-btn,
  html body.remixer-profile-page .track-buy-action .pack-cart-btn{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    width:36px!important;
    min-width:36px!important;
    max-width:36px!important;
    height:30px!important;
    overflow:visible!important;
  }

  html body.remixer-profile-page .er-track-buy-action .cart-btn::before,
  html body.remixer-profile-page .er-track-buy-action .pack-cart-btn::before,
  html body.remixer-profile-page .track-buy-action .cart-btn::before,
  html body.remixer-profile-page .track-buy-action .pack-cart-btn::before{
    display:block!important;
  }
}


/* Remixer Profile phone: remove left/right page gutters so the track table
   can use the full device width. Desktop is unchanged. */
@media (max-width:720px){
  html body.remixer-profile-page main.container{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  html body.remixer-profile-page .remixer-layout{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    gap:0!important;
  }

  html body.remixer-profile-page .remixer-main{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    box-sizing:border-box!important;
  }

  html body.remixer-profile-page .table-wrapper,
  html body.remixer-profile-page .er-unified-table-wrap{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    border-left:0!important;
    border-right:0!important;
    box-sizing:border-box!important;
  }

  html body.remixer-profile-page .er-unified-track-table,
  html body.remixer-profile-page .tracks-table{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}

/* 2026-07-12: reduce visual noise in the secondary metadata line.
   Remix Version, Genres, and separators use a darker gray.
   Musical Key keeps its assigned Camelot color. */
html body .er-track-meta-line{
  color:#686868!important;
}

html body .er-track-meta-line .er-track-remix-version,
html body .er-track-meta-line .er-track-genres,
html body .er-track-meta-line .er-track-meta-separator{
  color:#686868!important;
  font-weight:400!important;
  text-shadow:none!important;
}

html body .er-track-meta-line .er-track-main-key{
  color:var(--er-key-color,#b8b8b8)!important;
}

html body .er-track-meta-line .er-track-main-key .er-key-chip,
html body .er-track-meta-line .er-key-chip{
  color:var(--er-key-color,#b8b8b8)!important;
  opacity:1!important;
}