/* CCP Home Hero Style — главный слайдер на главной странице.
 *
 * СЕЛЕКТОР. Скоупим по `body.home` и типу виджета, а НЕ по id документа
 * Elementor. Причина: главных страниц две — английская (документ 17) и
 * русская (3299), это разные документы с одинаковой вёрсткой. Правка,
 * привязанная к `.elementor-17`, доезжала только до английской версии.
 * Вложенная карусель на главной ровно одна (герой), товарные ленты ниже —
 * виджеты другого типа (loop-carousel), их правило не задевает.
 *
 * ВЕС СЕЛЕКТОРА. Свои размеры и положение стрелок Elementor пишет
 * селектором вида `.elementor-17 .elementor-element.elementor-element-edd861e
 * .elementor-swiper-button` — это четыре класса. Поэтому и здесь берём
 * четыре: `body.home` + `.elementor-element.elementor-widget-n-carousel` +
 * сама кнопка. Без лишнего `.elementor-element` правило проигрывает, и
 * стрелки возвращаются к краю экрана (проверено).
 */

/* ── Стрелки: длиннее, тоньше, дальше от края ───────────────────────────── */

body.home .elementor-element.elementor-widget-n-carousel .elementor-swiper-button {
    color: #fff;
    width: auto;
    height: auto;
    padding: 10px;
}

/* Родной SVG-шеврон заменяем на нарисованный: у иконочного глифа толщину
   не изменить, а у бордера — сколько угодно. */
body.home .elementor-element.elementor-widget-n-carousel .elementor-swiper-button svg {
    display: none;
}

body.home .elementor-element.elementor-widget-n-carousel .elementor-swiper-button::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: .9;
    transition: opacity .2s;
}

body.home .elementor-element.elementor-widget-n-carousel .elementor-swiper-button:hover::before {
    opacity: 1;
}

body.home .elementor-element.elementor-widget-n-carousel .elementor-swiper-button-prev::before {
    transform: rotate(45deg);
}

body.home .elementor-element.elementor-widget-n-carousel .elementor-swiper-button-next::before {
    transform: rotate(-135deg);
}

/* Отступ от края экрана: у Elementor это отдельные переменные позиции. */
body.home .elementor-element.elementor-widget-n-carousel {
    --e-n-carousel-arrow-prev-left-position: 48px;
    --e-n-carousel-arrow-next-right-position: 48px;
}

body.home .elementor-element.elementor-widget-n-carousel .elementor-swiper-button-prev {
    inset-inline-start: 48px;
}

body.home .elementor-element.elementor-widget-n-carousel .elementor-swiper-button-next {
    inset-inline-end: 48px;
}

/* ── Текстовый блок ────────────────────────────────────────────────────── */

/* Вертикальное положение блока НЕ трогаем: он выровнен по центру слайда
   настройками самого Elementor, и владелец хочет именно так. Прежняя версия
   этого плагина прижимала блок к низу (flex-end + отступ снизу), потом мы
   пробовали ставить его верх на середину экрана — оба варианта отменены,
   правило удалено целиком, чтобы настройка виджета работала как есть. */

@media screen and (max-width: 1024px) {
    body.home .elementor-element.elementor-widget-n-carousel {
        --e-n-carousel-arrow-prev-left-position: 24px;
        --e-n-carousel-arrow-next-right-position: 24px;
    }

    body.home .elementor-element.elementor-widget-n-carousel .elementor-swiper-button-prev {
        inset-inline-start: 24px;
    }

    body.home .elementor-element.elementor-widget-n-carousel .elementor-swiper-button-next {
        inset-inline-end: 24px;
    }
}

@media screen and (max-width: 767px) {
    body.home .elementor-element.elementor-widget-n-carousel .elementor-swiper-button::before {
        width: 22px;
        height: 22px;
    }

    body.home .elementor-element.elementor-widget-n-carousel .elementor-swiper-button-prev {
        inset-inline-start: 12px;
    }

    body.home .elementor-element.elementor-widget-n-carousel .elementor-swiper-button-next {
        inset-inline-end: 12px;
    }
}