/* ============================================================
   Icone prodotto: badge icona + etichetta per ogni valore
   selezionato nel campo ACF Checkbox "icone_testo"
   ============================================================ */

.clr-icone-prodotto {
	display: flex;
	flex-wrap: nowrap;
	gap: 24px;
	justify-content: center;
	margin: 24px 0;
	overflow-x: auto;
	overflow-y: hidden;
}

.clr-icona-singola {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	width: 200px;      /* era 150px fisso: la colonna si adatta alla lunghezza dell'etichetta */
	min-width: 70px;  /* almeno quanto l'icona */
	text-align: center;
}

.clr-icona-singola img {
	width: 70px;
	height: 70px;
	object-fit: contain;
	margin-bottom: 8px;
}

.clr-icona-singola span {
	font-family: "Outfit", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 100%;
	letter-spacing: 0.05em;
	color: rgba(7, 7, 7, 1);
	/*white-space: nowrap;   !* etichetta sempre su una sola riga *!*/
	text-transform: uppercase;
}

/* Loghi tecnologie: SVG orizzontali, non quadrati come le altre icone.
   Selettore sulla classe diretta (non piu' legato al div genitore
   .clr-icone-tecnologia) cosi' funziona anche dentro la riga unica
   combinata [icone_riga_unica] */
.clr-icona-singola.clr-icona-tecnologia {
	width: auto;
	height: 90px;      /* era 58px: alzata per non tagliare i loghi piu' alti (es. MicroChem) */
	padding-top: 30px;
}

.clr-icona-singola.clr-icona-tecnologia img {
	width: auto;
	height: 88px;      /* era 56px, in linea con l'altezza del box sopra */
	max-width: 290px;
	width: 250px !important;
	margin-bottom: 0;
}

/* [icone_riga_unica]: impila la riga icone prodotto sopra la riga
   icone tecnologia, invece di affiancarle sulla stessa linea */
.clr-icone-riga-unica {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 24px 0;
}

.clr-icone-riga-unica .clr-icone-prodotto {
	margin: 0; /* lo spazio verticale tra le righe lo gestisce il gap sopra */
}


.clr-icone-prodotto.clr-icone-tecnologia {
	margin-top: 80px;
}

/* Su mobile la riga di icone di [icone_riga_unica] va in scroll orizzontale
   (flex-wrap: nowrap) ed e' poco leggibile: sotto i 767px (breakpoint
   mobile standard di Elementor) le icone di ogni riga si impilano una
   sotto l'altra invece che affiancate. */
@media ( max-width: 767px ) {
	.clr-icone-riga-unica .clr-icone-prodotto {
		flex-direction: column;
		flex-wrap: nowrap;
		overflow-x: visible;
		gap: 24px;
	}

	.clr-icone-riga-unica .clr-icona-singola {
		width: 100%;
	}

	.clr-icone-prodotto.clr-icone-tecnologia {
		margin-top: 0px;
	}
}


/* Icona formulazione: singola icona inline, es. dentro un badge/pill */
.clr-icona-formulazione {
	display: inline-block;
	width: 24px;
	height: 24px;
	object-fit: contain;
	vertical-align: middle;
}