Глюкъ Виртуален

Решение через жопу, простите.
Присваивайте цветные классы еще на этапе формирования страницы. И не жабоскриптом естественно.

colorClass = '';
text = 'отсуствует';
if (product->quantity > 0) {
    colorClass = 'active';
    text = 'В наличии';
} elseif (...){
    (...)
}

Затем в html выводите эти переменные, заранее формируя paragraph.

Немного непонятно что имеется в виду под "несколько разметок". Несколько html файлов и несколько стилевых к ним? Да, одно время это было общепринятой практикой, но я бы не стал (я фуллстек).

Попробуйте начать с мобильной верстки, следом сверстайте десктопную. Нудно, геморно, потребует изменений на бекенде, но работать будет.

Более веселый вариант — верстайте на флексе одновременно мобильную и десктопную версию. Будет нескучно, но когда поймете принцип, любая верстка под любое разрешение будет для вас как два байта переслать.
Лучшее объяснение флекса тут: https://html5.by/blog/flexbox/

А вообще посылайте нах тимлида, вешающего фронтовые таски на бекендера. Фуллстекам платят меньше чем чистым бекендерам :(

Лучше всего — сверстай всю корзину на flex.
https://html5.by/blog/flexbox/