YakovSpb

Скобки тут у вас только фигурные и они не экранируются.
Если вы про слэши, то JSON_UNESCAPED_SLASHES.

Используй свойство background: liner-gradient Вот тут можно собрать нужный тебе градиент с помощью графического интерефейса :)

Сделайте вычисляемое свойство, которое в зависимости от состояния чекбокса будет представлять массив в дефолтном порядке или алфавитном:

<input type="checkbox" v-model="sort">
<div v-for="dog in sortedDogs">

data: () => ({
  sort: false,
}),
computed: {
  sortedDogs() {
    return this.sort
      ? [...this.allDogs].sort((a, b) => a.breeds[0].name.localeCompare(b.breeds[0].name))
      : this.allDogs;
  },
},

$query = new WP_Query( [
	'posts_per_page' => 3,
	'post_type' => 'product',
	'tax_query' => [
		[
			'taxonomy' => 'brend',
			'field'    => 'id',
			'terms'    => [$cat->cat_ID]
		]
	]
] );

align-self: выравнивает элемент по поперечной оси, а ты пытаешься по главной. Чтобы прижать блок к правому краю, просто задай margin-left: auto

.section_2 {
/* сумма высоты футора и ходора */ 
min-height: calc(100vh - 274px);
}

woff2 и woff и именно в таком порядке.
Если вам не нужны древние версии браузеров

Уберите overflow-x: hidden у тега body.