/** Shopify CDN: Minification failed

Line 765:0 Expected "}" to go with "{"

**/
/* ===========================
   Shopify Music Player v1.0
=========================== */

:root{
    --player-height:90px;
    --player-bg:#0d0d0d;
    --player-border:#232323;
    --player-text:#ffffff;
    --player-sub:#9b9b9b;
    --player-accent:#d4af37;
}

.music-player{

    position:fixed;
    
    left:0;

    bottom:0;

    width:100%;

    height:var(--player-height);

    background:var(--player-bg);

    border-top:1px solid var(--player-border);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 30px;

    z-index:99999;

    color:var(--player-text);

    box-sizing:border-box;

}

.hidden{

    display:none;

}

.player-left{

    display:flex;

    align-items:center;

    width:28%;

}

.player-left img{

    width:65px;

    height:65px;

    border-radius:8px;

    object-fit:cover;

    margin-right:18px;

    background:#202020;

}

.player-info{

    overflow:hidden;

}

.player-info h3{

    margin:0;

    font-size:18px;

    font-weight:700;

}

.player-info p{

    margin-top:4px;

    color:var(--player-sub);

    font-size:14px;

}

.player-center{

    width:42%;

}

.controls{

    display:flex;

    justify-content:center;

    gap:15px;

    margin-bottom:10px;

}

.controls button{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:#202020;

    color:white;

    font-size:18px;

    transition:.25s;

}

.controls button:hover{

    background:var(--player-accent);

    color:black;

}

.progress{

    width:100%;

    display:grid;

    grid-template-columns:50px 1fr 50px;

    align-items:center;

    gap:10px;

}

.progress span{

    width:50px;

    text-align:center;

    font-size:12px;

    color:#bfbfbf;

    white-space:nowrap;

}

.progress input{

    width:100%;

    margin:0;

    height:6px;

}

.player-right{

    width:22%;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:20px;

}

#buy-album{

    padding:10px 18px;

    border:none;

    border-radius:6px;

    cursor:pointer;

    background:var(--player-accent);

    font-weight:700;

}

#volume{

    width:100px;

}

/* Mobile */

@media (max-width:768px){

.music-player{

    position:fixed;

    left:10px;

    right:10px;

    bottom:10px;

    width:auto;

    min-height:78px;

    background:rgba(18,18,18,.95);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:10px 14px;

    gap:12px;

    box-sizing:border-box;

}

.player-left{

    width:32%;

}

.player-left img{

    width:50px;

    height:50px;

    margin-right:10px;

    flex-shrink:0;

}

.player-info{

    flex:1;

    min-width:0;

}

.player-info h3,
.player-info p{

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.player-info h3{

    font-size:15px;

}

.player-info p{

    font-size:12px;

}

.player-center{

    flex:1;

    min-width:0;

}

.progress{

    width:100%;

    display:grid;

    grid-template-columns:44px 1fr 44px;

    align-items:center;

    gap:8px;

    margin-top:2px;

}

.progress span{

    width:44px;

    text-align:center;

    font-size:11px;

    color:#bdbdbd;

    white-space:nowrap;

    line-height:1;

}

.progress input{

    width:100%;

    margin:0;

    min-width:0;

    height:5px;

}

.controls{

    gap:8px;

    margin-bottom:6px;

}

.controls button{

    width:34px;

    height:34px;

    font-size:15px;

}

.player-right{

    width:auto;

    flex-shrink:0;

}

#volume{

    display:none;

}

#buy-album{

    padding:8px 12px;

    font-size:12px;

}

}
/*=========================================
  Lion Gang Empire Music Cards v2
=========================================*/

.music-library-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,280px));

    justify-content:center;

    gap:28px;

    max-width:1600px;

    margin:0 auto;

    padding:30px 24px;

}

@media (max-width:768px){

    .song-card{

        width:100%;

        max-width:340px;

        margin-left:auto;

        margin-right:auto;

    }

}
.song-card{

    display:flex;
    flex-direction:column;
    height:100%;

    background:#1c1c1c;

    border-radius:22px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.18);

    transition:.35s ease;

    box-shadow:0 12px 35px rgba(0,0,0,.30);

    position:relative;

}

.song-cover-btn{

    position:relative;
    border:none;
    background:none;
    padding:0;
    cursor:pointer;
    overflow:hidden;

    border-radius:22px;

    transition:.35s ease;

}

.song-cover-btn img{

    width:100%;
    max-height:360px;
    display:block;

    aspect-ratio:1/1;
    object-fit:cover;

    border-radius:22px;

    transition:.35s ease;
    box-shadow:0 18px 45px rgba(0,0,0,.35);
    
}

.song-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.05);

    opacity:0;

    transition:.35s ease;

}

.song-cover-btn:hover .song-overlay{

    opacity:1;

    background:linear-gradient(
to top,
rgba(0,0,0,.70),
rgba(0,0,0,.25)
);

}

.song-cover-btn:hover img{

    transform:scale(1.08);

    filter:brightness(.82);

}

.play-circle{

    width:72px;

    height:72px;

    border-radius:50%;

    background:linear-gradient(145deg,#f5d66d,#c79d16);

    color:#000;

    font-size:34px;

    display:flex;

    justify-content:center;

    align-items:center;

    transform:scale(.7);

    transition:.3s ease;

    box-shadow:0 12px 35px rgba(0,0,0,.45);

}

.song-cover-btn:hover .play-circle{

    transform:scale(1);

}

.song-details{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-align:center;

    padding:28px 22px 26px;

    background:#1f1f1f;

    flex:1;

}

.song-details h3{

    margin:0;

    font-size:1.18rem;

    font-weight:700;

    line-height:1.35;

    color:#fff;

    min-height:3rem;

    display:flex;

    align-items:center;

    justify-content:center;

}

.song-details p{

    margin:10px 0 20px;

    color:#bdbdbd;

    font-size:.95rem;

    min-height:24px;

}

.song-badges{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

    width:100%;

    margin-top:auto;

}

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    line-height:1;

    padding:9px 16px;

}

.badge:hover{

    transform:translateY(-2px);

}


.badge.free{

    background:#19b95a;

    color:#fff;

}

.badge.paid{

    background:#d4af37;

    color:#111;

}

.badge.release{

    background:#242424;

    color:#fff;

}

.song-card:hover{

    transform:translateY(-8px) scale(1.02);

    box-shadow:
        0 24px 60px rgba(0,0,0,.45),
        0 0 22px rgba(212,175,55,.12);

}

/* Mobile */

@media(max-width:768px){

.music-library-grid{

    grid-template-columns:1fr;

    gap:36px;

}

.song-details h3{

    font-size:1.25rem;

}

.play-circle{

    width:82px;

    height:82px;

    font-size:40px;

}


.song-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:22px;

    pointer-events:none;

    box-shadow:0 0 0 rgba(212,175,55,0);

    transition:.35s;

}

.song-card:hover::after{

    box-shadow:0 0 35px rgba(212,175,55,.18);

}
.song-card.playing{

    box-shadow:
        0 0 0 2px rgba(212,175,55,.55),
        0 20px 55px rgba(212,175,55,.25);

    transform:translateY(-4px);

}