Какие надо внести правки, чтобы получить искомый результат?

Фёдор, при такой разметке, как у вас, если текста в ссылке будет на 2 строчки, то все уедет.

Какие надо внести правки, чтобы получить искомый результат?

Так внесите счетчик внутрь li.
Зачем это count-product вообще?

<li><a href="#">Средства для ванной</a><span>(33)</span></li>

Про z-index читайте css.yoksel.ru/kontekst-nalozheniya

Как изменить положение элемента при сжатии экрана?

WapSter,

У обычных блоков схлопывание может произойти к тому же.

И отлично, что произойдет.
Научит писать отступы подумав, а не абы как.

флексами, контроля больше.

Чем это?
Стоят блоки друг под другом по умолчанию и прекрасно. Им не нужен никакой контроль. А кода писать заметно меньше.

Как изменить положение элемента при сжатии экрана?

Достаточно поменять display на initial.
А еще лучше верстать mobile first, будет легче.

Где почерпать описание правильного адаптива?

Кто задаёт.

Пользователи и статистика по размерам вьюпортов.

Правильный адаптивный сайт корректно отображается на всех устройствах, браузерах и размерах вьюпортов которыми пользуется ваша целевая аудитория.
И в достаточной степени соответствует макету. Достаточность определяется в ТЗ.

Почему не работает background-image?

Что браузер говорит по поводу ширины этого блока и в консоли про картинку?

Не понимаю некоторые моменты с псевдоклассами, как здесь решить данные проблемы?

hozzy8, обращайтесь

Не понимаю некоторые моменты с псевдоклассами, как здесь решить данные проблемы?

hozzy8,

чтобы я наводил на ВЕСЬ родительский див, и срабатывали ОТДЕЛЬНЫЕ стили для каждого дочернего элемента ДИВА

Я вам это и написала.

ВЕСЬ-родительский-див:hover дочерний {}
Так и пишете все подряд.
Например, https://jsfiddle.net/s87rokwt/

Почему при использовании hover при первом наведении текст немного сдвигается влево?

Начните с проверки масштаба в браузере.
Если нет, то выкладывайте код с воспроизводимой проблемой в песочницу.

Как изменить место placeholder?

nowm, да, наверное. Хорошо, что дописали.

Как правильно сдвинуть элемент во флекс-боксе?

Логотип и подпись логически прекрасно объединяются в один блок. А значит и в верстке тоже.

Как изменить место placeholder?

Логичнее делать отступ инпуту, а не плейсхолдеру.
Вряд ли будет нужно, чтобы плейсхолдер был с отступом, а введенный текст прилипал к краям.

Почему когда навожусь слева ссылки, где её нету - я по ней перехожу?

В теории нормально, когда логотип является ссылкой на главную.
Но если вы её не делали, то чтобы понять почему так происходит, нужно выложить свой код в песочницу, например, jsfiddle.net или codepen.io и показать нам.

Как сделать такой фон?

Либо наложить белую SVG.
Либо, наоборот, clip-path

Как сделать металлический круглый градиент?

https://caniuse.com/?search=conical-gradient

Корректно ли по БЭМу создавать классы для отступов?

Использую для этого примеси в препроцессорах.
Если это margin, то к элементам.

Как переместить кнопку?

olya_097, просто
для overlay - flex по центру по главной и по поперечной оси
для inner__content - max-height 80vh
для inner-overlay max-height 80vh и overflow-y
крестику - top 0 или с учетом паддинга у inner-overlay

Как переместить кнопку?

olya_097, вы же сами поставили ей отступ 10vh...

Если не понятно что происходит, обводите блоки outline'ом, убирайте/меняйте свойства по одному, смотрите что меняется.

У вас там половина свойств лишняя. И div не закрыт.

Как переместить кнопку?

olya_097, так задайте ей top: 0 или сдвиньте если нужно с учетом отступов.

Как убрать со всех элементов сайта outline?

Перед тем как убирать outline замените его на другой видимый эффект при фокусе.
Чтобы убедится в необходимости этого действия попробуйте поработать с сайтом только с клавиатуры.

Пытаюсь убрать это через css так но все равно срабатыват не везде...

Вероятно, он задан не только для ссылок, а убираете только ссылкам.