YavaDev

Поменял ваш вьюпорт мета тег на этот

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

и все норм

Пропишите в css для изображения dispay: block

.class::-webkit-input-placeholder {color: #b2b4b6;}
.class::-moz-placeholder {color: #b2b4b6;}
.class:-moz-placeholder {color: #b2b4b6;}
.class:-ms-input-placeholder {color: #b2b4b6;}

Вот два плагина MixItUp и Isotope.

Дописал несколько строк в конце CSS

Если в стилях у блока стоит display: none, тогда jQuery по умолчанию дает этому блоку display: block.
Что бы заставить jQuery дать блоку display: flex нужно для начала прочитать документацию.
Ну а после сделать нечто такое:

$('.popup').fadeIn({
  start: function() {
    $(this).css('display','flex');
  }
});

Примерно так

У вас в каждом диве .item_footer по одному инпуту, а не по три. Потому ваш код не работает.
Что бы заработал надо обратится к третьему диву и найти в нем инпут:

.item_footer:nth-child(3) input {
  width: 900px;
}

В даном случае вместо :nth-child(3) можно использовать также :last-child

Это должно помочь

.catalog-dropdown:before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 45px;
}

Это если catalog-dropdown открывается вниз.
Суть в том, что с помощью before (или after) надо просто закрыть дыру. А так как before, в данном случае, является частью catalog-dropdown, то ховер не исчезнет.