/* =========================================================
   BLUMI PDP PRODUCT INTRO
   ========================================================= */

.elementor-widget-blumi-pdp-product-intro {

	width: 100%;

}


/* =========================================================
   SECTION
   ========================================================= */

.blumi-pdp-product-intro {

	position: relative;

	display: grid;

	grid-template-columns:
		50% 50%;

	width: 100%;

	height: 100vh;
	height: 100svh;

	min-height: 700px;

	overflow: hidden;

	background:
		#ECEFFA;

	scroll-snap-align:
		start;

	scroll-snap-stop:
		always;

}


/* =========================================================
   MEDIA
   ========================================================= */

.blumi-pdp-product-intro__media {

	position: relative;

	width: 100%;
	height: 100%;

	overflow: hidden;

	background:
		#401F0F;

}


.blumi-pdp-product-intro__track {

	position: absolute;

	inset: 0;

	width: 100%;
	height: 100%;

	overflow: hidden;

}


.blumi-pdp-product-intro__slide {

	position: absolute;

	inset: 0;

	z-index: 0;

	width: 100%;
	height: 100%;

	visibility: hidden;

	transform:
		translate3d(
			0,
			100%,
			0
		);

	will-change:
		transform;

}


.blumi-pdp-product-intro__slide.is-active {

	z-index: 1;

	visibility: visible;

	transform:
		translate3d(
			0,
			0,
			0
		);

}


.blumi-pdp-product-intro__slide picture,
.blumi-pdp-product-intro__slide img {

	display: block;

	width: 100%;
	height: 100%;

}


.blumi-pdp-product-intro__slide img {

	max-width: none;

	object-fit: cover;

	object-position:
		var(
			--blumi-pdp-image-position,
			center center
		);

}


/* =========================================================
   SLIDER NAVIGATION
   ========================================================= */

.blumi-pdp-product-intro__navigation {

	position: absolute;

	z-index: 10;

	right: 42px;
	bottom: 54px;

	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 12px;

}


.blumi-pdp-product-intro__arrow {

	display: flex;

	align-items: center;
	justify-content: center;

	width: 50px;
	height: 50px;

	margin: 0;
	padding: 0;

	border: 0;

	border-radius: 50%;

	background:
		transparent !important;

	color: #FFFFFF;

	cursor: pointer;

	transition:
		transform .25s ease,
		opacity .25s ease;

}


.blumi-pdp-product-intro__arrow:hover {

	transform:
		scale(1.06);

}


.blumi-pdp-product-intro__arrow:focus-visible {

	outline:
		2px solid currentColor;

	outline-offset: 4px;

}


.blumi-pdp-product-intro__arrow span {

	display: block;

	width: 100%;
	height: 100%;

	background:
		currentColor;

	-webkit-mask-image:
		var(--blumi-icon);

	mask-image:
		var(--blumi-icon);

	-webkit-mask-repeat:
		no-repeat;

	mask-repeat:
		no-repeat;

	-webkit-mask-position:
		center;

	mask-position:
		center;

	-webkit-mask-size:
		contain;

	mask-size:
		contain;


	/*
	 * Frecce sx/dx diventano
	 * frecce verticali desktop.
	 */
	transform:
		rotate(90deg);

}


/* =========================================================
   COPY
   ========================================================= */

.blumi-pdp-product-intro__copy {

	display: flex;

	flex-direction: column;

	justify-content: center;

	min-width: 0;

	height: 100%;

	padding:
		clamp(130px, 11vh, 150px) 
		clamp(60px, 6vw, 110px) 
		clamp(55px, 7vh, 90px);

}


/* =========================================================
   TITLE
   ========================================================= */

.blumi-pdp-product-intro__title {

	margin:
		0 0 36px;

	padding: 0;

	color:
		#A5ADD8;

	font-family:
		var(
			--blumi-font-primary,
			"bc-novatica-cyr",
			sans-serif
		);

	font-size: 80px;

	font-weight: 700;

	line-height: .95;

	letter-spacing: 0;

}


/* =========================================================
   BODY
   ========================================================= */

.blumi-pdp-product-intro__copy-body {

	width: 100%;

	max-width: 650px;

}


/* =========================================================
   PRODUCT TEXT
   ========================================================= */

.blumi-pdp-product-intro__text {

	position: relative;

	margin: 0;

	color: #401F0F;

	font-size: 18px;

	font-weight: 400;

	line-height: 1.18;

}


/* ---------------------------------------------------------
   Content
   --------------------------------------------------------- */

.blumi-pdp-product-intro__text-content {

	position: relative;

	overflow: visible;

}


.blumi-pdp-product-intro__text-content
> :first-child {

	margin-top: 0;

}


.blumi-pdp-product-intro__text-content
> :last-child {

	margin-bottom: 0;

}


.blumi-pdp-product-intro__text-content p {

	margin:
		0 0 20px;

}

.blumi-pdp-product-intro__text p {
	line-height: 22px;
}


/* =========================================================
   READ MORE
   ========================================================= */

.blumi-pdp-product-intro__read-more {

	display: none;

	align-items: center;

	gap: 8px;

	margin: 12px 0 0;

	padding: 0;

	border: 0;

	background: transparent !important;

	color:
		var(
			--blumi-lavender,
			#A5ADD8
		);

	font-family:
		var(
			--blumi-font-primary,
			"bc-novatica-cyr",
			sans-serif
		);

	font-size: 14px;

	font-weight: 700;

	line-height: 1;

	text-transform: uppercase;

	text-decoration: none;

	cursor: pointer;

}


/* =========================================================
   READ MORE / COMPACT
   ========================================================= */

/*
 * Di base non viene mostrato.
 */
.blumi-pdp-product-intro__read-more {

	display: none;

	align-items: center;

	gap: 8px;

	margin: 12px 0 0;

	padding: 0;

	border: 0;

	background: transparent !important;

	color: #A5ADD8!important;

	font-family:
		var(
			--blumi-font-primary,
			"bc-novatica-cyr",
			sans-serif
		);

	font-size: 14px;

	font-weight: 700;

	line-height: 1;

	text-transform: uppercase;

	text-decoration: none;

	cursor: pointer;

	position: relative;

	z-index: 3;

}


/* ---------------------------------------------------------
   Compact attivato dal JS
   --------------------------------------------------------- */

.blumi-pdp-product-intro.is-height-compact
.blumi-pdp-product-intro__read-more {

	display: inline-flex;

}


.blumi-pdp-product-intro.is-height-compact:not(.is-text-expanded)
.blumi-pdp-product-intro__text-content {

	max-height:
		var(
			--blumi-pdp-text-compact-height,
			110px
		);

	overflow: hidden;

}


/* ---------------------------------------------------------
   Fade
   --------------------------------------------------------- */

.blumi-pdp-product-intro.is-height-compact:not(.is-text-expanded)
.blumi-pdp-product-intro__text-content::after {

	content: "";

	position: absolute;

	z-index: 2;

	right: 0;
	bottom: 0;
	left: 0;

	height: 32px;

	pointer-events: none;

	background:
		linear-gradient(
			to bottom,
			rgba(236, 239, 250, 0),
			#ECEFFA 92%
		);

}


/* ---------------------------------------------------------
   Expanded
   --------------------------------------------------------- */

.blumi-pdp-product-intro.is-text-expanded
.blumi-pdp-product-intro__text-content {

	max-height: none !important;

	overflow: visible !important;

}


.blumi-pdp-product-intro.is-text-expanded
.blumi-pdp-product-intro__text-content::after {

	display: none;

}


.blumi-pdp-product-intro.is-text-expanded
.blumi-pdp-product-intro__read-more-icon {

	transform: rotate(45deg);

}

/* =========================================================
   DESKTOP - VIEWPORT BASSA
   Leggi tutto anticipato <= 1100px
   ========================================================= */

@media
	(min-width: 991px)
	and
	(max-height: 1100px) {

	/*
	 * Sotto 1100px il bottone deve esserci
	 * indipendentemente dal calcolo JS.
	 */
	.blumi-pdp-product-intro__read-more {

		display: inline-flex;

	}


	/*
	 * Se l'utente non ha aperto il testo,
	 * lo limitiamo.
	 */
	.blumi-pdp-product-intro:not(.is-text-expanded)
	.blumi-pdp-product-intro__text-content {

		max-height:
			var(
				--blumi-pdp-text-compact-height,
				176px
			);

		overflow: hidden;

	}


	.blumi-pdp-product-intro:not(.is-text-expanded)
	.blumi-pdp-product-intro__text-content::after {

		content: "";

		position: absolute;

		z-index: 2;

		right: 0;
		bottom: 0;
		left: 0;

		height: 32px;

		pointer-events: none;

		background:
			linear-gradient(
				to bottom,
				rgba(236, 239, 250, 0),
				#ECEFFA 92%
			);

	}

}


/* ---------------------------------------------------------
   Progressivamente più compatto
   --------------------------------------------------------- */

@media
	(min-width: 991px)
	and
	(max-height: 900px) {

	.blumi-pdp-product-intro {

		--blumi-pdp-text-compact-height: 96px;

	}

}


@media
	(min-width: 991px)
	and
	(max-height: 850px) {

	.blumi-pdp-product-intro {

		--blumi-pdp-text-compact-height: 84px;

	}

}


@media
	(min-width: 991px)
	and
	(max-height: 800px) {

	.blumi-pdp-product-intro {

		--blumi-pdp-text-compact-height: 74px;

	}

}


/* =========================================================
   FREE HEIGHT
   La viewport è troppo bassa per lo snap.
   ========================================================= */

@media (min-width: 991px) {

	.blumi-pdp-product-intro.is-height-free {

		height: auto;

		min-height: 100svh;

		overflow: visible;

		scroll-snap-align: none;
		scroll-snap-stop: normal;

	}


	/*
	 * Quando la sezione può crescere,
	 * entrambe le colonne crescono insieme.
	 */

	.blumi-pdp-product-intro.is-height-free
	.blumi-pdp-product-intro__media {

		min-height:
			100svh;

		height: auto;

	}


	.blumi-pdp-product-intro.is-height-free
	.blumi-pdp-product-intro__copy {

		justify-content:
			flex-start;

		height: auto;

		min-height:
			100svh;

		padding-top:
			calc(
				var(
					--blumi-header-height,
					120px
				)
				+
				50px
			);

		padding-bottom:
			70px;

	}

}


/* =========================================================
   DOWNLOAD
   ========================================================= */

.blumi-pdp-product-intro__download {

	margin-top: 44px;

}


/*
 * Lo SVG di download può essere uno specifico
 * SVG verticale. Se usiamo arrow-button.svg
 * lo ruotiamo.
 */

.blumi-pdp-product-intro__download-icon {


}


.blumi-pdp-product-intro__copy .blumi-button__icon {
	width: 23px;

}

.blumi-pdp-product-intro__copy .blumi-button {
	padding: 16px 20px 16px 28px;
}

/* =========================================================
   INSTALLATIONS
   ========================================================= */

.blumi-pdp-product-intro__installations {

	margin-top: 52px;

}


.blumi-pdp-product-intro__installations-title {

	margin:
		0 0 24px;

	color:
		#A5ADD8;

	font-size: 18px;

	font-weight: 700;

	line-height: 1;

	text-transform:
		uppercase;

}


.blumi-pdp-product-intro__installations-text {

	max-width: 650px;

	margin:
		0 0 28px;

	color:
		#401F0F;

	font-size: 18px;

	font-weight: 400;

line-height: 22px;

}


/* ---------------------------------------------------------
   Grid
   --------------------------------------------------------- */

.blumi-pdp-product-intro__installation-grid {

	display: flex;

	flex-wrap: wrap;

	align-items: flex-start;

	gap:
		20px 26px;

}


/*
 * Dimensione richiesta:
 * 135 x 150
 */

.blumi-pdp-product-intro__installation {

	display: flex;

	flex-direction: column;

	align-items: flex-start;

	justify-content: flex-start;

	flex:
		0 0 135px;

	width: 135px;

	min-height: 150px;

}


.blumi-pdp-product-intro__installation-icon {

	display: flex;

	align-items: flex-start;
	justify-content: flex-start;

	width: 90px;
	  height: 80px;

	margin-bottom: 10px;

}


.blumi-pdp-product-intro__installation-icon img {

	display: block;

	width: 100%;
	height: 100%;

	max-width: none;

	object-fit: contain;

	object-position:
		left top;

}


.blumi-pdp-product-intro__installation-label {

	color:
		#401F0F;

	font-size: 18px;

	font-weight: 700;

	line-height: 1.05;

}


/* =========================================================
   SMALL DESKTOP HEIGHT
   ========================================================= */

@media
	(min-width: 768px)
	and
	(max-height: 820px) {

	.blumi-pdp-product-intro__copy {

		padding-top: 90px;
		padding-bottom: 40px;

	}


	.blumi-pdp-product-intro__title {

		margin-bottom: 25px;

	}


	.blumi-pdp-product-intro__download {

		margin-top: 28px;

	}


	.blumi-pdp-product-intro__installations {

		margin-top: 34px;

	}


	.blumi-pdp-product-intro__installation {

		min-height: 135px;

	}

}

/* =========================================================
   TABLET / STACKED PDP
   <= 990px
   ========================================================= */

@media (max-width: 990px) {

	/* =====================================================
	   SECTION
	   ===================================================== */

	.blumi-pdp-product-intro {

		display: flex;

		flex-direction: column;

		width: 100%;

		height: auto;

		min-height: 0;

		overflow: visible;

		scroll-snap-align: none;
		scroll-snap-stop: normal;

	}


	/* =====================================================
	   SLIDER SOPRA
	   ===================================================== */

	.blumi-pdp-product-intro__media {

		position: relative;

		width: 100%;

		height: clamp(
			520px,
			68svh,
			720px
		);

		flex: none;

	}


	/*
	 * Le slide diventano orizzontali.
	 * Il JS usa già translateX grazie al breakpoint 990.
	 */

	.blumi-pdp-product-intro__slide {

		width: 100%;
		height: 100%;

	}


	/* =====================================================
	   COPY SOTTO
	   ===================================================== */

	.blumi-pdp-product-intro__copy {

		display: block;

		width: 100%;

		height: auto;

		min-height: 0;

		padding:50px clamp(30px, 7vw, 30px) 40px;
		padding-left: 10px;
		padding-right: 10px;

	}


	.blumi-pdp-product-intro__copy-inner {

		width: 100%;

		max-width: none;

		margin: 0;

	}


	/* =====================================================
	   NIENTE COMPACT / READ MORE FORZATO
	   ===================================================== */

	.blumi-pdp-product-intro__read-more {

		display: none;

	}


	.blumi-pdp-product-intro__text-content {

		max-height: none !important;

		overflow: visible !important;

	}


	.blumi-pdp-product-intro__text-content::after {

		display: none !important;

	}


	/* =====================================================
	   NAV SLIDER ORIZZONTALE
	   ===================================================== */

	.blumi-pdp-product-intro__navigation {

		flex-direction: row;

	}


	.blumi-pdp-product-intro__arrow span {

		transform: none;

	}

}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {


	/*
	 * Sul mobile:
	 *
	 * titolo
	 * slider
	 * copy
	 */

	.blumi-pdp-product-intro {

		display: grid;

		grid-template-columns:
			1fr;

		grid-template-areas:
			"title"
			"media"
			"body";

		width: 100%;

		height: auto;

		min-height: 0;

		overflow: visible;

		scroll-snap-align: none;
		scroll-snap-stop: normal;

	}


	/*
	 * Display contents permette di
	 * separare titolo e corpo nel grid.
	 */

	.blumi-pdp-product-intro__copy {

		display: contents;

	}


	/* -----------------------------------------------------
	   TITLE
	   ----------------------------------------------------- */

	.blumi-pdp-product-intro__title {

		grid-area: title;

		width: 100%;

		margin: 0;

		padding:100px 10px 25px;

		font-size: 56px;

		line-height: .94;

		background:
			#ECEFFA;

	}


	/* -----------------------------------------------------
	   SLIDER
	   ----------------------------------------------------- */

	.blumi-pdp-product-intro__media {

		grid-area: media;

		width: 100%;

		height: 62svh;

		min-height: 420px;

		max-height: 650px;

		touch-action:
			pan-y;

	}


	/*
	 * Mobile = slider orizzontale.
	 */

	.blumi-pdp-product-intro__slide {

		transform:
			translate3d(
				100%,
				0,
				0
			);

	}


	.blumi-pdp-product-intro__slide.is-active {

		transform:
			translate3d(
				0,
				0,
				0
			);

	}


	.blumi-pdp-product-intro__slide img {

		object-position:
			var(
				--blumi-pdp-image-position-mobile,
				var(
					--blumi-pdp-image-position,
					center center
				)
			);

	}


	/* -----------------------------------------------------
	   MOBILE ARROWS
	   ----------------------------------------------------- */

	.blumi-pdp-product-intro__navigation {

		right: 22px;
		bottom: 22px;

		flex-direction: row;

		gap: 10px;

	}


	.blumi-pdp-product-intro__arrow {

		width: 46px;
		height: 46px;

	}


	/*
	 * Torna alla normale freccia
	 * sx / dx.
	 */

	.blumi-pdp-product-intro__arrow span {

		transform: none;

	}


	/* -----------------------------------------------------
	   BODY
	   ----------------------------------------------------- */

	.blumi-pdp-product-intro__copy-body {

		grid-area: body;

		width: 100%;

		max-width: none;

		padding:25px 10px 25px;
border-bottom: 2px solid #A5ADD8;
		background:
			#ECEFFA;

	}


	.blumi-pdp-product-intro__text,
	.blumi-pdp-product-intro__installations-text {

		font-size: 18px;

		line-height: 1.2;

	}


	.blumi-pdp-product-intro__download {

		margin-top: 36px;

	}


	/* -----------------------------------------------------
	   INSTALLATIONS
	   ----------------------------------------------------- */

	.blumi-pdp-product-intro__installations {

		margin-top: 48px;

	}


	.blumi-pdp-product-intro__installations-title {

		font-size: 18px;

		margin-bottom: 22px;

	}


	.blumi-pdp-product-intro__installations-text {

		margin-bottom: 30px;

	}


	/*
	 * 3 colonne come wireframe.
	 */

	.blumi-pdp-product-intro__installation-grid {

		display: grid;

		grid-template-columns:
			repeat(
				3,
				minmax(0, 1fr)
			);

		gap:
			24px 12px;

		width: 100%;

	}


	.blumi-pdp-product-intro__installation {

		width: 100%;

		min-width: 0;

		min-height: 135px;

	}


	.blumi-pdp-product-intro__installation-icon {

		width: 100%;

		max-width: 105px;

		height: 88px;

	}


	.blumi-pdp-product-intro__installation-label {

		font-size: 15px;

	}

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

	.blumi-pdp-product-intro__installation-grid {

		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);

	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.blumi-pdp-product-intro__slide,
	.blumi-pdp-product-intro__arrow {

		transition: none !important;

	}

}
/* Più spazio prima del limite: coerente con il calcolo JS. */
@media (min-width: 991px) and (max-height: 1000px) {
  .blumi-pdp-product-intro { --blumi-pdp-text-compact-height: 132px; }
}
@media (min-width: 991px) and (max-height: 950px) {
  .blumi-pdp-product-intro { --blumi-pdp-text-compact-height: 110px; }
}
@media (min-width: 991px) and (max-height: 900px) {
  .blumi-pdp-product-intro { --blumi-pdp-text-compact-height: 96px; }
}
@media (min-width: 991px) and (max-height: 850px) {
  .blumi-pdp-product-intro { --blumi-pdp-text-compact-height: 84px; }
}
@media (min-width: 991px) and (max-height: 800px) {
  .blumi-pdp-product-intro { --blumi-pdp-text-compact-height: 74px; }
}

@media (max-width: 600px) {
  .blumi-pdp-product-intro__installation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .blumi-pdp-product-intro__installation-label { font-size: 16px; line-height: 1.2; }
}