/* Squadra 4 Zampe – Vertical Gallery */

.s4z-vg {
	position: relative;
}

.s4z-vg__viewport {
	width: 100%;
}

/* Floating navigation arrows (positioned outside / over the slider). */
.s4z-vg__arrow {
	position: absolute;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: #4a1616;
	fill: #4a1616;
	font-size: 34px;
	line-height: 1;
	padding: 6px;
	border-radius: 0;
	transition: opacity .15s ease, transform .12s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

.s4z-vg--side-left .s4z-vg__arrow {
	left: var(--s4z-ax, -56px);
}

.s4z-vg--side-right .s4z-vg__arrow {
	right: var(--s4z-ax, -56px);
}

.s4z-vg__arrow--prev {
	top: var(--s4z-ay-prev, 12px);
}

.s4z-vg__arrow--next {
	bottom: var(--s4z-ay-next, 12px);
}

.s4z-vg__arrow:hover {
	opacity: .78;
}

.s4z-vg__arrow:active {
	transform: scale(.9);
}

.s4z-vg__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.s4z-vg__arrow svg {
	width: 1em;
	height: 1em;
	display: block;
}

.s4z-vg__arrow i {
	font-size: 1em;
	line-height: 1;
	display: block;
}

/* Hide arrows when there is nothing to scroll (handled by JS). */
.s4z-vg--no-arrows .s4z-vg__arrow {
	display: none;
}

/* Scoped Swiper structural styles (work with Elementor's bundled Swiper or the CDN fallback). */
.s4z-vg .swiper {
	position: relative;
	width: 100%;
	overflow: hidden;
	list-style: none;
	padding: 0;
	z-index: 1;
}

.s4z-vg .swiper-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	z-index: 1;
	box-sizing: content-box;
	transition-property: transform;
	transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
}

.s4z-vg .swiper-slide {
	position: relative;
	flex-shrink: 0;
	width: 100%;
	display: block;
}

.s4z-vg .swiper-slide > a.s4z-vg__link {
	display: block;
	width: 100%;
	cursor: pointer;
}

/*
 * The square (or chosen ratio) is enforced here with aspect-ratio + object-fit,
 * so vertical/horizontal source images are CROPPED to the ratio, never stretched.
 */
.s4z-vg__media {
	display: block;
	width: 100%;
	aspect-ratio: var(--s4z-ratio, 1 / 1);
	overflow: hidden;
	border-radius: 16px;
	line-height: 0;
}

.s4z-vg__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.s4z-vg-empty {
	padding: 24px;
	border: 1px dashed #c3c3c3;
	border-radius: 12px;
	text-align: center;
	color: #777;
	font-size: 14px;
}