/* ===== TFJ Player Button Modernisation ===== */

/* --- Track Row Action Icons (playlister, info, mixes, share) --- */
#jp_container .jp-action {
    opacity: 0.7;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    transform-origin: center center;
}
#jp_container .jp-action:hover {
    transform: scale(1.35) !important;
    opacity: 1 !important;
}
#jp_container .jp-playlist-current .jp-action {
    opacity: 1;
}

/* --- Nudge action icons up to align with track text --- */
#jp_container span.jp-track-actions {
    position: relative;
    top: -2px;
}

/* --- Track Row MP3/WAV Download Buttons --- */
#jp_container span.jp-track-actions span.jp-download {
    opacity: 0.8;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    transform-origin: center center;
}
#jp_container span.jp-track-actions span.jp-download:hover {
    transform: scale(1.25) !important;
    opacity: 1 !important;
}
#jp_container .jp-playlist-current span.jp-track-actions span.jp-download {
    opacity: 1;
}

/* --- CUE SHEET Button --- */
#jp_container span.jp-cue-sheet,
#cf_resultset span.jp-cue-sheet {
    border-radius: 10px !important;
    transition: transform 0.2s ease !important;
    position: relative !important;
    top: -2px !important;
    vertical-align: top !important;
}
#jp_container span.jp-cue-sheet:hover {
    transform: scale(1.1) !important;
}

/* --- DIG IT? Button (jp-like-this / similar.svg) --- */
#jp_container span.jp-like-this,
#cf_resultset span.jp-like-this {
    border-radius: 10px !important;
    transition: transform 0.2s ease !important;
    position: relative !important;
    top: 0.5px !important;
    margin-top: 0 !important;
    vertical-align: top !important;
}
#jp_container span.jp-like-this:hover {
    transform: scale(1.1) !important;
}

/* --- LICENCE THIS TRACK Button --- */
#jp_container span.jp-licence {
    border-radius: 10px !important;
    transition: transform 0.2s ease !important;
    margin-top: -6px !important;
}
#jp_container span.jp-licence:hover {
    transform: scale(1.08) !important;
}
.en-GB #jp_container span.jp-licence,
.en-US #jp_container span.jp-licence,
.en-IE #jp_container span.jp-licence {
    display: inline-block !important;
}

/* --- Play button in expanded track: nudge down 2px --- */
#jp_container .jp-playlist-current .jp-play_pause span {
    margin-top: 4px !important; /* was 2px in base, +2px */
}

/* ===== Desktop: 8 pill-button grid in sprite area ===== */
/* Same red-pill style as mobile buttons, 3 rows: WAV/MP3, Playlist/Info/Share, DigIt/Licence/CueSheet */
@media only screen and (min-width: 768px) {
    /* Grid container — sits in the sprite column area */
    #jp_container li .tfj-desk-grid {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        grid-template-rows: 4fr 3fr 3fr !important;
        column-gap: 2px !important;
        row-gap: 3px !important;
        align-items: stretch !important;
        position: absolute !important;
        right: 4px !important;
        top: 4px !important;
        bottom: 0px !important;
        width: 190px !important;
        z-index: 10 !important;
    }
    /* Row 1: WAV (3 cols) + MP3 (3 cols) */
    #jp_container li .tfj-desk-grid .tfj-dbtn-mp3  { grid-column: 1 / 4; }
    #jp_container li .tfj-desk-grid .tfj-dbtn-wav  { grid-column: 4 / 7; }
    /* Row 2: Dig It + Info + Share (2 cols each) */
    #jp_container li .tfj-desk-grid .tfj-dbtn-dig  { grid-column: 1 / 3; }
    #jp_container li .tfj-desk-grid .tfj-dbtn-info { grid-column: 3 / 5; }
    #jp_container li .tfj-desk-grid .tfj-dbtn-sh   { grid-column: 5 / 7; }
    /* Row 3: Playlist + Licence + Cue Sheet (2 cols each) */
    #jp_container li .tfj-desk-grid .tfj-dbtn-pl   { grid-column: 1 / 3; }
    #jp_container li .tfj-desk-grid .tfj-dbtn-lic  { grid-column: 3 / 5; }
    #jp_container li .tfj-desk-grid .tfj-dbtn-cue  { grid-column: 5 / 7; }

    /* Pill button — matches mobile .jp-mob-btn style, fills full track depth */
    #jp_container li .tfj-desk-grid .tfj-desk-btn {
        background: #DA0000 !important;
        color: rgba(255,255,255,0.45) !important;
        padding: 0 5px !important;
        border-radius: 7px !important;
        font-size: 8px !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: stretch !important;
        height: auto !important;
        gap: 3px !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        white-space: nowrap !important;
        transition: transform 0.15s ease, color 0.2s ease, border-color 0.2s ease !important;
        -webkit-tap-highlight-color: transparent !important;
        box-sizing: border-box !important;
        text-decoration: none !important;
        letter-spacing: 0.3px !important;
    }
    #jp_container li .tfj-desk-grid .tfj-desk-btn:hover {
        background: #E52020 !important;
        color: #fff !important;
        border-color: rgba(255,255,255,0.4) !important;
        transform: scale(1.05) !important;
    }
    #jp_container li .tfj-desk-grid .tfj-desk-btn:active {
        color: #fff !important;
        border-color: rgba(255,255,255,0.5) !important;
        transform: scale(1.08) !important;
    }
    /* Icon wrapper inside button */
    #jp_container li .tfj-desk-grid .tfj-desk-btn .tfj-dicon {
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        transform: scale(1.05);
    }
    #jp_container li .tfj-desk-grid .tfj-desk-btn .tfj-dicon svg {
        display: block !important;
        pointer-events: none !important;
        opacity: 0.45 !important;
        transition: opacity 0.2s ease !important;
    }
    #jp_container li .tfj-desk-grid .tfj-desk-btn:hover .tfj-dicon svg {
        opacity: 1 !important;
    }
    /* Label text */
    #jp_container li .tfj-desk-grid .tfj-desk-btn .tfj-dlbl {
        position: relative !important;
        top: 1px !important;
    }
    /* WAV button (now on right): icon on the right */
    #jp_container li .tfj-desk-grid .tfj-dbtn-wav {
        flex-direction: row-reverse !important;
    }
    /* WAV + MP3: bigger text + spacing between them */
    #jp_container li .tfj-desk-grid .tfj-dbtn-wav,
    #jp_container li .tfj-desk-grid .tfj-dbtn-mp3 {
        font-size: 9px !important;
    }
    #jp_container li .tfj-desk-grid .tfj-dbtn-wav,
    #jp_container li .tfj-desk-grid .tfj-dbtn-mp3 {
        gap: 4px !important;
    }
    /* Rows 2-3: icon-only by default, text on hover */
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-dig,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-info,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-sh,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-pl,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-lic,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-cue {
        font-size: 7px !important;
        position: relative !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }
    /* Row 2 down 1px */
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-dig,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-info,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-sh {
        margin-top: 1px !important;
    }
    /* Row 3 down 1px */
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-pl,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-lic,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-cue {
        margin-top: 1px !important;
    }
    /* Row 2 icons (dig/info/share): up 1px from previous */
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-dig .tfj-dicon,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-info .tfj-dicon,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-sh .tfj-dicon {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) scale(1.0) !important;
        opacity: 0.7 !important;
        transition: opacity 0.2s ease !important;
    }
    /* Row 3 icons (pl/lic/cue): up 2px from previous */
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-pl .tfj-dicon,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-lic .tfj-dicon,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-cue .tfj-dicon {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) scale(1.0) !important;
        opacity: 0.7 !important;
        transition: opacity 0.2s ease !important;
    }
    /* Rows 2-3 labels: hidden by default, absolutely centered (crossfade with icon) */
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-dig .tfj-dlbl,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-info .tfj-dlbl,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-sh .tfj-dlbl,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-pl .tfj-dlbl,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-lic .tfj-dlbl,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-cue .tfj-dlbl {
        position: absolute !important;
        left: 50% !important;
        top: 33% !important;
        transform: translate(-50%, -50%) !important;
        opacity: 0 !important;
        transition: opacity 0.2s ease !important;
        white-space: nowrap !important;
    }
    /* Hover: icon fades out, label fades in */
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-dig:hover .tfj-dicon,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-info:hover .tfj-dicon,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-sh:hover .tfj-dicon,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-pl:hover .tfj-dicon,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-lic:hover .tfj-dicon,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-cue:hover .tfj-dicon {
        opacity: 0 !important;
    }
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-dig:hover .tfj-dlbl,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-info:hover .tfj-dlbl,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-sh:hover .tfj-dlbl,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-pl:hover .tfj-dlbl,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-lic:hover .tfj-dlbl,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-cue:hover .tfj-dlbl {
        opacity: 1 !important;
    }
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-dig:hover,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-info:hover,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-sh:hover,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-pl:hover,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-lic:hover,
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-dbtn-cue:hover {
        background: #E52020 !important;
    }

    /* WAV/MP3: download arrow dips down then slowly releases back up on hover */
    @keyframes dlDip {
        0%   { transform: scale(0.95) translateY(0); }
        30%  { transform: scale(0.95) translateY(3px); }
        100% { transform: scale(0.95) translateY(0); }
    }
    #jp_container li .tfj-desk-grid .tfj-dbtn-wav:hover .tfj-dicon,
    #jp_container li .tfj-desk-grid .tfj-dbtn-mp3:hover .tfj-dicon {
        animation: dlDip 0.6s ease-out forwards !important;
    }
    /* WAV/MP3 pressed-down state (arrow pushes down, stays pressed while download fires) */
    #jp_container li .tfj-desk-grid .tfj-dbtn-wav.tfj-dl-active .tfj-dicon,
    #jp_container li .tfj-desk-grid .tfj-dbtn-mp3.tfj-dl-active .tfj-dicon {
        transform: scale(0.95) translateY(3px) !important;
        animation: none !important;
        transition: transform 0.1s ease !important;
    }
    #jp_container li .tfj-desk-grid .tfj-dbtn-wav.tfj-dl-active,
    #jp_container li .tfj-desk-grid .tfj-dbtn-mp3.tfj-dl-active {
        transform: scale(1.05) !important;
        background: #F03030 !important;
    }

    /* Rows 2-3: press animation (JS adds .tfj-btn-pressed class briefly) */
    #jp_container li .tfj-desk-grid .tfj-desk-btn.tfj-btn-pressed {
        transform: scale(0.9) !important;
        background: #F03030 !important;
        transition: transform 0.15s ease, background 0.15s ease !important;
    }
    #jp_container li .tfj-desk-grid .tfj-dbtn-dig:active,
    #jp_container li .tfj-desk-grid .tfj-dbtn-info:active,
    #jp_container li .tfj-desk-grid .tfj-dbtn-sh:active,
    #jp_container li .tfj-desk-grid .tfj-dbtn-pl:active,
    #jp_container li .tfj-desk-grid .tfj-dbtn-lic:active,
    #jp_container li .tfj-desk-grid .tfj-dbtn-cue:active {
        transform: scale(0.9) !important;
        background: #F03030 !important;
    }

    /* CF grid: compact buttons for smaller viewports */
    @media (max-width: 1024px) {
        #jp_container.cfplayer li .tfj-desk-grid,
        #jp_container li .tfj-cf-grid {
            width: 94px !important;
            right: 3px !important;
        }
        /* CF row 2: PLAYLIST + CUE SHEET (wider, text fits) */
        #jp_container.cfplayer li .tfj-desk-grid .tfj-dbtn-pl  { order: 3 !important; grid-column: 1 / 4 !important; }
        #jp_container.cfplayer li .tfj-desk-grid .tfj-dbtn-cue { order: 4 !important; grid-column: 4 / 7 !important; }
        /* CF row 3: INFO + SHARE + LICENCE (3 across) */
        #jp_container.cfplayer li .tfj-desk-grid .tfj-dbtn-info { order: 5 !important; grid-column: 1 / 3 !important; }
        #jp_container.cfplayer li .tfj-desk-grid .tfj-dbtn-sh   { order: 6 !important; grid-column: 3 / 5 !important; }
        #jp_container.cfplayer li .tfj-desk-grid .tfj-dbtn-lic  { order: 7 !important; grid-column: 5 / 7 !important; }
    }

    /* Only show pill grid on the expanded (current) track */
    #jp_container li:not(.jp-playlist-current) .tfj-desk-grid { display: none !important; }
    /* Hide original sprite actions + text options on the expanded track */
    /* Hide as soon as jp-playlist-current is set — display:none removes from flow entirely */
    #jp_container .jp-playlist-current .jp-track-actions,
    #jp_container li.jp-playlist-current .jp-track-actions,
    #jp_container .jp-playlist-current .jp-track-options,
    #jp_container li.jp-playlist-current .jp-track-options,
    #jp_container .jp-playlist-current ~ .jp-track-options,
    #jp_container li.jp-playlist-current ~ .jp-track-options {
        display: none !important;
    }
    /* Playing track composer: single line, overflow extends behind the absolute-positioned grid */
    #jp_container li.jp-playlist-current.tfj-desk-active .jp-track-artist,
    #jp_container .jp-playlist-current .jp-track-artist {
        display: block !important;
        float: left !important;
        white-space: nowrap !important;
        overflow: visible !important;
        line-height: 1.4 !important;
        vertical-align: top !important;
        height: auto !important;
        margin-top: 2px !important;
    }
    /* Fixed-height expanded player box — long composer names wrap but don't stretch the box */
    /* Album pages: compact 81px (single-line title) */
    /* v6.36: --tfj-xh = extra height for a playing description that wraps
       onto 2+ lines (set by checkDescLines), so the mixes/VU row and Request
       Stems are pushed down instead of clipped by the fixed-height box. */
    #jp_container:not(.cfplayer):not(.choonfinder) li.jp-playlist-current a.jp-playlist-item {
        min-height: calc(81px + var(--tfj-xh, 0px)) !important;
        max-height: calc(81px + var(--tfj-xh, 0px)) !important;
        overflow: hidden !important;
    }
    /* Two-line title: extra height so the mixes row isn't clipped */
    #jp_container:not(.cfplayer):not(.choonfinder) li.jp-playlist-current.tfj-two-line-title a.jp-playlist-item {
        min-height: calc(100px + var(--tfj-xh, 0px)) !important;
        max-height: calc(100px + var(--tfj-xh, 0px)) !important;
    }
    /* Playlist pages: taller to show mixes row underneath */
    #jp_container.choonfinder:not(.cfplayer) li.jp-playlist-current a.jp-playlist-item {
        min-height: calc(100px + var(--tfj-xh, 0px)) !important;
        max-height: calc(100px + var(--tfj-xh, 0px)) !important;
        overflow: hidden !important;
    }
    /* Kill the original 28px bottom-padding on the playing track li */
    #jp_container:not(.cfplayer):not(.choonfinder) li.jp-playlist-current {
        padding-bottom: 0px !important;
    }
    #jp_container.choonfinder:not(.cfplayer) li.jp-playlist-current {
        padding-bottom: 0px !important;
    }
    /* Let grid overflow the track row — 3 rows need ~100px but anchor is ~81px */
    #jp_container:not(.cfplayer) .track_container {
        overflow: visible !important;
    }
    /* Kill rogue album-track-no that can appear on hover */
    #jp_container:not(.cfplayer) li .jp-album-track-no {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    #jp_container:not(.cfplayer) li.jp-playlist-current.tfj-desk-active {
        overflow: visible !important;
        padding-bottom: 28px !important;
    }
    /* Keep collapsed tracks clipped so nothing leaks */
    #jp_container:not(.cfplayer) li:not(.jp-playlist-current) {
        overflow: hidden !important;
    }
    #jp_container li.jp-playlist-current.tfj-desk-active > a.jp-playlist-item {
        position: relative !important;
        overflow: visible !important;
    }

    /* ===== Choon Finder: pill grid adjustments (no Dig It) ===== */
    /* CF row 2: PLAYLIST + CUE SHEET (wider — text fits on hover) */
    #jp_container.cfplayer li .tfj-desk-grid .tfj-dbtn-mp3  { order: 1 !important; }
    #jp_container.cfplayer li .tfj-desk-grid .tfj-dbtn-wav  { order: 2 !important; }
    #jp_container.cfplayer li .tfj-desk-grid .tfj-dbtn-pl   { order: 3 !important; grid-column: 1 / 4 !important; }
    #jp_container.cfplayer li .tfj-desk-grid .tfj-dbtn-cue  { order: 4 !important; grid-column: 4 / 7 !important; }
    /* CF row 3: INFO + SHARE + LICENCE */
    #jp_container.cfplayer li .tfj-desk-grid .tfj-dbtn-info { order: 5 !important; grid-column: 1 / 3 !important; }
    #jp_container.cfplayer li .tfj-desk-grid .tfj-dbtn-sh   { order: 6 !important; grid-column: 3 / 5 !important; }
    #jp_container.cfplayer li .tfj-desk-grid .tfj-dbtn-lic  { order: 7 !important; grid-column: 5 / 7 !important; }
    /* Anchor needs position:relative for abs-positioned grid */
    #jp_container.cfplayer li.jp-playlist-current.tfj-desk-active > a.jp-playlist-item {
        position: relative !important;
    }
    #jp_container.cfplayer li.jp-playlist-current a.jp-playlist-item {
        max-height: 118px !important;
        overflow: hidden !important;
    }
    /* Flash: track_container stays full-size and pulses the background */
    #jp_container.cfplayer .track_container.jp-playlist-exactmatch {
        animation-name: colorpulse !important;
        animation-duration: 2s !important;
        animation-iteration-count: 2 !important;
        min-height: 122px !important;
    }
    /* BPM + buttons: hidden from the start, slide-reveal from left after flash */
    @keyframes cfhide {
        0%   { opacity: 0; transform: translateX(-60px); }
        85%  { opacity: 0; transform: translateX(-60px); animation-timing-function: ease-out; }
        100% { opacity: 1; transform: translateX(0); }
    }
    /* v6.29, 08/08/2026, Tim: "you go to play the next track and it does that weird
       fading out of the original track that flashed". The reveal was keyed on the
       exact-match class alone, which the row keeps for good, so every time the row
       was touched again the 5s hide-then-slide restarted and its buttons faded out
       under him. Tie it to the row actually being the one playing, and once it is
       not, no animation at all: it behaves like any other row. */
    #jp_container.cfplayer li.jp-playlist-current .track_container.jp-playlist-exactmatch .tfj-bpm-tag,
    #jp_container.cfplayer li.jp-playlist-current .track_container.jp-playlist-exactmatch .tfj-desk-grid {
        animation: cfhide 5s 1 linear !important;
    }
    #jp_container.cfplayer li:not(.jp-playlist-current) .track_container.jp-playlist-exactmatch .tfj-bpm-tag,
    #jp_container.cfplayer li:not(.jp-playlist-current) .track_container.jp-playlist-exactmatch .tfj-desk-grid {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    /* CF: keep artist hidden (composer shown in description instead) */
    #jp_container.cfplayer li.jp-playlist-current.tfj-desk-active .jp-track-artist {
        display: none !important;
    }

    /* ===== v6.04: Exact-match "Aha!" overlay fixes ===== */

    /* 1. Desk-grid buttons join the fadepulse so they don't sit static on top of the flash */
    .jp-playlist-exactmatch.jp-playlist-current .tfj-desk-grid .tfj-desk-btn {
        animation-name: fadepulse !important;
        animation-duration: 2s !important;
        animation-iteration-count: 2 !important;
    }

    /* 2. "Aha!" overlay (::before on li) needs higher z-index than desk-grid (z:10) */
    #jp_container li:first-child::before,
    #jp_container li.track_recommended::before {
        position: relative !important;
        z-index: 15 !important;
    }

    /* 3. Red bar: ensure background covers the full track including the mixes row at the bottom */
    .jp-playlist-exactmatch.jp-playlist-current {
        padding-bottom: 6px !important;
    }
}

/* Hide pill grid below 768px — CSS handles responsive visibility, not JS */
@media only screen and (max-width: 767px) {
    #jp_container li .tfj-desk-grid { display: none !important; }
}

/* --- Track countdown timer: nudge up 2px --- */
#jp_container li.jp-playlist-current span.jp-track-time {
    margin-top: -2px !important;
}

/* --- Fixed Player Bar MP3/WAV --- */
.jp_fixed_player-mp3.jp-download,
.jp_fixed_player-wav.jp-download {
    border: 1.5px solid rgb(217, 0, 0) !important;
    border-radius: 20px !important;
    padding: 4px 14px 4px 30px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    color: rgb(217, 0, 0) !important;
    background-color: white !important;
    box-shadow: 0 2px 8px rgba(217, 0, 0, 0.15) !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.jp_fixed_player-mp3.jp-download:hover,
.jp_fixed_player-wav.jp-download:hover {
    transform: scale(1.08) !important;
    background-color: rgb(217, 0, 0) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(217, 0, 0, 0.35) !important;
}

/* --- Fixed Player Nav Arrows --- */
.jp_fixed_player-prev,
.jp_fixed_player-next {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.jp_fixed_player-prev:hover,
.jp_fixed_player-next:hover {
    transform: scale(1.2) !important;
}

/* --- Mixes Row: Single line everywhere (album pages + Choon Finder results) --- */
span.jp-mix-names {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    align-items: baseline !important;
    white-space: nowrap !important;
}
span.jp-mix-names .mix-regular {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
    min-width: 0;
}
span.jp-mix-names .mix-pinned {
    white-space: nowrap;
    flex: 0 0 auto;
}
/* Force ALL u elements inline inside mix-names (theme sets display:block) */
span.jp-mix-names u {
    display: inline !important;
}

/* VU meter: hovering a mix name lights it fully for readability */
span.jp-mix-names u:hover .tfj-vu-char {
    opacity: 1 !important;
}

/* Kill theme's sweep-in animation on mix-name children — VU meter handles the effect now */
.jp-playlist-current span.jp-mix-names u,
.jp-playlist-current span.jp-mix-names .mtitle,
.jp-playlist-current span.jp-mix-names .mix-sep,
.jp-playlist-current span.jp-mix-names .mix-regular,
.jp-playlist-current span.jp-mix-names .mix-pinned {
    animation: none !important;
    transition: none !important;
}
/* Theme's "pulse" class (knight rider) — neutralise any visual effect */
.jp-playlist-current span.jp-mix-names u.pulse {
    animation: none !important;
    transition: none !important;
    color: inherit !important;
    opacity: inherit !important;
    background: none !important;
}
/* Theme's "hidenofade" class — don't let it hide the mixes row */
span.jp-mix-names.hidenofade {
    max-height: none !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* "Mixes:" label — dim to match VU off-state so it doesn't stand out.
   Not VU-controlled, so set it via CSS to match DIM (0.45). */
span.jp-mix-names .mtitle {
    opacity: 0.45;
    margin-right: 0.35em;
}

/* Peak-hold marker on pipe separators — holds bright, drops fast like real gear.
   No CSS transition — JS drives the opacity at 60fps for instant snapping. */
.tfj-peak-hold {
    color: #fff !important;
}

/* --- Mix separators: lighter pipe with one-space gap either side --- */
span.jp-mix-names .mix-sep {
    color: rgba(255,255,255,0.35);
    padding: 0 0.35em;
    font-style: normal;
    text-decoration: none;
    letter-spacing: 0;
}
/* --- Mixes row: keep theme margin-top for vertical position --- */
#jp_container li.jp-playlist-current span.jp-mix-names,
#cf_resultset li.jp-playlist-current span.jp-mix-names {
    margin-top: -5px;
}

/* --- When LICENCE has been moved into the mixes row, make it flow inline --- */
li.jp-playlist-current .jp-new_row.has-licence {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
}
li.jp-playlist-current .jp-new_row.has-licence span.jp-mix-names {
    flex: 1 1 auto;
    min-width: 0;
}
li.jp-playlist-current .jp-new_row.has-licence span.jp-licence {
    /* Hidden — grid button replaces the old sprite */
    display: none !important;
}

/* --- Player row: breathing room below mixes/licence row --- */
li.jp-playlist-current div.track_container {
    padding-bottom: 5px !important;
}

/* --- Fix: keep rounded corners on hover (the <a> gets a bg-color on hover
       which covers the container's border-radius unless it inherits it) --- */
#jp_container li.jp-playlist-current div.track_container a {
    border-radius: inherit;
}

/* ===== BPM Sort Toggle ===== */
/* ── Desktop sticky search bar + column headers ────────── */
@media (min-width: 769px) {
    #cf_frontpage_search_form {
        position: sticky !important;
        top: 0;
        z-index: 101;
        background: #fff;
        padding-bottom: 6px;
    }
    #jp_head,
    #jp_head.affix-top,
    #jp_head.affix {
        position: sticky !important;
        top: 54px;             /* JS calibrates exact value */
        z-index: 100;
        background: #e9e9e9;
        box-shadow: 0 2px 4px rgba(0,0,0,0.12);
        /* Neutralise Bootstrap affix overrides */
        width: auto !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;  /* theme sets -40px which pulls tracks up under the sticky header */
        overflow: hidden !important;  /* clip the MAIN MIX dropdown that overflows to 60px */
        border-radius: 0 !important; /* sharp edges when sticky — rounded corners look "condensed" */
        border-bottom: 1px solid #d0d0d0;
    }
}
@media (max-width: 768px) {
    #jp_head,
    #jp_head.affix-top,
    #jp_head.affix {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
        margin: 0 0 -40px 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-shadow: none !important;
        border-bottom: none !important;
        border-radius: 8px !important;
        z-index: auto !important;
    }
    /* Filter clear X button — .pr loses position:relative below 640px,
       so anchor it to .filter_search instead */
    .filter_search { position: relative !important; }
}
.tfj-bpm-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: none;
    border: none;
    position: absolute;
    right: calc(var(--bpm-right, 29%) + 8px);
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    line-height: 1;
    opacity: 1;
}
.tfj-bpm-sort:hover {
    opacity: 1;
}
.tfj-bpm-sort.bpm-asc,
.tfj-bpm-sort.bpm-desc {
    opacity: 1;
}
.tfj-bpm-sort .bpm-label {
    font-size: inherit;
    font-weight: bold;
    text-transform: uppercase;
    color: #aaa;
    transition: color 0.2s ease;
}
.tfj-bpm-sort.bpm-asc .bpm-label,
.tfj-bpm-sort.bpm-desc .bpm-label {
    color: rgb(217, 0, 0);
}
.tfj-bpm-sort .bpm-arrow {
    font-size: 17px;
    color: #aaa;
    transition: color 0.2s ease, transform 0.2s ease;
    line-height: 1;
    margin-top: -1px;
}
.tfj-bpm-sort.bpm-asc .bpm-arrow {
    color: rgb(217, 0, 0);
}
.tfj-bpm-sort.bpm-desc .bpm-arrow {
    color: rgb(217, 0, 0);
}
.tfj-bpm-sort .bpm-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: inherit;
    transition: color 0.2s ease;
    vertical-align: middle;
    margin-top: -3px;
}
.tfj-bpm-sort.bpm-asc .bpm-icon,
.tfj-bpm-sort.bpm-desc .bpm-icon {
    color: rgb(217, 0, 0);
}
/* Fade-out effect for truncated descriptions */
#jp_container span.jp-track-description,
#cf_resultset span.jp-track-description {
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
}
/* Remove fade on current (expanded) track */
#jp_container li.jp-playlist-current span.jp-track-description,
#cf_resultset li.jp-playlist-current span.jp-track-description {
    -webkit-mask-image: none;
    mask-image: none;
}

/* v6.31: non-playing descriptions never wrap. Overflow fades out at the
   right edge; hovering slides the text along to reveal the hidden end
   (JS below). Playing track is untouched and still wraps. */
@media only screen and (min-width: 769px) {
    #jp_container:not(.cfplayer) li:not(.jp-playlist-current) span.jp-track-description {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
    }
    /* v6.32: only fade descriptions that are actually cut off (JS adds
       .tfj-desc-over). Ones that fit show in full with no fade. */
    #jp_container:not(.cfplayer) li:not(.jp-playlist-current) span.jp-track-description {
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
    #jp_container:not(.cfplayer) li:not(.jp-playlist-current) span.jp-track-description.tfj-desc-over {
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%) !important;
        mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%) !important;
    }
    /* v6.34: reserve the BPM strip only on rows where a BPM tag is showing */
    .bpm-sort-active span.jp-track-description,
    .bpm-filtered span.jp-track-description,
    #jp_container li.jp-playlist-current span.jp-track-description {
        --tfj-dresv: var(--tfj-bpmresv, 0px);
    }
    #jp_container:not(.cfplayer) li:not(.jp-playlist-current) span.jp-track-description.tfj-desc-scrolled {
        -webkit-mask-image: linear-gradient(to right, transparent 0, black 40px, black 100%) !important;
        mask-image: linear-gradient(to right, transparent 0, black 40px, black 100%) !important;
    }
}

/* Hide section dividers when BPM sort is active */
#jp_container.bpm-sorted .splittext {
    display: none !important;
}

/* --- Choon Finder: icons pushed to right end of top row --- */
#cf_resultset span.jp-track-actions {
    float: right !important;
}

/* ===== Desktop: Compact playing-track grid (all pages) ===== */
/* Narrow the playing track button grid to sit under the MAIN MIX column */
@media only screen and (min-width: 768px) {
    #jp_container .jp-playlist-current .tfj-desk-grid {
        width: 150px !important;
    }
    /* Hide old text sprites on playing track — grid replaces them */
    #jp_container .jp-playlist-current .jp-licence,
    #jp_container .jp-playlist-current .jp-cue-sheet {
        display: none !important;
    }
}

/* --- Hide waveform/play row on collapsed (non-current) tracks --- */
#jp_container li:not(.jp-playlist-current) span.jp-new_row,
#cf_resultset li:not(.jp-playlist-current) span.jp-new_row {
    display: none !important;
}

/* --- Hide "From the album" on non-playing tracks in playlist view (surplus) --- */
#jp_container.choonfinder:not(.cfplayer) li:not(.jp-playlist-current) .jp-track-description .additional {
    display: none !important;
}

/* --- "From the album" line: always one line, truncated if long --- */
#jp_container li.jp-playlist-current .jp-track-description .additional,
#cf_resultset li.jp-playlist-current .jp-track-description .additional {
    white-space: normal !important;
}
#jp_container li.jp-playlist-current .jp-track-description .additional .goalbum,
#cf_resultset li.jp-playlist-current .jp-track-description .additional .goalbum {
    display: inline !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}
/* Wrap the "From the album:" label + link in a nowrap container */
#jp_container li.jp-playlist-current .jp-track-description .album-line,
#cf_resultset li.jp-playlist-current .jp-track-description .album-line {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* --- Ghost waveform: nudge up a few pixels --- */
#jp_container span.jp-track-seek {
    background-position: 0% 15% !important;
}
#jp_container.cfplayer span.jp-track-seek {
    background-position: 0% 15% !important;
}

/* --- Mixes row: bulletproof single-line (high specificity override) --- */
/* Non-playing tracks: overflow hidden as normal */
#jp_container li:not(.jp-playlist-current) span.jp-mix-names,
#cf_resultset li:not(.jp-playlist-current) span.jp-mix-names,
#jp_container span.jp-mix-names,
#cf_resultset span.jp-mix-names {
    white-space: nowrap !important;
    overflow: hidden !important;
    max-height: none !important;
}
/* Playing track: nowrap so VU sweep makes sense */
#jp_container li.jp-playlist-current span.jp-mix-names,
#cf_resultset li.jp-playlist-current span.jp-mix-names {
    white-space: nowrap !important;
    overflow: hidden !important;
    max-height: none !important;
}

/* --- Share modal: balanced layout + wider URL input --- */
.fj_share_options {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 2.5rem;
}
.fj_share_options a.fj_share_facebook,
.fj_share_options a.fj_share_twitter {
    float: none !important;
    flex: 0 0 auto;
    width: 200px !important;
    margin: 0 !important;
}
.fj_sharetrack_label {
    width: 100% !important;
    float: none !important;
    clear: both;
    text-align: center;
    margin-top: 0.5rem;
}
input#sharetrack {
    width: 100%;
    max-width: 500px;
    padding: 6px 40px 6px 10px;
    font-size: 14px;
    border: 2px solid #ccc;
    border-radius: 6px;
    text-align: center;
    margin-top: 8px;
    box-sizing: border-box;
}
/* Copy-to-clipboard button inside the share URL input wrapper */
.tfj-share-url-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 500px;
}
.tfj-share-url-wrap input#sharetrack {
    width: 100%;
    max-width: none;
    padding-right: 44px;
}
.tfj-copy-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(calc(-50% + 4px));
    width: 24px;
    height: 24px;
    border: none;
    background: #e9e9e9;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    padding: 0;
}
.tfj-copy-btn:hover { background: #D90000; }
.tfj-copy-btn:hover svg { stroke: #fff; }
.tfj-copy-btn svg {
    width: 13px;
    height: 13px;
    stroke: #777;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.tfj-copy-btn.copied { background: #4CAF50; }
.tfj-copy-btn.copied svg { stroke: #fff; }

/* ===== BPM Labels — fixed column, vertically aligned ===== */
#jp_container li[id^="track_"] > div > a.jp-playlist-item {
    position: relative;
}
/* Composer: ensure full names visible on ≤2 composer tracks */
#jp_container span.jp-track-artist {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap;
}
/* Clip composer names ONLY on tracks with 3+ composers (JS adds .many-composers) */
#jp_container li.many-composers span.jp-track-artist {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
/* Current/playing track — keep composers on one line (no wrap) */
#jp_container li.jp-playlist-current span.jp-track-artist {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}
.tfj-bpm-tag {
    position: absolute;
    right: var(--bpm-right, 29%);
    top: 0;
    min-height: 30px;
    line-height: 30px;
    width: 70px;
    text-align: right;
    font-size: inherit;
    font-weight: 300;
    color: rgba(100,100,100,0.45);
    letter-spacing: 0.3px;
    pointer-events: auto;
    cursor: pointer;
    z-index: 1;
    transition: color 0.2s ease, font-weight 0.2s ease;
    white-space: nowrap;
    box-sizing: border-box;
    padding-right: 6px;
    display: none;
}
/* Show on the current/playing track — subtle ghost */
.jp-playlist-current .tfj-bpm-tag {
    display: block !important;
    color: rgba(255,255,255,0.35) !important;
    font-weight: 300 !important;
}
/* Show ALL when BPM-sorted — light grey */
.bpm-sort-active .tfj-bpm-tag {
    display: block;
    color: rgba(150,150,150,0.55);
    font-weight: 300;
}
/* Playing track stays bright when sorted */
.bpm-sort-active .jp-playlist-current .tfj-bpm-tag {
    display: block !important;
    color: #fff;
    font-weight: 700;
}
/* ===== Composer filter: Unfilter button ===== */
/* Hidden by default — shown when a composer filter is active */
@keyframes halPulse {
    0%   { box-shadow: 0 0 4px rgba(218,0,0,0.3), 0 0 8px rgba(218,0,0,0.15); }
    50%  { box-shadow: 0 0 12px rgba(218,0,0,0.7), 0 0 24px rgba(218,0,0,0.35); }
    100% { box-shadow: 0 0 4px rgba(218,0,0,0.3), 0 0 8px rgba(218,0,0,0.15); }
}
.tfj-unfilter-composer {
    display: none;
    cursor: pointer;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #DA0000;
    background: #fff;
    border: 1px solid rgba(218,0,0,0.3);
    border-radius: 7px;
    padding: 3px 10px;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    text-transform: uppercase;
    z-index: 20;
    animation: halPulse 2.5s ease-in-out infinite;
}
.tfj-unfilter-composer:hover {
    background: #f5f5f5;
    transform: scale(1.05);
    border-color: rgba(218,0,0,0.5);
}
.tfj-unfilter-composer:active {
    transform: scale(1.08);
}
/* When composer filter is active, show unfilter buttons */
.composer-filter-active .tfj-unfilter-composer {
    display: inline-block;
}
/* Playing bar version: sits in the composer column area */
/* Playing-bar unfilter: absolute inside the li, aligned to composer column + bottom grid row */
.composer-filter-active li.jp-playlist-current {
    position: relative;
}
.tfj-unfilter-composer.tfj-unfilter-playing {
    position: absolute;
    z-index: 25;
    font-size: 7px;
    padding: 2px 6px;
    border-radius: 5px;
    display: none;
    animation: halPulse 2.5s ease-in-out infinite;
}
.composer-filter-active li.jp-playlist-current .tfj-unfilter-playing {
    display: inline-block;
}
/* Bottom-of-listing version: row below the track list */
.tfj-unfilter-row {
    display: none;
    padding: 8px 0;
    text-align: left;
}
.composer-filter-active .tfj-unfilter-row {
    display: block;
}

/* ===== Mobile Mixes Row (below popup buttons) ===== */
.tfj-mob-mixes {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
    padding: 7px 8px 6px;       /* 7px above + 6px below the mixes text */
    white-space: nowrap;
    order: 12;
    width: 100%;
    box-sizing: border-box;
    line-height: 11px;
    max-height: 35px;           /* cap at 2 lines (2×11px + 7+6 padding) */
    overflow: hidden;
}
.tfj-mob-mixes .mob-mix-label {
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-right: 0.4em;
    text-transform: uppercase;
}
.tfj-mob-mixes .mob-mix-name {
    display: inline;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.tfj-mob-mixes .mob-mix-name.mob-mix-active {
    /* Currently playing mix — VU drives opacity on its chars */
}
.tfj-mob-mixes .mob-mix-name {
    color: #fff;
}
.tfj-mob-mixes .mob-mix-name:active {
    opacity: 0.85;
}
.tfj-mob-mixes .mob-mix-sep {
    color: #fff;
    padding: 0 0.4em;
    font-size: 9px;
    font-style: normal;
    text-decoration: none;
}
/* Hide on non-playing/non-current tracks */
.fj_alt-mixes-body .jp-player-play:not(.playing) .tfj-mob-mixes { display: none !important; }
#jp_container li:not(.jp-playlist-current) .tfj-mob-mixes { display: none !important; }
/* Tighten gap below mixes row to red box edge */
.fj_alt-mixes-body .jp-player-play.playing .tfj-mob-mixes { margin-bottom: 0; }
.fj_alt-mixes-body .jp-player-play.playing { padding-bottom: 0 !important; }

/* Show ALL when BPM-filtered (click-to-filter) */
.bpm-filtered .tfj-bpm-tag {
    display: block;
    color: rgba(150,150,150,0.55);
    font-weight: 300;
}
.bpm-filtered .jp-playlist-current .tfj-bpm-tag {
    display: block !important;
    color: #fff;
    font-weight: 700;
}
/* CF-specific: BPM sits under the ORDER BY dropdown */
#jp_container.cfplayer .tfj-bpm-tag {
    right: 20% !important;
}

@media (max-width: 768px) {
    /* Mobile uses jp-mob-bpm instead */
    .tfj-bpm-tag { display: none !important; }

    /* Waveform: nudge down a few px on mobile portrait */
    #jp_container span.jp-track-seek {
        margin-top: 4px !important;
    }

    /* Track number, title & composer: nudge up on mobile */
    #jp_container li.jp-playlist-current div.track_container {
        padding-top: 2px !important;
        margin-top: -4px !important;
    }
    /* BPM: hide while still in composer to prevent flash/jump before JS moves it */
    #jp_container .jp-mob-composer .jp-mob-bpm {
        opacity: 0 !important;
        position: absolute !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
    /* BPM on title line — JS moves span into .jp-mob-title, float keeps it right */
    #jp_container .jp-mob-title .jp-mob-bpm {
        float: right !important;
        margin-left: 6px !important;
        margin-right: 6px !important;
        position: static !important;
        animation: bpmFadeUp 0.6s ease-out forwards !important;
    }
    @keyframes bpmFadeUp {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* MAIN MIX dropdown: shrink to content width so it sits right, away from BPM */
    #jp_head .bb-custom-select-container.bb-customSelect {
        width: auto !important;
        min-width: 0 !important;
    }
    #jp_head select.jp-choose-mix {
        width: auto !important;
        min-width: 0 !important;
        padding-right: 4px;
    }
    /* Hide the select-arrow chevron on mobile */
    #jp_head .select-arrow {
        display: none !important;
    }
}

/* ===== Choon Finder: Landscape Mobile Fix ===== */

/* iPhone landscape is typically 667–926px wide × 375–428px tall.
   The theme's column widths + 80px alpha-sidebar padding squeeze the
   description column to almost nothing.  Fix: shrink alpha sidebar,
   reduce padding, hide MP3/WAV buttons, and rebalance columns.       */
@media screen and (max-height: 500px) and (orientation: landscape) and (min-width: 600px) {

    /* 1. Shrink the alphabet sidebar to give results more room */
    #choonfinder #cf_resultset {
        padding-right: 50px !important;
    }
    #choonfinder #cf_resultset #jp_alpha {
        right: 5px !important;
    }
    #choonfinder #cf_resultset #jp_alpha a {
        width: 32px !important;
        height: 20px !important;
        line-height: 20px !important;
        font-size: 9px !important;
        margin-bottom: 3px !important;
        border-radius: 4px !important;
    }

    /* 2. Hide MP3/WAV download buttons — too wide for landscape mobile */
    #choonfinder #jp_container.cfplayer span.jp-track-actions span.jp-download {
        display: none !important;
    }

    /* 3. Rebalance columns: more room for description */
    #choonfinder #jp_container.cfplayer span.jp-track-title {
        width: 30% !important;
    }
    #choonfinder #jp_container.cfplayer span.jp-track-description {
        width: 50% !important;
    }
    #choonfinder #jp_container.cfplayer span.jp-track-actions {
        width: 20% !important;
    }

    /* 4. Header columns to match */
    #choonfinder #jp_head.cfplayer span.jp-track-title {
        width: 30% !important;
    }
    #choonfinder #jp_head.cfplayer span.jp-track-description {
        width: 50% !important;
    }
    #choonfinder #jp_head.cfplayer span.jp-track-actions {
        width: 20% !important;
    }

    /* 5. Results container: use more vertical space */
    #choonfinder #cf_resultset #jp_container {
        height: calc(100vh - 120px) !important;
    }

    /* 6. Info & Versions fancybox popup: ~⅔ width, centred */
    .fancybox-wrap {
        width: 66vw !important;
        max-width: 66vw !important;
        left: 17vw !important;
        top: 5px !important;
        max-height: calc(100vh - 10px) !important;
    }
    .fancybox-skin {
        padding: 10px !important;
    }
    .fancybox-inner {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 40px) !important;
        overflow: auto !important;
    }
    .fj_alt-mixes-body h3 {
        font-size: 14px !important;
        margin: 0 0 8px 0 !important;
    }
    .fj_alt-mixes-body table.mixinfo th,
    .fj_alt-mixes-body table.mixinfo td {
        font-size: 12px !important;
        padding: 2px 6px !important;
    }

    /* 7. Exact-match "Aha!" overlay: stretch to full cf_resultset width + taller */
    #jp_container li:first-child:before,
    #jp_container li.track_recommended:before {
        width: calc(100% + 105px) !important;
        margin-left: -30px !important;
        box-sizing: border-box !important;
        padding-bottom: 8px !important;
    }

    /* 8. CUE SHEET button in mixes popup: align right with MP3/WAV column */
    .fj_alt-mixes-body span.jp-cue-sheet {
        float: right !important;
        margin-top: -6px !important;
        margin-right: 2px !important;
        clear: none !important;
    }

    /* 9. Time counter in mixes popup: nudge up 2px and left 2px */
    .fj_alt-mixes-body .jp-track-time {
        position: relative !important;
        top: -2px !important;
        left: -2px !important;
    }
}

/* ===== Popup Version Buttons: Match Main Player Mobile Style ===== */

/* --- Portrait phones --- */
@media only screen and (max-width: 767px) {
    .fj_alt-mixes-body .jp-player-play .jp-track-actions.tfj-popup-hidden { display: none !important; }
    .fj_alt-mixes-body .jp-player-play .jp-cue-sheet.tfj-popup-hidden { display: none !important; }

    /* Button rows — shift slightly right of dead centre per Tim's pref */
    .fj_alt-mixes-body .tfj-popup-actions {
        display: flex !important;
        gap: 4px;
        padding: 4px 4px 2px;
        width: 100%;
        margin-left: -12px !important;
        box-sizing: border-box !important;
        order: 10;
    }
    .fj_alt-mixes-body .tfj-popup-bottom {
        display: flex !important;
        gap: 4px;
        padding: 2px 4px 4px;
        width: 100%;
        margin-left: -12px !important;
        box-sizing: border-box !important;
        order: 11;
    }
    .fj_alt-mixes-body .jp-player-play:not(.playing) .tfj-popup-actions,
    .fj_alt-mixes-body .jp-player-play:not(.playing) .tfj-popup-bottom { display: none !important; }

    /* Portrait: MP3/WAV far right, others left */
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-pl  { order: 1 !important; }
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-cue { order: 2 !important; }
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-sh  { order: 3 !important; }
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-mp3 { order: 4 !important; }
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-wav { order: 5 !important; }
}

/* --- Landscape phones — keep desktop layout, just add pill buttons --- */
@media only screen and (max-height: 500px) and (orientation: landscape) {
    .fj_alt-mixes-body .jp-player-play .jp-track-actions.tfj-popup-hidden { display: none !important; }
    .fj_alt-mixes-body .jp-player-play .jp-cue-sheet.tfj-popup-hidden { display: none !important; }

    .fj_alt-mixes-body .tfj-popup-actions {
        display: flex !important;
        gap: 6px;
        padding: 6px 6px 3px;
        width: 100%;
        box-sizing: border-box !important;
        clear: both;
    }
    .fj_alt-mixes-body .tfj-popup-bottom {
        display: flex !important;
        gap: 6px;
        padding: 3px 6px 6px;
        width: 100%;
        box-sizing: border-box !important;
        clear: both;
    }
    .fj_alt-mixes-body .jp-player-play:not(.playing) .tfj-popup-actions,
    .fj_alt-mixes-body .jp-player-play:not(.playing) .tfj-popup-bottom { display: none !important; }
}

/* --- Shared pill button appearance (all viewports) — matches resting album/playlist buttons --- */
.fj_alt-mixes-body .tfj-popup-btn {
        flex: 1 1 0;
        background: #DA0000 !important;
        color: rgba(255,255,255,0.45) !important;
        padding: 0 5px;
        border-radius: 7px;
        font-size: 8px;
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: 1px solid rgba(255,255,255,0.12) !important;
        white-space: nowrap;
        transition: transform 0.15s ease, color 0.2s ease, border-color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        min-height: 24px;
        letter-spacing: 0.3px;
        box-sizing: border-box;
        text-decoration: none;
    }
    .fj_alt-mixes-body .tfj-popup-btn:hover {
        background: #E52020 !important;
        color: #fff !important;
        border-color: rgba(255,255,255,0.4) !important;
        transform: scale(1.05);
    }
    .fj_alt-mixes-body .tfj-popup-btn:active {
        background: #E52020 !important;
        color: #fff !important;
        border-color: rgba(255,255,255,0.5) !important;
        transform: scale(1.08);
    }
    .fj_alt-mixes-body .tfj-popup-btn .tfj-popup-icon {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
    }
    .fj_alt-mixes-body .tfj-popup-btn .tfj-popup-icon svg {
        display: block;
        pointer-events: none;
        opacity: 0.45;
        transition: opacity 0.2s ease;
    }
    .fj_alt-mixes-body .tfj-popup-btn:hover .tfj-popup-icon svg {
        opacity: 1;
    }
    .fj_alt-mixes-body .tfj-popup-btn .tfj-popup-lbl {
        position: relative;
        top: 1px;
    }
    /* Hover-only label: hidden by default, crossfade with icon */
    .fj_alt-mixes-body .tfj-popup-btn .tfj-popup-hovlbl {
        position: absolute;
        left: 50%;
        top: calc(50% - 4px);
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: opacity 0.2s ease;
        white-space: nowrap;
        font-size: 7px;
        font-weight: 600;
        letter-spacing: 0.3px;
    }

    .fj_alt-mixes-body .tfj-popup-bottom-btn {
        flex: 1 1 0;
        background: #DA0000;
        color: rgba(255,255,255,0.45);
        padding: 1px 0;
        border-radius: 7px;
        font-size: 8px;
        font-weight: 700;
        letter-spacing: 0.4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 1px solid rgba(255,255,255,0.12);
        text-transform: uppercase;
        transition: transform 0.15s ease, color 0.2s ease, border-color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        min-height: 22px;
    }
    .fj_alt-mixes-body .tfj-popup-bottom-btn:hover {
        background: #E52020;
        color: #fff;
        border-color: rgba(255,255,255,0.4);
        transform: scale(1.05);
    }
.fj_alt-mixes-body .tfj-popup-bottom-btn:active { transform: scale(1.05); background: #E52020; color: #fff; }
.fj_alt-mixes-body .tfj-popup-bottom-btn svg { flex-shrink: 0; }

/* Hide forward/rewind skip buttons globally */
.jp-track-skippers {
    display: none !important;
}

/* Popup BPM tag — no longer used (replaced by tfj-popup-bpm-tag inline) */

/* Desktop + tablets + landscape phones: popup button grid on right, shortened waveform */
@media only screen and (min-width: 768px) {
    /* Make playing track position:relative for absolute grid */
    .fj_alt-mixes-body .jp-player-play.playing {
        position: relative !important;
    }
    /* BPM in popup — now inline inside jp-track-time, styled via JS */
    /* Shorten waveform + timer area to leave room for button grid */
    .fj_alt-mixes-body .jp-player-play.playing .jp-new_row {
        width: 80% !important;
        max-width: 80% !important;
        position: relative !important;
    }
    .fj_alt-mixes-body .jp-player-play.playing .jp-track-seek {
        max-width: 78% !important;
    }
    /* Button grid: absolute positioned on the right under artwork */
    .fj_alt-mixes-body .jp-player-play.playing .tfj-popup-actions {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 1fr 1fr;
        gap: 3px;
        position: absolute;
        right: 6px;
        top: 4px;
        bottom: 4px;
        width: 148px;
        box-sizing: border-box;
    }
    .fj_alt-mixes-body .jp-player-play.playing .tfj-popup-bottom {
        display: none !important;
    }
    /* Hide on non-playing tracks */
    .fj_alt-mixes-body .jp-player-play:not(.playing) .tfj-popup-actions,
    .fj_alt-mixes-body .jp-player-play:not(.playing) .tfj-popup-bottom {
        display: none !important;
    }
    /* Hide old action icons + cue sheet */
    .fj_alt-mixes-body .jp-player-play .jp-track-actions.tfj-popup-hidden {
        display: none !important;
    }
    .fj_alt-mixes-body .jp-player-play .jp-cue-sheet.tfj-popup-hidden {
        display: none !important;
    }
    /* Popup pill buttons: grid sizing */
    .fj_alt-mixes-body .tfj-popup-btn {
        min-height: 0;
        font-size: 8px;
        border-radius: 7px;
        gap: 3px;
        padding: 0 4px;
        justify-content: center;
    }
    /* Desktop: Row 1 [MP3][WAV] on top, Row 2 [+][CUE][Share] below */
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-mp3 { order: 1; grid-column: span 3; }
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-wav { order: 2; grid-column: span 3; }
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-pl  { order: 3; grid-column: span 2; position: relative; }
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-cue { order: 4; grid-column: span 2; position: relative; }
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-sh  { order: 5; grid-column: span 2; position: relative; }
    /* WAV icon on right side (like main player) */
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-wav { flex-direction: row-reverse; }
    /* Row 2 icon-only buttons: icon centered, crossfade to label on hover */
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-pl .tfj-popup-icon,
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-cue .tfj-popup-icon,
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-sh .tfj-popup-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(1.0);
        opacity: 0.7;
        transition: opacity 0.2s ease;
    }
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-pl .tfj-popup-icon svg,
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-cue .tfj-popup-icon svg,
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-sh .tfj-popup-icon svg {
        opacity: 1 !important;
    }
    /* Bottom row circle fill colour */
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-pl .tfj-popup-icon svg circle,
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-cue .tfj-popup-icon svg circle,
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-sh .tfj-popup-icon svg circle {
        fill: #F2897B !important;
    }
    /* Hover: icon fades out, label fades in */
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-pl:hover .tfj-popup-icon,
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-cue:hover .tfj-popup-icon,
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-sh:hover .tfj-popup-icon {
        opacity: 0 !important;
    }
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-pl:hover .tfj-popup-hovlbl,
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-cue:hover .tfj-popup-hovlbl,
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-sh:hover .tfj-popup-hovlbl {
        opacity: 1 !important;
        color: #fff !important;
    }
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-pl:hover,
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-cue:hover,
    .fj_alt-mixes-body .tfj-popup-btn.tfj-popup-sh:hover {
        background: #E52020 !important;
    }
}

/* ===== v5.19  Mobile portrait: track description under waveform ===== */
/* Hidden by default — only shown on mobile portrait */
.jp-mob-description {
    display: none !important;
}
@media only screen and (max-width: 767px) {
    /* --- Timer: tuck at end of waveform line --- */
    #jp_container li.jp-playlist-current .jp-new_row span.jp-track-time {
        position: absolute !important;
        top: 12px !important;
        right: 0 !important;
        float: none !important;
        font-size: 9px !important;
        width: auto !important;
        text-align: right !important;
    }
    /* --- Waveform: stretch to fill space up to the timer --- */
    #jp_container li.jp-playlist-current .jp-progress {
        display: inline-block !important;
        vertical-align: top !important;
        margin-top: 8px !important;
        animation: waveformFadeUp 0.5s ease-out forwards !important;
    }
    #jp_container li.jp-playlist-current .jp-play_pause {
        margin-top: 8px !important;
        animation: waveformFadeUp 0.5s ease-out forwards !important;
    }
    @keyframes waveformFadeUp {
        from { opacity: 0; transform: translateY(4px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    #jp_container li.jp-playlist-current .jp-track-seek {
        width: calc(100vw - 140px) !important;   /* scales with viewport: ~250px@390, ~290px@430, no cap */
    }

    /* --- Description: single-line ticker (JS-driven transform) --- */
    #jp_container li.jp-playlist-current .jp-mob-description {
        display: block !important;
        width: 100%;
        box-sizing: border-box;
        padding: 3px 0 2px 0;
        margin-top: 2px;
        font-size: 11px;
        line-height: 1.35;
        color: rgba(255,255,255,0.7);
        overflow: hidden;
        white-space: nowrap !important;
    }
    #jp_container li.jp-playlist-current .jp-mob-description .mob-desc-inner {
        display: inline-block;
        white-space: nowrap;
        will-change: transform;
        transform: translateX(100vw); /* start off-screen right until ticker takes over */
    }
    /* Reserve description space BEFORE JS creates the element —
       margin-top on buttons disappears once description div is present */
    #jp_container li.jp-playlist-current .jp-mob-actions {
        margin-top: 22px;
    }
    #jp_container li.jp-playlist-current .jp-mob-description + .jp-mob-actions {
        margin-top: 0;
    }
    /* Hide desktop LICENCE THIS TRACK sprite + CUE SHEET on mobile
       (already covered by the pill buttons in jp-mob-bottom) */
    #jp_container span.jp-licence,
    #jp_container .jp-new_row.has-licence span.jp-licence {
        display: none !important;
    }
    #jp_container .jp-track-options span.jp-cue-sheet {
        display: none !important;
    }
}

/* --- Video/GIF cover-image: match img positioning on mobile --- */
/* Theme has .single-album #intro video.cover-image with position:absolute, top:78px,
   width:166px for desktop. On mobile we need position:relative, top:0, width:120px
   to match the static img.cover-image layout. Must match theme specificity. */
@media (max-width: 430px) {
    .single-album #intro video.cover-image,
    .single-album #intro .cover-image[src$=".gif"] {
        position: relative !important;
        top: 0px !important;
        right: auto !important;
        bottom: auto !important;
        width: 120px !important;
        height: 120px !important;
        margin-top: 20px !important;
    }
}

/* --- Album artwork entrance: zoom-bounce animation on page load --- */
@keyframes artEntrance {
    0%   { transform:scale(0); opacity:0; }
    55%  { transform:scale(1.06); opacity:1; }
    75%  { transform:scale(0.97); }
    88%  { transform:scale(1.02); }
    100% { transform:scale(1); }
}
img.cover-image.art-entering,
video.cover-image.art-entering {
    animation: artEntrance 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

/* --- Album Blurb chevron glow pulse (mobile only) --- */
@keyframes blurbGlow {
    0%   { opacity: 0.5; text-shadow: none; }
    50%  { opacity: 1;   text-shadow: 0 0 8px rgba(217,0,0,0.6), 0 0 16px rgba(217,0,0,0.3); }
    100% { opacity: 0.5; text-shadow: none; }
}
@media (max-width: 767px) {
    #js-album-description {
        animation: blurbGlow 2s ease-in-out infinite;
    }
    #js-album-description .select-arrow {
        border-color: transparent currentColor currentColor transparent !important;
    }
}

/* --- Album artwork prev/next nav arrows (flanking artwork, mobile only) --- */
.tfj-art-nav-wrap { display: none; }
@media (max-width: 430px) {
  .tfj-art-nav-wrap {
      display: block;
      position: absolute;
      top: 0; left: 0; right: 0;
      pointer-events: none;
      /* v6.27: stay invisible until we have measured the real artwork, so the
         arrows can never be seen sitting on top of the cover. */
      opacity: 0;
      transition: opacity 0.2s ease;
  }
  .tfj-art-nav-wrap.tfj-art-nav-ready { opacity: 1; }
  .tfj-art-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      display: flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      text-decoration: none;
      color: #DA0000;
      pointer-events: auto;
  }
  .tfj-art-nav-circle {
      width: var(--tfj-nav-size, 32px); height: var(--tfj-nav-size, 32px);
      border-radius: 50%;
      border: 1.5px solid #DA0000;
      display: flex; align-items: center; justify-content: center;
      opacity: 0.6;
      transition: opacity 0.15s;
  }
  .tfj-art-nav:active .tfj-art-nav-circle { opacity: 1; }
  .tfj-art-nav-circle svg {
      width: calc(var(--tfj-nav-size, 32px) * 0.56);
      height: calc(var(--tfj-nav-size, 32px) * 0.56);
      fill: none; stroke: #DA0000;
      stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  }
  /* Hide the existing sprite arrows around catalogue number */
  .text small a[title="Previous album"],
  .text small a[title="Next album"] { display: none !important; }
}