0xD34F

через mix-blend-mode, например

Прописать в стилях дефолтное значение свойства fill:

.spoiler__button path {
  transition: fill .7s ease-in-out;
+ fill: #ECECEC;
}

Потому что (тут, кстати, следует немедленно поинтересоваться - с чего бы это стиль, относящийся к одному компоненту, описывается в другом?)

.product {
    display: flex;

По умолчанию flex располагает элементы горизонтально.

Добавьте flex-direction: column; для .product. Элементам внутри .product, которые должны находиться на одной строке, добавьте общие обёртки, которым также будет задан display: flex;.

.tabs__column {
  display: block;
  column-count: 2;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

Оберните каждый из элементов .reviews__item в дополнительный div.

Добавьте в начало скрытый option:

<select>
  <option value="" hidden>здесь ваше описание</option>
  ...

UPD. А зачем тэг "javascript"? Собираетесь добавлять "описания" динамически? Если так, есть следующие варианты:

select.innerHTML = '<option value="" hidden>...</option>' + select.innerHTML;

select.insertAdjacentHTML('afterbegin', '<option value="" hidden>...</option>');

const option = document.createElement('option');
option.value = '';
option.hidden = true;
option.innerText = '...';
select.prepend(option);

const option = new Option('...', '');
option.style.display = 'none';
select.insertBefore(option, select.firstElementChild);

https://jsfiddle.net/bkdcexhw/

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

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

Оберните содержимое .media в дополнительный div, которому задайте стиль:

.media > div {
  display: flex;
}

https://jsfiddle.net/Lys6g9za/

https://jsfiddle.net/1z2hbamc/

pointer-events: none для ::after

погуглил за вас

https://codepen.io/anon/pen/QYXYbv?editors=1100

например

UPD. Используем элемент path, есть внешний контур, покрывающий весь svg, и множество внутренних - для вырезания дырок. Чтобы дырки вырезались, их надо рисовать в направлении, обратном тому, в котором рисовалась основная фигура. То есть, контур рисуется против часовой стрелки:

rectPath = `M0 0 v${vert} h${horz} v${-vert} h${-horz}`

От (0, 0) сначала движемся вниз (v - вертикальное смещение), затем вправо (h - горизонтальное), далее вверх, и наконец обратно горизонтально (вернулись в (0, 0)).

А дырки по часовой стрелке:

cellPath = ([ x, y ]) => `M${offset(x)} ${offset(y)} h${side} v${side} h${-side} v${-side}`

Сначала смещаемся в горизонтальном направлении вправо, затем вниз, потом обратно влево, и обратно вверх.

.xxx {
  background: silver;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  padding: 0.3em 0.6em;
  position: relative;
}

.xxx::before {
  content: "";
  width: 1em;
  height: 1em;
  left: -0.2em;
  top: -0.2em;
  background: orange;
  position: absolute;
  z-index: -1;
}

https://jsfiddle.net/km85s9fv/

overflow: auto

например

Псевдоэлементами. Например.