Sorry but it doesn’t work ether… I have the same rendering.
The CSS rules you are provinding doesn’t affect the rendering of the compact search box under 768px after refreshing the browser.
As you can see in the screenshot, there are three sections corresponding to three headers. In mobile resolution, the first two (blue and green) are hidden. They both contain the classic search box.
In orange, the header is displayed in the browser with the compact search box. As you can see, the rendering doesn’t match what it should be.
And if I set the compact search box enabled for all devices, I have both the classic and compact displayed.
Any idea?