/* Контейнер слайдера */
section.shippers .page-slider {
  position: relative;
  overflow: visible;

  /* легко настраиваемые переменные */
  --arrow-size: 45px;      /* размер квадратов */
  --arrow-gap: 16px;       /* расстояние между стрелками */
  --arrow-bottom: 0px;     /* выше/ниже относительно низа слайдера */
  --arrow-left: 0px;       /* отступ слева, если нужно подогнать в 1–2px */
}

/* Кнопки-стрелки: квадрат + картинка внутри */
section.shippers .page-slider .slick-arrow {
  position: absolute;
  width: var(--arrow-size);
  height: var(--arrow-size);
  background-color: #262b33;
  border: 0;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  z-index: 100;
  pointer-events: auto;
  outline: none;

  /* «фотка» стрелки */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40% auto; /* размер иконки внутри квадрата */
  bottom: var(--arrow-bottom);
}

/* Пути к svg из css/ в images/ */
section.shippers .page-slider .slick-prev {
  background-image: url("../images/arrow-left-white.png");

  /* упираем левый край блока стрелок в левый край фото */
  left: var(--arrow-left);
}
section.shippers .page-slider .slick-next {
  background-image: url("../images/arrow-right-white.png");

  /* ставим вторую кнопку сразу справа от первой */
  left: calc(var(--arrow-left) + var(--arrow-size) + var(--arrow-gap));
}

/* Точки — справа, на одной линии со стрелками */
section.shippers .page-slider .slick-dots {
  position: absolute;
  right: 0;
  bottom: var(--arrow-bottom);
  margin: 0;
}

/* Ховер эффект */
section.shippers .page-slider .slick-arrow:hover {
  filter: brightness(1.15);
}

/* Адаптив: при желании можно подправить размеры/позицию */
@media (max-width: 991px) {
  section.shippers .page-slider {
    --arrow-size: 48px;
    --arrow-bottom: -24px;
    --arrow-gap: 14px;
    --arrow-left: 0px; /* оставим без смещения и на мобилках */
  }
}