Brine 7.0 navigation link and product image alignment issue. connected?

Site URL: https://www.caferoyalbooks.com/search/search?q=

Hello, I wonder whether someone can help?

Firstly, this seems only to happen on Safari, I'm using 14.1.2. Latest Chrome on Mac seems ok. I'm listing both problems here because I think they're connected.

On my site, you will see the links at the top (header bottom left), England, being the first. That link is about 1px higher than the others and I can not work out why. Inspecting the element gives:

body:not(.tweak-header-primary-nav-hover-style-button) .Header-nav--primary .Header-nav-item, body:not(.tweak-header-primary-nav-hover-style-button).tweak-header-secondary-nav-inherit-styles .Header-nav--secondary .Header-nav-item {
margin: 0 .6em;
padding: .618em 0;
}

I have made bold the part in question, but this same padding seems to run throughout the site. Any help would be appreciated.

Also, on the product galley pages https://www.caferoyalbooks.com/shop for example, some (not all) of the thumbnails have a white hairline at the bottom between the image and the drop shadow. I can't figure why, but wondered if connected to the main nav issue.

As noted, this doesn't happen in Chrome. Weirdly, it doesn't happen in safari either when the site is in edit mode.