/*
 * Sandwich Scroll widget.
 *
 * The widget fills the Elementor container it sits in (column or row) and keeps every
 * layer inside its own box, so it never overflows into neighbouring columns.
 * Sizing that depends on the container is refined by sandwich-scroll.js; the values
 * below are a no-JavaScript fallback that already fits the open state.
 */

.elementor-widget-booffood-sandwich-scroll {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	align-self: stretch;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	z-index: 1;
}

.elementor-widget-booffood-sandwich-scroll > .elementor-widget-container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.bfm-sandwich-scroll {
	--bfm-min-height: 480px;
	--bfm-sandwich-width: 92;
	--bfm-assemble-distance: 40;
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	min-height: var(--bfm-min-height);
	overflow: hidden;
	overflow: clip;
	contain: layout paint;
	isolation: isolate;
}

.bfm-sandwich-scroll *,
.bfm-sandwich-scroll *::before,
.bfm-sandwich-scroll *::after {
	box-sizing: border-box;
}

.bfm-sandwich {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--bfm-js-width, min(calc(var(--bfm-sandwich-width) * 1%), 62vh, 44rem));
	aspect-ratio: 2 / 1;
	margin: 0;
	perspective: 1200px;
	pointer-events: none;
	transform: translate(-50%, -50%);
}

.bfm-sandwich__stage {
	position: absolute;
	inset: 0;
	transform: scale(var(--bfm-stage-scale, 0.9));
	transform-origin: center;
	will-change: transform;
}

/* Open state used before JavaScript runs (and when it is unavailable). */
.bfm-sandwich-scroll[data-direction="assemble"] .bfm-ingredient[data-layer="top"] {
	--bfm-y: -42%;
}

.bfm-sandwich-scroll[data-direction="assemble"] .bfm-ingredient[data-layer="lettuce"] {
	--bfm-y: -21%;
}

.bfm-sandwich-scroll[data-direction="assemble"] .bfm-ingredient[data-layer="meat"] {
	--bfm-y: -4%;
}

.bfm-sandwich-scroll[data-direction="assemble"] .bfm-ingredient[data-layer="tomato"] {
	--bfm-y: 13%;
}

.bfm-sandwich-scroll[data-direction="assemble"] .bfm-ingredient[data-layer="sauce"] {
	--bfm-y: 27%;
}

.bfm-sandwich-scroll[data-direction="assemble"] .bfm-ingredient[data-layer="bottom"] {
	--bfm-y: 42%;
}

.bfm-ingredient {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	backface-visibility: hidden;
	filter: drop-shadow(0 10px 9px rgba(49, 30, 12, 0.12));
	transform: translate3d(-50%, calc(-50% + var(--bfm-y, 0px)), var(--bfm-z, 0px)) rotateX(var(--bfm-rx, 0deg)) rotateZ(var(--bfm-rz, 0deg)) scale(var(--bfm-scale, 1));
	transform-origin: center;
	user-select: none;
	will-change: transform;
}

/* Lazy reveal: layers fade in once loaded (the classes are added by JavaScript only). */
.bfm-sandwich-scroll.is-lazy .bfm-ingredient {
	transition: opacity 0.5s ease;
}

.bfm-sandwich-scroll.is-lazy .bfm-ingredient:not(.is-loaded) {
	opacity: 0;
}

.bfm-sandwich-scroll.is-lazy .bfm-ingredient[data-layer="bottom"] { transition-delay: 0ms; }
.bfm-sandwich-scroll.is-lazy .bfm-ingredient[data-layer="sauce"] { transition-delay: 60ms; }
.bfm-sandwich-scroll.is-lazy .bfm-ingredient[data-layer="tomato"] { transition-delay: 120ms; }
.bfm-sandwich-scroll.is-lazy .bfm-ingredient[data-layer="meat"] { transition-delay: 180ms; }
.bfm-sandwich-scroll.is-lazy .bfm-ingredient[data-layer="lettuce"] { transition-delay: 240ms; }
.bfm-sandwich-scroll.is-lazy .bfm-ingredient[data-layer="top"] { transition-delay: 300ms; }

.bfm-sandwich-scroll.is-lazy:not(.is-ready) .bfm-sandwich__shadow {
	opacity: 0;
}

.bfm-ingredient[data-layer="top"] {
	z-index: 6;
}

.bfm-ingredient[data-layer="lettuce"] {
	z-index: 5;
}

.bfm-ingredient[data-layer="meat"] {
	z-index: 4;
}

.bfm-ingredient[data-layer="tomato"] {
	z-index: 3;
}

.bfm-ingredient[data-layer="sauce"] {
	z-index: 2;
}

.bfm-ingredient[data-layer="bottom"] {
	z-index: 1;
}

.bfm-sandwich__shadow {
	position: absolute;
	right: 17%;
	bottom: -4%;
	left: 17%;
	height: 8%;
	border-radius: 50%;
	background: rgba(46, 31, 15, 0.28);
	filter: blur(clamp(10px, 2vw, 22px));
	opacity: var(--bfm-shadow-opacity, 0.4);
	transform: scaleX(var(--bfm-shadow-scale, 0.8));
	will-change: transform, opacity;
}

@media (max-width: 767px) {
	.bfm-sandwich {
		width: var(--bfm-js-width, min(calc(var(--bfm-sandwich-width) * 1%), 44vh, 30rem));
	}

	.bfm-ingredient {
		filter: drop-shadow(0 7px 7px rgba(49, 30, 12, 0.1));
	}
}

@media (prefers-reduced-motion: reduce) {
	.bfm-sandwich-scroll.is-lazy .bfm-ingredient {
		transition: none;
	}
}