/* Remix Pack detail page — phone cart visibility fix.
   Scoped to this page only; Browse and Remixer Profile remain unchanged. */

@media (max-width:720px){
  /* Pack tracks: the control needs 112px total (76 price + 36 cart).
     The old rule allocated 112px in flex-basis but forced width to 90px,
     causing the cart to be clipped. */
  html body.remix-pack-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;
    position:relative!important;
    z-index:3!important;
  }

  html body.remix-pack-page .er-track-buy-action{
    display:grid!important;
    grid-template-columns:76px 36px!important;
    width:112px!important;
    min-width:112px!important;
    max-width:112px!important;
    overflow:visible!important;
  }

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

  html body.remix-pack-page .er-track-buy-action .cart-btn,
  html body.remix-pack-page .er-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;
    position:relative!important;
    z-index:4!important;
  }

  html body.remix-pack-page .er-track-buy-action .cart-btn::before,
  html body.remix-pack-page .er-track-buy-action .pack-cart-btn::before{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }

  /* Main pack Add-to-Cart icon in the hero. Keep it visible on phones too. */
  html body.remix-pack-page .pack-hero > div:last-child{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    margin-top:12px!important;
    overflow:visible!important;
  }

  html body.remix-pack-page .pack-hero > div:last-child > .pack-cart-btn{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    visibility:visible!important;
    opacity:1!important;
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:40px!important;
    padding:0!important;
    margin:0!important;
    background:#050505!important;
    color:#fff!important;
    border:0!important;
    overflow:visible!important;
    position:relative!important;
    z-index:5!important;
  }

  html body.remix-pack-page .pack-hero > div:last-child > .pack-cart-btn .ap-ico-cart{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:19px!important;
    height:19px!important;
    color:#fff!important;
    fill:currentColor!important;
  }

  html body.remix-pack-page .pack-hero > div:last-child > .pack-cart-btn .ap-ico-plus{
    display:none!important;
  }

  html body.remix-pack-page .pack-hero > div:last-child > .pack-cart-btn.is-added .ap-ico-cart,
  html body.remix-pack-page .pack-hero > div:last-child > .pack-cart-btn.in-cart .ap-ico-cart{
    display:block!important;
  }
}

/* Phone hero cart: force exactly one visible cart icon.
   Removes legacy pseudo-elements, background icons, masks, and the plus SVG. */
@media (max-width:720px){
  html body.remix-pack-page .pack-hero > div:last-child > .pack-cart-btn{
    background-image:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }

  html body.remix-pack-page .pack-hero > div:last-child > .pack-cart-btn::before,
  html body.remix-pack-page .pack-hero > div:last-child > .pack-cart-btn::after{
    content:none!important;
    display:none!important;
    visibility:hidden!important;
    background:none!important;
    background-image:none!important;
    -webkit-mask:none!important;
    mask:none!important;
  }

  html body.remix-pack-page .pack-hero > div:last-child > .pack-cart-btn > svg{
    display:none!important;
  }

  html body.remix-pack-page .pack-hero > div:last-child > .pack-cart-btn > svg.ap-ico-cart:first-of-type{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    width:19px!important;
    height:19px!important;
    color:#fff!important;
    fill:currentColor!important;
  }

  html body.remix-pack-page .pack-hero > div:last-child > .pack-cart-btn > svg.ap-ico-plus{
    display:none!important;
  }
}