/* Griglia: layout e spaziatura sono impostati via custom property --sgal-columns
   (inline, dalle opzioni admin) e classi sgal-gutter-*. */
.sgal-grid {
	--sgal-gap: 14px;
}

.sgal-layout-grid {
	display: grid;
	grid-template-columns: repeat(var(--sgal-columns, 4), 1fr);
	gap: var(--sgal-gap);
}

.sgal-layout-masonry {
	columns: var(--sgal-columns, 4);
	column-gap: var(--sgal-gap);
}

.sgal-layout-masonry .sgal-item {
	display: block;
	width: 100%;
	margin-bottom: var(--sgal-gap);
	break-inside: avoid;
}

/* "Mostra altro": foto oltre il primo blocco, tolta da frontend-load-more.js
   un blocco alla volta. !important qui non è pigrizia: .sgal-item da sola e
   .sgal-layout-masonry .sgal-item hanno entrambe una regola display esplicita
   della stessa specificità di .sgal-item.sgal-hidden-more — senza vincere
   sempre nel cascade si rischia lo stesso bug già preso con l'attributo
   "hidden" sulle copertine album (v0.13.1: una regola display concorrente
   vinceva silenziosamente). */
.sgal-item.sgal-hidden-more {
	display: none !important;
}

.sgal-load-more-wrap {
	margin-top: 20px;
	text-align: center;
}

.sgal-load-more {
	display: inline-block;
	border: 0;
	border-radius: 6px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: opacity .2s ease;
}

.sgal-load-more:hover {
	opacity: .85;
}

/* Dimensione del pulsante (su richiesta: era troppo grande di default). */
.sgal-load-more-sm { padding: 7px 16px; font-size: 12px; }
.sgal-load-more-md { padding: 9px 20px; font-size: 13px; }
.sgal-load-more-lg { padding: 14px 32px; font-size: 16px; }

/* Il valore --sgal-columns è impostato inline sull'elemento (priorità massima per
   quella proprietà): serve !important qui per farlo scendere sotto le 2-3 colonne
   scelte in admin quando lo schermo è piccolo. */
@media (max-width: 900px) {
	.sgal-grid {
		--sgal-columns: 3 !important;
	}
}

@media (max-width: 600px) {
	.sgal-grid {
		--sgal-columns: 2 !important;
	}
}

.sgal-gutter-sm { --sgal-gap: 6px; }
.sgal-gutter-md { --sgal-gap: 14px; }
.sgal-gutter-lg { --sgal-gap: 26px; }

/* Carosello: scroll orizzontale nativo con scroll-snap (niente libreria),
   swipe touch gratis su mobile. Le frecce prev/next scorrono di un item alla
   volta via JS (frontend-carousel.js), lo scroll nativo resta comunque
   utilizzabile col dito/trackpad. */
.sgal-layout-carousel {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Grid con grid-auto-flow:column invece di flex: con più di 1 riga
   (--sgal-carousel-rows) ogni "colonna" del carosello impila N foto, lo
   scorrimento orizzontale avanza una colonna alla volta. La larghezza di
   colonna (grid-auto-columns) usa la stessa formula che prima era sul
   flex-basis dell'item — a 1 riga il risultato visivo è identico a prima.
   L'item.offsetWidth letto da frontend-carousel.js per calcolare lo scroll
   resta valido: coincide sempre con la larghezza di colonna, righe comprese. */
.sgal-carousel-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--sgal-carousel-visible, 3) - 1) * var(--sgal-gap)) / var(--sgal-carousel-visible, 3));
	grid-template-rows: repeat(var(--sgal-carousel-rows, 1), auto);
	gap: var(--sgal-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	flex: 1 1 auto;
	scrollbar-width: none;
}

.sgal-carousel-track::-webkit-scrollbar {
	display: none;
}

.sgal-layout-carousel .sgal-item {
	scroll-snap-align: start;
	aspect-ratio: 1 / 1;
}

.sgal-carousel-prev,
.sgal-carousel-next {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	border: 0;
	border-radius: 50%;
	width: 64px;
	height: 64px;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

/* Icona freccia (sostituisce il precedente carattere '‹ ›', troppo sottile
   per restare visibile senza sfondo — segnalato dall'utente). width/height
   in "em": la dimensione segue il font-size del bottone, quindi tutto il
   sistema Piccola/Media/Grande più sotto continua a funzionare invariato,
   nessuna nuova variabile da introdurre. stroke:currentColor eredita il
   "color" impostato dalle classi sgal-arrow-color-*/sgal-arrow-shape-square
   sul bottone, stesso meccanismo di prima col testo. */
.sgal-arrow-icon {
	width: 1em;
	height: 1em;
	display: block;
	fill: none !important;
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* fill/stroke con !important: una regola SVG globale del tema (Avada/Fusion
   Builder, molto probabile) vince sia sull'ereditarietà di "color" (già
   corretto sotto con stroke esplicito) sia sul semplice "fill:none" sopra —
   la polyline (percorso aperto: 15,4 → 7,12 → 15,20) viene riempita invece
   di restare vuota, per SVG un fill su un percorso aperto lo chiude
   automaticamente: risultato un TRIANGOLO scuro pieno sovrapposto al box,
   invece del solo contorno sottile. Poco visibile sulle forme piccole
   (Tonda/Quadrata), molto evidente sulla Rettangolare più grande —
   segnalato dall'utente come "proporzioni sbagliate", in realtà questo.
   stroke esplicito per contesto, non solo currentColor: stesso motivo,
   compete direttamente nella cascata invece di dipendere dall'ereditarietà
   (che perde SEMPRE contro qualunque regola che tocchi la stessa proprietà,
   indipendentemente da specificità). */
.sgal-arrow-icon,
.sgal-arrow-icon polyline {
	fill: none !important;
}

.sgal-arrow-color-white .sgal-carousel-prev .sgal-arrow-icon,
.sgal-arrow-color-white .sgal-carousel-next .sgal-arrow-icon,
.sgal-arrow-color-white .sgal-lightbox-prev .sgal-arrow-icon,
.sgal-arrow-color-white .sgal-lightbox-next .sgal-arrow-icon {
	stroke: #fff !important;
}

.sgal-arrow-color-black .sgal-carousel-prev .sgal-arrow-icon,
.sgal-arrow-color-black .sgal-carousel-next .sgal-arrow-icon,
.sgal-arrow-color-black .sgal-lightbox-prev .sgal-arrow-icon,
.sgal-arrow-color-black .sgal-lightbox-next .sgal-arrow-icon {
	stroke: #111 !important;
}

.sgal-carousel-prev:disabled,
.sgal-carousel-next:disabled {
	opacity: .3;
	cursor: default;
}

/* Colore/trasparenza delle frecce (forma Tonda): scelta esplicita
   dell'utente (campi "Colore frecce" e "Trasparenza sfondo"), non più dedotta
   da "Stile lightbox" — quell'euristica si è rivelata inaffidabile in più
   combinazioni segnalate (scuro su scuro, poi chiaro su chiaro). La
   trasparenza arriva come custom property --sgal-arrow-bg-opacity, impostata
   inline dal wrapper (o dal JS del lightbox, che la legge dal wrapper). */
.sgal-arrow-color-white .sgal-carousel-prev,
.sgal-arrow-color-white .sgal-carousel-next,
.sgal-arrow-color-white .sgal-lightbox-prev,
.sgal-arrow-color-white .sgal-lightbox-next {
	background: rgba(0, 0, 0, var(--sgal-arrow-bg-opacity, .3));
	color: #fff;
}

.sgal-arrow-color-white .sgal-carousel-prev:hover,
.sgal-arrow-color-white .sgal-carousel-next:hover,
.sgal-arrow-color-white .sgal-lightbox-prev:hover,
.sgal-arrow-color-white .sgal-lightbox-next:hover {
	background: rgba(0, 0, 0, calc(var(--sgal-arrow-bg-opacity, .3) + .15));
}

.sgal-arrow-color-black .sgal-carousel-prev,
.sgal-arrow-color-black .sgal-carousel-next,
.sgal-arrow-color-black .sgal-lightbox-prev,
.sgal-arrow-color-black .sgal-lightbox-next {
	background: rgba(255, 255, 255, var(--sgal-arrow-bg-opacity, .3));
	color: #111;
}

.sgal-arrow-color-black .sgal-carousel-prev:hover,
.sgal-arrow-color-black .sgal-carousel-next:hover,
.sgal-arrow-color-black .sgal-lightbox-prev:hover,
.sgal-arrow-color-black .sgal-lightbox-next:hover {
	background: rgba(255, 255, 255, calc(var(--sgal-arrow-bg-opacity, .3) + .15));
}

/* Forma quadrata: bordi/dimensione fissi, ma sfondo+colore ora seguono
   "Colore frecce" come la forma Tonda (prima era sempre scura/opaca a
   prescindere — comportamento segnalato dall'utente come un problema,
   non un'intenzione da mantenere). Selettori a doppia classe forma+colore
   (specificità (0,3,0)) invece dell'ordine nel foglio: battono sempre le
   regole sgal-arrow-color-* generiche sopra, a prescindere da dove sono
   dichiarate — stesso pattern già usato per sgal-arrow-size-*. */
.sgal-arrow-shape-square .sgal-carousel-prev,
.sgal-arrow-shape-square .sgal-carousel-next {
	border-radius: 4px;
	width: 44px;
	height: 44px;
	font-size: 20px;
}

.sgal-arrow-shape-square.sgal-arrow-color-white .sgal-carousel-prev,
.sgal-arrow-shape-square.sgal-arrow-color-white .sgal-carousel-next {
	background: rgba(0, 0, 0, .82);
	color: #fff;
}

.sgal-arrow-shape-square.sgal-arrow-color-white .sgal-carousel-prev:hover,
.sgal-arrow-shape-square.sgal-arrow-color-white .sgal-carousel-next:hover {
	background: rgba(0, 0, 0, .95);
}

.sgal-arrow-shape-square.sgal-arrow-color-black .sgal-carousel-prev,
.sgal-arrow-shape-square.sgal-arrow-color-black .sgal-carousel-next {
	background: rgba(255, 255, 255, .82);
	color: #111;
}

.sgal-arrow-shape-square.sgal-arrow-color-black .sgal-carousel-prev:hover,
.sgal-arrow-shape-square.sgal-arrow-color-black .sgal-carousel-next:hover {
	background: rgba(255, 255, 255, .95);
}

/* Forma rettangolare (verticale): stessa logica di sfondo/colore della
   Quadrata, ma un box più alto che largo (~2:1, richiesta esplicita
   dell'utente con screenshot di riferimento — prima versione orizzontale,
   corretta dopo il test dal vivo) invece che 1:1. font-size allineato alla
   Tonda (28px, non ai 20px della Quadrata): l'utente la voleva con "una
   freccia fine ma grande" — icona ampia dentro il box, non un box grande
   con icona piccola. */
.sgal-arrow-shape-rect .sgal-carousel-prev,
.sgal-arrow-shape-rect .sgal-carousel-next {
	border-radius: 8px;
	width: 44px;
	height: 88px;
	font-size: 28px;
}

.sgal-arrow-shape-rect.sgal-arrow-color-white .sgal-carousel-prev,
.sgal-arrow-shape-rect.sgal-arrow-color-white .sgal-carousel-next {
	background: rgba(0, 0, 0, .82);
	color: #fff;
}

.sgal-arrow-shape-rect.sgal-arrow-color-white .sgal-carousel-prev:hover,
.sgal-arrow-shape-rect.sgal-arrow-color-white .sgal-carousel-next:hover {
	background: rgba(0, 0, 0, .95);
}

.sgal-arrow-shape-rect.sgal-arrow-color-black .sgal-carousel-prev,
.sgal-arrow-shape-rect.sgal-arrow-color-black .sgal-carousel-next {
	background: rgba(255, 255, 255, .82);
	color: #111;
}

.sgal-arrow-shape-rect.sgal-arrow-color-black .sgal-carousel-prev:hover,
.sgal-arrow-shape-rect.sgal-arrow-color-black .sgal-carousel-next:hover {
	background: rgba(255, 255, 255, .95);
}

/* Dimensione frecce ("Piccola/Media/Grande", metabox "Frecce"): Piccola è il
   default sopra (nessun override, invariata per retrocompatibilità con le
   gallery già salvate). Selettori a doppia classe forma+dimensione sullo
   stesso elemento (.sgal-grid o l'overlay lightbox, stessa lista di classi
   copiata via extractClass in frontend-lightbox.js): specificità (0,3,0),
   superiore sia alla regola forma-sola sopra sia a quella dimensione-sola
   qui sotto (entrambe (0,2,0)) — vince sempre, a prescindere dall'ordine nel
   foglio, nessun !important necessario. Vale sia per carosello che lightbox,
   stesso pattern già usato per Colore/Trasparenza.
   Guard min-width:601px: le frecce del carosello sono comunque nascoste sotto
   i 600px (vedi display:none più sotto), ma quelle del lightbox no — senza
   questo guard, a parità/superiorità di specificità queste regole
   batterebbero il rimpicciolimento mobile forzato (40px, più sotto in
   @media max-width:600px), pensato apposta per non coprire la foto su
   schermo stretto a prescindere dalla Dimensione scelta in admin. */
@media (min-width: 601px) {
	.sgal-arrow-size-medium .sgal-carousel-prev,
	.sgal-arrow-size-medium .sgal-carousel-next,
	.sgal-arrow-size-medium .sgal-lightbox-prev,
	.sgal-arrow-size-medium .sgal-lightbox-next {
		width: 80px;
		height: 80px;
		font-size: 34px;
	}

	.sgal-arrow-size-large .sgal-carousel-prev,
	.sgal-arrow-size-large .sgal-carousel-next,
	.sgal-arrow-size-large .sgal-lightbox-prev,
	.sgal-arrow-size-large .sgal-lightbox-next {
		width: 100px;
		height: 100px;
		font-size: 42px;
	}

	.sgal-arrow-shape-square.sgal-arrow-size-medium .sgal-carousel-prev,
	.sgal-arrow-shape-square.sgal-arrow-size-medium .sgal-carousel-next,
	.sgal-arrow-shape-square.sgal-arrow-size-medium .sgal-lightbox-prev,
	.sgal-arrow-shape-square.sgal-arrow-size-medium .sgal-lightbox-next {
		width: 56px;
		height: 56px;
		font-size: 26px;
	}

	.sgal-arrow-shape-square.sgal-arrow-size-large .sgal-carousel-prev,
	.sgal-arrow-shape-square.sgal-arrow-size-large .sgal-carousel-next,
	.sgal-arrow-shape-square.sgal-arrow-size-large .sgal-lightbox-prev,
	.sgal-arrow-shape-square.sgal-arrow-size-large .sgal-lightbox-next {
		width: 68px;
		height: 68px;
		font-size: 32px;
	}

	/* Rettangolare: larghezza allineata alla Quadrata alla stessa Dimensione
	   (56px/68px), altezza sempre ~2x — stesse proporzioni della Piccola
	   (44x88) mantenute su tutte e tre le taglie. */
	.sgal-arrow-shape-rect.sgal-arrow-size-medium .sgal-carousel-prev,
	.sgal-arrow-shape-rect.sgal-arrow-size-medium .sgal-carousel-next,
	.sgal-arrow-shape-rect.sgal-arrow-size-medium .sgal-lightbox-prev,
	.sgal-arrow-shape-rect.sgal-arrow-size-medium .sgal-lightbox-next {
		width: 56px;
		height: 112px;
		font-size: 34px;
	}

	.sgal-arrow-shape-rect.sgal-arrow-size-large .sgal-carousel-prev,
	.sgal-arrow-shape-rect.sgal-arrow-size-large .sgal-carousel-next,
	.sgal-arrow-shape-rect.sgal-arrow-size-large .sgal-lightbox-prev,
	.sgal-arrow-shape-rect.sgal-arrow-size-large .sgal-lightbox-next {
		width: 68px;
		height: 136px;
		font-size: 42px;
	}
}

/* Opzione admin "Nascondi lo sfondo delle frecce": vale per entrambe le
   forme e per entrambi i contesti (carosello e lightbox) — deve vincere
   sia su sgal-arrow-color-* sia su sgal-arrow-shape-square, nessuna delle
   due battibile a parità di specificità solo con l'ordine nel foglio,
   quindi serve !important (stessa tecnica già usata per il mobile più
   sotto). Copre anche :hover, altrimenti lo sfondo ricomparirebbe al
   passaggio del mouse. */
.sgal-arrow-bg-hide .sgal-carousel-prev,
.sgal-arrow-bg-hide .sgal-carousel-next,
.sgal-arrow-bg-hide .sgal-lightbox-prev,
.sgal-arrow-bg-hide .sgal-lightbox-next,
.sgal-arrow-bg-hide .sgal-carousel-prev:hover,
.sgal-arrow-bg-hide .sgal-carousel-next:hover,
.sgal-arrow-bg-hide .sgal-lightbox-prev:hover,
.sgal-arrow-bg-hide .sgal-lightbox-next:hover {
	background: none !important;
}

/* Opzione admin "Nascondi le frecce nella gallery": solo carosello/slideshow,
   il lightbox non è toccato (selettore diverso, .sgal-lightbox-prev/next). */
.sgal-arrow-hide-gallery .sgal-carousel-prev,
.sgal-arrow-hide-gallery .sgal-carousel-next {
	display: none;
}

/* Posizione "dentro": le frecce (position:absolute) escono dal flusso flex,
   la track resta l'unico figlio e occupa tutto lo spazio automaticamente.
   isolation:isolate forza un vero stacking context su questo wrapper — senza,
   .sgal-item (position:relative, z-index:auto, dentro track) può finire
   sopra le frecce a seconda del contesto di stacking più esterno della
   pagina: bug reale osservato dall'utente (frecce dietro l'immagine). */
.sgal-arrow-pos-inside.sgal-layout-carousel {
	position: relative;
	isolation: isolate;
}

.sgal-arrow-pos-inside .sgal-carousel-prev,
.sgal-arrow-pos-inside .sgal-carousel-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
}

.sgal-arrow-pos-inside .sgal-carousel-prev { left: 8px; }
.sgal-arrow-pos-inside .sgal-carousel-next { right: 8px; }

@media (max-width: 900px) {
	.sgal-layout-carousel {
		--sgal-carousel-visible: 2 !important;
	}
}

@media (max-width: 600px) {
	.sgal-layout-carousel {
		--sgal-carousel-visible: 1 !important;
	}
}

/* Frecce carosello/lightbox: dimensione fissa e inset fisso da bordo/schermo
   pensati per desktop, troppo ingombranti su schermi stretti (coprivano parte
   della foto, sottraevano spazio al carosello). Sotto i 600px: il carosello
   nasconde le frecce (lo swipe nativo della track le sostituisce), il
   lightbox le rimpicciolisce e toglie lo sfondo — dettagli nei commenti dentro
   la media query qui sotto. */
@media (max-width: 600px) {
	.sgal-carousel-prev,
	.sgal-carousel-next {
		display: none;
	}

	.sgal-lightbox-prev { left: 8px; }
	.sgal-lightbox-next { right: 8px; }

	/* Frecce lightbox su mobile: niente sfondo, nessuna forma (stessa resa per
	   Tonda/Quadrata/Rettangolare, su richiesta esplicita dell'utente) — il
	   cerchio/quadrato/rettangolo pieno copriva visivamente parte della foto
	   su schermo stretto. Resta solo il glifo, con un'ombra per restare
	   leggibile sopra qualunque contenuto. "color" non è ridefinito qui:
	   resta quello scelto in admin da sgal-arrow-color-white/black più sopra
	   nel foglio — nessun conflitto, qui si tocca solo "background".
	   !important su width/height/font-size (non solo su background): le
	   regole base di ogni forma sono unconditional (nessuna @media), quindi
	   hanno specificità pari o superiore a questa — senza !important
	   vincerebbero loro sull'ordine/specificità, vanificando il
	   rimpicciolimento voluto qui sotto i 600px (bug lasciato aperto in una
	   sessione precedente per la forma Tonda, mai capitato di verificarlo dal
	   vivo — risolto ora aggiungendo la forma Rettangolare, che lo avrebbe
	   reso molto più vistoso: un box da 88px che non si restringe).
	   Centratura verticale: torna quella CSS di base (top:50% +
	   transform:translateY(-50%) del viewport, "a metà schermo") — provato il
	   centraggio sulla foto reale via JS, ma su un post con didascalia lunga
	   sposta le frecce troppo in alto; l'utente preferisce "a metà schermo,
	   piccole, senza disturbare" anche se non è il centro esatto della foto. */
	.sgal-lightbox-prev,
	.sgal-lightbox-next,
	.sgal-arrow-shape-square .sgal-lightbox-prev,
	.sgal-arrow-shape-square .sgal-lightbox-next {
		width: 40px !important;
		height: 40px !important;
		font-size: 26px !important;
		background: none !important;
		text-shadow: 0 1px 3px rgba(0, 0, 0, .8), 0 0 6px rgba(0, 0, 0, .5);
	}

	.sgal-arrow-color-black .sgal-lightbox-prev,
	.sgal-arrow-color-black .sgal-lightbox-next {
		text-shadow: 0 1px 3px rgba(255, 255, 255, .8), 0 0 6px rgba(255, 255, 255, .5);
	}

	/* Chiusura lightbox: stessa richiesta delle frecce, i 44px fissi (unica
	   dimensione, nessuna media query la toccava finora) erano sproporzionati
	   su schermo piccolo. */
	.sgal-lightbox-close {
		width: 32px;
		height: 32px;
		font-size: 16px;
	}

	/* Opzione admin "Nascondi le frecce del lightbox sotto i 600px": resta solo
	   lo swipe (frontend-lightbox.js) + la chiusura. Di default assente (le
	   frecce restano visibili) — la classe arriva sull'overlay via JS
	   (openLightbox in frontend-lightbox.js), letta dal .sgal-grid di origine. */
	.sgal-arrow-hide-mobile .sgal-lightbox-prev,
	.sgal-arrow-hide-mobile .sgal-lightbox-next {
		display: none;
	}
}

.sgal-item {
	position: relative;
	z-index: 0;
	display: block;
	overflow: hidden;
	border-radius: 4px;
	text-decoration: none;
	background: #eee;
}

.sgal-layout-grid .sgal-item {
	aspect-ratio: 1 / 1;
}

.sgal-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}

.sgal-layout-masonry .sgal-item img {
	height: auto;
}

/* Effetto hover */
.sgal-hover-zoom .sgal-item:hover img {
	transform: scale(1.06);
}

.sgal-hover-overlay .sgal-caption {
	position: absolute;
	inset: auto 0 0 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, .75));
	color: #fff;
	padding: 26px 10px 10px;
	font-size: 13px;
	line-height: 1.3;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease;
}

.sgal-hover-overlay .sgal-item:hover .sgal-caption {
	opacity: 1;
	transform: translateY(0);
}

/* Fuori dalla modalità overlay, la didascalia (se attiva) è statica sotto la
   miniatura. Colore esplicito invece di "inherit": su un link (<a>) erediterebbe
   il colore evidenziato dei link del tema, illeggibile/fuori posto come didascalia. */
.sgal-hover-zoom .sgal-caption,
.sgal-hover-none .sgal-caption {
	position: static;
	display: block;
	background: none;
	color: #333;
	padding: 6px 2px 0;
	font-size: 13px;
	opacity: 1;
	transform: none;
}

/* Skin scura (stesso campo "Stile lightbox" della gallery, non solo il
   lightbox): fascia nera sotto la miniatura invece del testo su sfondo
   trasparente — raccolta dal border-radius/overflow:hidden di .sgal-item,
   niente angoli da sistemare a parte. */
.sgal-skin-dark.sgal-hover-zoom .sgal-caption,
.sgal-skin-dark.sgal-hover-none .sgal-caption {
	background: #000;
	color: #fff;
	padding: 8px 10px;
}

.sgal-play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	pointer-events: none;
}

.sgal-play-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 8px 0 8px 14px;
	border-color: transparent transparent transparent #fff;
}

.sgal-empty {
	opacity: .7;
}

/* BUG reale (non solo estetico): l'attributo nativo "hidden" applica
   display:none con una regola dello UA-stylesheet del browser — origine
   "user agent", che nel cascade CSS perde SEMPRE contro una regola dello
   stesso peso ma di origine "author" come .sgal-layout-grid { display:
   grid }. Risultato: frontend-albums.js impostava hidden=true sulla griglia
   di copertine (che ha anche la classe sgal-layout-grid) ma restava
   visibile lo stesso — le foto dell'album aperto comparivano sotto,
   *in aggiunta* alle copertine invece di sostituirle. Serve una regola
   esplicita, più specifica di .sgal-layout-grid da sola, per far vincere
   davvero "hidden". */
.sgal-album-covers[hidden] {
	display: none;
}

/* Dissolvenza incrociata copertine↔foto: durata impostata inline da
   frontend-albums.js (stessa opzione "Velocità animazione lightbox" della
   gallery, letta da data-fade-ms). Il taglio da/a display:none avviene solo
   DOPO l'animazione (gestito in JS via hidden), qui si anima solo opacity. */
.sgal-album-covers,
.sgal-album-detail {
	transition-property: opacity;
	transition-timing-function: ease;
}

/* Contenitore delle foto di un album aperto: leggermente evidenziato
   (sfondo/bordo sottili, neutri per restare leggibili sia su temi chiari
   che scuri) per far percepire "sei dentro un album", non nella griglia
   principale. */
.sgal-album-detail {
	background: rgba(127, 127, 127, .08);
	border: 1px solid rgba(127, 127, 127, .18);
	border-radius: 10px;
	padding: 20px;
}

/* Layout "albums": le copertine riusano .sgal-item (stessi effetti hover di
   zoom sull'immagine già costruiti), ma sono <button> invece di <a> — reset
   dei default del browser (bordo, padding, font) che .sgal-item da solo non
   copre, essendo stato scritto per <a>. */
button.sgal-item {
	border: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/* Titolo/descrizione della copertina album: overlay sempre visibile (non
   legato all'opzione "Effetto al passaggio del mouse", pensata per le
   didascalie delle singole foto — vedi commento su render_album_cover()
   in class-sgal-shortcode.php per il perché). */
.sgal-album-cover-info {
	position: absolute;
	inset: auto 0 0 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, .8) 60%);
	color: #fff;
	padding: 34px 12px 10px;
	text-align: left;
}

.sgal-album-cover-name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.sgal-album-cover-desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-top: 4px;
	font-size: 12px;
	line-height: 1.35;
	opacity: .85;
}

/* Reso un vero pulsante (era testo sottile) su richiesta dell'utente: più
   grande e visibile, per capire subito come tornare indietro. */
.sgal-album-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 18px;
	padding: 10px 18px;
	border: 1px solid rgba(127, 127, 127, .3);
	border-radius: 999px;
	background: rgba(127, 127, 127, .1);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
	transition: background .2s ease;
}

.sgal-album-back:hover {
	background: rgba(127, 127, 127, .22);
}

/* Lightbox, generato via JS (frontend-lightbox.js) */
body.sgal-lightbox-open {
	overflow: hidden;
}

/* Le frecce del carosello sotto (a differenza di quelle del lightbox, non
   sono position:fixed — stanno nel flusso normale della pagina) restavano
   visibili in trasparenza attraverso lo sfondo dell'overlay, che è
   volutamente semi-trasparente (rgba(0,0,0,.9), non pieno) — segnalato
   dall'utente come fastidioso, specialmente con "Nascondi sfondo" attivo
   (nessun riquadro a coprirle). body.sgal-lightbox-open è già impostato da
   frontend-lightbox.js all'apertura/chiusura, riuso lo stesso hook invece
   di aggiungerne uno nuovo. visibility, non display:none: non toglie
   spazio al layout del carosello dietro (comunque invisibile sotto
   l'overlay), evita un reflow indesiderato mentre il lightbox è aperto.*/
body.sgal-lightbox-open .sgal-carousel-prev,
body.sgal-lightbox-open .sgal-carousel-next {
	visibility: hidden;
}

.sgal-lightbox-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .9);
	padding: 24px;
	opacity: 0;
	transition: opacity .25s ease;
}

.sgal-lightbox-overlay.sgal-visible {
	opacity: 1;
}

/* Il contenuto (immagine/video + didascalia) si dissolve E cresce leggermente
   insieme allo sfondo: effetto più morbido di una semplice dissolvenza piatta. */
.sgal-lightbox-content {
	opacity: 0;
	transform: scale(.94);
	transition: opacity .25s ease, transform .25s ease;
}

.sgal-lightbox-overlay.sgal-visible .sgal-lightbox-content {
	opacity: 1;
	transform: scale(1);
}

.sgal-lightbox-overlay.sgal-skin-light {
	background: rgba(255, 255, 255, .97);
}

/* flex-grow:0 deliberato: il contenuto non deve MAI crescere oltre la
   dimensione naturale dell'immagine — con flex-grow:1 in certe proporzioni
   poteva espandersi ed "invadere" visivamente lo spazio delle frecce
   affiancate in Posizione = Fuori (segnalato dall'utente come "sembra un
   z-index diverso", in realtà un problema di sizing flex). flex-shrink:1
   resta per restringersi quando serve (viewport piccoli). */
.sgal-lightbox-content {
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	max-height: 100%;
}

/* Tetto d'altezza (min(65vh, 640px)) via max-height, non più height fissa:
   height fissa + width:auto + max-width:100% deforma la foto quando la
   larghezza calcolata dalle proporzioni supera max-width — il browser
   restringe la larghezza per rispettarlo ma non ricalcola l'altezza di
   conseguenza (lo fa solo quando anche height è auto), quindi la foto
   risultava schiacciata in larghezza/stirata in verticale sugli schermi
   stretti (bug reale segnalato dall'utente su mobile, "in tutti i layout"
   perché sotto i 900px sia Affiancato sia Impilato usano questa stessa
   regola base). Con max-height + width/height auto il browser sceglie la
   dimensione più grande che rispetta ENTRAMBI i tetti (max-width e
   max-height) mantenendo le proporzioni intatte — su desktop, dove la
   larghezza disponibile è abbondante, l'altezza tocca comunque il tetto
   come prima (stesso risultato visivo, stesso motivo per cui era stata
   scelta un'altezza fissa: vedi sotto); su mobile, dove la larghezza è il
   vincolo stretto, l'altezza si riduce in proporzione invece di deformarsi.
   Motivo originale del tetto fisso (altezza, non più un max-height che
   l'immagine riempiva sempre fino al limite): prima, con una foto
   orizzontale (più larga che alta), l'immagine restava comunque alta quasi
   quanto il tetto e lasciava poco spazio alla didascalia sotto — col
   flex-shrink dipendeva da quanto flexbox decideva di ridistribuire tra i
   due, non prevedibile (fix precedente per "foto tagliate" spostava il
   problema sulla didascalia invece di risolverlo, segnalato dall'utente con
   screenshot). Combinatore ">" (figlio diretto), non discendente generico:
   senza, questa regola matchava ANCHE l'avatar (un <img> annidato più in
   basso, dentro .sgal-lightbox-caption) — bug reale, non solo teorico,
   notato dall'utente con l'avatar ingrandito a piena altezza. Il media
   principale (foto/video) è l'unico <img>/<video> figlio diretto di
   .sgal-lightbox-content (appeso da content.appendChild(media) in
   frontend-lightbox.js, prima di .sgal-lightbox-caption). */
.sgal-lightbox-content > img,
.sgal-lightbox-content > video {
	max-width: 100%;
	max-height: min(65vh, 640px);
	width: auto;
	height: auto;
	display: block;
}

/* .sgal-lightbox-inner ora contiene di fatto solo .sgal-lightbox-content: le
   frecce (sia Fuori che Dentro) sono position:fixed, escono dal flusso —
   restano qui nel markup solo per organizzazione, non per il layout. */
.sgal-lightbox-inner {
	display: flex;
	align-items: center;
	max-width: 92vw;
	max-height: 92vh;
}

/* Sotto la foto, a tutta larghezza (nel limite di leggibilità del testo) e
   centrata — non più un pannello fluttuante sovrapposto all'immagine.
   Colonna, non più riga: la riga header (avatar + data, vedi sotto) sta
   sopra al testo, non affiancata — struttura in due righe come lo
   screenshot di riferimento (500px) dell'utente. */
/* Spaziatura più compatta di prima (padding 16px 18px, gap 10px, line-height 1.5):
   quei valori, mutuati dal padding "da app" di un post Instagram, sui più
   piccoli schermi dell'Impilato risultavano eccessivi rispetto al layout
   precedente, giudicato più equilibrato dall'utente. Il layout Affiancato
   (vedi override sotto, @media min-width:900px) mantiene invece i valori
   originali: lì lo spazio verticale a disposizione c'è, l'utente li vuole
   invariati. */
.sgal-lightbox-caption {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	max-width: 640px;
	margin-top: 16px;
	color: #fff;
	background: rgba(0, 0, 0, .4);
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 16px;
	line-height: 1.4;
	text-align: left;
}

.sgal-lightbox-caption-header {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* margin-left:auto invece di justify-content:space-between sul genitore:
   con un solo figlio presente (es. data senza avatar noto) resterebbe comunque
   ancorata a destra, non centrata/a sinistra per mancanza dell'altro elemento
   con cui "space-between" la spingerebbe. */
.sgal-lightbox-date {
	margin-left: auto;
	flex: 0 0 auto;
	font-size: 13px;
	opacity: .65;
	white-space: nowrap;
}

.sgal-lightbox-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

/* Presente solo quando l'item ha un profilo Instagram noto (data-profile-url):
   diventa lei il figlio diretto del flex .sgal-lightbox-caption al posto
   dell'img, che a sua volta mantiene invariata la propria dimensione. */
.sgal-lightbox-avatar-link {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
	transition: opacity .2s ease;
}

.sgal-lightbox-avatar-link:hover {
	opacity: .8;
}

/* Tetto proprio + scroll interno, non sull'intera .sgal-lightbox-caption:
   una didascalia Instagram con molti hashtag può diventare molto lunga —
   senza un limite qui, l'immagine (già ridotta al minimo dal fix sopra)
   finirebbe comunque schiacciata per fare spazio a tutto il testo.
   L'avatar resta fisso in alto (fuori da questo overflow), scorre solo il
   testo. */
/* white-space:normal (default) sull'Impilato: appiattisce gli "a capo"
   originali di Instagram/Facebook (caratteri \n veri, preservati da
   data-caption nell'attributo HTML) in un unico blocco di testo fluido —
   con pre-line quegli a capo restavano preservati (paragrafi, righe vuote),
   che nel pannello a piena larghezza sotto la foto risultava nell'aspetto
   "a post Instagram" giudicato dall'utente meno curato del flattening
   precedente. L'Affiancato (override sotto, @media min-width:900px) resta
   invece su pre-line: lì lo spazio verticale c'è, l'utente vuole la
   formattazione originale preservata. */
/* Scrollbar sempre visibile (non quella nativa, spesso invisibile finché
   non si scrolla attivamente — su macOS/trackpad sparisce del tutto a
   riposo): senza un indizio visivo il testo tagliato in fondo sembra un
   bug invece di un'area scorribile, segnalato dall'utente ("si può
   scorrere ma non si capisce"). Colore grigio semi-trasparente neutro:
   leggibile sia sullo sfondo scuro (skin scura, default) sia su quello
   chiaro/bianco (skin chiara, pannello "Formato Instagram"), senza dover
   differenziare per skin. padding-right: spazio perché la scrollbar non
   si sovrapponga alle ultime lettere del testo. */
.sgal-lightbox-caption-text {
	flex: 1 1 auto;
	max-height: 22vh;
	overflow-y: auto;
	white-space: normal;
	padding-right: 6px;
	scrollbar-width: thin;
	scrollbar-color: rgba(128, 128, 128, .7) transparent;
}

.sgal-lightbox-caption-text::-webkit-scrollbar {
	width: 6px;
}

.sgal-lightbox-caption-text::-webkit-scrollbar-track {
	background: transparent;
}

.sgal-lightbox-caption-text::-webkit-scrollbar-thumb {
	background: rgba(128, 128, 128, .7);
	border-radius: 3px;
}

/* Colore campionato da un link reale della pagina via JS (frontend-
   lightbox.js, getThemeLinkColor) — non affidato alla sola ereditarietà
   CSS: l'overlay è appeso a document.body, fuori da eventuali wrapper del
   tema a cui una regola "a { color }" potrebbe essere scoperta. Segnalato
   dall'utente: nella card bianca dell'Affiancato gli hashtag restavano del
   colore del testo normale — anche DOPO un primo tentativo con
   `.sgal-lightbox-hashtag { color: ... !important }` (specificità 0,1,0):
   ancora battuto, segno di una regola del tema altrettanto !important ma
   più specifica (es. `.fusion-body a { color: inherit !important; }`,
   pattern comune nei page builder per azzerare il colore link dentro
   moduli custom — 0,1,1 batte 0,1,0). Selettore reso deliberatamente
   verboso (0,3,1) per vincere con margine, non solo pareggiare. */
.sgal-lightbox-overlay .sgal-lightbox-caption-text a.sgal-lightbox-hashtag {
	color: var(--sgal-hashtag-color, #3897f0) !important;
}

/* "Sfondo didascalia" (Scuro/Bianco), separata dal "Layout lightbox"
   (Impilato/Affiancato) qui sotto — due assi indipendenti, non un'unica
   scelta come nella breve parentesi 2.13.0 (rimossa: era stata un
   fraintendimento, l'affiancato resta il layout di base). Indipendente
   anche da "Stile lightbox" (quello controlla lo sfondo dell'INTERO
   overlay, questo solo il riquadro della didascalia: si può avere overlay
   scuro con didascalia bianca, o viceversa). */
.sgal-lightbox-overlay.sgal-lightbox-caption-bg-light .sgal-lightbox-caption {
	background: #fff;
	color: #111;
	box-shadow: 0 4px 24px rgba(0, 0, 0, .25);
}

/* Layout "Affiancato" (foto e didascalia di fianco, come Instagram
   desktop) — di base da questa versione. Sotto i 900px lo spazio non
   basta per un pannello laterale leggibile accanto alla foto, quindi il
   guard min-width lascia .sgal-lightbox-content/-caption sulle regole
   Impilato invariate — fallback automatico, nessun controllo admin
   separato per il breakpoint. .sgal-lightbox-content passa da colonna a
   riga: la foto (si restringe quanto serve) e il pannello (larghezza
   fissa, 480px — allargato da 360px: con didascalie piene di hashtag
   quella larghezza le faceva spezzare su troppe righe strette, segnalato
   dall'utente) affiancati, entrambi alti fino a 88vh. Il pannello scorre
   come un blocco unico (non solo il testo come nell'Impilato): a
   quell'altezza generosa evita lo scroll annidato avatar-fisso+testo-
   scroll dell'altra versione, più semplice qui. */
@media (min-width: 900px) {
	.sgal-lightbox-overlay.sgal-lightbox-layout-split .sgal-lightbox-content {
		flex-direction: row;
		align-items: stretch;
		max-width: min(92vw, 1300px);
	}

	/* height (non più max-height) per battere il valore fisso min(65vh,640px)
	   dell'Impilato sopra — qui però riportata ad "auto": in questo layout
	   la foto è affiancata al pannello, non impilata sopra di esso, non
	   condivide lo stesso spazio verticale e non ha bisogno di un tetto
	   fisso indipendente dal contenuto (l'unico vincolo resta max-height).
	   Combinatore ">" (figlio diretto): esclude l'avatar annidato dentro
	   .sgal-lightbox-caption (stesso motivo della regola base). */
	.sgal-lightbox-overlay.sgal-lightbox-layout-split .sgal-lightbox-content > img,
	.sgal-lightbox-overlay.sgal-lightbox-layout-split .sgal-lightbox-content > video {
		height: auto;
		max-height: 88vh;
		min-width: 0;
	}

	/* 320px (480 × 2/3, ridotto su richiesta dell'utente per mostrare la foto
	   più grande): il pannello resta comunque alto fino a 88vh con scroll
	   verticale, quindi più righe per via di una colonna più stretta non è
	   un problema come lo era il vecchio box senza spazio verticale
	   ridondante — il testo scorre, non si taglia. */
	.sgal-lightbox-overlay.sgal-lightbox-layout-split .sgal-lightbox-caption {
		flex: 0 0 320px;
		width: 320px;
		max-width: 320px;
		align-self: stretch;
		margin-top: 0;
		margin-left: 20px;
		max-height: 88vh;
		overflow-y: auto;
		/* Il pannello resta alto quanto la foto (align-self:stretch sopra),
		   ma con didascalie corte il contenuto (header + testo) restava
		   ancorato in cima lasciando un vuoto bianco sotto, sproporzionato —
		   segnalato dall'utente. justify-content:center lo centra invece nel
		   pannello; con didascalie lunghe che superano 88vh il centraggio
		   non ha effetto visibile (contenuto già più alto del contenitore),
		   lo scroll interno resta invariato. */
		justify-content: center;
		/* Spaziatura invariata (non la versione compatta dell'Impilato sopra):
		   qui lo spazio verticale c'è, si sviluppa in colonna accanto alla
		   foto, quindi la spaziatura "da post Instagram" resta quella voluta
		   dall'utente. */
		gap: 10px;
		padding: 16px 18px;
		line-height: 1.5;
	}

	.sgal-lightbox-overlay.sgal-lightbox-layout-split .sgal-lightbox-caption-text {
		max-height: none;
		overflow-y: visible;
		/* pre-line (non normal come l'Impilato sopra): qui la formattazione
		   originale di Instagram (paragrafi, righe vuote) resta preservata,
		   su richiesta dell'utente — lo spazio verticale c'è. */
		white-space: pre-line;
	}
}

/* Skin chiara: card bianca con bordo sottile e ombra leggera invece di un
   riempimento grigio piatto — altrimenti si confonde con lo sfondo bianco
   della lightbox, senza contorno né profondità. */
.sgal-lightbox-overlay.sgal-skin-light .sgal-lightbox-caption {
	color: #111;
	background: #fff;
	border: 1px solid #eee;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

/* Chiusura: sempre tonda, in alto a destra, fissa allo schermo — non
   influenzata dalle opzioni forma/posizione (fuori scope, quelle riguardano
   solo le frecce prev/next). z-index esplicito (le frecce prev/next ce
   l'hanno già, qui mancava) e top con env(safe-area-inset-top): su alcuni
   browser mobile (Safari iOS in particolare) un elemento fixed molto vicino
   al bordo superiore può finire sotto la barra degli indirizzi o il notch —
   segnalato dall'utente come pulsante invisibile su mobile. */
.sgal-lightbox-close {
	position: fixed;
	top: max(20px, env(safe-area-inset-top));
	right: 20px;
	z-index: 5;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: 0;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.sgal-lightbox-overlay.sgal-skin-light .sgal-lightbox-close {
	background: rgba(0, 0, 0, .08);
	color: #111;
}

.sgal-lightbox-close:hover {
	background: rgba(255, 255, 255, .28);
}

.sgal-lightbox-overlay.sgal-skin-light .sgal-lightbox-close:hover {
	background: rgba(0, 0, 0, .16);
}

/* Ancorate ai bordi dello SCHERMO, non della foto (Posizione = Fuori) —
   indipendenti da larghezza/proporzione dell'immagine mostrata, su richiesta
   dell'utente ("troppo vicine alla foto" con l'affiancamento flex
   precedente). Stessi valori servono anche da fallback per Posizione =
   Dentro, per l'istante prima che il JS calcoli le coordinate esatte
   sull'immagine (vedi più sotto). */
.sgal-lightbox-prev,
.sgal-lightbox-next {
	position: fixed;
	z-index: 5;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	width: 64px;
	height: 64px;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.sgal-lightbox-prev { left: 20px; }
.sgal-lightbox-next { right: 20px; }

/* Forma quadrata: bordi/dimensione fissi, sfondo+colore seguono "Colore
   frecce" (stessa logica del carosello, vedi commento più sopra). */
.sgal-arrow-shape-square .sgal-lightbox-prev,
.sgal-arrow-shape-square .sgal-lightbox-next {
	border-radius: 4px;
	width: 44px;
	height: 44px;
	font-size: 20px;
}

.sgal-arrow-shape-square.sgal-arrow-color-white .sgal-lightbox-prev,
.sgal-arrow-shape-square.sgal-arrow-color-white .sgal-lightbox-next {
	background: rgba(0, 0, 0, .82);
	color: #fff;
}

.sgal-arrow-shape-square.sgal-arrow-color-white .sgal-lightbox-prev:hover,
.sgal-arrow-shape-square.sgal-arrow-color-white .sgal-lightbox-next:hover {
	background: rgba(0, 0, 0, .95);
}

.sgal-arrow-shape-square.sgal-arrow-color-black .sgal-lightbox-prev,
.sgal-arrow-shape-square.sgal-arrow-color-black .sgal-lightbox-next {
	background: rgba(255, 255, 255, .82);
	color: #111;
}

.sgal-arrow-shape-square.sgal-arrow-color-black .sgal-lightbox-prev:hover,
.sgal-arrow-shape-square.sgal-arrow-color-black .sgal-lightbox-next:hover {
	background: rgba(255, 255, 255, .95);
}

/* Forma rettangolare (verticale): stessa logica del carosello, vedi commento
   più sopra. */
.sgal-arrow-shape-rect .sgal-lightbox-prev,
.sgal-arrow-shape-rect .sgal-lightbox-next {
	border-radius: 8px;
	width: 44px;
	height: 88px;
	font-size: 28px;
}

.sgal-arrow-shape-rect.sgal-arrow-color-white .sgal-lightbox-prev,
.sgal-arrow-shape-rect.sgal-arrow-color-white .sgal-lightbox-next {
	background: rgba(0, 0, 0, .82);
	color: #fff;
}

.sgal-arrow-shape-rect.sgal-arrow-color-white .sgal-lightbox-prev:hover,
.sgal-arrow-shape-rect.sgal-arrow-color-white .sgal-lightbox-next:hover {
	background: rgba(0, 0, 0, .95);
}

.sgal-arrow-shape-rect.sgal-arrow-color-black .sgal-lightbox-prev,
.sgal-arrow-shape-rect.sgal-arrow-color-black .sgal-lightbox-next {
	background: rgba(255, 255, 255, .82);
	color: #111;
}

.sgal-arrow-shape-rect.sgal-arrow-color-black .sgal-lightbox-prev:hover,
.sgal-arrow-shape-rect.sgal-arrow-color-black .sgal-lightbox-next:hover {
	background: rgba(255, 255, 255, .95);
}

/* Posizione "dentro": le coordinate esatte (per aderire ai bordi
   dell'immagine, qualunque proporzione abbia) sono calcolate via JS
   (frontend-lightbox.js, positionInsideArrows) leggendo getBoundingClientRect()
   dell'immagine/video effettivamente renderizzato — un posizionamento CSS
   puro relativo a .sgal-lightbox-inner si è rivelato inaffidabile (il suo
   box non coincide in modo affidabile con le dimensioni reali dell'immagine
   per ogni proporzione: su foto non quadrate le frecce finivano centrali,
   coperte dall'immagine, invece che ai bordi). transform:none — il JS
   imposta già left/top esatti (angolo del bottone, non il centro): un
   transform di centratura ereditato dalle regole sopra sfaserebbe la
   posizione calcolata. Finché il JS non è girato, resta come fallback la
   stessa posizione ai bordi schermo di Posizione = Fuori sopra (non
   ridefinita qui). */
.sgal-arrow-pos-inside .sgal-lightbox-prev,
.sgal-arrow-pos-inside .sgal-lightbox-next {
	z-index: 20;
	transform: none;
}