/* =========================================
   КОНФИГУРАЦИЯ (меняйте только здесь)
   ========================================= */
:root {
  /* Размеры главного слайдера */
  --main-width: calc(1000px * var(--scale));
  --main-height: calc(749px * var(--scale));

  /* Размеры миниатюр */
  --thumb-width: calc(124px * var(--scale));
  --thumb-height: calc(93px * var(--scale));

  /* Кнопки навигации (Стрелки) */
  --nav-btn-width: calc(30px * var(--scale));
  --nav-btn-height: calc(50px * var(--scale));
  --nav-btn-offset: calc(0px * var(--scale));
  --nav-btn-bg: #fd8749;
  --nav-btn-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
  --nav-btn-hover-bg: #fd8749;
  --nav-btn-hover-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");
  --nav-btn-icon-size: calc(25px * var(--scale));

  /* Кнопка закрытия (PhotoSwipe) */
  --close-btn-width: calc(50px * var(--scale));
  --close-btn-height: calc(50px * var(--scale));
  --close-btn-top: calc(20px * var(--scale));
  --close-btn-right: calc(20px * var(--scale));
  --close-btn-bg: #fd8749;
  --close-btn-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
  --close-btn-hover-bg: #fd8749;
  --close-btn-hover-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
  --close-btn-icon-size: calc(30px * var(--scale));

  /* Миниатюры */
  --thumb-outline-width: calc(2px * var(--scale));
  --thumb-outline-offset: calc(-2px * var(--scale));
  --theme-color: #fd8749;
  --theme-fill: rgba(253, 135, 73, 0.25);
  --thumb-opacity-default: 0.7;
  --thumb-gap: calc(10px * var(--scale));

  /* Общее */
  --pswp-bg: #fff;
  --thumb-margin-top: calc(10px * var(--scale));
}

.projectImage .panel-pane{
	display: none;
}

/* =========================================
   ОСНОВНОЙ СЛАЙДЕР
   ========================================= */
.main-swiper {
  width: var(--main-width);
  height: var(--main-height);
  overflow: hidden;
  background: #f5f5f5;
}
.main-swiper .swiper-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}
.main-swiper .swiper-slide,
.thumb-swiper .swiper-slide {
  flex-shrink: 0;
  overflow: hidden;
}
.main-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin-right: 0 !important;
}
.main-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  display: block;
  cursor: zoom-in;
}

/* Убираем стандартный SVG внутри кнопок Swiper */
.swiper-button-prev svg.swiper-navigation-icon,
.swiper-button-next svg.swiper-navigation-icon {
  display: none !important;
}

/* =========================================
   ЕДИНЫЕ СТИЛИ КНОПОК НАВИГАЦИИ
   ========================================= */
.main-swiper .swiper-button-prev,
.main-swiper .swiper-button-next,
.pswp__button--arrow--prev,
.pswp__button--arrow--next {
  width: var(--nav-btn-width) !important;
  height: var(--nav-btn-height) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--nav-btn-bg);
  background-image: var(--nav-btn-svg);
  background-size: var(--nav-btn-icon-size) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  position: absolute !important;
  transition: background-color 0.2s ease, background-image 0.2s ease;
  z-index: 10 !important;
}

.main-swiper .swiper-button-prev,
.pswp__button--arrow--prev {
  left: var(--nav-btn-offset) !important;
  right: auto !important;
}
.main-swiper .swiper-button-next,
.pswp__button--arrow--next {
  right: var(--nav-btn-offset) !important;
  left: auto !important;
  transform: translateY(-50%) scaleX(-1) !important;
}

/* Hover для навигации */
.main-swiper .swiper-button-prev:hover,
.main-swiper .swiper-button-next:hover,
.pswp__button--arrow--prev:hover,
.pswp__button--arrow--next:hover {
  background-color: var(--nav-btn-hover-bg) !important;
  background-image: var(--nav-btn-hover-svg) !important;
}

/* =========================================
   КНОПКА ЗАКРЫТИЯ (PhotoSwipe)
   ========================================= */
.pswp__button--close {
  width: var(--close-btn-width) !important;
  height: var(--close-btn-height) !important;
  top: var(--close-btn-top) !important;
  right: var(--close-btn-right) !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--close-btn-bg);
  background-image: var(--close-btn-svg);
  background-size: var(--close-btn-icon-size) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer;
  position: absolute !important;
  z-index: 10001 !important;
  transition: background-color 0.2s ease, background-image 0.2s ease;
}

.pswp__button--close:hover {
  background-color: var(--close-btn-hover-bg) !important;
  background-image: var(--close-btn-hover-svg) !important;
}

/* Убираем внутренние SVG и псевдоэлементы */
.pswp__button--close svg,
.pswp__button--arrow--prev svg,
.pswp__button--arrow--next svg,
.pswp__button--close::after,
.pswp__button--close::before,
.pswp__button--arrow--prev::after,
.pswp__button--arrow--prev::before,
.pswp__button--arrow--next::after,
.pswp__button--arrow--next::before {
  display: none !important;
}

/* Скрываем кнопку зума и счётчик */
.pswp__button--zoom { display: none !important; }
.pswp__counter { display: none !important; }

/* Убираем фон у панелей */
.pswp__top-bar,
.pswp__caption {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* =========================================
   МИНИАТЮРЫ
   ========================================= */
.thumb-swiper {
  margin-top: var(--thumb-margin-top);
  padding: 0;
}
.thumb-swiper .swiper-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  transition-timing-function: ease-out;
}
.thumb-swiper .swiper-slide {
  width: var(--thumb-width);
  height: var(--thumb-height);
  outline: var(--thumb-outline-width) solid transparent;
  outline-offset: var(--thumb-outline-offset);
  opacity: var(--thumb-opacity-default);
  cursor: pointer;
  transition: opacity 0.15s ease, outline-color 0.15s ease;
  display: flex;
  box-sizing: border-box;
  margin-right: var(--thumb-gap) !important;
  margin-left: 0 !important;
}
.thumb-swiper .swiper-slide:last-child {
  margin-right: 0 !important;
}
.thumb-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.thumb-swiper .swiper-slide:hover {
  outline-color: var(--theme-color);
  opacity: 0.9;
}
.thumb-swiper .swiper-slide-thumb-active {
  outline-color: var(--theme-color);
  opacity: 1;
}
.thumb-swiper .swiper-slide-thumb-active::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--theme-fill);
  pointer-events: none;
}

/* Фон лайтбокса */
.pswp { background: var(--pswp-bg) !important; }
.pswp__img { object-fit: contain; }