corasao

реально реализовать, без проблем

Да, используйте WooCommerce, и другие плагины

Да, вполне, удобно будет с использованием WooCommerce

На вордпресс реализовать можно, но программист wordpress должен быть уровня мега-профи.
На 1С-Битрикс такое реализовать проще, думаю.

В 1С-Битрикс
- Локализация в зависимости от города - таких модулей есть несколько готовых
- Система накопления и расчета баллами - механизм оплаты баллами в Битрикс есть из коробки, но логику начисления баллов нужно кодить, я такое делал
- Сравнение товаров - есть встроенные в коробку компоненты, только настроить свойства по которым сравнивать, и дизайн
- Заказ в 1 клик есть готовые модули и также встроенная опция в некоторые готовые решения магазинов, но и программировать с нуля не сильно сложно
- Групповая покупка товаров со скидкой - скидки можно в Битрикс настроить и без программиста. Или имеется в виду, покупка товаров несколькими пользователями?
Такая задача в принципе сложная, на любой системе.
- Оповещение по смс и вайбер - для смс оповещения нужно зарегаться в sms-сервисе, смски платные, в Битрикс встроить используя стандартные механизмы событий не сильно сложно.
- Регистрация через смс - не так и сложно программируется
- Интеграция каталога и заказов с системой учата (отдельной CRM, поки выбираем) - разных интеграций под Битрикс очень много, начиная от родной CRM Битрикс 24 и с другими тоже есть.
- Оплата частями - есть готовые модули нескольких банков
- Карта магазина это что? Скидочная карта магазина? Тоже сделать можно.

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

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

overflow:hidden

а лучше все картинки через bg и псевдоэлементы

Попробуйте этот пример.

<?php
$class = '';
if ( 'определенная страница' == true ) {
    $class = ' header_black';
}
?>

<div class="header<?= $class ?>">
    <!-- содержимое -->
</div>

<style>
.header_black {
    background: #000;
}
</style>

Посмотрите как работают функции WordPress body_class() и post_class(). По аналогии вы можете создать свою функцию header_class() с нужными вам условиями, пример:

if ( ! function_exists( 'get_header_class' ) ) {

	/**
	 * Get classes for header container.
	 *
	 * @param string $class Additional header classes.
	 *
	 * @return array
	 */
	function get_header_class( $class = '' ) {

		// Add elements to array.
		$classes   = array();
		$classes[] = 'header';

		if ( has_custom_header() ) {
			$classes[] = 'header_background-image';
		}

		if ( is_admin_bar_showing() ) {
			$classes[] = 'is_wpadminbar';
		}

		if ( is_category( 'example' ) ) {
			$classes[] = 'header_example';
		}

		// Check the function has accepted any classes.
		if ( isset( $class ) && ! empty( $class ) ) {
			if ( is_array( $class ) ) {
				$classes = array_merge( $classes, $class );
			} elseif ( is_string( $class ) ) {
				$classes = array_merge( $classes, explode( ' ', $class ) );
			}
		}

		$classes = apply_filters( 'get_header_class', $classes );
		$classes = array_unique( (array) $classes );

		return $classes;
	}
}

if ( ! function_exists( 'header_class' ) ) {

	/**
	 * Display classes for header container.
	 *
	 * @param string $class Additional header classes.
	 * @param bool   $echo  Echo or return header classes.
	 *
	 * @return string|void
	 */
	function header_class( $class = '', $echo = true ) {

		$classes = get_header_class( $class );

		if ( $echo ) {
			echo 'class="' . esc_attr( implode( ' ', $classes ) ) . '"';
		} else {
			return 'class="' . esc_attr( implode( ' ', $classes ) ) . '"';
		}
	}
}

Использование:

<header id="header" <?php header_class(); ?> aria-label="<?php _ex( 'Site header', 'aria-label', 'themename' ); ?>">
	<!-- ... -->
</header>

Проблема, вероятно, связана с тем, что ресурсы не успевают загрузиться до инициализации библиотеки, из-за чего иногда фото открываются как ссылки. Попробуйте перенести инициализацию fslightbox.js в событие window.onload.
Например:

window.onload = function() {
  setTimeout(function() {
    const lightbox = new FsLightbox();
  }, 500);
}

Еще одна возможная причина проблемы - это конфликт с другими скриптами на странице. Проверьте, нет ли ошибок в консоли браузера и попробуйте отключить другие скрипты на странице, чтобы выяснить, не вызывает ли один из них конфликт.
Если вы все еще столкнетесь с проблемой, то можете рассмотреть другие библиотеки, например, Magnific Popup, PhotoSwipe или LightGallery. Они поддерживают предварительную загрузку изображений и поддерживают видео в галерее.

а) как убрать через настройки " /" перед закрывающим одиночным тегом?

Зачем?
Использование такого синтаксиса с нормальным закрытием тегов только повышает надёжность и снижает шанс конфликта.

б) какой плагин для форматирования кода в VS Code посоветуете с личного положительного опыта? Форматировать нужно html, css, scss, js и php.

Для php хз что посоветовать, а для js использую eslint --fix, а для css/scss - stylelint
1. Не советую искать один универсальный инструмент для всего.
2. Советую искать самодостаточные инструменты для каждого языка (возможно, это будет плагин для eslint), которые не зависят от плагинов в VSCode. Тот же prettier и eslint как раз из таких - они работают самостоятельно, а плагин только чуть упрощает работу с ними.

Согласен с мнением сверху. Лучше использовать готовый.

Если прямо максимально просто, можете сделать один блок, в него засовывать блоки с видео, задать родительскому блоку максимальную ширину и управлять им с помощью overflow: auto на телефоне, а на десктопе можете написать немного логики для кнопок пролистывания, с помощью block.scrollLeft
Но я бы лучше использовал готовый слайдер, ничего страшгого в том что вы подключаете файлы), тем-более что в теории этот слайдер может использовать много раз на странице