Ankhena

Сначала нужно узнать, зачем для этого два элемента div и button. Достаточно одной кнопки. Если что, у неё есть два псевдо. В вашем случае не видно зачем второй псевдо.

Но в современном мире эта задача легко решается вообще без псевдо с помощью background-origin
https://sitist.ru/gradient-border.html

Есть.

Практически все способы вставки svg в html не позволяют менять цвет при помощи css.

При вставке в разметку вообще нет проблем менять цвет.

fill: red;
stroke: green;

и т.д.
Альтернативный вариант, а разметке задаем в заливку или обводку currentColor, в CSS меняем свойство color.

Ещё один - использование кастомных свойств.

При вставке прямо в CSS
Маски и фильтры.

mask: url(img.svg) no-repeat center / contain;
  background: red;
  
  &:hover {
    background: green;
  }

Один из вариантов - инлайнить SVG прямо в CSS (в кастомные свойства, чтобы не мусорить в селекторах).
Другой вариант - собираем стек из SVG и используем в url в маске.

Собственно, стеки можно использовать где угодно, в отличие от устаревшего спрайта.
https://telegra.ph/Stack--sprajt-zdorovogo-chelove...

https://excalidraw.com/

Очень интересный код.
Ссылки на нужные разделы потеряны, а зато зачем-то картинки в разметке.

<ul class="header__nav">
    <li class="nav__item">
      <a class="nav__link nav__link--favorites" href="">
        <span class="visually-hidden">Избранное</span>
      </a>
    </li>
    <li class="nav__item">
      <a class="nav__link nav__link--profile" href="">
        <span class="visually-hidden">Профиль</span>
      </a>
    </li>
    <li class="nav__item">
      <a class="nav__link nav__link--card" href="">
        <span class="visually-hidden">Корзина</span>
      </a>
    </li>
</ul>

.header__nav {
  display: flex;
  gap: 42px;
}

 .nav__link {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background-color: rgb(246, 246, 246);
}

/* доступно скрываем текст */
.visually-hidden {
  position: fixed;
  transform: scale(0);
}

И в модификаторы пишете фоны для модификаторов ссылок. Или для их псевдоэлементов, как удобнее.

Если с псевдо, то либо делаем их инлайн-блочными и vertical-align: top; и дописываем сcылкам

align-content: center;
text-align: center;

либо ссылки делаем флексами и стандартно

display: flex;
  align-items: center;
  justify-content: center;

https://jsfiddle.net/wav1q8kr/

display: flex;
flex-direction: column;
flex-wrap: wrap;

Сделать элемент или псевдоэлемент прозрачным для клика: pointer-events
Через это же свойство можно вернуть обратно для дочерних.

Переверстать гридами.
Например, быстренько как-то так https://jsfiddle.net/d2mnfq7o/
Разумеется, нужно дорабатывать под себя.

Что же вас заставляет в современном мире верстать инлайн-блоками?

1. Если элементов только на одну строку, то
.elem:not(:last-child) {margin-right: NNpx}
либо .elem + .elem {margin-left...}
2. Если строк больше, но элементов известное количество, переписываем предыдущую формулу через nth-child
3. Если строк больше и количество элементов в строке неизвестно, придется использовать идиотский способ с отрицательным margin для контейнера на величину лишних отступов.

Но ведь есть же простой, удобный, логичный gap в гридах и флексах!

Открыть вкладку Event Listeners и посмотреть.

Обратите внимание на галочку Ancestors - она покажет или скроет родительские события.

есть ли вариант чтобы верстка перестраивалась на больном расширении согласно макета чтобы не пршлось скрывать или показывать объекты?

Да, конечно и даже не один.
Вы совершенно верно в вопросе указали теги флекс и грид. Вот с их помощью.

Флекс
Десктоп: Оборачиваем контентyю часть в div. Родителю задаем флекс. Два элемента встают в ряд.
Мобилки: для контентного div задаем display: contents, после этого он станет как будто прозрачным или как будто его нет.
Ну и дальше с помощью order расставляем элементы в нужном порядке.

Грид
Несколько вариантов.
Первый с такой же оберткой как для флекса.
Второй - все элементы россыпью и просто меняем сетку.

Тесты разных вариантов
https://codepen.io/AnnaSummer/pen/WNBwPyz


Наверняка что-то ещё забыла

Это увлекательная история.
Вот представьте себя на месте браузера.
Что видите в коде:
Картинка должна занять 100% высоты и width auto.
Как будете рисовать высоту, если у родителя картинки высота тоже 100%, у его родителя тоже нет и т.д. до самого верха. От чего считать проценты? Вроде есть какой-то намек из top 0 и bottom 0. Не прямой, конечно, но хоть что-то.
Теперь про ширину: написано нарисуй авто. Размер в атрибуте не задан, но можно посмотреть, что там у файла. И хотелось бы сохранить пропорции.
Следующий этап размышлений о том, что делать с picture. Вроде надо растянуть по содержимому, но у него auto, которым и так сложно решить что делать.

Как рисовать будете? Как догадаетесь что хотел сказать верстальщик, если у браузера нет возможности заглянуть ни к вам в голову ни в макет?

Ну вот FF берет в качестве ширины для picture исходную ширину картинки.

Всё это о том, что когда нет четких инструкций что делать, браузер пытается как-то интерпретировать написанное. Разные браузеры будут делать это по-разному. Причем с течением времени это поведение может меняться.

Как исправить:
Вариант 1 (похуже)
Тег picture тег с особенностями и ещё и часто не известно, будет ли он вообще в разметке или клиенты его потеряют.
Поэтому самое умное, что можно ему задать это display: contents;, чтобы не мешался.
И дальше работать с оберткой. Тут вариантов много. Например, задать пропорции, а картинке object-fit. Правда у FF есть проблемы с aspect-ratio от высоты.

Вариант 2 (получше)
Картинка, по крайней мере в примере, вообще не контентная и её можно убрать в стили (псевдоэлемент и его фон)

1. Совсем банальный: вешайте класс на родительский блок.

2. Через :has

.catalog__info:has(.catalog-filter.active)  .catalog__wrapper {
    margin-bottom: 50px;
}

.catalog__info:has(.catalog-filter.active)  .catalog__btn {
    display: none;
}

3. Самый интересный: с помощью кастомных свойств.

.catalog-filter {
  --open-btn-display: block;
  --margin: 0;
}

.catalog-filter.active {
  --open-btn-display: none;
  --margin: 50px;
}

.catalog__wrapper {
  margin-bottom: var(--margin);
}

.catalog__btn {
  display: var(--open-btn-display);
}

p.s. Зачем вам две кнопки, если они в одном месте в разметке, я не придумала. Меняете текст и стили и всё. Тогда уж логичнее закрывающую засунуть внутрь всего открываемого блока, тогда и не нужно с ней отдельных манипуляций.

В каком смысле "необходимо"?
Но вообще, уже много лет есть замена шрифту - это символьные svg спрайты.
А теперь и стеки из svg, которые работают откуда хочешь. И из разметки и из стилей.

Мне ещё симпатичен вариант использования иконок в кастомных свойствах css. А дальше bg или маски.

Почему рамка не надевается дальше углов?

Потому что 46 это очень много для картинки 50х50. Всяко меньше половины должно быть.
Почитайте что делает border-image-slice.

Хорошо, конечно, что вы уверены, что высота точно 60. Что вас не волнует никакое переполнение шапки ни по какой из причин (увеличенный шрифт у пользователя, отвалился дизайнерский шрифт, использование переводчиков и другие банальные причины)
Если так, то да, calc и вперед.

Разумнее, задать родителю высоту 100vh и грид. В котором первой строке задан min-content, а для main 1fr, т.е. все оставшееся пространство.
grid-template-rows: min-content 1fr
Аналогично можно сделать и флексом и flex-grow для main.

Так получится универсальное решение, не зависящее от высоты шапки.

Вообще в одну строчку

[...document.querySelectorAll('input[type="checkbox"]')].forEach(item => item.checked = true);

Либо перечисляете классы через запятую

querySelectorAll('.myCheckBox1, .myCheckBox2, .myCheckBox3')

Могу ответить и на вопрос где это написано. Вот тут, прямо в спеке.
А также попробую перевести, что там написано.

Там идет речь о том, что комментарии можно оборачивать в article, когда они являются дочерними элементами "большого" article. Т.е. той самой независимой конструкцией является внешний article, сама статья.
И тогда всё логично, сама статья, вместе с комментариями к ней (если нужно) может быть использована где угодно, в том числе и на других сайтах без потери контекста.