/*
 * Break out of the theme's content column so the slider spans the full window width.
 * Centering with left/transform (instead of negative margins) survives themes that force
 * margin: auto on content blocks. slider.js sets --sfws-page-width to the viewport width
 * minus the scrollbar, so no horizontal scrollbar appears.
 * The !important flags stop themes from clamping content-column children or
 * injecting inline sizes on attachment images.
 */
.sfws-slider {
	position: relative;
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: var(--sfws-page-width, 100vw) !important;
	max-width: none !important;
	height: var(--sfws-height, 500px);
	margin-left: 0 !important;
	margin-right: 0 !important;
	overflow: hidden;
	background: #000;
}

.sfws-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.sfws-slide.is-active {
	opacity: 1;
	z-index: 1;
}

.sfws-slider .sfws-img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
}

@media (prefers-reduced-motion: reduce) {
	.sfws-slide {
		transition: none;
	}
}