/* =========== © 2026 Centroarts - https://m1r.ru =========== */

@media (min-width: 1100px) {
	.scroll-container {
		--hscroll-take: 0px;
		--hscroll-take-inv: 0px;
		--hscroll-fade-right: 0px;
		--hscroll-fade-left: 0px;
	}
}
@media (min-width: 808px) {
	.scroll-container {
		position: relative;
	}

	.sect-card-scroll:not(:hover) .scroll-buttons,
	.sect-promo-scroll:not(:hover) .scroll-buttons,
	.sect-audio-scroll:not(:hover) .scroll-buttons,
	.sect-set-scroll:not(:hover) .scroll-buttons,
	.photo-gallery:not(:hover) .scroll-buttons { opacity: 0; }

	.scroll-buttons {
		display: flex !important; justify-content: space-between; align-items: center;
		position: absolute; z-index: 10; inset: 0; left: var(--hscroll-take-inv); right: var(--hscroll-take-inv);
		pointer-events: none; user-select: none; transition: opacity .2s ease;
	}

	.scroll-button {
		position: relative; width: var(--hscroll-take); height: 100%; padding: 0;
		pointer-events: none; color: inherit; border: 0 none !important; background: none !important; outline: none !important;
		cursor: pointer; opacity: 0; visibility: hidden; pointer-events: none; touch-action: manipulation;
		transition: opacity .2s ease, visibility .2s ease;
	}
	.scroll-button.prev .scroll-button-in { left: 6px; }
	.scroll-button.next .scroll-button-in { right: 6px; }

	.scroll-button-in {
		--im-color: hsl(var(--c-text));
		position: absolute; z-index: 1; top: 50%; margin-top: -22px;
		display: flex; justify-content: center; align-items: center;
		width: 44px; height: 44px; border-radius: 18px;
		transition: transform .2s ease;
	}
	.sect-set-scroll .scroll-button-in,
	.sect-card-scroll .scroll-button-in,
	.sect-audio-scroll .scroll-button-in { top: calc(var(--card-height) / 2); }

	.scroll-button-in::after {
		content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 18px;
		background-color: var(--btn-carousel-bg); box-shadow: var(--btn-carousel-sw); transition: transform .15s ease;
	}
	.scroll-button-in::before { opacity: 1; transition: opacity .15s ease; }
	.scroll-button:hover .scroll-button-in::before { opacity: .6; }

	.scroll-button:hover .scroll-button-in::after { transform: scale(1.03); }
	.scroll-button:active .scroll-button-in::after { transform: scale(0.98); }

	.scroll-container.show-prev .scroll-button.prev,
	.scroll-container.show-next .scroll-button.next { opacity: 1; visibility: visible; pointer-events: all; }

	.maincat-head-menu {
		margin-inline: 32px;
	}
	.maincat-head-menu .scroll-buttons { left: -32px; right: -32px; }
	.maincat-head-menu .scroll-button.prev .scroll-button-in { left: 0px; }
	.maincat-head-menu .scroll-button.next .scroll-button-in { right: 0px; }
	.maincat-head-menu .scroll-button-in { width: 28px; }
	.maincat-head-menu .scroll-button { opacity: .3; visibility: visible; }
}