Виталий Першин

Потому что там вложенные селекторы, а следовательно специфичность нативных стилей выше. Если хотите переопределить стили, вам необходимо либо применить такую же специфичность, но определить стили после стилей swiper:

.header-slider>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic

либо повысить специфичность:

.header-slider.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic

Но лучше создать кастомную пагинацию и самостоятельно определять стили:

pagination: {
            el: '.dots',
            type: "bullets",
            clickable: true,
            bulletClass: "dot",
            bulletActiveClass: "dot_active",
            renderBullet: function (index, className) {
                return '<div class="' + className + '"></div>';
            },
        },

Воспользуйтесь tippyjs и вызывайте её с параметром:
appendTo: () => document.body,
Контент будет помещен поверх всего сайта

Еще отдельно вопрос- по структуре кода можно ли оставить в таком виде слайдер в виде списка UL>LI, каждый li завернуть в .swiper-slide или переделать на .swiper-slide> div>button

li должны быть вложены в ul в таком виде:

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

И никак иначе, поэтому вы можете сделать разве что так:

<ul class="swiper-wrapper">
    <li class="swiper-slide"></li>
    <li class="swiper-slide"></li>
    <li class="swiper-slide"></li>
</ul>

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

.drinks__block-btn:hover ~ .drinks__block-title {
    color: white 
}

И drinks__block не самое удачное название, судя по приставке __block вы в глубине души понимаете, что это блок, который можно назвать к примеру card и ваш код будет выглядеть намного приятнее:
card__btn, card__title и т.д..

<div class="drinks__card card">
    <button class="card__btn">ORDER NOW </button>
    <div class="card__body">
        <img class=card__img" src="images/drinks-img-1.png" alt="">
        <h3 class="card__title">ESPRESSO</h3>
         <p class="card__text">Without Milk</p>
        <p class="card__price">300 ₽</p>
    </div>
</div>

Например так:

или так:

или так:

Что конкретно вам нужно?

Вычисляемые свойства?

Потому что вы изначально добавляете видимый элемент. Как вариант попробуйте с css анимацией:

Так вы сами сделали, уберите:

.select2{
width:100% !important;
}

upd. Чтобы select2 не растягивался внутри грид контейнера задайте блоку в котором находится select2 свойство min-width: 0;

Ведь когда накладываю тень то кнопка оказывается квадрадной а не по форме рисунка.

Если проблема только в этом, то используйте drop-shadow

Это не баг, это ваша невнимательность. Вы переключаетесь на вторую галерею и начинаете листать до конца, слайды ушли в лево и перекрыли предыдущую галерею, почему? Потому что вы не добавили overflow: hidden; к контейнеру .gallery__slider-inner в котором находится галерея.. Поэтому когда вы переключаетесь обратно на первую галерею, вы все еще видите вторую минус один слайд от неё за счет пролистывания переключателя. Надеюсь вы поняли о чем я говорю

Используйте mix-blend-mode

Как-то так:

Вот код из примера, который я вам дал в прошлом вопросе:

pagination: {
			el: el.querySelector('.swiper-pagination'),
			clickable: true
		},
		 navigation: {
			  nextEl: el.querySelector('.swiper-arrow-next'),
			  prevEl: el.querySelector('.swiper-arrow-prev')
		 }

Вот ваш код:

pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  navigation: {
    nextEl: '.button-next',
    prevEl: '.button-prev',
  },

Что еще нужно сделать, чтобы вы начали думать?

Например так:

Вы можете использовать document.write , данный метод вставляет текст или html разметку непосредственно во время чтения документ. В вашем случае если js отключен, то он не выполнится и ваш прелоад не появится вообще.

<script>
      document.write('<div class="_pre-load-gradient"></div>')
 </script>

Это самый быстрый способ вставки в документ средствами js

locomotive-scroll
ScrollMagic
scrolltrigger

variableWidth: true

Как-то так: