Андрей Федоров

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

с учетом представленнового формата ответа, вот такой код:

$answer = array(
            array("id" => 1, "parent_id" => 100, "name" => "Стулья"),
            array("id" => 2, "parent_id" => 100, "name" => "Столы"),
            array("id" => 5, "parent_id" => 1, "name" => "Стул Сакура", "price" => 5691, "img" => "lorempixel.com/900/900/?q=5", "props" => array()),
            array("id" => 9, "parent_id" => 2, "name" => "Стол Византия", "price" => 5268, "img" => "lorempixel.com/900/900/?q=9","props" => array())
    );
$result = array();
foreach($answer as $item) {
    if(isset($item['price'])) $result[$item['parent_id']][] = $item;
        else $result[$item['id']] = $item;
}
var_dump($result);

https://codepen.io/aliencash/pen/bGWKoyq

.bg-color{
  --sf-color: #FDAEB7;
  --sf-test: var(--sf-color);
  background-color: var(--sf-test);
}

Сделайте изначально множественный бэкграунд - background-image: url(1.png), url(2.png);
Тогда оба изображения будут уже загружены. На js меняйте на нужное - background-image: url(2.png), белого фона не будет.
https://codepen.io/aliencash/pen/rNmMoJv

Попробуйте так - https://codepen.io/aliencash/pen/xxqXNRB

Никакого 3.14деца тут нет. (Ошибаюсь, есть) Это абс.нормально. (Нет) Google Fonts отдает похожий код. (Не совсем) По второму вопросу - такой расчет нужен для адаптивности, чтобы на мобильных шрифт не был слишком маленьким, а на десктопах слишком большим. Немного устаревший подход с появлением функции clamp, но приемлемый в связи с браузерной поддержкой.

https://jsfiddle.net/xj0nacry/

Блочить надо левые хвосты. Чтобы 404 отдавалось при попытке захода по такой ссылке.

Скорее всего, вы неверно понимаете как работает позиционирование в css. Но сказать точно сложно без вашего кода.
Вот модельный пример - https://codepen.io/aliencash/pen/wvoOGrg?editors=1100
Как видно размеры внутренних блоков никак не влияют на размеры родителя, если они спозиционированы.

Способ 1:
Зачем маскировать ее на css? Просто уберите с помощью js

function killComma() {
   var mathResult = document.querySelector('span.math_result');
   mathResult.innerHTML = mathResult.innerHTML.replace(',', ' ');
}
killComma();

Способ 2:
С помощью инструкции @font-face создать сборку шрифта, в котором символ запятой заменен пробелом.

Да какой сложный-то? Изначально размещаете в коде страницы обе части. При этом заставке даете position: fixed и z-index: 100500. Вешаете на body событие onload, по которому даете заставке display: none или класс с display: none через время, которое посчитаете нужным.

На вскидку разница в приоритете загрузки. Фоновые изображения грузятся в последнюю очередь. Загрузкой в теге img можно управлять.