Rsa97

Для span.price установить нужный цвет, для span.price-amount вернуть цвет, который был изначально.

Через чистый CSS никак не заменить. Только если вешать JS обработчик на input и менять класс label.

Если бы убрать :before, то можно было бы использовать

Нельзя. Селектор с :has у вас относится к label, а без него - к input.

html:lang(en) body {
  background-color: lightblue;
}

Встречный вопрос - какой стиль должен примениться при ширине 1023.01px?
Замените 1023px на 1023.99px или используйте новый синтаксис

- @media (min-width: 769px) and (max-width: 1023px) {
+ @media (769px <= width < 1024px) {

https://css-tricks.com/the-new-css-media-query-ran...
https://caniuse.com/css-media-range-syntax

background: conic-gradient(at 2px 2px, #ccc 90deg, #888 90deg 180deg, #ccc 180deg 360deg)
    #{4px 4px} / #{4px 4px};

Через положение в DOM. Например, через общего родителя.

В CSS никак. Используйте JS.

Это потому, что jsfiddle подставляет свои тэги в конец кода и Аист перестаёт быть последним потомком своего родителя, им становится script.

Sticky-элемент плавает в пределах родителя. У вас он находится внутри header и уезжает вместе с ним.

@font-face {
-    font-family: 'Rubik Doodle Shadow', system-ui;
+    font-family: 'Rubik Doodle Shadow';
    src: url(fonts/RubikDoodleShadow-Regular.woff2) format('woff2');
}

Потому что ~ - это следующий элемент того же уровня (subsequent-sibling), а вам нужен потомок (children).

Ну так вы ставите класс на текущей странице, а потом сразу загружаете другую, которая про установленный на предыдущей странице класс ничего не знает.

Написать своё CSS-правило min-width для класса modal

RTFM

The :valid CSS pseudo-class represents any or other element whose contents validate successfully.

А дальше читаете по ссылке про валидацию полей в зависимости от типа и атрибутов.
Конкретно в вашем случае текстовое поле без дополнительных атрибутов. Оно будет валидным при любом значении, в том числе и при пустой строке.