@media (max-width: 640px) {
  #infoPopup {
    padding: 10px !important;
    align-items: flex-end !important;
  }

  #infoPopupCard {
    width: 100% !important;
    max-height: 86vh !important;
    border-radius: 16px 16px 0 0 !important;
  }
}
    /* --- B.I.O. knopje rechts in elk track-item --- */
    .track-item {
      position: relative;
      padding-right: 26px;
    }

    .bio-button {
      position: absolute;
      right: 6px;
      top: 50%;
      transform: translateY(-50%);
      padding: 2px 8px;
      height: auto;
      border-radius: 12px;
      border: none;
      background: #5E005E;
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease;
      line-height: 1.2;
      white-space: nowrap;
    }

    .track-item:hover .bio-button {
      opacity: 1;
      pointer-events: auto;
    }