/* Sticky Player */
#wavestick-player.wavestick-player{
  --ws-player-bottom: 16px;
  position:fixed;left:16px;right:16px;bottom:16px;z-index:999999;
  border:1px solid var(--ws-player-border, rgba(255,255,255,.08));
  border-radius:18px;box-shadow:0 12px 34px rgba(0,0,0,.55);
  transform:translateY(120%);transition:transform .28s ease;
  height:var(--ws-sticky-h,86px);
  padding:10px 12px;
  box-sizing:border-box;color:#fff; overflow:hidden;
  background:var(--ws-player-bg, transparent);
}
#wavestick-player.wavestick-player.is-open{transform:translateY(0)}
#wavestick-player.wavestick-player.is-fullwidth{
  --ws-player-bottom: 0px;
  left:0;right:0;bottom:0;border-radius:0;border-left:0;border-right:0;border-bottom:0;
  padding:12px 16px;
}


/* Side toggle handle that sticks out */
#wavestick-player .ws-side-toggle{
  position:absolute;
  left:-18px;
  top:50%;
  transform:translateY(-50%);
  width:36px;height:58px;
  border-radius:var(--ws-wave-radius,14px);
  border:1px solid var(--ws-player-border, rgba(255,255,255,.14));
  background:rgba(255,255,255,.10);
  cursor:pointer;
  z-index:8;
}
#wavestick-player .ws-side-toggle:hover{background:rgba(255,255,255,.16)}
#wavestick-player .ws-side-toggle:before{
  content:'';
  position:absolute;left:50%;top:50%;
  width:12px;height:12px;
  transform:translate(-50%,-50%) rotate(45deg);
  border-right:2px solid rgba(255,255,255,.85);
  border-bottom:2px solid rgba(255,255,255,.85);
  opacity:.9;
}
#wavestick-player/*collapsed_removed*/ .ws-side-toggle:before{
  transform:translate(-50%,-50%) rotate(225deg);
}

#wavestick-player .ws-overlay{
  position:absolute;inset:-20px;z-index:1;pointer-events:none;
  background-size:cover;background-position:center;filter:saturate(1.05) contrast(1.02);
  opacity:0;
}
#wavestick-player .ws-tint{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:#000;opacity:0;
}
#wavestick-player .ws-inner, #wavestick-player .ws-inner *{position:relative;z-index:3}

.ws-inner{display:grid;grid-template-columns:64px 1fr 28px;gap:12px;align-items:center;height:100%}
.ws-cover{width:56px;height:56px;border-radius: var(--ws-cover-radius,16px);overflow:hidden;overflow:hidden;background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.10)}
.ws-mid{min-width:0}
.ws-topline{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0}
.ws-meta{min-width:160px;max-width:360px}
.ws-title{font-weight:900;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-artist{color:rgba(255,255,255,.70);font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-time{color:rgba(255,255,255,.84);font-size:12px;min-width:92px}

.ws-transport{display:flex;align-items:center;gap:10px}
.ws-btn{
  width:var(--ws-sticky-btn-size,38px);height:var(--ws-sticky-btn-size,38px);border-radius:var(--ws-btn-radius,12px);border:1px solid var(--ws-btn-border, rgba(255,255,255,.10));
  background:var(--ws-control-bg, rgba(255,255,255,.06));
  color:var(--ws-control-text, #fff);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.ws-btn:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.10)}
.ws-btn-primary{border-color:rgba(255,255,255,.22)}

/* Toggle buttons (repeat/shuffle) */
.ws-btn.ws-toggle-on{
  border-color: var(--ws-accent);
  box-shadow: 0 0 0 3px rgba(76,175,80,.18);
}

/* Shuffle: greyed out when OFF, solid white when ON */
#wsShuffleBtn{
  color: rgba(255,255,255,.35);
}
#wsShuffleBtn.ws-toggle-on{
  color: #fff;
}

/* Main play/pause in sticky player can be sized independently */
#wsPlayPause{
  width:var(--ws-main-play-size, var(--ws-sticky-btn-size,38px));
  height:var(--ws-main-play-size, var(--ws-sticky-btn-size,38px));
}

.ws-visual-inline{
  display:flex;align-items:center;gap:10px;min-width:220px;flex:1 1 280px;
}
.ws-wave{
  flex:1 1 auto;height:44px;border-radius:var(--ws-wave-radius,14px);background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);overflow:hidden;display:block;
}
.ws-progress{flex:1 1 auto; min-width:220px}
.ws-progress input[type="range"]{width:100%; height:28px}

/* Progress range styling (no dot thumb) */
.ws-progress input[type="range"]{
  -webkit-appearance:none; appearance:none;
  background:transparent; cursor:pointer;
}
.ws-progress input[type="range"]::-webkit-slider-runnable-track{
  height:10px; border-radius:999px;
  background: linear-gradient(to right,
    var(--ws-progress-color,var(--ws-accent,#4CAF50)) 0%,
    var(--ws-progress-color,var(--ws-accent,#4CAF50)) var(--ws-range-pct,0%),
    var(--ws-progress-bg,rgba(255,255,255,.12)) var(--ws-range-pct,0%),
    var(--ws-progress-bg,rgba(255,255,255,.12)) 100%
  );
}
.ws-progress input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:0; height:0; border:0;
  background:transparent; box-shadow:none;
}
.ws-progress input[type="range"]::-moz-range-track{
  height:10px; border-radius:999px;
  background: linear-gradient(to right,
    var(--ws-progress-color,var(--ws-accent,#4CAF50)) 0%,
    var(--ws-progress-color,var(--ws-accent,#4CAF50)) var(--ws-range-pct,0%),
    var(--ws-progress-bg,rgba(255,255,255,.12)) var(--ws-range-pct,0%),
    var(--ws-progress-bg,rgba(255,255,255,.12)) 100%
  );
}
.ws-progress input[type="range"]::-moz-range-thumb{
  width:0; height:0; border:0;
  background:transparent; box-shadow:none;
}


/* Neutral icon link (for cart) */
.ws-icon-link{
  margin-left:auto;
  width:var(--ws-sticky-btn-size,38px);height:var(--ws-sticky-btn-size,38px);
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--ws-btn-radius,12px);
  border:1px solid var(--ws-player-border, rgba(255,255,255,.12));
  background:var(--ws-control-bg, rgba(255,255,255,.06));
  color:var(--ws-control-text, #fff);
  text-decoration:none;
}
.ws-icon-link:hover{border-color:var(--ws-player-border, rgba(255,255,255,.22));background:rgba(255,255,255,.10)}

/* Volume: icon-only (cycles 25/50/100) */
.ws-vol{display:flex;align-items:center;gap:8px}
.ws-vol-btn{width:var(--ws-sticky-btn-size,38px);height:var(--ws-sticky-btn-size,38px)}

/* Play buttons (icon-only) */
.wavestick-load-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--ws-product-play-size, var(--ws-main-play-size,44px));
  height:var(--ws-product-play-size, var(--ws-main-play-size,44px));
  border-radius:var(--ws-btn-radius,999px);
  background:var(--ws-playbtn-bg,#111827);
  border:1px solid var(--ws-playbtn-border,rgba(255,255,255,.10));
  color:var(--ws-playbtn-text,#fff);cursor:pointer;
}
.wavestick-load-btn:hover{filter:brightness(1.05)}
.wavestick-load-btn:focus{outline:2px solid var(--ws-accent); outline-offset:2px}
.wavestick-load-btn.is-playing{border-color:rgba(76,175,80,.65); box-shadow:0 0 0 3px rgba(76,175,80,.15)}
.ws-btn-shape-round{border-radius:999px!important}
.ws-btn-shape-square{border-radius:10px!important}

/* Icons */
.ws-ico{
  display:inline-block;
  width:var(--ws-icon-size,16px);
  height:var(--ws-icon-size,16px);
  background:currentColor;
  -webkit-mask-size:contain;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
}

.ws-ico-list{ -webkit-mask-image:url('../img/icons/playlist.svg'); mask-image:url('../img/icons/playlist.svg'); }

/* Repeat / Shuffle icons */
.ws-ico-repeat{ background-image:url('../img/icons/repeat.svg'); background-repeat:no-repeat; background-position:center; background-size:contain; -webkit-mask-image:none; mask-image:none; }
.ws-btn.is-repeat-one .ws-ico-repeat{ background-image:url('../img/icons/repeat-one.svg'); }
.ws-btn.is-active .ws-ico-repeat{ opacity:1; }
.ws-btn:not(.is-active) .ws-ico-repeat{ opacity:.55; }
/* Repeat active shows repeat-one icon */
.ws-btn.ws-toggle-on .ws-ico-repeat{ -webkit-mask-image:url('../img/icons/repeat-one.svg'); mask-image:url('../img/icons/repeat-one.svg'); }
.ws-ico-shuffle{ background-image:url('../img/icons/shuffle-off.svg'); background-repeat:no-repeat; background-position:center; background-size:contain; -webkit-mask-image:none; mask-image:none; }
.ws-btn.is-active .ws-ico-shuffle{ background-image:url('../img/icons/shuffle-on.svg'); opacity:1; }
.ws-btn:not(.is-active) .ws-ico-shuffle{ opacity:.75; }

.ws-ico-play{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M8%205v14l11-7z%22/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M8%205v14l11-7z%22/%3E%3C/svg%3E'); }
.ws-ico-pause{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M6%205h4v14H6zm8%200h4v14h-4z%22/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M6%205h4v14H6zm8%200h4v14h-4z%22/%3E%3C/svg%3E'); }
.ws-ico-back{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M11%2019V5l-7%207zm9%200V5l-7%207z%22/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M11%2019V5l-7%207zm9%200V5l-7%207z%22/%3E%3C/svg%3E'); }
.ws-ico-fwd{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M13%205v14l7-7zM4%205v14l7-7z%22/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M13%205v14l7-7zM4%205v14l7-7z%22/%3E%3C/svg%3E'); }

/* Volume (3-level SVG icons) */
.ws-ico-vol1{ -webkit-mask-image:url('../img/icons/volume-1.svg'); mask-image:url('../img/icons/volume-1.svg'); }
.ws-ico-vol2{ -webkit-mask-image:url('../img/icons/volume-2.svg'); mask-image:url('../img/icons/volume-2.svg'); }
.ws-ico-vol3{ -webkit-mask-image:url('../img/icons/volume-3.svg'); mask-image:url('../img/icons/volume-3.svg'); }
.ws-ico-cart{ -webkit-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M7%2018c-1.1%200-1.99.9-1.99%202S5.9%2022%207%2022s2-.9%202-2-.9-2-2-2zm10%200c-1.1%200-1.99.9-1.99%202S15.9%2022%2017%2022s2-.9%202-2-.9-2-2-2zM7.16%2014h9.6c.75%200%201.41-.41%201.75-1.03L21%206H6.21L5.27%204H2v2h2l3.6%207.59-1.35%202.45C5.52%2017.37%206.48%2019%208%2019h12v-2H8l1.16-2z%22/%3E%3C/svg%3E'); mask-image:url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%3E%3Cpath%20d=%22M7%2018c-1.1%200-1.99.9-1.99%202S5.9%2022%207%2022s2-.9%202-2-.9-2-2-2zm10%200c-1.1%200-1.99.9-1.99%202S15.9%2022%2017%2022s2-.9%202-2-.9-2-2-2zM7.16%2014h9.6c.75%200%201.41-.41%201.75-1.03L21%206H6.21L5.27%204H2v2h2l3.6%207.59-1.35%202.45C5.52%2017.37%206.48%2019%208%2019h12v-2H8l1.16-2z%22/%3E%3C/svg%3E'); }

@media(max-width:960px){
  .ws-inner{grid-template-columns:56px 1fr}
  .ws-right{display:none}
  .ws-icon-link{margin-left:0}
  .ws-visual-inline{min-width:100%; order:99}
  #wavestick-player .ws-side-toggle{left:-14px}
}

.ws-price{font-size:12px;color:rgba(255,255,255,.88);margin-top:2px}

#wsCoverImg{width:100%;height:100%;object-fit:cover;display:block}


/* --- WaveStick: keep sticky height constant regardless of layout toggles --- */
#wavestick-player.is-open{height:var(--ws-sticky-height,92px)!important;}
#wavestick-player.is-open .ws-inner{min-height:var(--ws-sticky-height,92px)!important;height:var(--ws-sticky-height,92px)!important;display:flex;align-items:center;}

/* Keep controls stable: waveform should not push buttons */
.ws-transport,.ws-time,.ws-vol,.ws-icon-link{flex:0 0 auto;flex-shrink:0}
.ws-visual-inline{min-width:0!important;flex:1 1 auto}
.ws-wave{min-width:0}
.ws-progress{min-width:0}


/* === WaveStick stability + vertical centering (v1.19.1) === */
#wavestick-player.wavestick-player{
  --ws-player-bottom: 16px;
  display:flex;
  align-items:center;
  /* keep height controlled by --ws-sticky-h, but center content */
  padding:0 12px;
}
#wavestick-player .ws-inner{
  height:100%;
  width:100%;
  align-items:center;
}
/* Prevent layout shift when waveform canvas initializes */
#wavestick-player .ws-topline{
  /* lock layout so right icons never get pushed around */
  flex-wrap:nowrap;
}
#wavestick-player .ws-visual-inline{
  position:relative;
  /* reserve space up-front so volume/cart don't slide in */
  width:clamp(260px, 46vw, 760px);
  flex:0 0 auto;
  min-width:260px;
}
#wavestick-player .ws-wave,
#wavestick-player #wsWaveCanvas{
  width:100% !important;
  height:var(--ws-wave-h,44px) !important;
  display:block;
}
#wavestick-player .ws-progress{
  width:100%;
}
#wavestick-player .ws-vol,
#wavestick-player .ws-icon-link,
#wavestick-player .ws-transport,
#wavestick-player .ws-time{
  flex:0 0 auto;
}



/* Auto-hide */
#wavestick-player.is-hidden{transform:translateY(120%);opacity:0;pointer-events:none}
#wavestick-player{transition:transform .25s ease, opacity .25s ease}


/* Compact mode */
#wavestick-player.is-compact .ws-inner{padding:10px 14px!important;}
#wavestick-player.is-compact .ws-cover{width:var(--ws-main-play-size,44px);height:var(--ws-main-play-size,44px);border-radius:14px}
#wavestick-player.is-compact .ws-icon-link{width:34px;height:34px}
#wavestick-player.is-compact .ws-transport .ws-btn{width:var(--ws-sticky-btn-size,38px);height:var(--ws-sticky-btn-size,38px)}
#wavestick-player.is-compact .ws-wave{height:40px}

/* Progress bar alignment tweak (requested) */
.ws-mid #wsProgress {
	margin-bottom: -2px;
	margin-right: 11px;
}


/* Step 2: Icons No Background */
/* Icons: No Background (transparent)
   In WaveStick, some controls are <button.ws-btn> and some are <a.ws-icon-link>.
   This option must affect ALL sticky player icons/controls consistently.
*/
.ws-icons-nobg .ws-btn,
.ws-icons-nobg .ws-icon-link{
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
.ws-icons-nobg .ws-btn:hover,
.ws-icons-nobg .ws-icon-link:hover{
  background:rgba(255,255,255,.05) !important;
  border-color:rgba(255,255,255,.08) !important;
}


/* Playlist Popup (Step 3) — fullscreen, docked to sticky player */
#wsPlaylistPanel.ws-modal-overlay,
#wsPlaylistPanel{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--ws-sticky-height, 92px); /* touches the sticky player */
  z-index: 999998;

  display: flex;
  align-items: stretch;
  justify-content: stretch;

  background: rgba(0,0,0,0.92);
  border-top: 2px solid var(--ws-accent, #4CAF50);
  /* backdrop-filter removed to avoid blurring player */

  /* Slide-up animation (CSS-only) */
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  visibility: hidden;
  transition: transform .22s ease, opacity .22s ease, visibility 0s linear .22s;
  will-change: transform, opacity;
}
#wsPlaylistPanel[aria-hidden="false"]{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition: transform .22s ease, opacity .22s ease, visibility 0s;
}
#wsPlaylistPanel[aria-hidden="true"]{
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  visibility: hidden;
  transition: transform .22s ease, opacity .22s ease, visibility 0s linear .22s;
}

@media (prefers-reduced-motion: reduce){
  #wsPlaylistPanel,
  #wsPlaylistPanel[aria-hidden="false"],
  #wsPlaylistPanel[aria-hidden="true"]{
    transition: none !important;
    transform: none !important;
  }
}


#wsPlaylistPanel .ws-modal{
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  color: #fff;
}

/* Header / Hero */
#wsPlaylistPanel .ws-modal-head{
  padding: 36px 24px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
}
#wsPlaylistPanel .ws-modal-title{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 90px;
  font-size: clamp(42px, 6vw, 86px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(76,175,80,0.92);
  text-align: center;
  max-width: min(92vw, 1200px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Force close button to the right even on RTL sites */
#wsPlaylistPanel .ws-modal-head{ position: relative; }
#wsPlaylistPanel #wsPlaylistClose{
  position: absolute;
  top: 24px;
  right: 24px;
  left: auto;
}


#wsPlaylistPanel .ws-modal-head .ws-btn{
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  font-size: 44px;
  line-height: 1;
  padding: 12px 14px;
  opacity: .92;
}
#wsPlaylistPanel .ws-modal-head .ws-btn:hover{ opacity: 1; }

/* Play button */
#wsPlaylistPanel .ws-full-play,
#wsPlaylistPanel .ws-modal-play{
  margin: 0 auto 26px;
  margin-top: 140px;
  border: 0;
  border-radius: 999px;
  padding: 14px 44px;
  font-weight: 800;
  background: var(--ws-accent, #4CAF50);
  color: #0b0d12;
  cursor: pointer;
}
#wsPlaylistPanel .ws-full-play:hover,
#wsPlaylistPanel .ws-modal-play:hover{
  filter: brightness(1.06);
}

/* Body layout */
#wsPlaylistPanel .ws-modal-body{
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 24px;
  padding: 0 24px 26px;
}

/* Playlist list */
#wsPlaylistPanel .ws-pl-list{
  flex: 1.2;
  min-width: 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: auto;
}
#wsPlaylistPanel .ws-pl-item{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
}
#wsPlaylistPanel .ws-pl-item:hover{
  background: rgba(255,255,255,0.05);
}
#wsPlaylistPanel .ws-pl-item.is-active{
  background: rgba(76,175,80,0.08);
  border-bottom-color: rgba(76,175,80,0.18);
}
#wsPlaylistPanel .ws-pl-num{
  width: 28px;
  opacity: .8;
}
#wsPlaylistPanel .ws-pl-name{
  font-size: 18px;
  font-weight: 700;
  color: rgba(76,175,80,0.92);
}
#wsPlaylistPanel .ws-pl-sub{
  font-size: 14px;
  opacity: .72;
  margin-top: 2px;
}

/* Responsive */
@media (max-width: 900px){
  #wsPlaylistPanel{ bottom: var(--ws-sticky-height, 92px); }
  #wsPlaylistPanel .ws-modal-title{ top: 78px; white-space: normal; }
  #wsPlaylistPanel .ws-modal-body{ padding: 0 14px 18px; }
  #wsPlaylistPanel .ws-modal-head{ padding: 28px 14px 14px; }
}
/* ===== Playlist Modal (Step 3) ===== */
#wsPlaylistPanel.ws-modal-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-end;
  justify-content: stretch;
  padding: 0;
  background: rgba(0,0,0,.70);
  z-index: 999999;
}
#wsPlaylistPanel .ws-modal{
  width: 100vw;
  max-height: calc(100vh - 96px);
  margin: 0 0 96px 0; /* touch the player */
  overflow: hidden;
  border-radius: 18px 18px 0 0;
  background: rgba(16,18,22,.985);
  border: 1px solid rgba(255,255,255,.10);
  border-bottom: 0;
  box-shadow: 0 -10px 50px rgba(0,0,0,.60);
  display: flex;
  flex-direction: column;
}
#wsPlaylistPanel .ws-modal-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#wsPlaylistPanel .ws-modal-title{
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  color: #e8ffe8;
}
#wsPlaylistPanel .ws-modal-title strong{ color:#4CAF50; }
#wsPlaylistPanel .ws-modal-body{
  padding: 12px 14px 18px;
  overflow: auto;
}

/* Crisp, branded playlist items */
#wsPlaylistPanel .ws-pl-item{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
}
#wsPlaylistPanel .ws-pl-item:hover{
  border-color: rgba(76,175,80,.55);
  background: rgba(76,175,80,.10);
}
#wsPlaylistPanel .ws-pl-title{ letter-spacing: .2px; }
#wsPlaylistPanel .ws-pl-artist{ opacity: .78; }

/* ===== Auto-shrink visual area so icons always fit ===== */
.ws-topline{
  flex-wrap: nowrap;
}
.ws-visual-inline{
  flex: 1 1 auto;
  min-width: 140px;
  max-width: 520px;
}
.ws-visual-inline #wsWaveCanvas{
  width: 100%;
}
.ws-visual-inline #wsProgressWrap{
  width: 100%;
}


/* Playlist modal close button + icon */
.ws-btn-ghost{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
}
.ws-btn-ghost:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}
.ws-ico-close{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12 5.7 16.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18.3 5.71a1 1 0 0 0-1.41 0L12 10.59 7.11 5.7A1 1 0 0 0 5.7 7.11L10.59 12 5.7 16.89a1 1 0 1 0 1.41 1.41L12 13.41l4.89 4.89a1 1 0 0 0 1.41-1.41L13.41 12l4.89-4.89a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E");
}


/* === PATCH v1.23.39: Fix playlist icon (list) + close icon + crisp modal title === */
:root{ --ws-accent:#4CAF50; }

/* Ensure icon masks are valid (override any broken data-uris)
   IMPORTANT: Do NOT force a fixed icon color here.
   Icons use `background: currentColor` so they follow the parent element's color.
   This enables states like Shuffle OFF (grey) / Shuffle ON (white).
*/
.ws-ico{ background: currentColor; }
.ws-ico-close{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.3 5.71 12 12.01l-6.3-6.3-1.41 1.41 6.3 6.3-6.3 6.3 1.41 1.41 6.3-6.3 6.3 6.3 1.41-1.41-6.3-6.3 6.3-6.3z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M18.3 5.71 12 12.01l-6.3-6.3-1.41 1.41 6.3 6.3-6.3 6.3 1.41 1.41 6.3-6.3 6.3 6.3 1.41-1.41-6.3-6.3 6.3-6.3z'/%3E%3C/svg%3E");
}
/* Playlist modal: full width + touches player; no blur/dim */
.ws-modal-overlay{
  background: transparent !important;
  backdrop-filter: none !important;
}
.ws-modal-overlay .ws-modal{
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Dock it above player (no overlap) */
#wsPlaylistPanel{
  left:0 !important;
  right:0 !important;
  width:100vw !important;
  /* keep it just above the sticky player */
  bottom: calc(var(--ws-sticky-height, 90px) + 12px) !important;
  height: 420px !important;
  max-height: 420px !important;
  top: auto !important;
}
/* Head: center title; close fixed on right */
.ws-modal-head{ position: relative !important; justify-content: center !important; }
#wsPlaylistClose{
  position:absolute !important;
  right: 18px !important;
  left: auto !important;
  top: 14px !important;
}

/* Big crisp title like your screenshot */
#wsPlaylistTitle{
  font-size: 58px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  color: var(--ws-accent) !important;
  text-align: center !important;
  padding: 18px 70px 10px !important;
}

/* Big play button style */
.ws-modal-play{
  background: var(--ws-accent) !important;
  color:#07110a !important;
  border:none !important;
}






/* Download icon (white) */
.ws-ico-download{
  width: var(--ws-icon-size, 16px);
  height: var(--ws-icon-size, 16px);
  display:inline-block;
  background: center/contain no-repeat url('../img/icons/download.svg') !important;
  filter: none !important;
  opacity: 1 !important;
}

.ws-ico-collapse:before{
  left:50%;
  transform: translate(-50%,-50%) rotate(45deg);
}
.ws-ico-collapse:after{
  left:50%;
  transform: translate(-50%,-50%) rotate(-45deg);
}


/* === Collapse Tab (outside player) === */
.ws-collapse-tab{
  position: fixed;
  right: var(--ws-collapse-tab-right, 14px);
  left: var(--ws-collapse-tab-left, auto);
  width: var(--ws-collapse-tab-w, 30px);
  height: var(--ws-collapse-tab-h, 22px);
  border: 0;
  border-radius: var(--ws-collapse-tab-radius, 8px) var(--ws-collapse-tab-radius, 8px) 0 0;
  background: var(--ws-playbtn-border, #4CAF50);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  cursor: pointer;
  box-shadow: 0 -6px 18px rgba(0,0,0,.35);
  transition: bottom .25s ease, transform .25s ease, opacity .2s ease;
}
.ws-collapse-tab:active{ transform: translateY(1px); }

/* Arrow icon (white) using your SVG */
.ws-ico-collapse{
  width: var(--ws-collapse-tab-icon, 14px);
  height: var(--ws-collapse-tab-icon, 14px);
  display:inline-block;
  background-color:#fff;
  -webkit-mask: url('../img/icons/collapse-arrow.svg') center/contain no-repeat;
  mask: url('../img/icons/collapse-arrow.svg') center/contain no-repeat;
}

/* When expanded, point down (matches screenshot) */
body:not(.ws-collapsed) .ws-ico-collapse{
  transform: rotate(0deg);
}
/* When collapsed, point up */
body.ws-collapsed .ws-ico-collapse{
  transform: rotate(180deg);
}


/* Player slide transition */
#wavestick-player{
  transition: transform .25s ease, opacity .25s ease !important;
  will-change: transform, opacity;
}

/* Collapsed state: slide the ENTIRE sticky player down (hide) */
body.ws-collapsed #wavestick-player{
  transform: translateY(120%) !important;
  box-shadow: none !important;
}

body:not(.ws-collapsed) .ws-collapse-tab{
  bottom: calc(var(--ws-sticky-height, 90px) + var(--ws-player-bottom, 16px));
}


/* show only when NOT fullwidth */
#wavestick-player:not(.is-fullwidth) .ws-corner-close{
  display:none;
}
/* Back-compat alias */
.ws-ico-x{ 
  width:14px;height:14px;display:inline-block;
  background-color:#fff;
  -webkit-mask: url('../img/icons/close.svg') center/contain no-repeat;
  mask: url('../img/icons/close.svg') center/contain no-repeat;
}

/* Collapse tab: show ONLY on fullwidth player */
#wavestick-player:not(.is-fullwidth) + .ws-collapse-tab{ display:none !important; }
#wavestick-player.wavestick-player:not(.is-fullwidth) + .ws-collapse-tab{ display:none !important; }

/* Safety: ensure it shows when fullwidth */
#wavestick-player.is-fullwidth + .ws-collapse-tab{ display:inline-flex !important; }
#wavestick-player.wavestick-player.is-fullwidth + .ws-collapse-tab{ display:inline-flex !important; }

/* Corner close (shows only on floating style) */
#wavestick-player .ws-corner-close{
  position:absolute;
  top:6px;
  right:6px;
  width:28px;
  height:28px;
  border:0;
  border-radius:10px;
  background: rgba(0,0,0,.35);
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  z-index: 999999;
  cursor:pointer;
}
/* Hide close on fullwidth */
#wavestick-player.is-fullwidth .ws-corner-close,
#wavestick-player.wavestick-player.is-fullwidth .ws-corner-close{
  display:none !important;
}

/* Close icon (white) using SVG */
.ws-ico-x{
  width:14px;height:14px;display:inline-block;
  background-color:#fff;
  -webkit-mask: url('../img/icons/close.svg') center/contain no-repeat;
  mask: url('../img/icons/close.svg') center/contain no-repeat;
}

/* Also for alternate selector forms */
body:not(.ws-collapsed) #wavestick-player.wavestick-player.is-fullwidth + .ws-collapse-tab{
  bottom: calc(var(--ws-sticky-height, 90px) - 2px) !important;
}

/* Hide player fully when collapsed (no shadow bleed) */
body.ws-collapsed #wavestick-player{
  opacity: 0 !important;
  pointer-events: none !important;
}
body:not(.ws-collapsed) #wavestick-player{
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Sync transitions for player + toggle */
#wavestick-player{
  transition: transform .28s ease, opacity .28s ease !important;
}
.ws-collapse-tab{
  transition: bottom .28s ease, transform .28s ease, opacity .28s ease !important;
}


/* Shuffle icon: greyed out when off, white when on */
#wsShuffleBtn{ color: rgba(255,255,255,.45); }
#wsShuffleBtn.ws-toggle-on{ color:#fff; }


/* Product play button positioning (WooCommerce cards) */
html[data-ws-prod-btn-pos]:not([data-ws-prod-btn-pos="inline"]) .woocommerce ul.products li.product,
html[data-ws-prod-btn-pos]:not([data-ws-prod-btn-pos="inline"]) .products .product,
html[data-ws-prod-btn-pos]:not([data-ws-prod-btn-pos="inline"]) .wc-block-grid__product{position:relative;}

html[data-ws-prod-btn-scope="image"][data-ws-prod-btn-pos]:not([data-ws-prod-btn-pos="inline"]) .woocommerce ul.products li.product a.woocommerce-LoopProduct-link,
html[data-ws-prod-btn-scope="image"][data-ws-prod-btn-pos]:not([data-ws-prod-btn-pos="inline"]) .wc-block-grid__product a.wc-block-grid__product-link{position:relative; display:block;}

html[data-ws-prod-btn-pos]:not([data-ws-prod-btn-pos="inline"]) .wavestick-load-btn{position:absolute; z-index:9;}
html[data-ws-prod-btn-pos="center"] .wavestick-load-btn{top:50%;left:50%;transform:translate(-50%,-50%);}
html[data-ws-prod-btn-pos="tl"] .wavestick-load-btn{top:var(--ws-prod-btn-y,0px);left:var(--ws-prod-btn-x,0px);transform:none;}
html[data-ws-prod-btn-pos="tr"] .wavestick-load-btn{top:var(--ws-prod-btn-y,0px);right:var(--ws-prod-btn-x,0px);left:auto;transform:none;}
html[data-ws-prod-btn-pos="bl"] .wavestick-load-btn{bottom:var(--ws-prod-btn-y,0px);left:var(--ws-prod-btn-x,0px);top:auto;transform:none;}
html[data-ws-prod-btn-pos="br"] .wavestick-load-btn{bottom:var(--ws-prod-btn-y,0px);right:var(--ws-prod-btn-x,0px);top:auto;left:auto;transform:none;}