/* Common frontend styles for BulbaSoft Slider */

.bsftslide-wc-temp-item {
	background: #fff;
}

.bsfttune_product_link {
	display: flex;
	flex-wrap: wrap;
}

.bsftslide_wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* Изоляция вёрстки: изменения внутри слайдера не должны пересчитывать соседей (карты, колонки) */
.bsftslide_wrap.bsft-initialized {
	contain: layout;
	isolation: isolate;
}

.bsftslide_wrap:not(.bsft-initialized) {
	min-height: var(--bsft-preinit-container-min-height, auto);
}

.bsftslide_wrap .bsftslide_block {
	position: relative;
	overflow: hidden;
}

.bsftslide_wrap .bsftslide {
	box-sizing: border-box;
	min-width: 0;
}

.bsftslide_wrap:not(.bsft-initialized) #bsftslide_content {
	display: flex;
	gap: var(--slider-gap, 10px);
	overflow-x: auto;
	overflow-y: hidden;
	min-height: var(--bsft-preinit-container-min-height, auto);
	align-items: stretch;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.bsftslide_wrap:not(.bsft-initialized) #bsftslide_content::-webkit-scrollbar {
	display: none;
}

.bsftslide_wrap:not(.bsft-initialized) .bsftslide {
	display: block !important;
	flex: 0 0 var(--bsft-preinit-slide-width, 100%);
	width: var(--bsft-preinit-slide-width, 100%);
	min-width: var(--bsft-preinit-slide-width, 100%);
	min-height: var(--bsft-preinit-card-height, auto);
	position: relative;
	overflow: hidden;
	background: #f3f4f6;
	scroll-snap-align: start;
}

.bsftslide_wrap:not(.bsft-initialized) .bsftslide::before {
	content: '';
	position: absolute;
	inset: 0;
	opacity: var(--bsft-preinit-skeleton-opacity, 0);
	pointer-events: none;
	background: linear-gradient(110deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.55) 45%, rgba(255, 255, 255, 0) 70%), linear-gradient(#eceff3, #eceff3);
	background-size: 200% 100%, 100% 100%;
	animation: bsft-preinit-shimmer 1.6s linear infinite;
	z-index: 1;
}

.bsftslide_wrap:not(.bsft-initialized) .bsftslide > * {
	opacity: var(--bsft-preinit-content-opacity, 1);
	transition: opacity 0.2s ease;
}

.bsftslide_wrap:not(.bsft-initialized) .bsftslide.hidden {
	display: block !important;
}

.bsftslide_wrap:not(.bsft-initialized) .bsftslide_prew,
.bsftslide_wrap:not(.bsft-initialized) .bsftslide_next {
	display: none !important;
}

.bsftslide_wrap:not(.bsft-initialized) .bsftslide_bullets {
	display: none !important;
}

.bsftslide_wrap.bsftslide-woo-products:not(.bsft-initialized) .bsftslide {
	background: #ffffff;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
	border: 1px solid rgba(226, 232, 240, 0.9);
}

.bsftslide_wrap.bsftslide-woo-categories:not(.bsft-initialized) .bsftslide {
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
	border: 1px solid rgba(226, 232, 240, 0.9);
}

.bsftslide_wrap.bsftslide-woo-categories:not(.bsft-initialized) .bsftslide > * {
	opacity: 0 !important;
	pointer-events: none;
}

.bsftslide_wrap.bsftslide-woo-categories:not(.bsft-initialized) .bsftslide::before {
	background:
		linear-gradient(110deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.75) 45%, rgba(255, 255, 255, 0) 70%),
		radial-gradient(circle, #e5e7eb 58%, transparent 60%),
		linear-gradient(#e5e7eb, #e5e7eb),
		linear-gradient(#e5e7eb, #e5e7eb);
	background-repeat: no-repeat;
	background-size:
		200% 100%,
		72px 72px,
		62% 12px,
		48% 12px;
	background-position:
		200% 0,
		center 16px,
		center calc(16px + 72px + 18px),
		center calc(16px + 72px + 38px);
}

.bsftslide_wrap.bsftslide-woo-products:not(.bsft-initialized) .bsftslide::before {
	background:
		linear-gradient(110deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.75) 45%, rgba(255, 255, 255, 0) 70%),
		linear-gradient(#eef2f7, #eef2f7),
		linear-gradient(#e5e7eb, #e5e7eb),
		linear-gradient(#e5e7eb, #e5e7eb),
		linear-gradient(#edf2f7, #edf2f7),
		linear-gradient(#e5e7eb, #e5e7eb),
		linear-gradient(#e5e7eb, #e5e7eb);
	background-repeat: no-repeat;
	background-size:
		200% 100%,
		calc(100% - 24px) 46%,
		68% 12px,
		54% 12px,
		38% 10px,
		34% 16px,
		44% 34px;
	background-position:
		200% 0,
		12px 12px,
		12px calc(46% + 28px),
		12px calc(46% + 48px),
		12px calc(46% + 72px),
		12px calc(46% + 94px),
		12px calc(100% - 16px - 34px);
}

@media (max-width: 768px) {
	.bsftslide_wrap.bsftslide-woo-categories:not(.bsft-initialized) .bsftslide::before {
		background-size:
			200% 100%,
			60px 60px,
			70% 11px,
			54% 11px;
		background-position:
			200% 0,
			center 14px,
			center calc(14px + 60px + 14px),
			center calc(14px + 60px + 32px);
	}

	.bsftslide_wrap.bsftslide-woo-products:not(.bsft-initialized) .bsftslide::before {
		background-size:
			200% 100%,
			calc(100% - 20px) 42%,
			74% 11px,
			58% 11px,
			42% 10px,
			38% 15px,
			52% 30px;
		background-position:
			200% 0,
			10px 10px,
			10px calc(42% + 24px),
			10px calc(42% + 42px),
			10px calc(42% + 64px),
			10px calc(42% + 84px),
			10px calc(100% - 14px - 30px);
	}
}

@keyframes bsft-preinit-shimmer {
	0% {
		background-position: 200% 0, 0 0;
	}
	100% {
		background-position: -200% 0, 0 0;
	}
}

/* =================================
   СТИЛИ ДЛЯ СЛАЙДОВ ИЗОБРАЖЕНИЙ
   ================================= */

/* Контейнер слайда изображения */
.bsft-slide-image-bg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: auto; /* Убрано фиксированное значение, высота управляется через настройки */
	position: relative;
}

.bsft-slide-image-wrapper {
	width: 100%;
}

.bsft-slide-image-wrapper img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Контейнер текста слайда */
.bsft-slide-content {
	box-sizing: border-box;
}

/* Анимации текста */
@keyframes bsft-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes bsft-slide-up {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes bsft-slide-down {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes bsft-slide-left {
	from {
		opacity: 0;
		transform: translateX(30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes bsft-slide-right {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes bsft-zoom {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Применение анимаций */
.bsft-animate-fade {
	animation-name: bsft-fade-in;
	animation-duration: 500ms;
	animation-fill-mode: both;
}

.bsft-animate-slide-up {
	animation-name: bsft-slide-up;
	animation-duration: 500ms;
	animation-fill-mode: both;
}

.bsft-animate-slide-down {
	animation-name: bsft-slide-down;
	animation-duration: 500ms;
	animation-fill-mode: both;
}

.bsft-animate-slide-left {
	animation-name: bsft-slide-left;
	animation-duration: 500ms;
	animation-fill-mode: both;
}

.bsft-animate-slide-right {
	animation-name: bsft-slide-right;
	animation-duration: 500ms;
	animation-fill-mode: both;
}

.bsft-animate-zoom {
	animation-name: bsft-zoom;
	animation-duration: 500ms;
	animation-fill-mode: both;
}

/* Стили для превью в админке */
.bsft-slide-preview-container {
	max-width: 800px;
	margin: 0 auto;
	border: 1px solid #ddd;
	padding: 20px;
	background: #f9f9f9;
}

.bsft-slide-preview {
	position: relative;
	min-height: auto; /* Убрано фиксированное значение для превью */
	background: #fff;
	border: 1px solid #ccc;
	overflow: hidden;
}

/* Hide only placeholders that are explicitly marked as hidden.
   Keep visible placeholders on last pages intact. */
.bsftslide_flip_slide.flip-hidden.bsftslide_flip_placeholder,
.bsftslide_fade_slide.fade-hidden.bsftslide_fade_placeholder {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

/* Смешанный слайдер: переменная ширина карточек, общая max-height */
.bsftslide-mixed-wrap .bsftslide-mixed-viewport {
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
}

.bsftslide-mixed-wrap .bsftslide-mixed-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--slider-gap, 10px);
	will-change: transform;
}

.bsftslide-mixed-wrap .bsftslide-mixed-item {
	flex: 0 0 auto;
	max-width: 100%;
	width: auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background: var(--bsft-mixed-item-bg, transparent);
	padding: var(--bsft-mixed-item-padding, 0);
	border: var(--bsft-mixed-item-edge-w, 0px) solid var(--bsft-mixed-item-border-color, transparent);
	border-radius: var(--bsft-mixed-item-radius, 0);
	overflow: hidden;
}

.bsftslide-mixed-wrap .bsftslide-mixed-link {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: inherit;
	max-width: 100%;
}

.bsftslide-mixed-wrap .bsftslide-mixed-card {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: var(--bsft-mixed-card-max, 200px);
}

.bsftslide-mixed-wrap .bsftslide-mixed-card img,
.bsftslide-mixed-wrap .bsftslide-mixed-card video {
	display: block;
	max-height: var(--bsft-mixed-card-max, 200px);
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	vertical-align: middle;
}

.bsftslide-mixed-wrap .bsftslide-mixed-placeholder {
	padding: 12px 16px;
	background: #f0f0f0;
	color: #666;
	font-size: 13px;
	border-radius: 4px;
}

/* До инициализации JS не применять преинит-сетку с равными колонками */
.bsftslide-mixed-wrap:not(.bsft-initialized) #bsftslide_content {
	display: block;
	overflow: hidden;
	scroll-snap-type: none;
}

.bsftslide-mixed-wrap:not(.bsft-initialized) .bsftslide-mixed-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--slider-gap, 10px);
}

.bsftslide-mixed-wrap:not(.bsft-initialized) .bsftslide-mixed-item {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: 100%;
	box-sizing: border-box;
	background: var(--bsft-mixed-item-bg, transparent);
	padding: var(--bsft-mixed-item-padding, 0);
	border: var(--bsft-mixed-item-edge-w, 0px) solid var(--bsft-mixed-item-border-color, transparent);
	border-radius: var(--bsft-mixed-item-radius, 0);
	overflow: hidden;
}

/* YouTube: подпись под превью */
.bsftslide-youtube-wrap .bsftslide-mixed-link,
.bsftslide-youtube-wrap .bsftslide-youtube-embed-trigger {
	flex-direction: column;
	align-items: stretch;
}

.bsftslide-youtube-wrap .bsftslide-youtube-embed-trigger {
	cursor: pointer;
}

.bsftslide-youtube-wrap .bsftslide-youtube-embed-trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.bsftslide-youtube-wrap .bsftslide-youtube-embed-trigger .bsftslide-mixed-card {
	position: relative;
}

.bsftslide-youtube-play-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	background: rgba(0, 0, 0, 0.12);
	transition: background 0.2s ease;
}

.bsftslide-youtube-embed-trigger:hover .bsftslide-youtube-play-overlay {
	background: rgba(0, 0, 0, 0.22);
}

.bsftslide-youtube-play-icon {
	display: block;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	position: relative;
}

.bsftslide-youtube-play-icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: 10px 0 10px 16px;
	border-color: transparent transparent transparent #fff;
}

.bsftslide-youtube-iframe-shell {
	position: relative;
	width: 100%;
	max-height: var(--bsft-mixed-card-max, 200px);
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}

.bsftslide-youtube-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.bsftslide-youtube-wrap .bsftslide-youtube-title {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	line-height: 1.35;
	color: inherit;
}

/*
 * Flip / Fade: ядро задаёт клонам className = "bsftslide bsftslide_flip_slide" и сбрасывает .bsftslide-mixed-item.
 * Восстанавливаем те же переменные и правила, что у .bsftslide-mixed-item (смешанный слайдер).
 */
.bsftslide_wrap.bsftslide-mixed-wrap[data-effect="flip"] .bsftslide_flip_slide:not(.bsftslide_flip_placeholder),
.bsftslide_wrap.bsftslide-mixed-wrap[data-effect="fade"] .bsftslide_fade_slide:not(.bsftslide_fade_placeholder) {
	flex: 0 0 auto;
	max-width: 100%;
	width: auto;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background: var(--bsft-mixed-item-bg, transparent);
	padding: var(--bsft-mixed-item-padding, 0);
	border: var(--bsft-mixed-item-edge-w, 0px) solid var(--bsft-mixed-item-border-color, transparent);
	border-radius: var(--bsft-mixed-item-radius, 0);
	overflow: hidden;
}

.bsftslide_wrap.bsftslide-mixed-wrap[data-effect="flip"] .bsftslide_flip_slide .bsftslide-mixed-link,
.bsftslide_wrap.bsftslide-mixed-wrap[data-effect="fade"] .bsftslide_fade_slide .bsftslide-mixed-link,
.bsftslide_wrap.bsftslide-mixed-wrap[data-effect="flip"] .bsftslide_flip_slide .bsftslide-youtube-embed-trigger,
.bsftslide_wrap.bsftslide-mixed-wrap[data-effect="fade"] .bsftslide_fade_slide .bsftslide-youtube-embed-trigger {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: inherit;
	max-width: 100%;
}

.bsftslide_wrap.bsftslide-mixed-wrap.bsftslide-youtube-wrap[data-effect="flip"] .bsftslide_flip_slide .bsftslide-mixed-link,
.bsftslide_wrap.bsftslide-mixed-wrap.bsftslide-youtube-wrap[data-effect="fade"] .bsftslide_fade_slide .bsftslide-mixed-link,
.bsftslide_wrap.bsftslide-mixed-wrap.bsftslide-youtube-wrap[data-effect="flip"] .bsftslide_flip_slide .bsftslide-youtube-embed-trigger,
.bsftslide_wrap.bsftslide-mixed-wrap.bsftslide-youtube-wrap[data-effect="fade"] .bsftslide_fade_slide .bsftslide-youtube-embed-trigger {
	flex-direction: column;
	align-items: stretch;
}

.bsftslide_wrap.bsftslide-mixed-wrap[data-effect="flip"] .bsftslide_flip_slide .bsftslide-mixed-card,
.bsftslide_wrap.bsftslide-mixed-wrap[data-effect="fade"] .bsftslide_fade_slide .bsftslide-mixed-card {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: var(--bsft-mixed-card-max, 200px);
}

.bsftslide_wrap.bsftslide-mixed-wrap[data-effect="flip"] .bsftslide_flip_slide .bsftslide-mixed-card img,
.bsftslide_wrap.bsftslide-mixed-wrap[data-effect="fade"] .bsftslide_fade_slide .bsftslide-mixed-card img {
	display: block;
	max-height: var(--bsft-mixed-card-max, 200px);
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	vertical-align: middle;
}