.nut-carousel .nut-carousel__row {
	display: flex;
	align-items: center;
	gap: 60px;
	flex-wrap: wrap;
}

.nut-carousel--text-right .nut-carousel__row {
	flex-direction: row-reverse;
}

.nut-carousel__col--text {
	flex: 1 1 320px;
	min-width: 280px;
}

.nut-carousel__col--stack {
	flex: 1 1 380px;
	min-width: 280px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nut-carousel__title {
	margin: 0 0 16px;
	font-size: 2.5rem;
	line-height: 1.15;
}

.nut-carousel__description {
	margin: 0 0 24px;
}

.nut-carousel__lists {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
}

.nut-carousel__list {
	list-style: none;
	margin: 0;
	padding: 0;
	/* Le voci sono distanziate con gap invece di margin-bottom, così il
	   controllo "Distanza tra le voci" (Stile / Liste) non lascia spazio
	   in coda all'ultima voce. */
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nut-carousel__list-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.nut-carousel__list-dot {
	display: inline-block;
	width: 18px;
	height: 10px;
	border-radius: 6px;
	flex-shrink: 0;
}

/* Mazzo di foglie a rotazione circolare ---------------------------------- */

.nut-carousel__stack {
	position: relative;
	width: 100%;
	height: 360px;
	--nut-stack-offset-x: 0px;
	--nut-stack-offset-y: 0px;
	transform: translate(var(--nut-stack-offset-x), var(--nut-stack-offset-y));
}

.nut-carousel__stage {
	position: relative;
	width: 100%;
	height: 100%;
	--nut-duration: 800ms;
	--nut-easing: ease-out;
}

.nut-carousel__card {
	position: absolute;
	top: 50%;
	right: 0;
	width: 190px;
	height: 251px;
	/* Punto di rotazione = la punta più in basso della foglia (coordinate
	   del clipPath, vedi render_leaf_clip_defs), condiviso da tutte le
	   card così il "ventaglio" ruota attorno allo stesso vertice invece di
	   sovrapporsi. */
	transform-origin: 20% 98%;
	/* Il JS imposta transform/opacity/z-index per posizionare ogni card nel
	   proprio slot del mazzo; la transizione qui li anima in modo fluido. */
	transition: transform var(--nut-duration) var(--nut-easing),
		opacity var(--nut-duration) var(--nut-easing);
	will-change: transform, opacity;
}

.nut-carousel__leaf {
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* Forma a vesica simmetrica (simmetria di rotazione 180° sul centro),
	   punte in alto a destra e in basso a sinistra, come da riferimento
	   grafico fornito. clipPath SVG in objectBoundingBox (vedi
	   render_leaf_clip_defs) per adattarsi a qualunque dimensione. */
	clip-path: url(#nut-carousel-leaf-clip);
	background: #f4f1ea;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
}

.nut-carousel__leaf-image {
	width: 100%;
	height: 100%;
	display: block;
	/* Inquadratura pilotata dal pannello Elementor: le custom property
	   globali sono impostate su .nut-carousel__stage (sezione Stile /
	   Immagine foglia), quelle per singola slide sulla card
	   (.elementor-repeater-item-*) e per cascata la vincono. */
	object-fit: var(--nut-img-fit, cover);
	object-position: var(--nut-img-pos, center center);
	transform-origin: var(--nut-img-pos, center center);
	transform: translate(var(--nut-img-x, 0px), var(--nut-img-y, 0px))
		scale(var(--nut-img-zoom, 1));
}

/* Frecce di navigazione -------------------------------------------- */

.nut-carousel__nav {
	display: flex;
	gap: 12px;
	margin-top: 24px;
}

.nut-carousel__nav--text {
	justify-content: flex-start;
}

.nut-carousel__nav--center {
	justify-content: center;
	width: 100%;
}

.nut-carousel__nav--right {
	justify-content: flex-end;
	width: 100%;
}

.nut-carousel__nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background-color: #a4c639;
	color: #ffffff;
	transition: opacity 0.2s ease, transform 0.2s ease;
	padding: 0;
}

.nut-carousel__nav-btn:hover {
	opacity: 0.85;
}

.nut-carousel__nav-btn:active {
	transform: scale(0.94);
}

.nut-carousel__nav-btn svg {
	width: 18px;
	height: 18px;
	pointer-events: none;
}

@media (max-width: 767px) {
	.nut-carousel__row,
	.nut-carousel--text-right .nut-carousel__row {
		flex-direction: column;
	}

	.nut-carousel__stack {
		height: 260px;
	}

	.nut-carousel__card {
		width: 130px;
		height: 172px;
	}
}