/* ══════════════════════════════════════════════════════════
   Sticky Audio Player — Omnity / Wolf Themes
   ══════════════════════════════════════════════════════════ */

#wlsp {
  position: fixed;
  bottom: -100px;
  left: 0;
  right: 0;
  height: 80px;
  background: #111;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px 0 24px;
  z-index: 999999;
  box-shadow: 0 -1px 0 rgba(255,255,255,.06), 0 -6px 24px rgba(0,0,0,.6);
  transition: bottom 0.32s cubic-bezier(.4, 0, .2, 1);
  font-family: inherit;
  box-sizing: border-box;
}
#wlsp.wlsp-on { bottom: 0; }

/* ── Album art ── */
#wlsp-art {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 2px;
  overflow: hidden;
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #444;
}
#wlsp-img { width: 100%; height: 100%; object-fit: cover; display: block; }
#wlsp-art-fallback { display: none; }

/* ── Track meta ── */
#wlsp-meta {
  flex: 0 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}
#wlsp-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
  color: #fff !important;
  text-decoration: none !important;
  letter-spacing: .01em !important;
}
#wlsp-title:hover { opacity: .75; }
#wlsp-artist {
  font-size: 10.5px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* ── Controls ── */
#wlsp-controls {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
#wlsp-prev, #wlsp-next {
  all: unset;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: opacity .15s;
  flex-shrink: 0;
}
#wlsp-prev:hover, #wlsp-next:hover { opacity: .6; }
#wlsp-prev svg, #wlsp-next svg { fill: #fff !important; width: 20px; height: 20px; }

#wlsp-btn {
  all: unset;
  background: #fff;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s, opacity .12s;
  flex-shrink: 0;
  box-sizing: border-box;
}
#wlsp-btn:hover { opacity: .85; transform: scale(1.06); }
#wlsp-btn svg { display: block; }
#wlsp-btn svg path { fill: #111 !important; }
#wlsp-play-ico  { display: block; }
#wlsp-pause-ico { display: none; }

/* ── Progress ── */
#wlsp-right {
  flex: 1;
  min-width: 60px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#wlsp-bar-wrap { cursor: pointer; padding: 6px 0; outline: none; }
#wlsp-bar { height: 2px; background: #2a2a2a; border-radius: 2px; position: relative; }
#wlsp-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%; background: #fff; border-radius: 2px;
  transition: width .1s linear;
}
#wlsp-times {
  display: flex; justify-content: space-between;
  font-size: 10px; color: #fff;
  font-variant-numeric: tabular-nums;
}

/* ── Shop section ── */
#wlsp-shop {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  border-left: 1px solid #222;
  padding-left: 14px;
}

#wlsp-price {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
#wlsp-price *,
#wlsp-price .woocommerce-Price-amount,
#wlsp-price bdi {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
}

/* Cart — icon only, no text */
#wlsp-cart,
#wlsp-cart:link,
#wlsp-cart:visited {
  all: unset !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  color: #fff !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  transition: opacity .15s !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  background: none !important;
  border: none !important;
}
#wlsp-cart:hover {
  opacity: .6 !important;
  text-decoration: none !important;
}
#wlsp-cart.added,
#wlsp-cart.added:link {
  color: #4caf50 !important;
}
#wlsp-cart svg { fill: #fff !important; }
#wlsp-cart::before,
#wlsp-cart::after { display: none !important; content: none !important; }
/* hide the text node — we only want the icon */
#wlsp-cart-label { display: none; }

/* ── Close ── */
#wlsp-close {
  all: unset;
  color: #333;
  font-size: 12px;
  cursor: pointer;
  padding: 6px;
  line-height: 1;
  transition: color .15s;
  flex-shrink: 0;
}
#wlsp-close:hover { color: #888; }

/* ── Mobile ── */
@media (max-width: 640px) {
  #wlsp-right { display: none; }
  #wlsp-meta  { flex: 1; }
  #wlsp       { gap: 10px; padding: 0 16px; }
}
@media (max-width: 420px) {
  #wlsp-shop  { display: none; }
}