SirMustache

Можно через vw
https://jsfiddle.net/7xbtexjj/

Можно и без картинок: https://jsfiddle.net/Sir_Moustache/d29298ho/

Можно, например, на <div class="hideRadio"> добавить:

<div class="hideRadio"
ng-class="{'is-active': typemat === 'bal1'}">  <-- проверка на значение модели нужного радиобаттона.

https://jsfiddle.net/L4cLxp43/1/

width: 100vw;
height: 100vh;

Можно через JS

$(window).on('resize', function(){
	$('.wrapper-menu-internal').css({
		'top': $('.header_bg').height() + 'px'
	})
})

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

Я бы отталкивался от такого варианта: jsfiddle.net/kadyhxnn

Можно добавить новый класс и присваивать его блокам .product без дочерних .limited с помощью jQuery

$('.product').each(function(e){
    if($(this).children('.limited').length < 1){
           $(this).addClass('someSpecialClass');
       }
})

Насколько я вижу, тот тут изображение прижимается неким костылем - блоком над ним. При уменьшении ширины экрана текстовый блок сужаясь рядом увеличивается по высоте и этому костылю не хватает заданных ему 50px чтобы "дожать" изображение вниз. Судя по тому, что высота задана атрибутом style - до делает это скрипт, копал бы в эту сторону.

button[type='submit']
{
    font-size: 19px;
    font-weight: normal;
    line-height: 40px;

    padding: 2px 10% 0;

    text-align: center;
    text-transform: uppercase;

    color: #f29a63;
    border: #161616 solid 1px;
    background: #000;
}

Ок для Хрома и ИЕ, но на 2 пикселя ниже в Ферфоксе.

меняем
padding: 2px 10% 0;
на
padding: 0 10%;
Ок в Фаерфоксе, но на 2 пикселя выше в Хроме и ИЕ.