/* 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:not(.bsft-peek-revealing) {
	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;
}

/* SVG-иконки стрелок наследуют существующие цвет и размер навигации. */
.bsftslide_prew_icon .bsftslide-navigation-icon,
.bsftslide_next_icon .bsftslide-navigation-icon {
	display: block;
	width: 1em;
	height: 1em;
	color: currentColor;
}

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

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

.bsftslide_wrap:not(.bsft-initialized):not([data-peek-pending="1"]):not([data-preinit-pending="1"]) .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: var(--bsft-preinit-placeholder-color, #f3f4f6);
	border-radius: var(--bsft-preinit-placeholder-border-radius, 0);
	scroll-snap-align: start;
}

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

.bsftslide_wrap:not(.bsft-initialized):not([data-peek-pending="1"]):not([data-preinit-pending="1"]) .bsftslide > * {
	opacity: var(--bsft-preinit-content-opacity, 1);
	transition: opacity 0.2s ease;
}

/* Slides with real content: reserve height, show skeleton until init when preloader is on */
.bsftslide_wrap:not(.bsft-initialized):not([data-peek-pending="1"]):not([data-preinit-pending="1"]) .bsftslide.bsftslide-has-content {
	background: var(--bsft-preinit-placeholder-color, #f3f4f6);
	min-height: var(--bsft-preinit-card-height, auto);
	border-radius: var(--bsft-preinit-placeholder-border-radius, 0);
}

.bsftslide_wrap:not(.bsft-initialized):not([data-peek-pending="1"]):not([data-preinit-pending="1"]) .bsftslide.bsftslide-has-content::before {
	opacity: var(--bsft-preinit-skeleton-opacity, 0);
}

.bsftslide_wrap:not(.bsft-initialized):not([data-peek-pending="1"]):not([data-preinit-pending="1"]) .bsftslide.bsftslide-has-content > * {
	opacity: var(--bsft-preinit-content-opacity, 1) !important;
}

.bsftslide_wrap:not(.bsft-initialized):not([data-peek-pending="1"]):not([data-preinit-pending="1"]) .bsftslide.bsftslide-has-content img {
	width: 100%;
	height: auto;
	display: block;
}

.bsftslide_wrap:not(.bsft-initialized):not([data-peek-pending="1"]):not([data-preinit-pending="1"]) .bsftslide.bsftslide-has-content .bsft-slide-image-wrapper,
.bsftslide_wrap:not(.bsft-initialized):not([data-peek-pending="1"]):not([data-preinit-pending="1"]) .bsftslide.bsftslide-has-content .bsft-slide-image-bg {
	width: 100%;
}

.bsftslide_wrap:not(.bsft-initialized):not([data-peek-pending="1"]):not([data-preinit-pending="1"]) #bsftslide_content:has(.bsftslide-has-content) {
	min-height: var(--bsft-preinit-container-min-height, auto);
}

/* Full preinit (data-preinit-pending / data-peek-pending): bulbasoft-client/css/slider/bsftslide-slide.css */

.bsftslide_wrap[data-effect="slide"].bsft-initialized .bsftslide_slides_container.bsftslide_peek_mode {
	opacity: 1;
}

.bsftslide_wrap[data-effect="slide"]:not([data-peek-pending="1"]):not([data-preinit-pending="1"]).bsft-initialized #bsftslide_content,
.bsftslide_wrap[data-effect="slide"].bsft-initialized:not([data-peek-pending="1"]):not([data-preinit-pending="1"]) #bsftslide_content {
	opacity: 1;
	visibility: visible;
	transition: none;
}

.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: var(--bsft-preinit-placeholder-color, #ffffff);
	border-radius: var(--bsft-preinit-placeholder-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: var(--bsft-preinit-placeholder-color, #ffffff);
	border-radius: var(--bsft-preinit-placeholder-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%, var(--bsft-preinit-placeholder-shimmer, rgba(255, 255, 255, 0.75)) 45%, rgba(255, 255, 255, 0) 70%),
		radial-gradient(circle, var(--bsft-preinit-placeholder-center, #e5e7eb) 58%, transparent 60%),
		linear-gradient(var(--bsft-preinit-placeholder-center, #e5e7eb), var(--bsft-preinit-placeholder-center, #e5e7eb)),
		linear-gradient(var(--bsft-preinit-placeholder-center, #e5e7eb), var(--bsft-preinit-placeholder-center, #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%, var(--bsft-preinit-placeholder-shimmer, rgba(255, 255, 255, 0.75)) 45%, rgba(255, 255, 255, 0) 70%),
		linear-gradient(var(--bsft-preinit-placeholder-side, #eef2f7), var(--bsft-preinit-placeholder-side, #eef2f7)),
		linear-gradient(var(--bsft-preinit-placeholder-center, #e5e7eb), var(--bsft-preinit-placeholder-center, #e5e7eb)),
		linear-gradient(var(--bsft-preinit-placeholder-center, #e5e7eb), var(--bsft-preinit-placeholder-center, #e5e7eb)),
		linear-gradient(var(--bsft-preinit-placeholder-side, #edf2f7), var(--bsft-preinit-placeholder-side, #edf2f7)),
		linear-gradient(var(--bsft-preinit-placeholder-center, #e5e7eb), var(--bsft-preinit-placeholder-center, #e5e7eb)),
		linear-gradient(var(--bsft-preinit-placeholder-center, #e5e7eb), var(--bsft-preinit-placeholder-center, #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_wrap.bsftslide-mixed-wrap {
	border: none;
}

.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-edge-c, 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-edge-c, 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;
}

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

.bsftslide-instagram-wrap .bsftslide-mixed-link {
	text-decoration: none;
	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-edge-c, 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;
}