That's the correct file you are editing. Also your code seems correct.
The .less file is compiled by clicking the "Save" button in the theme administration (on the Native Settings page where the color presets are), you don't have to do anything else.
So if you didn't click the save button, do it now and see if the change will apply.
"I would like that header bar to pick up the color selected in the Native Theme"
To do that, you have to add your element's class name into the Color Presets selectors file.
The file for Native theme is here:
Pay attention that there are different sections in that file, some are for text color, others for background color, some for border-color. If you need to change background color only, then add your element only in the "background color" section.
The number of items per row in side grids on Product Details pages is controlled through the "side-grids" class name. The code is in the 1260.css file. Make sure you apply your changes only for resolutions above 1260px, otherwise your will break the layout on lower resolutions. If you put your changes in the same file, you don't need to add additional media queries - the code in that file applies only for resolutions above 1260px.
None of those can be achieved without coding (adding new code or modifying the existing one).
The good news is that it's not necessary to create new icons as the color of the existing ones can be modified by using CSS.
As for the social buttons on Product Details pages, the source code is here: Themes\Pacific\Views\Product\_ShareButton.cshtml
As previously explained, we can't help until we are able to inspect the actual website. Until you provide us with a link to your site there is nothing we can do. Even better if you provide us with admin login credentials so we can log into the site and inspect your setup. Of course you have to open a support ticket first, don't post login credentials here on the forum.
The only thing I can think of that may be causing similar problem is if your Product Images Proportion setting is having some invalid value. The setting is inside the "Additional Settings" tab on the Pacific Settings page. The default value is 100.
From your screenshot I can tell that your theme doesn't behave like the original Pacific theme. By default all product image containers are "square", no matter what the image inside is and how big it is. Unfortunately I can't tell you more by just looking at a screenshot. You have to provide us with a link to the actual website and admin login credentials, so we can log into the site and inspect your setup. You can open a ticket at nop-templates.com and provide the details there.
This seems like a device specific problem, probably caused by a browser extension installed on the specific device. The theme renders normally on iPhone at our end. Try to disable your browser extensions, or test on another iPhone and check what's different.