/* УНИКАЛЬНЫЕ СТИЛИ */

/* Контейнер баннера */
.fx-banner {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    background: var(--app-bright-color); /* Оранжевый */
}

/* Оранжевый фон */
.fx-banner-bg {
    position: absolute;
    inset: 0;
    background: var(--app-bright-color);
    z-index: 1;
}

/* Большой белый текст позади кроссовка */
.fx-banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-20%, 30%);
    font-size: 160px;
    font-weight: 900;
    letter-spacing: 5px;
    color: rgba(255,255,255,0.3);
    z-index: 2;
    pointer-events: none;
    user-select: none;
}

/* Корневой контейнер виджета */
.fx-clock-widget {
    position: absolute;
    /* положение в баннере */
    top: 50%;              /* по вертикали — середина баннера */
    right: 190px;           /* отступ от правого края */
    transform: translateY(-50%); /* сместить на половину высоты вверх */

    width: min(40vw, 360px); /* размер, почти не будет дергаться */
    z-index: 3;
}

/* Внутренний слой, который масштабируем под ширину родителя */
.fx-clock-scale {
    position: relative;
    transform-origin: top left;
}

/* Контейнер, который "плавает" */
.fx-clock-container {
    position: relative;
    animation: fx-clock-float 6s ease-in-out infinite alternate;
}

/* Внутренний блок с "дизайнерскими" размерами */
.fx-clock-wrapper {
    position: relative;
    width: 541px;
    height: 800px;
    transform: rotate(-15deg);      /* наклон часов */
    transform-origin: center center;
}

.fx-clock-face {
    position: absolute;
    inset: 0;
    background-image: url("/images/banners/watch-background.png");  /* циферблат без стрелок */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.fx-clock-hand {
    position: absolute;
    image-rendering: auto;
    pointer-events: none;
}

.fx-clock-hand img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Плавное "парение" часов */
@keyframes fx-clock-float {
    0%   { transform: translate(0px, 0px); }
    25%  { transform: translate(6px, -4px); }
    50%  { transform: translate(0px, -8px); }
    75%  { transform: translate(-6px, -4px); }
    100% { transform: translate(0px, 0px); }
}

@media (max-width: 768px) {
    .fx-clock-widget {
        top: 45%;
        right: auto;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50vw;

        z-index: 1;           /* ниже контента */
        pointer-events: none; /* чтобы не перекрывать клики по кнопкам */
    }

    .fx-banner-text {
        display: none;
    }

    .fx-clock-wrapper {
        position: relative;
        width: 541px;
        height: 800px;
        transform: rotate(0deg);
        transform-origin: center center;
    }
}

@media (max-width: 768px) {

    /* Делаем обёртку слайдера опорной точкой для абсолютного позиционирования */
    .slider-wrap {
        position: relative;
        overflow: hidden;
    }

    /* Контент поверх слайдера, на всю высоту */
    .sld_content {
        position: absolute;
        inset: 0;                  /* top:0; right:0; bottom:0; left:0 */
        z-index: 20;
        display: flex;
        align-items: stretch;
        pointer-events: none;      /* чтобы случайно не заблокировать свайпы, кнопке вернём */
    }

    /* Тянем контейнер на всю высоту */
    .sld_content > .container {
        display: flex;
        width: 100%;
        align-items: stretch;
    }

    /* Внутри – вертикальная колонка: заголовок сверху, кнопка снизу */
    .content-sld_wrap {
        display: flex;
        flex-direction: column;
        width: 100%;
        /*padding: 16px 20px 24px;*/
        pointer-events: auto;      /* внутри снова включаем события, чтобы кнопка кликалась */
    }

    /* Заголовок: обычный текст слева, sun – прижат вправо */
    .title_sld {
        text-align: center;
        /*position: relative;*/
        font-size: 26px;
        line-height: 1.2;
        margin-bottom: 16px;
        /*padding-right: 3.5ch;     !* запас справа, чтобы text не налезал на sun *!*/
        white-space: nowrap;
    }

    /* убираем перенос строки на мобиле */
    .title_sld br {
        display: none;
    }

    /*!* sun — абсолютно справа в заголовке *!*/
    /*.title_sld .text-japan {*/
    /*    position: absolute;*/
    /*    right: 0;*/
    /*    top: 0;*/
    /*}*/

    /* Подзаголовок скрыт */
    .sub-text_sld {
        display: none;
    }

    /* Кнопка уезжает в самый низ области */
    .fade-item-3 {
        margin-top: auto;          /* толкает блок вниз */
        display: flex;
        justify-content: center;
    }

    .fade-item-3 .tf-btn {
        min-width: 190px;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .content-sld_wrap {
        position: relative;
        top: 210px;           /* ДВИЖЕНИЕ ВВЕРХ/ВНИЗ */
        left: 0;          /* если надо чуть сдвинуть влево/вправо */
        padding: 16px 20px;
    }

    .fade-item-3 {
        margin-top: 300px;        /* расстояние от заголовка до кнопки */
        display: flex;
        justify-content: center; /* по центру */
    }

    .fade-item-3 .tf-btn {
        padding: 10px 24px;      /* подгони размер кнопки */
        min-width: 220px;        /* ширина, можешь убрать/изменить */
    }
}