/*
 * Стрілки для головного слайдера (Owl Carousel у .the-slideshow).
 *
 * Owl Carousel вже інжектить .owl-prev / .owl-next у DOM,
 * проте у inline-extracted.css `::before` мали `font-size:55px` без `content`
 * (а вендорний font-icon `\e260` у завантаженому .ttf шрифті відсутній —
 * показувалися квадратики).
 *
 * Тут переписуємо `::before` як чисто-CSS-шеврон через border-corner trick
 * (так само, як це вже зроблено у вендорній CSS для `.main .owl-controls …`).
 */

.the-slideshow .owl-controls .owl-buttons .owl-prev,
.the-slideshow .owl-controls .owl-buttons .owl-next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.85) !important;
  color: #1c1c1c !important;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}

.the-slideshow .owl-controls .owl-buttons .owl-prev:hover,
.the-slideshow .owl-controls .owl-buttons .owl-next:hover {
  background-color: #1a1a1a !important;
  color: #fff !important;
}

.the-slideshow .owl-controls .owl-buttons .owl-prev::before,
.the-slideshow .owl-controls .owl-buttons .owl-next::before {
  content: "" !important;
  display: block !important;
  width: 10px;
  height: 10px;
  border-style: solid;
  border-color: currentColor;
  border-width: 2px 2px 0 0;
  font-size: 0 !important;
  transition: color 0.2s ease;
}

.the-slideshow .owl-controls .owl-buttons .owl-prev::before {
  transform: translateX(2px) rotate(-135deg);
}

.the-slideshow .owl-controls .owl-buttons .owl-next::before {
  transform: translateX(-2px) rotate(45deg);
}

@media (max-width: 767px) {
  .the-slideshow .owl-controls .owl-buttons .owl-prev,
  .the-slideshow .owl-controls .owl-buttons .owl-next {
    width: 34px !important;
    height: 34px !important;
    opacity: 1 !important;
  }
}