/* ===== Галерея: контейнер и большая картинка ===== */
.gallery-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:580px;
  margin:0 auto;
}

/* Крупное фото + плоская боковая тень от краёв */
.main-image-wrapper{
  position:relative;
  width:100%;
  aspect-ratio: 4 / 3;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#000;
  overflow:hidden; /* важно: обрезаем всё за краем */
  cursor:zoom-in;
  z-index:1;

  /* Тень: ширина и плотность (можно подкрутить) */
  --shade-w: clamp(120px, 18vw, 260px);
  --shade-a: .16; /* базовая плотность; на hover усилим */
}

/* Левый и правый «шлейф» тени — плавно растворяются внутрь */
.main-image-wrapper::before,
.main-image-wrapper::after{
  content:"";
  position:absolute;
  top:0;
  height:100%;
  width:var(--shade-w);
  pointer-events:none;
  z-index:2; /* над картинкой, под стрелками */
}
.main-image-wrapper::before{
  left:0;
  background:linear-gradient(
    90deg,
    rgb(0 0 0 / calc(var(--shade-a) * 1.00)) 0%,
    rgb(0 0 0 / calc(var(--shade-a) * 0.65)) 35%,
    rgb(0 0 0 / calc(var(--shade-a) * 0.30)) 70%,
    rgb(0 0 0 / 0)                            100%
  );
}
.main-image-wrapper::after{
  right:0;
  background:linear-gradient(
    270deg,
    rgb(0 0 0 / calc(var(--shade-a) * 1.00)) 0%,
    rgb(0 0 0 / calc(var(--shade-a) * 0.65)) 35%,
    rgb(0 0 0 / calc(var(--shade-a) * 0.30)) 70%,
    rgb(0 0 0 / 0)                            100%
  );
}
/* Чуть сильнее на ховере (десктоп) */
.main-image-wrapper:hover{ --shade-a: .22; }

.main-image{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:filter .1s ease;      /* 0.1s */
  display:block;
}
.main-image.blur{ filter:blur(5px); }

.main-preloader{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  display:none;
  z-index:5; /* поверх всего в кадре */
}
.main-preloader::before{
  content:'';
  width:40px; height:40px;
  border:5px solid rgba(255,255,255,.2);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* ===== Миниатюры ===== */
.thumbnails{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(calc(580px / 6 - 2px),1fr));
  gap:2px;
  width:100%;
  margin-top:2px;
  background:#000;
}
.thumbnail{
  width:100%;
  height:80px;
  object-fit:cover;
  border:none;
  border-radius:0;
  cursor:pointer;
  transition:filter .1s ease, opacity .1s ease, transform .1s ease; /* 0.1s */
}
.thumbnail.active{ transform:scale(.95); filter:brightness(60%); }
.thumbnail:hover{  filter:brightness(70%); }

/* ===== ЗОНЫ клика по краям большой картинки (десктоп) ===== */
.hotzone{
  position:absolute;
  top:0;
  height:100%;
  width:80px;
  z-index:3; /* над тенью, под стрелками */
  background:transparent;
  cursor:pointer;
}
.hotzone-left  { left:0; }
.hotzone-right { right:0; }

/* ===== Стрелки: сероватые → белые при наведении/зоне ===== */
.arrow-btn{
  --icon: 44px;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:64px; height:64px;
  border:none;
  background:transparent;
  cursor:pointer;
  z-index:4;

  /* всегда слегка видны */
  opacity:.90;
  transition:opacity .1s ease;     /* 0.1s */
  -webkit-tap-highlight-color: transparent;
}
.arrow-prev{ left:8px; }
.arrow-next{ right:8px; }

/* при наведении на картинку можно чуть поднять общую видимость */
.main-image-wrapper:hover .arrow-btn{ opacity:.98; }

/* Иконка + мягкая тень; по умолчанию она чуть «тусклая» (opacity) */
.arrow-btn::before{ display:none; }
.arrow-btn::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:var(--icon); height:var(--icon);
  transform:translate(-50%,-50%);
  background-position:center; background-repeat:no-repeat; background-size:contain;

  /* ОДИН белый SVG — никаких переменных и подмены картинок */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M0 0' fill='none'/%3E%3C/svg%3E");

  opacity:.92;                    /* «серость» за счёт прозрачности */
  transition:opacity .1s ease, transform .1s ease, filter .1s ease;

  filter:
    drop-shadow(0 0 20px  rgb(0 0 0 / .30))
    drop-shadow(0 3px 10px rgb(0 0 0 / .40))
    drop-shadow(0 1px  1px rgb(0 0 0 / .25));
  pointer-events:none;
}
/* конкретные иконки */
.arrow-prev::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M24 10 L16 20 L24 30' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}
.arrow-next::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M16 10 L24 20 L16 30' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}

/* Навели на ЗОНУ или на САМУ стрелку — делаем белой (opacity:1) */
.hotzone-left:hover  ~ .arrow-prev::after,
.arrow-prev:hover::after,
.hotzone-right:hover ~ .arrow-next::after,
.arrow-next:hover::after{
  opacity:1;
}

/* Визуальный отклик при нажатии по зонам/стрелке (слегка «вдавлено») */
.hotzone-left:active  ~ .arrow-prev::after,
.hotzone-right:active ~ .arrow-next::after,
.arrow-btn:active::after,
.arrow-btn.pressed::after{
  opacity:1;
  transform:translate(-50%,-50%) scale(.96);
  filter:
    drop-shadow(0 0 26px  rgb(0 0 0 / .34))
    drop-shadow(0 4px 14px rgb(0 0 0 / .50))
    drop-shadow(0 2px  2px rgb(0 0 0 / .30));
}
/* при удержании палца — делаем кнопку полностью видимой */
.hotzone-left:active  ~ .arrow-prev,
.hotzone-right:active ~ .arrow-next,
.arrow-btn:active,
.arrow-btn.pressed{
  opacity:1 !important;
}

/* Мобильные: нет стрелок, зон и боковых теней */
@media (hover:none), (max-width:768px){
  .arrow-btn, .hotzone,
  .main-image-wrapper::before,
  .main-image-wrapper::after{ display:none !important; }
}

/* ===== Лайтбокс ===== */
.lightbox{
  position:fixed; inset:0;
  background:rgba(0,0,0,.92);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.lightbox.open{ display:flex; }
.lightbox-content{
  position:relative;
  max-width:95vw; max-height:95vh;
  display:flex; align-items:center; justify-content:center;
}

/* БОЛЬШАЯ КАРТИНКА в лайтбоксе */
#lightboxImage{
  max-width:95vw; max-height:95vh;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 10px 30px rgba(0,0,0,.6);
  transition: filter .1s ease;   /* 0.1s */
}

/* верхняя панель */
.lb-ui{
  position:fixed; top:0; left:0; right:0;
  height:48px;                /* компактнее */
  padding:6px 10px;
  display:flex; align-items:center; justify-content:space-between;
  z-index:10050;
}
.lb-counter{
  color:#fff; opacity:.9;
  font:16px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* КРЕСТИК: 36×36, «тусклый» → белый (как стрелки), БЕЗ изменения жирности */
.lb-close{
  width:36px; height:36px;
  border:none; border-radius:50%;
  background:rgba(0,0,0,.55);
  cursor:pointer;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  transition: background-color .1s ease; /* фон слегка меняем при hover */
  z-index:10051;
  display:flex; align-items:center; justify-content:center;

  /* скрыть текст, рисуем SVG в :after */
  color:transparent; font-size:0; line-height:0;
}
.lb-close:hover{ background:rgba(0,0,0,.65); }

/* сама иконка крестика (один белый SVG, «серость» — opacity) */
.lb-close::after{
  content:"";
  width:24px; height:24px;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M12 12 L28 28 M28 12 L12 28' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  filter:
    drop-shadow(0 0 18px  rgb(0 0 0 / .32))
    drop-shadow(0 3px 10px rgb(0 0 0 / .46))
    drop-shadow(0 1px  1px rgb(0 0 0 / .28));
  opacity:.92;
  transition: opacity .1s ease, filter .1s ease;
}
.lb-close:hover::after{ opacity:1; }

/* зоны навигации по краям в лайтбоксе */
.lb-zone{
  position:fixed; top:0; height:100%; width:100px;
  background:transparent; cursor:pointer;
  z-index:10000;
}
.lb-zone-left  { left:0; }
.lb-zone-right { right:0; }

/* стрелки в лайтбоксе — тоже opacity: .92 → 1 на hover */
.lightbox-arrow{
  --icon: 66px;
  position:fixed; top:50%; transform:translateY(-50%);
  width:96px; height:96px;
  border:none; background:transparent;
  cursor:pointer; z-index:10001; opacity:1;
  transition: opacity .1s ease;          /* 0.1s */
}
.lb-prev{ left:15px; }
.lb-next{ right:15px; }
.lightbox-arrow::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:var(--icon); height:var(--icon);
  transform:translate(-50%,-50%);
  background-position:center; background-repeat:no-repeat; background-size:contain;
  transition:opacity .1s ease, transform .1s ease, filter .1s ease;
  filter:
    drop-shadow(0 0 28px  rgb(0 0 0 / .32))
    drop-shadow(0 5px 16px rgb(0 0 0 / .46))
    drop-shadow(0 2px  2px rgb(0 0 0 / .28));
  pointer-events:none;
  opacity:.92;
}
.lb-prev::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M24 10 L16 20 L24 30' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}
.lb-next::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M16 10 L24 20 L16 30' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
}
.lightbox-arrow:hover::after{ opacity:1; }