TSwizard

Картинка - строчный элемент(inline). Ведет себя как "слово" в тексте. По умолчанию у текста стоит vertical-align: baseline, которое оставляет небольшой отступ снизу для витков букв типа и крючков у букв типа "р, у, щ, ц, ф" и тд.
Допиши для картинки vertical-align: top. Это уберет этот отступ.

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

Вы можете переопределить стили своими (если это не в iframe).

в скрипте, вращение вокруг оси X считается относительно высоты ВСЕГО документа. Добавляя блоки сверху вы увеличиваете высоту документа. Попробуйте считать относительно viewport-а (окна браузера)

В моей практике, пытаясь получить какие-либо значения из DOM - я всегда получал string )
parseFloat/parseInt в помощь.

Можешь проверить:

$(".select").change(function () {
          var str = 0;
          $(".active option:selected").each(function () {
                str += parseFloat($(this).val());
                console.log(typeof $(this).val());
              });
          $(".cena").text(str);
        })
        .change();

Если возможно - покажи пример html одной карточки. Меня смущает что вы пытаетесь взять value у параграфа...
Если на странице подключен jQuery - попробуйте так:
var price = parseInt($(".price2").text());
без jQuery
var price = parseInt(document.getElementsByClassName("price2")[0].textContent);

Еще я бы посоветовал достать обработку change из функции each, т.к. вы будете биндить по 1 событию для каждого елемента корзины. При 10 итемах у вас на каждом изменении инпута будет 10 раз срабатывать эта функция...