0xD34F

<div class="icon"></div>

.icon {
  font-size: 100px;
  border: 0.1em solid black;
  border-radius: 50%;
  display: inline-block;
  width: 1em;
  height: 1em;
  position: relative;
  transform: rotate(45deg);
}

.icon::before {
  content: "";
  display: inline-block;
  position: absolute;
  background: black;
  width: 0.1em;
  height: 100%;
  left: 0.5em;
  transform: translateX(-50%);
}

https://jsfiddle.net/grwcht2L/

Массив цветов - вместо строк пусть будут объекты, содержащие два свойства, цвет и url картинки:

const colors = [
  { color: '...', image: '...' },
  { color: '...', image: '...' },
  ...
];

Рендеринг палитры - заменяете background-color на background-image:

const colorsItems = colors
  .map(n => `
    <button
      style="background-image: url(${n.image})"
      class="palette-button"
      data-color="${n.color}"
    ></button>`)
  .join('');

Стилизация .palette-button - приводите в порядок background:

background-position: center;
background-size: contain;
background-repeat: no-repeat;

Потому что вы так стили указали. Делаете меню видимым только по ховеру на .main-header__menu. Увели курсор на другой элемент - меню пропало.

Надо показывать меню по ховеру и на самом меню тоже:

.main-header__menu:hover + .main-header__wrap-submenu,
.main-header__wrap-submenu:hover {
  opacity: 1;
  visibility: visible;
}

Хорошо бы если на чистом css

Придётся сильно поменять разметку. Управлять видимостью вкладок можно с помощью скрытых радиокнопок.

но и js тоже можно

document.addEventListener('click', ({ target: { tagName, parentNode: p } }) => {
  if (tagName === 'SUMMARY') {
    document.querySelectorAll('details').forEach(n => n.open = n.open && n === p);
  }
});

// или

const summaries = document.querySelectorAll('summary');
const details = Array.from(summaries, n => n.parentNode);
const onClick = e => details.forEach(n => n.open = n.open && n === e.target.parentNode);
summaries.forEach(n => n.addEventListener('click', onClick));

<div class="icon"></div>

.icon {
  font-size: 60px;
  display: inline-block;
  border: 0.1em solid black;
  border-radius: 0.5em;
  width: 1em;
  height: 2em;
  position: relative;
}

.icon::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 0.2em;
  height: 0.2em;
  background: black;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  box-shadow: 0 -0.4em black, 0 0.4em black;
}

.icon::after {
  content: "";
  display: inline-block;
  border: 0.15em solid black;
  border-left: 0;
  border-top: 0;
  width: 0.4em;
  height: 0.4em;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}

https://jsfiddle.net/udygv7xr/

.gallery__item:hover::before {
  content: "";
  position: absolute;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  left: 10px;
  top: 10px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  background: transparent;
  z-index: 666;
}

При загрузке страницы вы прячете .accordion__grandchild__item, а переключаете видимость у родительских элементов - .accordion__grandchild__group. Надо как-то устранить это печальное несоответствие.

анимируется

UPD. Animatable CSS properties.

Всем элементам добавляете общий класс menu__item, ну и вперёд:

.opacity {
  opacity: 0.4;
}

const $items = $('.menu__item')
  .mouseenter(e => $items.not(e.target).addClass('opacity'))
  .mouseleave(e => $items.removeClass('opacity'));

.animate {
  z-index: -1;
}

Скрыть элементы через задание им нулевого размера:

.hidden {
  transform: scale(0);
}

Чтобы появлялись плавно, добавить transition:

.item {
  transition: transform 0.5s;
}

Когда надо элементы показать, снять класс:

document.querySelectorAll('.item').forEach(n => n.classList.remove('hidden'));

https://jsfiddle.net/dgo3jmsa/

input:checked + label .products__size {
  /*
    здесь задаёте значения для color и text-shadow,
    в input:checked + label оставляете только border-color
  */
}

Меняют цвет все. Просто не видно - правую границу перекрывает следующий элемент.

Увеличивайте label'ам z-index при hover'е.

@media screen and (max-width: 768px) {
  br {
    display: none;
  }
}

.big-dropdown > .dropdown > button[aria-expanded="true"]::after {
  content: "\25B2";
}

UPD. https://jsfiddle.net/g5efkazL/

Свойство width у элементов headers. Число или строка. Если число - это пиксели. Если строка - доступны все единицы измерения css (значение подставляется в style соответствующего th).

В документации не нашёл.

Я бы скорее поверил в "не нашёл документацию". Чего там можно было не найти - без понятия, всё на поверхности лежит (в блоке API: компонент v-data-table, вкладка props - выбраны по умолчанию, достаточно просто скроллить вниз и читать, какой параметр за что отвечает - неужели это так сложно?).

Слот item позволяет определить разметку строки целиком:

<v-data-table>
  <template #item="{ item }">
    <tr>
      <td class="какой-то_класс">{{ item['какое-то свойство'] }}</td>
      <td class="ещё_какой-то_класс">{{ item['ещё какое-то свойство'] }}</td>
      <td class="ну_и_так_далее">{{ item['как видите, ничего сложного'] }}</td>
    </tr>
  </template>
</v-data-table>