M-ka

Если не использовать кривую браузерную валидацию, написать свою собственную, что бы запускалась в зависимости от необходимого набора действий, как на кейапы, так на блюры и тд и тп, ну и в процессе сабмита само собой... Можно поставить коллекции валидаций, по единых событиях у полей, а не вешать 100500 событий на блюр или кейап каждого поля, а потом только по необходимости добавлять или удалять таковы из списка, ну или вешать каждый отдельных обработчик... вообще полет фантазии большой и зависит от объёмов да и потребностей как именно валидировать поля.

По умолчанию всем блокам с права отступ и фоном стрелку на соседний блок
Для последнего в строке стрелку в низ на первый пункт
Если последняя строка в списке, переназначить стрелку, что бы вела на кнопку
Стрелки в низу на 1й пункт новой строки или на кнопку сделать тянущимися с несколько частей или через after/before

Как результат, не будет привязки к количеству по горизонтали и вертикали. Долго, нудно, но как вариант...
Еще как вариант, всякие канвасики большие... Ну или вообще чисто за счет жс"а генерировать контент стрелок

необходимо взять один с готовых вариантов меню со вложенностями.... а не танцевать с бубном... Их оч много на цсс+хтмл.... (биховер подключать не придется, если не нужно оч древние браузеры)

запостить аяксом

Цвет выбранного пользователем фона хранить в базе вместе с профилем пользователя... и это отнюдь не глупо в отличии от использования кук или стореджа под такие цели. Ну а возможность задания цвета вынести из таблицы в настройки профиля пользователя, что бы оно не маячило перед глазами к остальным опциям, которые можно задать...

1. каждое слово можно обвернуть в тег с типом дисплей блок.... если не подходит проставить бр
2. можно задать для спана ворд спейсинг равный шырине блока... (плохо работает да и еще нужно тогда ставить оверфлов)
3. принудительная смена направления текста, что бы он писался вертикально... (хотя тогда придется подгонять и извращаться с текста да и тоже не оч хорошо работает, хотя мне не приходилось менять только для одного блока, обычно на весь контент)
4. htmlbook.ru/css/word-wrap break-word хз, в каком состоянии, думаю по прежнему не работает...
5. word-break почти тоже №4, только больше танцев с бубном... htmlbook.ru/css/word-break

вообщем пока самый лучше 1й вариант.

Следует переделать этот гамнокодогенератор по следующему принципу:
1. пхп генерит мега объект жсона под жс, который сразу находится в жс, в котором хранится ску, описание, цена.
2. на каком то этапе запускается жс генератор таблици и генерит таблицу на основании контента №1. Не всю таблицу, только пересоздание строк (удалить если есть, нагенерить новых)
ПЫСЫ, у чекбоксов ай ди == ску !!! (ну или кусок ай ди должен содержать ску, что бы потом найти продукт)
3. на всех чекбоксах одно тупое событие, получить все ску на нажатых чекбоксах
4. на основании события №3, провести манипуляции вывода тотала, а инфу по цене брать не с ячеек, которые и нафиг не нужны, а с объекта по ску

пысы: ну а на движок по сабмиту сабмитить все выбраные ску... ну или проще говоря ай ди чекнутых чекбоксов.
Ну контент таблицы будет обновляемый по аяксу... без привязки как таковой, а просто по обновлению, обновлять и события. Да и по аяксу будет тогда уже бегать сам жсон с нужной инфой для отображения.

на всю ширину/высоту экрана делается блок в фоне которого полупрозрачная картинка..(это более правильный вариант, чем залить фоном и наложить опасити или более хужым вариантом в виде задания прозрачности в фоне), ну а попап имеет более высокий уровень, нежели у картинки. Клик можно повесить на картинку (если всегда такая присутствует) для закрытия попапов ну или повесить проверку и детектить по чем кликнули и проверять, входит ли в состав попапа.

по хорошему, это лучше запилить на стороне сервера, а на него засылать аяксом.... будет доп еда для мозга, что бы проанализировать, что пошло не так....

пишется подобное за 10 минут (быстрее, чем гуглить и разбираться, как работает чья то версия)

bit.ly/2dGDVoL

if($(".test2:visible").length > 0){
что то делаем с тест1
}

будет запущено, если тест2 будет видимый на момент выполнения этого куска кода, вроде ж к этому сводится задача...

Воспользоваться линкой:
pogugli.com/?136971

На крайний случай, для самых ленивых www.w3schools.com/js/js_htmldom_css.asp

можно, "как-нибудь" тоже...
Вопрос же только в этом и заключался, больше писать особо то смысла нету.

1. див обертка с релативом
2. див(можно Р, но блочный) с нижним текстом, релатив, зиндекс + несколько
3. див с с задаными габаритам, бордером, абсолют, зиндекс ниже №2
4. див(или что то другое но блочное) с текстом, белый фон, абсолют, зиндекс больше №2
ну по ходу еще всякие топы, лефты бегать будут....
Можно уменьшить на один отдельный блок, за счет того, что бы №4 поместить в № 2, но тогда релативы, падинги...
еще можно упростить использовав бефор и афтер, но тогда не во всех браузерах отработает... все зависит от того, на сколько нужно, ну то такое....

LESS -- хз, где используют. Может типа показать, мол какие мы крутые или какие ленивые...
git --- ну консольный вариант знать не обязательно, если использовать какую то иде, которая его поддерживает, разве, что с консоли может пригодиться только команды на удаление веток, отмена комита или пуша. Применяется везде, всеми, постоянно. Вариант в иде не требует изучения, достаточно, что бы рассказали последовательность или почитать на хабре. Ранее был распространен svn, до него cvs (ну этим тремя пришлось пользоваться, другие не были столь популярные)

npm, grunt, bower -- комплекс инструментов для разных целей, необходимость знания таковых зависит от конкретного места работы (вместо grunt использую реквайр).
bower и npm не требуют изучения для веба, достаточно гугла, что бы можно было разобраться, что да как установить и запустить без погружения в детали.

Если у вас возникает такая проблема, то просто уберите все ненужные плагины, переделайте структуру.... ну вообщем такого не должно происходить
Ну а если происходит, значит вы изначально делаете что то не так... это как поставить на систему 2-5 антивирусов и потом удивляться, а почему тормозит комп и постоянные трояновирусные войны...

с картинки убрать/заменить высоту inherit и она станет постоянно белой, как и положено... а рамки у картинки как бы и нет