Вадим

По порядку:
1) Не совсем верно. Не рекомендуют оставлять дефолтный аутлайн. Рекомендуют менять стиль элемента, когда он в фокусе, чтобы пользователю было удобнее осуществлять навигацию и ориентироваться какой элемент в данный момент активный. И оставлять дефолтный аутлайн если Вы не хотите с этим заморачиваться.

2) Есть разные варианты. Вот из свежего: https://matthiasott.com/notes/focus-visible-is-here - тут Вы найдёте современное решение и как его распространить на старые браузеры.

Вариантов масса, но, пожалуй, лучшим в данном случае будет:
• сделать карточке display: flex; flex-direction: column;
• кнопке - margin-top: auto;
Профит - кнопка всегда прижата к низу карточки.

Таким образом, если у контейнера карточек так же стоит display: flex, то все карточки в рамках одной строки будут всегда одной высоты, и в рамках одной строки все кнопки будут на одном уровне. При этом в каждой карточке может быть любое количество текста.

Схлопывание margin на MDN
https://habr.com/ru/post/257327/

Проверять размер окна браузера:
window.innerWidth

Сравнивать с нужным значением.
Например мобильные: window.innerWidth < 768
И если сравнение истинно, то менять класс элемента, или напрямую свойство display.
Например:

if(window.innerWidth < 768) {
  var elem = document.querySelector('.hamburger')
  elem.style.display = 'block'
}

Но я настоятельно рекомендую всё же делать это с помощью css.

Learn JavaScript
MDN
JavaScript Garden

На ютубе рекомендую этот канал. (ссылки на плейлисты с него)
https://www.youtube.com/watch?v=FX2fiUvrYP4&list=P...
https://www.youtube.com/watch?v=aQkgUUmUJy4&list=P...
И так ещё по каналу посмотрите отдельные видео.

Там же в обработчике клика и делать.

$(document).click(function(){
   score1.text(++score2);
   if (score2 == 2) {
      $('.s_img').attr('src', 'IMG/5.png')
    }
});

И правильно делает, что удаляется.
Вы ведь страницу перезагрузили - соответственно запросили исходный HTML.
Сохраняйте дополнительно в localStorage информацию о товаре, с помощью
localStorage.setItem('cart', JSON.stringify(product))

А при загрузке странице проверяйте что есть в локал стораже и если там есть что-то в соответствующем ключе, то заполняйте корзину элементами.

ну вариантов несколько.
Первый - искать сразу элементы с нужным значением

let name1 = document.querySelectorAll('.js-filter-wrap a[data-filter="box1"]')

Второй - проверять в цикле item.dataset && item.dataset.filter === 'box1'

Так Вы же со строками работаете.
Так и напишите.

row.OrderLabel = ["<p>ожидается товар</p>", "<p>перезвонить</p>", "<p>тестовая метка</p>"]

Примерно так. А там уже дальше может подогнать надо Вам будет. Добавить проверку на 0 и тд.

inputSumm.addEventListener('change', updateSumm)
selectValue.addEventListener('change', updateSumm)

function updateSumm() {
  text.textContent = (Number(inputSumm.value) * 1.5) / Number(selectValue.value)
}

P.s. inputSumm, selectValue и text - это элементы по их id.

Вам будет полезно ознакомиться со статьями:
https://learn.javascript.ru/introduction-browser-events
https://learn.javascript.ru/events-change-input

Вот вариант решения. На проблемную строку указал Дмитрий Беляев.
Помимо сомнительного решения хранить данные в DOM так же дополню:
1) Используйте const по умолчанию, let только если будете менять значение переменной. При этом, если в переменной объект или массив, а Вы меняете свойство объекта или элементы массива, то это тоже const.
2) Не надо обращаться в DOM при вызове функции, чтобы найти там какой-то элемент. Элемент никуда не девается в Вашем случае. Соответственно, элемент лучше найти один раз вне функции, а внутри функции только обращаться к переменной, которая хранит этот элемент. Поиск в DOM одна из самых медленных операций.
3) Не используйте innerHTML без реальной необходимости. textContent в Вашем случае лучше подходит. Так быстрее и безопаснее.

Идеальный путь:
Для случая, когда у Вас уже есть все необходимые размеры изображений:
picture

Если их нет, то на фронте ресайзить картинки не надо.
У вас на бэке должен быть ресайзер картинок, который по урлу отдаёт картинку определённого размера.
Например: https://mySite/assets/img/640/480/picture.png - возвращает картинку с оригинальным размером 640х480.
А на фронте, во vue в Вашем случае, Вам тогда просто нужно будет написать миксин или компонент картинки, в который нужно будет передавать размеры картинки и её название, и чтобы возвращался либо корректный путь до картинки, если это метод миксина, либо картинка с правильным урлом.
И в конечном итоге это опять же нас возвращает к picture.

Нормальный путь(Если Вы занимаетесь оптимизацией графики):
Пользуйтесь CSS media - на брэйкпоинтах меняйте картинке ширину и высоты.

Плохой путь:
Вешайтесь на ресайз окна и подменяйте атрибуты ширины и высоты для картинки.

В Вашем случае можете сортировать по id, но Вы указали что у двух элементов он одинаков, а это может мешать сортировке - давать не тот результат, которого ожидаешь, если это не опечатка.
А можете по коду символа первой буквы:

[
  {id: 1, title: "Другое"},
  {id: 2, title: 'Товары'},
  {id: 2, title: 'Услуги'}
].sort((a, b) => b.title.charCodeAt(0) - a.title.charCodeAt(0))

Вот тут я давал ссылки на разделы документации, которые должны помочь в решении Вашего вопроса и научить перекрашивать что угодно в VSC
Создание своей темы в VS Code?

Добавляйте обработчик начала тача на нужный элемент или весь документ. (touchstart)
Сохраняйте позицию прикосновения.
Добавляйте обработчик окончания прикосновение (touchend), в котором будете смотреть на конечную координату касания.
Если конечная координата по X больше начальной - значит произошёл свайп слева направо и наоборот.
Вызвать функцию отображения меню.
Профит.

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

Или, например, нужны все элементы с шириной width: 200px.

Если вам в академических целях, то как-то так:

Array.prototype.filter.call(document.querySelectorAll('*'), function(element){
  const style = window.getComputedStyle(element).width
  return style && style === '200px'
})

Если в проект хотите это поставить, то я бы предложил Вам ,как минимум, не брать за это никаких денег.
А лучше ещё и заплатить заказчику и извиниться.

div - нет.
Максимум что можно это вставить значение какого-то html-атрибута через функцию attr.
Но даже если написать там хтмл, то вставится всё равно строкой.

Вот то, о чём Вы просите. Только не ясно зачем Вам это именно через фильтр.

"Каждый охотник желает знать, где сидит фазан.".split('').filter(function(char, idx, arr){
    return (idx === 0 || arr[idx-1] === ' ') && char
})

Ошиблись Вы вот тут:
i14.value.length // i14.value строка.
Соответственно, Вы смотрите не на число, а на количество введённых в поле ввода символов. Нужно преобразовать в число.
Number(i14.value)

А вот решение по проще от меня: