.siw-outer {
	display: flex;
	justify-content: var(--siw-align, center);
	width: 100%;
}

.siw-wrapper {
	max-width: 620px;
	width: 100%;
	margin: var(--siw-spacing-y, 24px) 0;
	padding: 36px 30px 0 30px;
	box-sizing: border-box;
}

/* .siw-stage is sized exactly to the front card. Arrows anchor to this
   element and sit INSET (not poking outside the widget box), so they can
   never bleed into neighboring content regardless of column width. */
.siw-stage {
	position: relative;
	width: 100%;
	aspect-ratio: var(--siw-ratio, 16 / 10);
}

.siw-stack {
	position: relative;
	width: 100%;
	height: 100%;
}

.siw-slide {
	position: absolute;
	inset: 0;
	border-radius: 22px;
	overflow: hidden;
	border: 3px solid #111;
	background: #eee;
	opacity: 0;
	pointer-events: none;
	transition: transform 0.55s ease, opacity 0.55s ease;
}

/* Foreground image: always visible, shows the photo itself. */
.siw-slide .siw-fg {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--siw-obj-pos, center);
	display: block;
}

/* Blurred backdrop: hidden by default (Cover mode doesn't need it since
   the foreground image already fills the whole box). */
.siw-slide .siw-bg {
	display: none;
}

/* Contain mode: show the FULL image regardless of its orientation
   (landscape, portrait, square) with no cropping, and fill any empty
   space with a softly blurred version of the same photo instead of a
   flat color, so there's no harsh letterboxing. */
.siw-wrapper.siw-fit-contain .siw-slide .siw-fg {
	object-fit: contain;
	background: transparent;
}

.siw-wrapper.siw-fit-contain .siw-slide .siw-bg {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 0;
	object-fit: cover;
	filter: blur(22px) brightness(0.85);
	transform: scale(1.15); /* avoids visible soft edges from the blur */
}

.siw-slide.is-active {
	opacity: 1;
	pointer-events: auto;
	transform: translate(0, 0) scale(1) rotate(0deg);
	z-index: 30;
}

.siw-slide.is-next {
	opacity: 1;
	transform: translate(var(--siw-peek-x, 14px), calc(var(--siw-peek-y, 14px) * -1)) scale(0.97) rotate(1deg);
	z-index: 20;
}

.siw-slide.is-next2 {
	opacity: 1;
	transform: translate(calc(var(--siw-peek-x, 14px) * 1.85), calc(var(--siw-peek-y, 14px) * -1.85)) scale(0.94) rotate(2deg);
	z-index: 10;
}

.siw-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--siw-arrow-size, 40px);
	height: var(--siw-arrow-size, 40px);
	border-radius: 50%;
	border: none;
	background: var(--siw-arrow-bg, rgba(255, 255, 255, 0.85));
	color: var(--siw-arrow-color, #111111);
	font-size: calc(var(--siw-arrow-size, 40px) * 0.4);
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 40;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.siw-arrow:hover {
	transform: translateY(-50%) scale(1.08);
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.3);
}

.siw-prev {
	left: 10px;
}

.siw-next {
	right: 10px;
}

.siw-dots {
	margin-top: 22px;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.siw-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #ccc;
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s ease, transform 0.2s ease;
}

.siw-dot.is-active {
	background: var(--siw-accent, #f5820e);
	transform: scale(1.15);
}