/* Совместимость старой разметки темы со своим интерфейсом (assets/ui.js).
 *
 * Правила Bootstrap вкомпилированы в style.css и показывают модалку по классу
 * `show`, а ui.js помечает открытое окно классом `is-open` — как в теме, откуда
 * скрипт портирован. Аккордеоны и табы совпадают по классам, расходится только
 * модалка, поэтому здесь ровно три правила, а не копия чужих стилей.
 */
.modal.is-open {display: block;}
.modal.fade.is-open {opacity: 1;}
body.modal-open {overflow: hidden;}

/* Карусели.
 *
 * Каркас собирает assets/ui.js: он раздаёт кадрам `flex: 0 0 N%` и двигает ленту
 * трансформом. Оригинальный owl.carousel.min.css такого не ждёт — у него кадры
 * плавают влево и ширину им проставлял скрипт библиотеки. Из-за этого галерея
 * «Фото наших работ» разложилась в столбик на всю высоту страницы.
 */
.owl-carousel.skc {display: block; visibility: visible; cursor: grab;}
.skc .owl-stage-outer {position: relative; overflow: hidden;}
.skc .owl-stage {display: flex; width: auto !important; transition: transform .45s ease;}
.skc .owl-item {flex: 0 0 auto; float: none; width: auto;}
.skc.is-dragging {cursor: grabbing; user-select: none;}
.skc.is-dragging .owl-stage {transition: none;}
.skc img {-webkit-user-drag: none; user-select: none;}
.skc .owl-nav, .skc .owl-dots {cursor: default;}

/* Стрелки карусели.
 *
 * owl рисовал их SVG-кодом, который лежал в настройках инициализации; свой ui.js
 * создаёт кнопки пустыми — и стрелки пропали. Рисуем шевроны в CSS: заодно кнопки
 * стали одинаковыми во всех каруселях и попали в фирменный цвет.
 */
.skc .owl-nav {position: absolute; inset: 0; pointer-events: none;}
.skc .owl-nav button {position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(43,58,38,.18); cursor: pointer; pointer-events: auto; transition: background .18s, box-shadow .18s, transform .18s;}
.skc .owl-nav button:hover {background: #7cb32f; box-shadow: 0 6px 18px rgba(124,179,47,.32); transform: scale(1.06);}
.skc .owl-nav button:before {content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; border: solid #2b3a26; border-width: 2px 2px 0 0; transition: border-color .18s;}
.skc .owl-nav button:hover:before {border-color: #fff;}
.skc .owl-prev {left: -8px;}
.skc .owl-next {right: -8px;}
.skc .owl-prev:before {transform: translate(-35%, -50%) rotate(-135deg);}
.skc .owl-next:before {transform: translate(-65%, -50%) rotate(45deg);}
.skc .owl-nav button[disabled] {opacity: .35; cursor: default;}
.skc .owl-dots {display: flex; justify-content: center; gap: 8px; margin-top: 16px;}
.skc .owl-dot {width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #d7e2c9; cursor: pointer; transition: background .18s, transform .18s;}
.skc .owl-dot span {display: none;}
.skc .owl-dot.active {background: #7cb32f; transform: scale(1.2);}
@media (max-width: 767px) {
	.skc .owl-nav button {width: 38px; height: 38px; margin-top: -19px;}
	.skc .owl-prev {left: 2px;}
	.skc .owl-next {right: 2px;}
}
