/* ГАЛЕРЕЯ Кастомный курсор для галереи T603 (zoomable изображения) */
.t603__blockimg[data-zoomable="yes"] {
  cursor: url('https://static.tildacdn.com/tild6361-3433-4763-b361-373839303636/photo.png') 12 12, pointer !important;
}


/* ========================================
   ГАРМОШКА (аккордеон T668) — ЭФФЕКТ НАХЛЁСТА
   Белая подложка заходит под розовый заголовок
   ======================================== */

/* --- Скрываем оригинальные линии крестика --- */
#rec1841814671 .t668__lines {
  display: none !important;
}

/* --- Кнопка-триггер --- */
#rec1841814671 .t668__trigger-button {
  position: relative !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: none !important;
}

#rec1841814671 .t668__trigger-button::before,
#rec1841814671 .t668__trigger-button .t668__icon-bg,
#rec1841814671 .t668__trigger-button .t668__circle {
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Наша кастомная стрелка */
#rec1841814671 .t668__trigger-button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-image: url("https://static.tildacdn.com/tild3065-6564-4830-a661-323337353231/arroww.png");
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
  transition: transform 0.3s ease;
  pointer-events: none;
  border: none !important;
  box-shadow: none !important;
  z-index: 10 !important;
}

/* Поворот стрелки при раскрытии */
#rec1841814671 .t668__header.t668__opened .t668__trigger-button::after {
  transform: translateY(-50%) rotate(180deg);
}

/* ========================================
   ЦВЕТА И НАХЛЁСТ
   ======================================== */

/* Родитель — прозрачный */
#rec1841814671 .t668__item {
  background-color: transparent !important;
}

/* --- Заголовок: БЕЖЕВЫЙ (закрыто) --- */
#rec1841814671 .t668__header {
  background-color: #f9f3e9 !important;
  border-radius: 20px !important;
  transition: background-color 0.3s ease !important;
  border: none !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 3 !important; /* Самый верхний слой */
}

/* --- Заголовок: РОЗОВЫЙ (открыто) --- */
#rec1841814671 .t668__header.t668__opened {
  background-color: #fff0f3 !important;
  border-radius: 20px !important; /* Все углы скруглены */
}

/* --- Контент: БЕЛЫЙ, заходит ПОД заголовок --- */
#rec1841814671 .t668__content,
#rec1841814671 .t668__content-inner,
#rec1841814671 .t668__content-wrapper {
  background-color: #ffffff !important;
  border-radius: 20px !important;
  transition: background-color 0.3s ease !important;
  border: none !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 2 !important; /* Ниже заголовка */
  
  /* Нахлёст: белая плашка идёт вверх под заголовок */
  margin-top: -40px !important; /* ← Поднимается на 40px вверх */
  padding-top: 50px !important; /* ← Компенсация, чтобы текст не наезжал */
}

/* Надёжное соединение */
#rec1841814671 .t668__header + .t668__content,
#rec1841814671 .t668__header + .t668__content-wrapper {
  margin-top: -40px !important;
  padding-top: 50px !important;
}

/* Цвет текста */
#rec1841814671 .t668__header .t668__title {
  color: #000000 !important;
}

#rec1841814671 .t668__content,
#rec1841814671 .t668__content * {
  color: #000000 !important;
}


/* ГАЛЕРЕЯ - ОБЩИЕ НАСТРОЙКИ СТРЕЛОК И КРЕСТИКА ...................................................................................................*/

/* Убираем стандартное позиционирование стрелок и задаем общие свойства */
.t-carousel__zoomer__control_left,
.t-carousel__zoomer__control_right {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 0.6 !important; /* Начальная полупрозрачность для стрелок */
  pointer-events: auto !important;
  z-index: 99999 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 50px !important;
  height: 50px !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important; /* Плавный переход */
}

/* Определяем ширину изображения и отступаем от центра */
:root {
  --gallery-img-width: 900px; /* ← УКАЖИТЕ ШИРИНУ ВАШИХ ИЗОБРАЖЕНИЙ */
  --gallery-img-height: 650px; /* ← УКАЖИТЕ ВЫСОТУ ВАШИХ ИЗОБРАЖЕНИЙ */
}

.t-carousel__zoomer__control_left {
  left: calc(50% - var(--gallery-img-width) / 2 - 60px) !important;/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
}

.t-carousel__zoomer__control_right {
  right: calc(50% - var(--gallery-img-width) / 2 - 90px) !important;
}

/* Показ при наведении на область просмотра (стрелки становятся непрозрачными) */
.t-zoomer__wrapper:hover .t-carousel__zoomer__control_left,
.t-zoomer__wrapper:hover .t-carousel__zoomer__control_right {
  opacity: 1 !important;
}

/* Очищаем все внутренние элементы стандартных стрелок */
.t-carousel__zoomer__control_left *,
.t-carousel__zoomer__control_left::before,
.t-carousel__zoomer__control_left::after,
.t-carousel__zoomer__control_right *,
.t-carousel__zoomer__control_right::before,
.t-carousel__zoomer__control_right::after {
  display: none !important;
}


/* --- Кастомная левая стрелка (по умолчанию и при наведении) --- */
.t-carousel__zoomer__control_left {
  background-image: url('https://static.tildacdn.com/tild3430-3133-4534-a130-323736383730/_.png') !important; /* Исходная картинка левой стрелки */
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
}

.t-carousel__zoomer__control_left:hover {
  opacity: 1 !important;
  transform: scale(1.1) translateY(-45%) !important; /* Масштабирование при наведении */
  background-image: url('https://static.tildacdn.com/tild3430-3133-4534-a130-323736383730/_.png') !important; /* <-- СЮДА ВСТАВЬТЕ URL НОВОЙ КАРТИНКИ ЛЕВОЙ СТРЕЛКИ */
}


/* --- Кастомная правая стрелка (по умолчанию и при наведении) --- */
.t-carousel__zoomer__control_right {
  background-image: url('https://static.tildacdn.com/tild3933-3638-4235-b330-356565653565/_.png') !important; /* Исходная картинка правой стрелки */
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
}

.t-carousel__zoomer__control_right:hover {
  opacity: 1 !important;
  transform: scale(1.1) translateY(-45%) !important; /* Масштабирование при наведении */
  background-image: url('https://static.tildacdn.com/tild3933-3638-4235-b330-356565653565/_.png') !important; /* <-- СЮДА ВСТАВЬТЕ URL НОВОЙ КАРТИНКИ ПРАВОЙ СТРЕЛКИ */
}


/* --- КРЕСТИК ЗАКРЫТИЯ ГАЛЕРЕИ (по умолчанию и при наведении) --- */

/* Очищаем стандартные элементы внутри крестика */
.t-zoomer__close *,
.t-zoomer__close::before,
.t-zoomer__close::after {
  display: none !important;
}

/* Позиционирование и кастомная картинка */
.t-zoomer__close {
  display: block !important;
  position: fixed !important;
  top: 45px !important; /* Отступ сверху ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
  right: 45px !important; /* Отступ справа */
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  opacity: 0.9 !important; /* Начальная полупрозрачность */
  pointer-events: auto !important;
  z-index: 2147483647 !important;
  background: none !important;
  background-image: url('https://static.tildacdn.com/tild3765-6465-4338-b632-643565383730/krest.png') !important; /* Исходная картинка крестика */
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 25px !important; /* Подставьте реальный размер вашей картинки krest.png */
  height: 25px !important; /* Подставьте реальный размер вашей картинки krest.png */
  border-radius: 0 !important;
  transition: opacity 0.2s, transform 0.3s ease !important; /* Плавный переход */
}

/* При наведении на обертку галереи, крестик становится полностью непрозрачным */
.t-zoomer__wrapper:hover .t-zoomer__close {
  opacity: 1 !important;
}

/* Эффект при наведении на сам крестик */
.t-zoomer__close:hover {
  opacity: 1 !important;
  transform: scale(1.1) !important; /* Масштабирование при наведении */
  background-image: url('https://static.tildacdn.com/tild3765-6465-4338-b632-643565383730/krest.png') !important; /* <-- СЮДА ВСТАВЬТЕ URL НОВОЙ КАРТИНКИ КРЕСТИКА */
}


/* --- НАСТРОЙКИ ФОНА И ИЗОБРАЖЕНИЯ ГАЛЕРЕИ --- */

/* Черный полупрозрачный фон - было 0.5, стало 0.7 */
.t-zoomer__bg {
  background: rgba(0, 0, 0, 0.75) !important;
  cursor: pointer !important; /* Делаем фон кликабельным для закрытия */
}

/* Добавляем подсказку на фон */
.t-zoomer__bg::after {
  content: "Кликните по фону для закрытия";
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #ccc; /* Сделал цвет светлее, чтобы было видно на темном фоне */
  font-size: 14px;
  z-index: 999999;
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.3s;
}

.t-zoomer__bg:hover::after {
  opacity: 1;
}

/* Прозрачный контейнер (чтобы фон был виден) */
.t-zoomer__container {
  background: transparent !important;
  color: #000 !important; /* текст — чёрный на белом фоне */
}

/* Закругляем само изображение (альтернатива) */
.t-carousel__zoomer__img {
  border-radius: 25px !important; /* если не используете плашку */
  display: block !important;
}

/* Резервируем место под скроллбар — работает в Chrome 94+, Firefox 108+, Safari 17+ ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
html {
  scrollbar-gutter: stable !important;
}

/* Фоллбэк для старых браузеров — принудительный скролл, но без прыжка вверх */
@supports not (scrollbar-gutter: stable) {
  html {
    overflow-y: scroll !important;
    scroll-behavior: auto !important; /* Отключаем плавную прокрутку, чтобы не тянуло вверх */
  }
  html:focus-within {
    scroll-behavior: smooth; /* Возвращаем плавность для якорных ссылок */
  }
}