/* Separate from transport: keep the full width and behaviour of the seek bar. */
.promo-volume {
  --volume-color: var(--accent, #9ae300);
  --volume-fill: 100%;
  display: grid;
  grid-template-columns: 44px auto minmax(68px, 148px) 44px;
  align-items: center;
  justify-content: end;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.76);
  font-family: var(--sans, sans-serif);
}
.promo-volume--jd { --volume-color: var(--blue, #2cb7ff); }
.promo-volume--vinyl { --volume-color: var(--orange, #ff4b00); }
.promo-volume[hidden], .promo-volume [hidden] { display: none !important; }
.promo-volume__mute {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  background: rgba(255,255,255,.025);
  color: var(--volume-color);
  cursor: pointer;
}
.promo-volume__mute svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.promo-volume__mute:hover { border-color: var(--volume-color); }
.promo-volume__mute:focus-visible, .promo-volume__range:focus-visible { outline: 2px solid var(--volume-color); outline-offset: 4px; }
.promo-volume__mute .volume-cross, .promo-volume.is-muted .volume-waves { display: none; }
.promo-volume.is-muted .volume-cross { display: inline; }
.promo-volume__label { font-size: 14px; font-weight: 500; letter-spacing: .02em; }
.promo-volume__output { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.promo-volume__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  accent-color: var(--volume-color);
  cursor: pointer;
  touch-action: pan-y;
}
.promo-volume__range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--volume-color) 0 var(--volume-fill), rgba(255,255,255,.2) var(--volume-fill) 100%); }
.promo-volume__range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 2px solid var(--volume-color); border-radius: 50%; background: #f7f7f2; }
.promo-volume__range::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.2); }
.promo-volume__range::-moz-range-progress { height: 4px; background: var(--volume-color); }
.promo-volume__range::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid var(--volume-color); border-radius: 50%; background: #f7f7f2; }
.promo-volume__hint { grid-column: 2 / -1; margin: 0; font-size: 12px; line-height: 1.5; }
.promo-volume.is-device-volume .promo-volume__range { display: none; }
@media (max-width: 520px) {
  .promo-volume { grid-template-columns: 44px auto minmax(50px, 1fr) 36px; gap: 8px; }
}