Transform.Rotate producing unexpected results when being used after setting localEulerAngles

Here's another rotation question to add to the pile!

So here's the current relevant way things are set up:

The shopping cart object and the red arrow object are separate (not parented).

I'm trying to accomplish:

The red arrow rotates to match the shopping cart's rotation but always faces up/forward (in other words, on each frame, the red arrow's rotation is set to the cart's rotation, and then you use the green rotation handle in local mode to drag the red arrow's local euler Y to zero.)

Here's the relevant code:

         directionOfTravel.transform.eulerAngles = cart.transform.eulerAngles;

         directionOfTravel.transform.Rotate(0, -cart.transform.eulerAngles.y, 0, Space.Self);

Here's the current result:

It behaves almost as expected, but as you can see in the below video, but when there's X rotation followed by Y rotation, the arrow slightly points off to the side (and its local Euler Y value is NOT zero as I would expect based on the code).

Here's a video of what's going on:

https://streamable.com/nz1q26

Any ideas what's causing this and how to fix it?