/* Product Showcase Slider Styles */

.wp-block-blooopp-product-slider,
.blooopp-product-slider-wrapper {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-height: 640px;
	background-color: #050505;
	color: #ffffff;
	padding-top: 50px;
	padding-bottom: 60px;
	overflow: hidden;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
}

.blooopp-product-slider-wrapper.is-dragging {
	cursor: grabbing !important;
}

.blooopp-product-slider-wrapper.is-dragging * {
	cursor: grabbing !important;
	user-select: none !important;
	-webkit-user-select: none !important;
}

.blooopp-product-slider-wrapper.is-dragging .blooopp-slide-item {
	transition: none !important;
}

.blooopp-product-slider-wrapper img {
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none;
}

.alignfull.wp-block-blooopp-product-slider,
.alignfull.blooopp-product-slider-wrapper {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.blooopp-slider-container {
	position: relative;
	width: 100%;
	max-width: 100%;
	min-height: 600px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Background Radial Spotlight Circle (hidden in favor of dynamic solid shape) */
.blooopp-slider-bg-circle {
	display: none !important;
}

/* Dynamic Solid Shape Behind / Beside Product */
.blooopp-product-bg-shape,
.blooopp-product-bg-shape-preview {
	position: absolute;
	top: 52%;
	left: 50%;
	pointer-events: none;
	z-index: 2;
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.4s ease, opacity 0.4s ease;
	box-shadow: 0 15px 45px rgba(0, 0, 0, 0.45);
	transform-box: border-box !important;
	transform-origin: center center !important;
	scale: none !important;
	will-change: transform;
	animation: bloooppShapeZoomInOut 5s ease-in-out infinite alternate;
}

@keyframes bloooppShapeZoomInOut {
	0% {
		transform: translate(calc(-50% + var(--shape-offset-x, 0px)), calc(-50% + var(--shape-offset-y, 0px))) scale(0.95);
		box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
	}

	50% {
		transform: translate(calc(-50% + var(--shape-offset-x, 0px)), calc(-50% + var(--shape-offset-y, 0px))) scale(1.01);
	}

	100% {
		transform: translate(calc(-50% + var(--shape-offset-x, 0px)), calc(-50% + var(--shape-offset-y, 0px))) scale(1.07);
		box-shadow: 0 24px 55px rgba(0, 0, 0, 0.55);
	}
}

.blooopp-slide-item.is-prev .blooopp-product-bg-shape,
.blooopp-slide-item.is-next .blooopp-product-bg-shape {
	opacity: 0.65;
}

/* Horizontal Dashed Line Spanning 100% Full Viewport Width - 2px Solid #fff */
.blooopp-slider-dashed-line {
	position: absolute;
	top: 52%;
	left: 0;
	width: 100%;
	height: 0;
	border-top: 2px dashed #ffffff;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 1;
}

/* Slider Track Layout */
.blooopp-slider-track {
	position: relative;
	width: 100%;
	min-height: 560px;
	z-index: 2;
}

/* Individual Slide Item */
.blooopp-slide-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: all 0.7s cubic-bezier(0.25, 1, 0.5, 1);
	pointer-events: none;
	display: flex;
	flex-direction: column;
}

/* Header Info Row (Product Number left, Product Name right) */
.blooopp-slide-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 1050px;
	margin: 0 auto;
	padding: 10px 20px;
	box-sizing: border-box;
	z-index: 10;
	position: relative;
	letter-spacing: 1.5px;
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	user-select: none;
	-webkit-user-select: none;
	pointer-events: none;
}

.blooopp-product-number {
	color: #ffffff;
}

.blooopp-product-name {
	color: #ffffff;
}

/* Slide Stage Center Area */
.blooopp-slide-stage {
	position: relative;
	flex: 1;
	width: 100%;
	min-height: 480px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 0;
	box-sizing: border-box;
}

/* Center Product Image - Prominent & Perfectly Fitted */
.blooopp-main-product-wrapper {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.6s ease;
	animation: bloooppFloat 4s ease-in-out infinite alternate;
}

.blooopp-main-product-img {
	max-height: 440px;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.85));
	transform: rotate(-6deg) scale(1);
	transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.blooopp-slide-item.is-active .blooopp-main-product-img {
	transform: rotate(-6deg) scale(1.15);
}

/* Dynamic Floating Elements - Standardized & Responsive */
.blooopp-floating-element {
	position: absolute;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Element #1: Left Top on Product */
.blooopp-floating-element[data-element-index="1"],
.blooopp-floating-element.blooopp-floating-element-1,
.blooopp-slide-stage>.blooopp-product-bg-shape+.blooopp-floating-element,
.blooopp-slide-stage>.blooopp-floating-element:first-child,
.blooopp-slide-stage>.blooopp-floating-element:nth-of-type(2) {
	top: calc(50% - 110px) !important;
	left: calc(50% - 95px) !important;
	transform: translate(-50%, -50%) scale(var(--elem-scale, 1)) !important;
	z-index: 4 !important;
}

/* Element #2: Right Bottom of Product */
.blooopp-floating-element[data-element-index="2"],
.blooopp-floating-element.blooopp-floating-element-2,
.blooopp-slide-stage>.blooopp-floating-element+.blooopp-floating-element,
.blooopp-slide-stage>.blooopp-floating-element:nth-of-type(3) {
	top: calc(50% + 115px) !important;
	left: calc(50% + 80px) !important;
	transform: translate(-50%, -50%) scale(var(--elem-scale, 1)) !important;
}

/* Element #3: (If present: Top Right) */
.blooopp-floating-element[data-element-index="3"],
.blooopp-floating-element.blooopp-floating-element-3,
.blooopp-slide-stage>.blooopp-floating-element+.blooopp-floating-element+.blooopp-floating-element,
.blooopp-slide-stage>.blooopp-floating-element:nth-of-type(4) {
	top: calc(50% - 120px) !important;
	left: calc(50% + 110px) !important;
	transform: translate(-50%, -50%) scale(var(--elem-scale, 1)) !important;
}

/* Element #4: (If present: Bottom Left) */
.blooopp-floating-element[data-element-index="4"],
.blooopp-floating-element.blooopp-floating-element-4,
.blooopp-slide-stage>.blooopp-floating-element+.blooopp-floating-element+.blooopp-floating-element+.blooopp-floating-element,
.blooopp-slide-stage>.blooopp-floating-element:nth-of-type(5) {
	top: calc(50% + 120px) !important;
	left: calc(50% - 90px) !important;
	transform: translate(-50%, -50%) scale(var(--elem-scale, 1)) !important;
}

.blooopp-floating-element img {
	max-width: 130px;
	max-height: 130px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.6));
	animation: bloooppFloat 4s ease-in-out infinite alternate;
}

@keyframes bloooppFloat {
	0% {
		transform: translateY(0px) rotate(0deg);
	}

	50% {
		transform: translateY(-14px) rotate(5deg);
	}

	100% {
		transform: translateY(10px) rotate(-4deg);
	}
}

/* Slide State Classes */
/* 1. Active Slide */
.blooopp-slide-item.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(0) scale(1);
	z-index: 5;
	filter: blur(0px);
}

/* 2. Previous Slide (Left blurred preview - closer to center) */
.blooopp-slide-item.is-prev {
	opacity: 0.55;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-26%) scale(0.55) rotate(-8deg);
	z-index: 3;
	filter: blur(4px);
	cursor: pointer;
}

/* 3. Next Slide (Right blurred preview - closer to center) */
.blooopp-slide-item.is-next {
	opacity: 0.55;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(26%) scale(0.55) rotate(8deg);
	z-index: 3;
	filter: blur(4px);
	cursor: pointer;
}

.blooopp-slide-item.is-prev .blooopp-slide-header,
.blooopp-slide-item.is-next .blooopp-slide-header {
	opacity: 0;
}

/* Slider Navigation Arrows & Dots */
.blooopp-slider-nav {
	left: 50%;
	position: absolute;
	top: 52%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	transform: translateY(-50%) translateX(-50%);
	pointer-events: none;
	z-index: 10;
	padding: 0 20px;
	box-sizing: border-box;
	max-width: 1100px;
}

.blooopp-slider-btn {
	pointer-events: auto;
	background: #000000;
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: #ffffff;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	backdrop-filter: blur(5px);
	transition: all 0.3s ease;
}

.blooopp-slider-btn:hover {
	background: rgba(255, 255, 255, 0.25);
	transform: scale(1.1);
}

.blooopp-slider-dots {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 10;
}

.blooopp-slider-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: all 0.3s ease;
}

.blooopp-slider-dot.is-active {
	background: #ffffff;
	width: 24px;
	border-radius: 10px;
}

/* Editor Specific Styles - Seamless & Borderless */
/* Editor Specific Styles - Seamless & Borderless */
.editor-styles-wrapper .wp-block-blooopp-product-slider,
.editor-styles-wrapper .blooopp-product-slider-wrapper,
.blooopp-product-slider-editor {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	background: #050505;
	color: #fff;
	padding: 20px 0;
	border-radius: 0;
	border: none;
}

.editor-styles-wrapper {
	overflow-x: hidden;
}

.blooopp-slider-admin-header {
	border-bottom: 1px dashed #333;
	padding-bottom: 12px;
	margin-bottom: 20px;
	padding-left: 20px;
}

.blooopp-slider-admin-header h3 {
	margin: 0 0 5px 0;
	color: #fff;
}

.blooopp-slider-admin-header p {
	margin: 0;
	color: #888;
	font-size: 13px;
}

.blooopp-slide-card-preview {
	background: transparent;
	border: none;
	border-radius: 0;
	padding: 20px 30px;
	margin-bottom: 20px;
	position: relative;
	min-height: 320px;
	box-shadow: none;
}

.blooopp-slide-header-preview {
	display: flex;
	justify-content: space-between;
	max-width: 1050px;
	margin: 0 auto 20px auto;
	font-weight: bold;
	font-size: 14px;
	border-bottom: none;
	padding-bottom: 0;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.blooopp-slide-body-preview {
	position: relative;
	min-height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.blooopp-product-img-wrapper img {
	max-height: 280px;
	width: auto;
	transform: rotate(-6deg) scale(1.15);
	filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.8));
}

.blooopp-floating-elem-preview {
	position: absolute;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Editor Preview Card Floating Elements */
.blooopp-slide-body-preview>.blooopp-floating-elem-preview[data-element-index="1"],
.blooopp-slide-body-preview>.blooopp-floating-elem-1,
.blooopp-slide-body-preview>.blooopp-product-bg-shape-preview+.blooopp-floating-elem-preview,
.blooopp-slide-body-preview>.blooopp-floating-elem-preview:first-child,
.blooopp-slide-body-preview>.blooopp-floating-elem-preview:nth-of-type(2) {
	top: calc(50% - 65px) !important;
	left: calc(50% - 60px) !important;
	transform: translate(-50%, -50%) scale(var(--elem-scale, 1)) !important;
}

.blooopp-slide-body-preview>.blooopp-floating-elem-preview[data-element-index="2"],
.blooopp-slide-body-preview>.blooopp-floating-elem-2,
.blooopp-slide-body-preview>.blooopp-floating-elem-preview+.blooopp-floating-elem-preview,
.blooopp-slide-body-preview>.blooopp-floating-elem-preview:nth-of-type(3) {
	top: calc(50% + 65px) !important;
	left: calc(50% + 50px) !important;
	transform: translate(-50%, -50%) scale(var(--elem-scale, 1)) !important;
}

.blooopp-slide-body-preview>.blooopp-floating-elem-preview[data-element-index="3"],
.blooopp-slide-body-preview>.blooopp-floating-elem-3,
.blooopp-slide-body-preview>.blooopp-floating-elem-preview+.blooopp-floating-elem-preview+.blooopp-floating-elem-preview,
.blooopp-slide-body-preview>.blooopp-floating-elem-preview:nth-of-type(4) {
	top: calc(50% - 70px) !important;
	left: calc(50% + 65px) !important;
	transform: translate(-50%, -50%) scale(var(--elem-scale, 1)) !important;
}

.blooopp-slide-body-preview>.blooopp-floating-elem-preview[data-element-index="4"],
.blooopp-slide-body-preview>.blooopp-floating-elem-4,
.blooopp-slide-body-preview>.blooopp-floating-elem-preview+.blooopp-floating-elem-preview+.blooopp-floating-elem-preview+.blooopp-floating-elem-preview,
.blooopp-slide-body-preview>.blooopp-floating-elem-preview:nth-of-type(5) {
	top: calc(50% + 70px) !important;
	left: calc(50% - 55px) !important;
	transform: translate(-50%, -50%) scale(var(--elem-scale, 1)) !important;
}

.blooopp-floating-elem-preview img {
	max-width: 100px;
	max-height: 100px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7));
}

/* Responsive adjustments */
@media (max-width: 768px) {

	.wp-block-blooopp-product-slider,
	.blooopp-product-slider-wrapper {
		min-height: 520px;
		padding: 30px 0 50px 0;
	}

	.blooopp-slider-container {
		min-height: 480px;
	}

	.blooopp-slider-track {
		min-height: 440px;
	}

	.blooopp-slide-header {
		font-size: 13px;
		letter-spacing: 1px;
		padding: 10px 16px;
	}

	.blooopp-slide-stage {
		min-height: 360px;
	}

	.blooopp-slide-item.is-prev {
		transform: translateX(-38%) scale(0.42) rotate(-5deg);
		opacity: 0.35;
		filter: blur(3px);
	}

	.blooopp-slide-item.is-next {
		transform: translateX(38%) scale(0.42) rotate(5deg);
		opacity: 0.35;
		filter: blur(3px);
	}

	.blooopp-slider-bg-circle {
		width: 300px;
		height: 300px;
	}

	.blooopp-product-bg-shape {
		max-width: 68vw !important;
		max-height: 68vw !important;
	}

	.blooopp-main-product-img {
		max-height: 270px;
	}

	.blooopp-slide-item.is-active .blooopp-main-product-img {
		transform: rotate(-6deg) scale(1.08);
	}

	.blooopp-floating-element img {
		max-width: 80px;
		max-height: 80px;
	}

	/* Tablet: Left-Top & Right-Bottom on Product */
	.blooopp-floating-element[data-element-index="1"],
	.blooopp-floating-element.blooopp-floating-element-1,
	.blooopp-slide-stage>.blooopp-product-bg-shape+.blooopp-floating-element,
	.blooopp-slide-stage>.blooopp-floating-element:first-child,
	.blooopp-slide-stage>.blooopp-floating-element:nth-of-type(2) {
		top: calc(50% - 70px) !important;
		left: calc(50% - 60px) !important;
	}

	/* Element #2: Right Bottom of Product */
	.blooopp-floating-element[data-element-index="2"],
	.blooopp-floating-element.blooopp-floating-element-2,
	.blooopp-slide-stage>.blooopp-floating-element+.blooopp-floating-element,
	.blooopp-slide-stage>.blooopp-floating-element:nth-of-type(3) {
		top: calc(50% + 70px) !important;
		left: calc(50% + 50px) !important;
	}

	/* Element #3 */
	.blooopp-floating-element[data-element-index="3"],
	.blooopp-floating-element.blooopp-floating-element-3,
	.blooopp-slide-stage>.blooopp-floating-element+.blooopp-floating-element+.blooopp-floating-element,
	.blooopp-slide-stage>.blooopp-floating-element:nth-of-type(4) {
		top: calc(50% - 75px) !important;
		left: calc(50% + 65px) !important;
	}

	/* Element #4 */
	.blooopp-floating-element[data-element-index="4"],
	.blooopp-floating-element.blooopp-floating-element-4,
	.blooopp-slide-stage>.blooopp-floating-element+.blooopp-floating-element+.blooopp-floating-element+.blooopp-floating-element,
	.blooopp-slide-stage>.blooopp-floating-element:nth-of-type(5) {
		top: calc(50% + 75px) !important;
		left: calc(50% - 55px) !important;
	}

	.blooopp-slider-nav {
		padding: 0 10px;
	}

	.blooopp-slider-btn {
		width: 40px;
		height: 40px;
	}
}

@media (max-width: 480px) {

	.wp-block-blooopp-product-slider,
	.blooopp-product-slider-wrapper {
		min-height: 460px;
		padding: 20px 0 20px 0;
	}

	.blooopp-slide-header {
		font-size: 11px;
		letter-spacing: 0.5px;
		padding: 8px 12px;
	}

	.blooopp-slide-stage {
		min-height: 320px;
	}

	.blooopp-main-product-img {
		max-height: 220px;
	}

	.blooopp-floating-element img {
		max-width: 60px;
		max-height: 60px;
	}

	/* Mobile: Left-Top & Right-Bottom on Product */
	.blooopp-floating-element[data-element-index="1"],
	.blooopp-floating-element.blooopp-floating-element-1,
	.blooopp-slide-stage>.blooopp-product-bg-shape+.blooopp-floating-element,
	.blooopp-slide-stage>.blooopp-floating-element:first-child,
	.blooopp-slide-stage>.blooopp-floating-element:nth-of-type(2) {
		top: calc(50% - 55px) !important;
		left: calc(50% - 48px) !important;
	}

	/* Element #2: Right Bottom of Product */
	.blooopp-floating-element[data-element-index="2"],
	.blooopp-floating-element.blooopp-floating-element-2,
	.blooopp-slide-stage>.blooopp-floating-element+.blooopp-floating-element,
	.blooopp-slide-stage>.blooopp-floating-element:nth-of-type(3) {
		top: calc(50% + 55px) !important;
		left: calc(50% + 40px) !important;
	}

	/* Element #3 */
	.blooopp-floating-element[data-element-index="3"],
	.blooopp-floating-element.blooopp-floating-element-3,
	.blooopp-slide-stage>.blooopp-floating-element+.blooopp-floating-element+.blooopp-floating-element,
	.blooopp-slide-stage>.blooopp-floating-element:nth-of-type(4) {
		top: calc(50% - 60px) !important;
		left: calc(50% + 50px) !important;
	}

	/* Element #4 */
	.blooopp-floating-element[data-element-index="4"],
	.blooopp-floating-element.blooopp-floating-element-4,
	.blooopp-slide-stage>.blooopp-floating-element+.blooopp-floating-element+.blooopp-floating-element+.blooopp-floating-element,
	.blooopp-slide-stage>.blooopp-floating-element:nth-of-type(5) {
		top: calc(50% + 60px) !important;
		left: calc(50% - 45px) !important;
	}

	.blooopp-slide-item.is-prev {
		transform: translateX(-40%) scale(0.35) rotate(-4deg);
		opacity: 0.25;
	}

	.blooopp-slide-item.is-next {
		transform: translateX(40%) scale(0.35) rotate(4deg);
		opacity: 0.25;
	}

	.blooopp-slider-bg-circle {
		width: 240px;
		height: 240px;
	}

	.blooopp-product-bg-shape {
		max-width: 62vw !important;
		max-height: 62vw !important;
	}
}

/* ========================================================
   ANIMATION 2: Active Product Only with Stable Scaling Shape
   ======================================================== */

.blooopp-slider-animation-2 .blooopp-slide-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: none !important;
	transition: none !important;
	display: none;
	flex-direction: column;
}

/* Hide side preview slides in Animation 2 */
.blooopp-slider-animation-2 .blooopp-slide-item.is-prev,
.blooopp-slider-animation-2 .blooopp-slide-item.is-next {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transform: none !important;
	filter: none !important;
	cursor: default !important;
}

/* Slides visible during active or transitioning state */
.blooopp-slider-animation-2 .blooopp-slide-item.is-active,
.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-out-to-left,
.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-out-to-right,
.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-in-from-right,
.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-in-from-left {
	display: flex !important;
	visibility: visible !important;
	transform: none !important;
}

.blooopp-slider-animation-2 .blooopp-slide-item.is-active {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	z-index: 5;
	filter: none !important;
}

.blooopp-slider-animation-2 .blooopp-slide-item.is-active .blooopp-slide-header {
	opacity: 1;
	transform: translateY(0);
}

.blooopp-slider-animation-2 .blooopp-slide-item.is-active .blooopp-main-product-wrapper {
	animation: bloooppFloat 4s ease-in-out infinite alternate;
}

.blooopp-slider-animation-2 .blooopp-slide-item.is-active .blooopp-product-bg-shape {
	animation: bloooppShapeZoomInOut 5s ease-in-out infinite alternate;
}

/* ----------------------------------------------------
   Animation 2: Round Shape Scaling
   The shape stays stable in position (NO horizontal translation)
   and scales out (shrinks) and scales in (expands)
   ---------------------------------------------------- */
.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-out-to-left .blooopp-product-bg-shape,
.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-out-to-right .blooopp-product-bg-shape {
	animation: bloooppShapeScaleOut 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-in-from-right .blooopp-product-bg-shape,
.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-in-from-left .blooopp-product-bg-shape {
	animation: bloooppShapeScaleIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both !important;
}

@keyframes bloooppShapeScaleOut {
	0% {
		transform: translate(calc(-50% + var(--shape-offset-x, 0px)), calc(-50% + var(--shape-offset-y, 0px))) scale(1);
		opacity: 1;
	}

	100% {
		transform: translate(calc(-50% + var(--shape-offset-x, 0px)), calc(-50% + var(--shape-offset-y, 0px))) scale(0);
		opacity: 0;
	}
}

@keyframes bloooppShapeScaleIn {
	0% {
		transform: translate(calc(-50% + var(--shape-offset-x, 0px)), calc(-50% + var(--shape-offset-y, 0px))) scale(0);
		opacity: 0;
	}

	65% {
		transform: translate(calc(-50% + var(--shape-offset-x, 0px)), calc(-50% + var(--shape-offset-y, 0px))) scale(1.08);
		opacity: 1;
	}

	100% {
		transform: translate(calc(-50% + var(--shape-offset-x, 0px)), calc(-50% + var(--shape-offset-y, 0px))) scale(1);
		opacity: 1;
	}
}

/* ----------------------------------------------------
   Animation 2: Product & Elements Sliding Transitions
   ---------------------------------------------------- */

/* Outgoing to Left (Next) */
.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-out-to-left {
	z-index: 4;
	opacity: 1;
}

.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-out-to-left .blooopp-main-product-wrapper {
	animation: bloooppProductOutLeft 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-out-to-left .blooopp-floating-element {
	animation: bloooppElementsOutLeft 0.48s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-out-to-left .blooopp-slide-header,
.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-out-to-right .blooopp-slide-header {
	animation: bloooppHeaderOut 0.25s ease forwards !important;
}

/* Incoming from Right (Next) */
.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-in-from-right {
	z-index: 6;
	opacity: 1;
}

.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-in-from-right .blooopp-main-product-wrapper {
	animation: bloooppProductInRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both !important;
}

.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-in-from-right .blooopp-floating-element {
	animation: bloooppElementsInRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both !important;
}

.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-in-from-right .blooopp-slide-header,
.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-in-from-left .blooopp-slide-header {
	animation: bloooppHeaderIn 0.4s ease 0.2s both !important;
}

/* Outgoing to Right (Prev) */
.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-out-to-right {
	z-index: 4;
	opacity: 1;
}

.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-out-to-right .blooopp-main-product-wrapper {
	animation: bloooppProductOutRight 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-out-to-right .blooopp-floating-element {
	animation: bloooppElementsOutRight 0.48s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

/* Incoming from Left (Prev) */
.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-in-from-left {
	z-index: 6;
	opacity: 1;
}

.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-in-from-left .blooopp-main-product-wrapper {
	animation: bloooppProductInLeft 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both !important;
}

.blooopp-slider-animation-2 .blooopp-slide-item.is-animating-in-from-left .blooopp-floating-element {
	animation: bloooppElementsInLeft 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both !important;
}

/* Keyframes for Product & Elements */
@keyframes bloooppProductOutLeft {
	0% {
		transform: translateX(0) scale(1) rotate(0deg);
		opacity: 1;
		filter: blur(0px);
	}

	100% {
		transform: translateX(-120%) scale(0.85) rotate(-16deg);
		opacity: 0;
		filter: blur(4px);
	}
}

@keyframes bloooppProductInRight {
	0% {
		transform: translateX(120%) scale(0.85) rotate(14deg);
		opacity: 0;
		filter: blur(4px);
	}

	100% {
		transform: translateX(0) scale(1) rotate(0deg);
		opacity: 1;
		filter: blur(0px);
	}
}

@keyframes bloooppProductOutRight {
	0% {
		transform: translateX(0) scale(1) rotate(0deg);
		opacity: 1;
		filter: blur(0px);
	}

	100% {
		transform: translateX(120%) scale(0.85) rotate(16deg);
		opacity: 0;
		filter: blur(4px);
	}
}

@keyframes bloooppProductInLeft {
	0% {
		transform: translateX(-120%) scale(0.85) rotate(-16deg);
		opacity: 0;
		filter: blur(4px);
	}

	100% {
		transform: translateX(0) scale(1) rotate(0deg);
		opacity: 1;
		filter: blur(0px);
	}
}

@keyframes bloooppElementsOutLeft {
	0% {
		opacity: 1;
		scale: 1;
		filter: blur(0px);
	}

	100% {
		opacity: 0;
		scale: 0.45;
		filter: blur(4px);
	}
}

@keyframes bloooppElementsInRight {
	0% {
		opacity: 0;
		scale: 0.45;
		filter: blur(4px);
	}

	100% {
		opacity: 1;
		scale: 1;
		filter: blur(0px);
	}
}

@keyframes bloooppElementsOutRight {
	0% {
		opacity: 1;
		scale: 1;
		filter: blur(0px);
	}

	100% {
		opacity: 0;
		scale: 0.45;
		filter: blur(4px);
	}
}

@keyframes bloooppElementsInLeft {
	0% {
		opacity: 0;
		scale: 0.45;
		filter: blur(4px);
	}

	100% {
		opacity: 1;
		scale: 1;
		filter: blur(0px);
	}
}

@keyframes bloooppHeaderOut {
	0% {
		opacity: 1;
		transform: translateY(0);
	}

	100% {
		opacity: 0;
		transform: translateY(-10px);
	}
}

@keyframes bloooppHeaderIn {
	0% {
		opacity: 0;
		transform: translateY(10px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}