/*
 * Royal Canin brandzone: кастомные стили страницы.
 *
 * Подключается последним (после build.min.css) в /brandzone/royal-canin/index.php,
 * чтобы при конфликте правил перекрывать стили сборочного бандла.
 *
 * Ранее эти правила были заданы inline-блоками <style> внутри index.php.
 * Порядок правил и медиазапросов сохранён как в исходной разметке.
 */

/* --- Заголовок страницы --- */

.bth-main-title-container {
    display: none;
}

/* --- Главный баннер --- */

.main {
    margin-top:-24px;
}

.ixi-main-banner__logo {
    width: 165px;
    margin-top:21px;
    margin-left:16px;
}

.ixi-main-banner {
    position:relative;
}

.ixi-main-banner .banner-img {
    width:100%;
}

.ixi-main-banner picture {
    width: 100%;
}

.ixi-main-banner__title {
    color:#E2001A;
    font-size:40px;
    font-weight: 700;
    position: absolute;
    top:0;
    left:0;
}

.ixi-main-banner__slogan {
     margin-left:16px;
     margin-top:20px;
     line-height: 110%;
}

.ixi-main-banner__red-line {
    height: 77px;
    background-color: #E2001A;
    color:white;
    display:flex;
    align-items: center;
    justify-content: center;
}

.ixi-main-banner__red-line img {
    width: 186px;
}

.ixi-main-banner__note {
    font-size: 12px;
    color:#808285;
    padding:36px 32px 62px 32px;
    text-align: justify;
}

.ben{
            margin:80px 16px 48px 16px;
            color:#666666;
            font-size:16px;
        }
        .ben-img {
            width:82px;   
            flex-shrink: 0;
        }
        .ben-text {
            display:flex;
            justify-content: space-between;
            
        }
        .ben-title {
            color:#E2001A;
            font-size:30px;
            font-weight: 700;
            margin-bottom:16px;
            text-transform: uppercase;
            line-height: 110%;
        }
        .ben-subtitle {
            border-left:4px solid #E2001A;
            padding-left:8px;
            margin-bottom:8px;
            font-weight: 500;
            padding-right:16px;
            line-height: 120%;

        }
        .ben-description {
            padding-left:12px;
            padding-right:20px;
            margin-bottom:48px;
            line-height: 120%;
        }

        .ben-list {
            list-style: disc;
            padding-left:16px;
        }
        .ben-list li {
            margin-bottom:12px;
        }
        .ben sup {
            top:-8px;
        }

        .reserch {
            margin:0 16px;
        }

        .reserch-block {
            border-left:4px solid #E2001A;
            padding-left:16px;
        }

        .reserch__title {
            color:#E2001A;
            font-size: 20px;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom:8px;
            line-height: 100%;
        }
        .reserch__subtitle {
            font-size:16px;
            line-height: 120%;
        }
        .red-text {
            color:#E2001A;
        }

@media (min-width: 768px) {
    .reserch {
                margin:0 80px;
            }
            .reserch__title {
                font-size:28px;
                line-height: 120%;
                width:576px;
            }
            .reserch__subtitle {
                font-size:18px;
                line-height: 130%;
                width:558px;
                margin-left:40px;
            }
            .ration {
                padding-top:50px;
            }

    .ben{
                margin:116px 80px 116px 80px;
                color:#666666;
                font-size:28px;
            }
            .ben-title {
                font-size:40px;
                font-weight: 700;
                text-transform: uppercase;
            }
            .ben-subtitle {
                border-left:4px solid #E2001A;
                margin-left:62px;
                padding-left:12px;
                margin-bottom:57px;
                padding-right:16px;
                width:360px;
            }
            .ben-description {
                padding-left:0;
                padding-right:20px;
                width:466px;
                margin-left:32px;
            }
            .ben-img {
                width: 220px;
            }
            .ben-list {
                font-size:18px;
            }

    .rc-splide {
        margin-top:100px;
    }

    .main {
        margin-top:-24px;
    }

    .ixi-main-banner__logo {
        width:258px;
        margin:70px 0 62px 80px;
    }

    .ixi-main-banner__red-line{
        display:none;
    }

    .ixi-main-banner__slogan {
        margin:0 0 0 80px;
        width:450px;
        font-size:62px;
    }

    .ixi-main-banner__note {
        font-size:14px;
        position:absolute;
        bottom:0;
        left:0;
        right:0;
        padding: 0 317px 0px 80px;
    }
}

/* --- Слайдер галереи (splide) --- */

.splide-navigation-block {
    display:flex;
    justify-content: center;
}

/*
 * Слайд — одно изображение без фиксированного aspect-ratio. Splide
 * растягивает слайды трека до высоты самого высокого элемента, поэтому
 * невысокие картинки оставляли под собой пустое место и слайд выглядел
 * «пустым». Явно растягиваем изображение по слайду.
 */
.rc-splide .splide__slide {
    display:flex;
}

.rc-splide .splide__slide img {
    display:block;
    width:100%;
    height:100%;
    -o-object-fit:cover;
    object-fit:cover;
}

/* Стрелки и элементы пагинации — кнопки, убираем браузерное оформление */
.splide-navigation-block .arrow-left,
.splide-navigation-block .arrow-right {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    padding:0;
    border:0;
    background:none;
    background-color:transparent;
    cursor:pointer;
    transition: opacity .3s ease, transform .3s ease;
}

.splide-navigation-block .arrow-left:disabled,
.splide-navigation-block .arrow-right:disabled {
    opacity:.4;
    cursor:default;
}

.splide-navigation-block .pagination-block .elem {
    padding:0;
    border:0;
    cursor:pointer;
    transition: background-color .3s ease, opacity .3s ease;
}

.splide-navigation-block .pagination-block .elem:focus-visible,
.splide-navigation-block .arrow-left:focus-visible,
.splide-navigation-block .arrow-right:focus-visible {
    outline:2px solid #E2001A;
    outline-offset:4px;
}

@media (hover: hover) and (pointer: fine) {
    .splide-navigation-block .arrow-left:not(:disabled):hover,
    .splide-navigation-block .arrow-right:not(:disabled):hover {
        opacity:.7;
    }

    .splide-navigation-block .pagination-block .elem:not(.active):hover {
        background-color:#E2001A;
    }
}

.arrow-left {
    margin-right: 92px;
}
.arrow-right {
    margin-left:92px;
}

.pagination-block {
    display:flex;
    align-items: center;
}
.pagination-block .elem {
    height: 6px;
    border-radius: 16px;
    margin:0 6px;
    background-color: #f6f6f6;
    width:84px;
}

.pagination-block .elem.active {
    background-color: #E2001A;
}

/*
 * Брейкпоинт как в build.min.css для остального контента брендзоны:
 * до 768px — мобильная раскладка, от 769px — desktop.
 *
 * Правила мобильной навигации идут ПОСЛЕ desktop-правил выше
 * намеренно: при равной специфичности побеждает последнее
 * объявление, а desktop-значения здесь заданы без media-запроса.
 */
@media (max-width: 768px) {

    /*
     * Стрелки прижаты к краям (отступ 16px), пагинация занимает
     * всё свободное место между ними.
     *
     * Ширина между стрелками на экране 320px:
     * 320 - 2*16 (края) - 2*24 (стрелки) = 240px,
     * то есть по 58px зазора с каждой стороны и 124px на кнопки —
     * ровно 3 кнопки по 40px с зазорами 2px.
     */
    .splide-navigation-block {
        --rc-arrow-size: 24px;      /* стрелка 24/24px */
        --rc-side-padding: 16px;    /* отступ стрелок от края экрана */
        --rc-arrow-gap: 48px;       /* зазор от стрелки до кнопок пагинации */
        --rc-dot-width: 40px;       /* кнопка пагинации 40/2px */
        --rc-dot-height: 2px;
        --rc-dot-gap: 2px;
        width:100%;
        padding:0 var(--rc-side-padding);
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        justify-content:space-between;
    }

    /*
     * Порядок и «непрожимаемость» элементов: стрелка, кнопки, стрелка.
     * Стрелки выравниваются по верху, чтобы при переносе кнопок на
     * несколько строк не «плавать» по вертикали.
     */
    .splide-navigation-block .arrow-left,
    .splide-navigation-block .arrow-right {
        -webkit-box-flex:0;
        flex:0 0 auto;
        -webkit-align-self:flex-start;
        align-self:flex-start;
        width: var(--rc-arrow-size);
        height: var(--rc-arrow-size);
        margin:0;
    }

    .splide-navigation-block .arrow-left  { order:1; }
    .splide-navigation-block .pagination-block { order:2; }
    .splide-navigation-block .arrow-right { order:3; }

    /* Иконка стрелки масштабируется под размер кнопки 24/24px */
    .splide-navigation-block .arrow-left svg,
    .splide-navigation-block .arrow-right svg {
        display:block;
        width:100%;
        height:100%;
    }

    /*
     * Кнопки пагинации 40/2px.
     *
     * Внешние отступы крайних кнопок обнулены, поэтому зазор до
     * стрелок распределяется через justify-content контейнера.
     *
     * max-width НЕ задаём: он принудительно ограничивал строку
     * тремя кнопками и вызывал перенос на вторую строку. При
     * nowrap контейнер занимает естественную ширину кнопок —
     * 4*40 + 3*2 = 166px, что укладывается в 240px между
     * стрелками на экране 320px с запасом 74px.
     */
    .splide-navigation-block .pagination-block {
        display:flex;
        flex-wrap:nowrap;
        justify-content:center;
        align-items:center;
        gap:0;
        /* Не сжимаем: кнопки обязаны сохранять размер 40/2px */
        flex:0 0 auto;
    }

    .splide-navigation-block .pagination-block .elem {
        /* Перебиваем dgn-space-x-2 с равным спецификатором */
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
        flex:0 0 auto;
        width: var(--rc-dot-width);
        height: var(--rc-dot-height);
        border-radius:0;
        margin:0;
    }

    .splide-navigation-block .pagination-block .elem:not([hidden]) ~ .elem:not([hidden]) {
        margin-left: var(--rc-dot-gap);
    }

    /*
     * Первая кнопка — без левого отступа, последняя — без правого:
     * внешний зазор до стрелок задаёт только раскладка контейнера.
     */
    .splide-navigation-block .pagination-block .elem:first-child {
        margin-left:0;
    }

    .splide-navigation-block .pagination-block .elem:last-child {
        margin-right:0;
    }
}

/* --- Рационы для кошек и собак --- */

.ration-for-section--dog, .ration-for-section--cat {
    background: none;
}

        .ration-title {
            color:#E2001A;
            font-size:30px;
            font-weight: 700;
            text-transform: uppercase;
            text-align: center;
        }

        .ration-subtitle {
            color:#E2001A;
            font-size:20px;
            font-weight: 700;
            text-transform: uppercase;
            text-align: center;
        }

        .ration-description {
            font-size:16px;
            color:#666666;
            line-height: 120%;
            flex: 1 1 0%;
        }

        .ration-button {

            background-color: #E2001A;
            padding:16px 40px;
            border-radius: 40px;
            color:white;
            font-size: 16px;
            font-weight: 600;
            transition: background-color .3s linear;
        }

        .ration-button:hover {
            background-color: #C90017;
        }

        @media (min-width: 768px){
            .ration-title{
                font-size:40px;
                text-align: left;
                font-weight: 700;
            }

            .ration-for-card {
                padding-bottom:30px;
                border-radius: 27px;
            }
        }

/* --- Преимущества влажных рационов --- */

.advantage-block {
    margin-bottom:82px;
    position:relative;
}
.advantage-block__text {
    border-left:2px #E2001A solid;
    margin:28px 0;
    padding-left:8px;

}
.advantage-block__title {
    font-size:20px;
    color:#E2001A;
    font-weight: 700;
    margin-bottom:8px;
}
.advantage-block__subtitle {
    color:#666666;
    font-size:16px;
}
.advantage-block__btn {
    background-color: #E2001A;
    padding:16px 0;
    color:white;
    font-size:16px;
    font-weight: 600;
    width:100%;
    text-align: center;
    display:block;
    border-radius: 32px;
    transition: background-color .3s linear;

}

.advantage-block__btn:hover {
    background-color:#C90017;
}


@media (min-width: 768px){
    .advantage-block__text-container {
        position:absolute;
        top:0;
        left:0;
        right:0;
        margin-top:20px;
    }

    .advantage-block__text {
        padding-left:12px;
    }

    .advantage-block__img {
        margin:0 -50px;
    }

    .advantage-block__title{
        font-size:28px;
        text-transform: uppercase;
        line-height: 120%;
    }

    .advantage-block__subtitle {
        font-size:18px;
        line-height: 130%;
    }

    .advantage-block__btn{
        width:260px;
        padding:22px 0;
        font-size:18px;
    }

    .df-pt-24 {
        padding-top:100px;
    }
}

/* --- Подвал --- */

.footer-block {
    font-size:12px;
    color:#808285;
    padding:15px 20px;
}

@media (min-width: 768px) {
    .footer-block {
        margin:0 50px;
        font-size:18px;
    }
}

.royal-canin-viget {
            margin-bottom:100px;
        }
        .royal-canin-viget h2 {
            width: 0;
            height: 0;
            color: #E2001A;
            font-size: 0; 
            font-weight: 700;
            text-transform: uppercase;
            text-align: center;
            padding-right:22px;
            text-align: left;
        }
        .royal-canin-viget h2:before{
            content:'Наши бестселлеры';
            font-size: 30px; 
            position:absolute;
            top:0;
            line-height: 100%;
            padding-right:33px;
        }

        .mbx-recommendations-splide-arrow path{
            fill:#E2001A;
        }

        .mbx-recommendations-splide-arrows button{
                border: 1px solid rgba(226, 0, 26, 0.3);
        }

        @media(min-width:768px){
            .royal-canin-viget {
                padding: 50px 75px;
            }
            .royal-canin-viget h2 {
                font-size: 0px;
                text-align: left;
                font-weight: 700;
            }
            .royal-canin-viget h2:before{
                content:'Наши бестселлеры';
                font-size: 40px; 
            }
            .royal-canin-viget .ixi-title-container a.ixi-product-link h2, .royal-canin-viget .ixi-title-container a.ixi-product-link {
                font-size:1rem;
                line-height: 1.25rem;
                display:inline-block;
            }

             .royal-canin-viget .ixi-button__add-to-cart, .royal-canin-viget .ixi-input__product-counter {
                font-size:16px;
            }
        }