/* --- Popular Artists Section --- */
    .popular-artists-wrapper {
        background-color: var(--nav-bg);
        border-radius: 60px;
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
        margin: 8px auto 8px;
        width: calc(100% - 12px);
        max-width: 1000px;
        overflow: hidden;
    }
    .popular-artists-scroll {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 8px; /* Reduced from 10px to trim vertical space */
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        cursor: grab;
    }
    .popular-artists-scroll.active {
        cursor: grabbing;
        cursor: -webkit-grabbing;
    }
    .popular-artists-scroll::-webkit-scrollbar {
        display: none;
    }
    .artist-card {
        position: relative;
        flex-shrink: 0;
        width: 84px;  /* Reduced to make the wrapper thinner */
        height: 84px;
        text-decoration: none;
        user-select: none;
        -webkit-user-drag: none;
    }
    .artist-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        background-color: #eee;
        pointer-events: none; /* helps dragging */
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
    .artist-badge {
        position: absolute;
        top: 0px;
        right: 0px;
        background-color: var(--nav-btn-bg); /* Signature Geesick Blue */
        color: white;
        font-size: 11px;
        font-weight: 500;
        padding: 3px 8px 3px 3px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        gap: 5px;
        box-shadow: 0 3px 6px rgba(0,0,0,0.25);
        white-space: nowrap;
        pointer-events: none;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .artist-badge svg {
        width: 14px;
        height: 14px;
        background-color: rgba(0, 0, 0, 0.18);
        border-radius: 50%;
        padding: 2.5px;
    }
    .see-all-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--nav-btn-bg);
        color: white;
    }
    .see-all-icon svg {
        width: 20px;
        height: 20px;
        stroke-width: 2.5px;
    }
    /* --- New Releases Section --- */

    .release-item {
        background-color: rgb(247 247 247);
        border-radius: 20px;
        padding: 8px;
        display: flex;
        align-items: center;
        gap: 16px;
        text-decoration: none;
        color: inherit;
        flex-grow: 1; /* stretches item */
        min-width: 0; /* prevents flex overflow */
    }
    .release-img {
        width: 140px;
        height: 78px;
        border-radius: 12px;
        object-fit: cover;
        flex-shrink: 0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .release-info {
        flex-grow: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
        padding-right: 10px;
    }
    .release-info h3 {
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: #4a4a4a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
    }
    .release-info p {
        margin: 0;
        font-size: 13px;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 3px;
    }

    /* --- Responsive Grid for Desktop --- */