/* --- Estilos del Sticky Player --- */
            #sticky-audio-player {
                position: fixed; bottom: 0; left: 0; width: 100%;
                height: 68px; z-index: 9999; display: none; padding: 0 20px; box-sizing: border-box;
                font-family: Arial, sans-serif; opacity: 0; transform: translateY(500px); transition: opacity 0.4s ease, transform 0.4s ease;
            }
            #sticky-audio-player.active { display: flex; opacity: 1; transform: translateY(0); }
            #sticky-audio-player.hidden { transform: translateY(150px); opacity: 0; }
            .player-container { display: flex; align-items: center; justify-content: space-between; width: 100%; }
            .player-section-left { display: flex; align-items: center; flex-shrink: 0; width: 250px; gap: 10px; }
            .player-album-art { width: 60px; height: 60px; object-fit: cover; }
            .player-info-container { display: flex; flex-direction: column; justify-content: center; height: 60px; }
            .player-info-container h4 { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
            .player-info-container .track-genre { font-size: 12px; font-weight: 700; text-transform: uppercase; }
            .player-section-center { 
                display: flex; 
                align-items: center; 
                flex-grow: 1; 
                flex-shrink: 1;
                gap: 15px; 
                min-width: 0; /* Allow flex item to shrink below content size */
                transition: flex-grow 0.25s ease-out;
            }
            .player-metadata-box { border: 1px solid #333; border-radius: 4px; padding: 5px 10px; font-size: 12px; font-weight: 500; color: #fff; }
            .player-note-box { width: 40px; text-align: center; flex-shrink: 0; }
            .player-controls { display: flex; align-items: center; gap: 8px; }
            .player-controls .control-button { cursor: pointer; }
            .player-controls .prev-button svg, .player-controls .next-button svg { width: 22px; height: 22px; vertical-align: middle; }
            .player-controls .main-play-pause-button-container { position: relative; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; }
            .player-controls .main-play-pause-button-container svg { position: absolute; width: 40px; height: 40px; }
            .player-controls .main-play-pause-button-container .pause-icon { display: none; }
            .player-controls .main-play-pause-button-container .loader-icon { display: none; width: 25px; height: 25px;}
            #sticky-audio-player.is-playing .main-play-pause-button-container .play-icon { display: none; }
            #sticky-audio-player.is-playing .main-play-pause-button-container .pause-icon { display: block; }
            #sticky-audio-player.is-loading .main-play-pause-button-container .play-icon { display: none; }
            #sticky-audio-player.is-loading .main-play-pause-button-container .pause-icon { display: none; }
            #sticky-audio-player.is-loading .main-play-pause-button-container .loader-icon { display: block; }
            .player-controls .control-button:hover svg { fill: #ccc; }
            .player-waveform-wrapper { display: flex; align-items: center; flex-grow: 1; gap: 10px; }
            .player-time { font-size: 14px; font-weight: 700; width: 40px; text-align: center; flex-shrink: 0; }
            #player-current-time { color: #fff; }
            #player-total-time { color: #515151; }
            #player-waveform { position: relative; flex-grow: 1; height: 60px; border-radius: 5px; cursor: pointer; }
            .player-section-right { flex-shrink: 0; width: auto; display: flex; justify-content: flex-end; align-items: center; gap: 15px; }
            .add-to-cart-button { align-items: center; border-radius: 100px; color: #fff!important; font-weight:600!important; cursor: pointer; display: flex; font-size: 12px; font-weight: 500; justify-content: center; min-width: 84px; padding: 0 16px; height: 30px; text-decoration: none; transition: background-color 0.3s ease; }
            .player-volume-container { 
                position: relative; 
                display: flex; 
                align-items: center; 
                z-index: 1;
            }
            .volume-icon { 
                width: 24px; 
                height: 24px; 
                cursor: pointer; 
                transition: fill 0.2s ease;
                position: relative;
                z-index: 2;
            }
            /* Volume slider wrapper - horizontal expansion animation (left to right) */
            .volume-slider-wrapper { 
                /* position: absolute; */
                display: flex;
                align-items: center;
                width: 0;
                opacity: 0;
                visibility: hidden;
                transition: width 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out;
                pointer-events: none;
                overflow: hidden;
                white-space: nowrap;
                flex-shrink: 0;
                margin-left: 10px; /* Space between icon and slider */
                bottom: 100%;
                /* margin-bottom: 10px; */
                z-index: 1000;
                left: 0;
            }
            
            .volume-slider-wrapper.show {
                width: 100px;
                opacity: 1;
                visibility: visible;
                pointer-events: auto;
                height: 40px;
            }
            
            /* Volume slider inside wrapper - ensure it fits */
            .volume-slider-wrapper input[type="range"] {
                width: 100%;
                min-width: 100px;
                border-radius: 15px;
            }
            .close-player-button { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; background-color: transparent; transition: background-color 0.3s ease; margin-left: 5px; }
            .close-player-button svg { width: 20px; height: 20px; transition: color 0.3s ease; }
            .close-player-button:hover { background-color: rgba(255, 255, 255, 0.1); }
            .close-player-button:hover svg { color: #fff; }
            .add-to-cart-button.added-to-cart { cursor: default; pointer-events: none; }
            .add-to-cart-button.added-to-cart svg { width: 15px; height: 15px; fill: #fff; margin-right: 5px; }
            
            /* RESPONSIVE */
            @media (max-width: 768px) {
                #sticky-audio-player { height: 50px; padding: 0 10px; }
                .player-container { flex-wrap: nowrap; gap: 10px; }
                .player-section-left { width: auto; flex-shrink: 1; min-width: 0; }
                .player-album-art { width: 40px; height: 40px; }
                .player-info-container h4 { font-size: 13px; }
                .player-info-container .track-genre { font-size: 10px; }
                .player-section-center { display: flex; align-items: center; flex-grow: 1; gap: 5px; }
                .prev-button, .next-button { display: none !important; }
                .player-waveform-wrapper, .player-volume-container, .close-player-button { display: none !important; }
                .player-metadata-box { padding: 3px 6px; font-size: 10px; }
                .player-note-box { width: 30px; }
                .player-controls { gap: 5px; }
                .player-controls .main-play-pause-button-container { width: 30px; height: 30px; }
                .player-controls .main-play-pause-button-container svg { width: 30px; height: 30px; }
                .player-section-right { width: auto; justify-content: flex-end; gap: 10px; }
                .add-to-cart-button { min-width: 60px; height: 25px; padding: 0 10px; font-size: 10px; }
            }
            /* Volume slider track - webkit (Chrome, Safari, Edge) */
            .volume-slider-wrapper input[type=range]::-webkit-slider-runnable-track {
                width: 100%;
                height: 3px;
                cursor: pointer;
                box-shadow: none;
                background: transparent !important;
                border-radius: 15px;
                border: 0 solid #fff;
            }
            
            /* Volume slider thumb - webkit */
            .volume-slider-wrapper input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                margin-top: -7px; /* Centers thumb on the track */
                background-color: #808080;
                border-radius: 0.5rem;
                height: 1rem;
                width: 1rem;
            }

            .volume-slider-wrapper input[type="range"]:focus::-webkit-slider-thumb {
                outline: 3px solid #808080;
                outline-offset: 0.125rem;
            }
            
            /* Volume slider track - Firefox */
            .volume-slider-wrapper input[type=range]::-moz-range-track {
                width: 100%;
                height: 3px;
                cursor: pointer;
                background: transparent !important;
                border-radius: 15px;
                border: 0;
            }
            
            /* Volume slider thumb - Firefox */
            .volume-slider-wrapper input[type=range]::-moz-range-thumb {
                background-color: #808080;
                border-radius: 0.5rem;
                height: 1rem;
                width: 1rem;
                border: 0;
            }