/* =========================================================
   slider-clean.css
   Очищенный слайдер: fluid-ширина, без фиксированных left/width,
   которые вызывали overflow на телефонах.
   ========================================================= */

.slider {
    width: 100%;
    max-width: 576px;
    height: auto;
    aspect-ratio: 576 / 480;
    position: relative;
    z-index: 1;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
}

.items {
    display: none;
}

.pags {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    display: flex;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pags li {
    float: none;
    margin: 0;
    height: 10px;
}

.pags li a {
    background: url(../images/pag_slider.png) 0 0 no-repeat;
    width: 53px;
    display: block;
    height: 10px;
}

.pags li.current a,
.pagination li:hover a {
    background-position: 0 -15px;
}

.banner {
    width: min(260px, 45%);
    max-width: 100%;
    overflow: hidden;
    position: absolute;
    top: auto;
    bottom: 48px;
    left: 0;
    z-index: 15;
    color: #fff;
    background: url(../images/png.png) left top repeat;
    padding: 0;
    border-radius: 0 10px 0 10px;
    box-sizing: border-box;
}

.banner span {
    display: block;
    padding: 16px;
    font-size: 14px;
}

#tmslider .prev,
#tmslider .next {
    display: block;
    width: 43px;
    height: 58px;
    background: url(/images/tm-direction.png) 0 0 no-repeat;
    position: absolute;
    z-index: 15;
    top: 50%;
    margin-top: -29px;
    left: 0;
    visibility: hidden;
}

#tmslider:hover .prev,
#tmslider:hover .next {
    visibility: visible;
}

#tmslider .next {
    background-position: -43px 0;
    left: auto;
    right: 0;
}

#tmslider .prev:hover {
    background-position: 0 -58px;
}

#tmslider .next:hover {
    background-position: -43px -58px;
}

/* Мобильные */
@media (max-width: 600px) {
    .slider {
        max-width: 100%;
        border-radius: 8px;
    }

    .banner {
        width: min(200px, 55%);
        bottom: 36px;
    }

    .banner span {
        padding: 12px;
        font-size: 13px;
    }

    .pags {
        bottom: 8px;
    }
}