Eugene Chefranov

@media screen and (min-width: 48em)
ul.products li.product {
     padding: 20px;
}

@media (max-width: 1199px)
.sf-menu {
    background-color: #000;
}

@media (max-width: 1199px)
.top-nav .sf-menu a {
    color: #000;
}

background: linear-gradient(to right, #fa8f15, #f0565d);

На странице реализовал слайдер товаров, по клику "Новинки" слайдер почему то теряет ширину и ломается сетка.

$('.type_slider').on('click', function() { // класс кнопки таба
    $('.responsive').slick('reinit'); // реинициализация слика
})

А также как привязать "стрелки", чтобы они не дублировались при смене слайдера?

<div class="slider-arrows noshow_mob">
    <span class="slider-arrow slide-prev"><img width="16" src="img/back.png" alt="Prev" /></span>
    <span class="slider-arrow slide-next"><img width="16" src="img/next.png" alt="Next" /></span>
</div>

$('.slide-next').on('click', function() { // класс кнопки далее
    $('.responsive').slick('slickNext'); // применяем к слайдеру метод
});

$('.slide-prev').on('click', function() { // класс кнопки назад
    $('.responsive').slick('slickPrev'); // применяем к слайдеру метод
});

<script scr='https://code.jquery.com/jquery-3.5.1.min.js'></script>

$('.nav__menu a.has-dropdown').on('click', function(e) {e.preventDefault()})