/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding:50px 0 !important;

}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}












/* 1) Обгортка навколо картинки (у тебе це <a> в .slick-slide) */
.slick-slide a{
  position: relative;
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;              /* щоб блік/віньєтка не вилізали */
}

/* 2) Сама картинка */
.slick-slide img{
  display: block;
  width: 270px;                  /* як у тебе */
  height: 270px;                 /* як у тебе */
  border-radius: 50%;
  object-fit: cover;

  /* легка “глибина” */
  box-shadow:
    inset 0 10px 18px rgba(255,255,255,.18),
    inset 0 -22px 34px rgba(0,0,0,.28),
    0 18px 28px rgba(0,0,0,.28);
}

/* 3) БЛІК (як у кулі) */
.slick-slide a::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events:none;

  /* блік + м'яка засвітка */
  background:
    radial-gradient(circle at 30% 25%,
      rgba(255,255,255,.95) 0%,
      rgba(255,255,255,.45) 12%,
      rgba(255,255,255,.18) 22%,
      rgba(255,255,255,0) 38%),
    radial-gradient(circle at 22% 18%,
      rgba(255,255,255,.35) 0%,
      rgba(255,255,255,0) 55%);
  mix-blend-mode: screen;        /* красиво на фото */
  opacity: .9;
}

/* 4) ВІНЬЄТКА + “темний край” (дає сферичність) */
.slick-slide a::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events:none;

  background:
    radial-gradient(circle at 50% 55%,
      rgba(0,0,0,0) 48%,
      rgba(0,0,0,.15) 70%,
      rgba(0,0,0,.35) 100%);
  opacity: .95;
}

/* 5) ОКРЕМА ТІНЬ ЗНИЗУ (під кулею) */
.slick-slide a{
  filter: drop-shadow(0 22px 14px rgba(0,0,0,.25));
}

/* (необов'язково) Hover – легкий “поворот світла” */
.slick-slide a:hover::before{
  opacity: 1;
  transform: translate(-2px, -2px);
  transition: .25s ease;
}
.slick-slide a::before{
  transition: .25s ease;
}








/* базова кнопка */
.slick-prev,
.slick-next{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;

  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  /* щоб псевдоелементи працювали */
  overflow: visible;
  z-index: 10;

  /* якщо у тебе вже background-color заданий — перезапишемо */
  background: none !important;
  box-shadow: none !important;
}

/* СФЕРА (тіло кулі) */
.slick-prev::before,
.slick-next::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 50%;

  /* колір кулі — можеш змінити тут */
background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.75) 0%, rgba(255,255,255,.20) 18%, rgba(255,255,255,0) 40%), radial-gradient(circle at 50% 60%, rgba(0,0,0,0) 45%, rgba(0,0,0,.18) 72%, rgba(0, 0, 0, 0.38) 100%), radial-gradient(circle at 50% 45%, #909090 0%, #282828 55%, #000 100%);

  /* об'єм + тінь знизу */
  box-shadow:
    inset 0 10px 16px rgba(255,255,255,.22),
    inset 0 -18px 26px rgba(0,0,0,.28),
    0 16px 18px rgba(0,0,0,.25);

  pointer-events:none;
}



/* Стрілка (іконка) */
.slick-prev span,
.slick-next span{
  display:none; /* якщо є текст всередині */
}

/* slick часто малює стрілки через ::before самого кнопки,
   але ми його зайняли сферою, тому робимо стрілку окремо: */
.slick-prev{
  left: 14px;
}
.slick-next{
  right: 14px;
}

/* Стрілку малюємо через mask на псевдоелементі всередині */
.slick-prev i,
.slick-next i{
  display:none;
}

/* Створимо стрілку додатковим псевдоелементом на кнопці */
.slick-prev .arrow,
.slick-next .arrow{
  display:none;
}

/* Малюємо стрілки без додаткових елементів */
.slick-prev{
  --dir: -1;
}
.slick-next{
  --dir: 1;
}

.slick-prev::marker,
.slick-next::marker{ content:""; }

.slick-prev::before,
.slick-next::before{ z-index: 0; }

.slick-prev::after,
.slick-next::after{ z-index: 1; }

/* Стрілка як білий chevron через background */
.slick-prev{
  color: transparent;
}
.slick-next{
  color: transparent;
}

/* Вставляємо SVG-стрілку як фон другого шару (після кулі) */
.slick-prev,
.slick-next{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M14.7 6.3a1 1 0 0 1 0 1.4L10.4 12l4.3 4.3a1 1 0 1 1-1.4 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 22px 22px;
}

/* Для next — розвертаємо стрілку */
.slick-next{
  transform: translateY(-50%) scaleX(-1);
}

/* Hover/active — “натискання” */
.slick-prev:hover::before,
.slick-next:hover::before{
  box-shadow:
    inset 0 10px 16px rgba(255,255,255,.24),
    inset 0 -20px 28px rgba(0,0,0,.32),
    0 18px 20px rgba(0,0,0,.30);
}
.slick-prev:active,
.slick-next:active{
  transform: translateY(-50%) scale(0.97);
}
.slick-next:active{
  transform: translateY(-50%) scaleX(-1) scale(0.97);
}