Как расположить кнопки слайдера в Swiper.js правильно?

Question

[Клим Куликов]

в другом документе выглядело нормально, но как только перетащил в нынешний, то всё начало жить своей жизнью. Кнопки съехали на картинки, перестали краситься в цвета. Как это исправить?
Нынешний вид
Как должно быть

<div class="products-block">
                    <div class="products-block-title_wrapper">
                        <h5 class="products-block-title">Грунт и субстраты</h5>
                        <a href="./priming.html" class="catalog-link">Перейти в каталог</a>   
                    </div>

                    <div class="slide-container swiper">
                        <div class="slide-content">
                            <div class="card-wrapper swiper-wrapper">
                                <div class="card swiper-slide">
                                    <a href="./product-page1.html" class="product-card">
                                        <div class="image-content">
                                            <div class="card-image">
                                                <img src="./IMG/biogumus.png" alt="" class="product-img">
                                            </div>
                                        </div>
                                        <div class="card-content product-info">
                                            <span class="product-name">Биогумус (вермикомпост)</span>
                                            <span class="product-cost">от 65 ₽</span>
                                        </div>
                                    </a>
                                </div>
                                
                                <div class="card swiper-slide">
                                    <a href="./product-page2.html" class="product-card">
                                        <div class="image-content">
                                            <div class="card-image">
                                                <img src="./IMG/torf-niz.png" alt="" class="product-img">
                                            </div>
                                        </div>
                                        <div class="card-content product-info">
                                            <span class="product-name">Торф низинный нейтральный PH 7.0</span>
                                            <span class="product-cost">от 90 ₽</span>
                                        </div>
                                    </a>
                                </div>

                                <div class="card swiper-slide">
                                    <a href="./product-page3.html" class="product-card">
                                        <div class="image-content">
                                            <div class="card-image">
                                                <img src="./IMG/torf-kisl.png" alt="" class="product-img">
                                            </div>
                                        </div>
                                        <div class="card-content product-info">
                                            <span class="product-name">Торф верховой кислый</span>
                                            <span class="product-cost">от 90 ₽</span>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
            
                        <div class="swiper-button-next swiper-navBtn"></div>
                        <div class="swiper-button-prev swiper-navBtn"></div>
                        <div class="swiper-pagination"></div>
            
                    </div>
                </div>

/* sliders */

.products-title {
    color: #000;
    font-family: 'Lato', sans-serif;
    font-size: 53px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 63.6px */
    margin-top: 120px;
    margin-bottom: 13px;
}

.products-block-title {
    color: #3F6E5B;
    font-family: 'Lato', sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 48px */
    margin-top: 40px;
}

.catalog-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
    color: #000;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 19.2px */
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
    margin-bottom: 65px;
}

.slide-container {
    max-width: 1120px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.slide-content{
    padding: 30px 20px;
    overflow: hidden;
    height: 480px;
}

.card {
    background-color: #FFF;
    border-radius: 20px;
}

.card-image {
    position: relative;
    width: 340px;
    height: 240px;
    border-radius: 20px;
}

.card-image .product-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}

.swiper-navBtn{
    color: #8BB91F;
    transition: color 0.3s ease;
}

.swiper-navBtn:hover{
    color: #9bd416;;
}

.swiper-navBtn::before,
.swiper-navBtn::after{
  font-size: 50px;
  font-weight: 700;
  color: #8BB91F;
  margin: 100px;
}

.swiper-button-next{
    right: 0;
    margin-left: 20px;
}

.swiper-button-prev{
    left: 0;
    margin-right: 100px;
}

.swiper-pagination-bullet{
    background-color: #8BB91F;
    opacity: 1;
}

.swiper-pagination-bullet-active{
    background-color: #658e04;
}

.product-card {
    width: 540px;
    height: 500px;
    background: #FFF;
    border-radius: 24px;
}

.product-card:hover {
    -webkit-transform: translateY(-25px);
        -ms-transform: translateY(-25px);
            transform: translateY(-25px);
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}

.product-name {
    display: block;
    color: #1C1F21;
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 36px */
    margin-top: 18px;
    margin-bottom: 18px;
    margin-left: 34px;
}

.product-cost {
    display: block;
    color: #3F6E5B;
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: 120%; /* 38.4px */
    margin-left: 34px;
}

/* sliders */

HTM сократил для удобства восприятия

Comments

[Сергей delphinpro]

Инспектируйте кнопки, смотрите, какие стили к ним применяются, вносите соответствующие исправления.
Здесь нет проблемы. Нужна только отладка кода - рабочие будни разработчика.

[Клим Куликов]

Сергей delphinpro, в том то и дело, что в дев-тулзах они якобы находятся внутри <div class="card-wrapper swiper-wrapper">, но они находятся вне его

[Сергей delphinpro]

Клим Куликов, поставить кнопки на место можно, только изучив стили в тулзах. Это доступно только вам. Как вариант, можете сделать пример воспроизводящий поведение в песочнице или дать ссылку на страницу. Тогда кто-то сможет посмотреть.

[Ankhena]

Подозреваю, что их нужно вынуть из slide-content
И спозиционировать куда вам нужно.

[Danny Arty]

Проверьте через валидатор на наличие незакрытых тегов, учитывая что та же самая верстка на другой странице отображается норм

[Клим Куликов]

Ankhena, они в slide-container. если пытаюсь их спозиционировать, то их перекрывает чем-то. Я уже пробовал задать z-index, не получается

[Ankhena]

Клим Куликов, так открывайте девтулз и смотрите чем перекрывает, обрезает и что происходит.
Либо делайте песочницу на codepen.io