/* Italfood · Slider Prodotti in Evidenza
   Composizione proporzionale: lo stage ha un rapporto fisso e tutto (prodotto,
   callout, tipografia) si dimensiona sulla larghezza del widget, non sulla
   viewport. Testata in colonna che passa sopra il prodotto, leader a gomito
   calcolate dal wrapper fermo, linea di caricamento unica in verde. */

.ifm{
	--if-pw:74%;        /* scala prodotto, sulla larghezza dello stage */
	--if-px:32%;        /* posizione X */
	--if-py:16%;        /* posizione Y */
	--if-namew:38%;     /* larghezza colonna nome */
	--if-ratio:1.10;    /* rapporto larghezza/altezza dello stage */
	--if-maxw:760px;    /* larghezza massima del widget */
	--if-lk:.32;        /* intensita leader */
	--if-shade:.10;     /* densita ombra */
	--if-veil:.28;      /* velo di leggibilita su fondo scuro */
	width:100%;
	max-width:var(--if-maxw);
}
.ifm--empty{padding:20px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;color:var(--ink-muted,rgba(45,74,62,.62));border:1px solid var(--hair,rgba(45,74,62,.16));}

.ifm__panel{position:relative;width:100%;display:flex;flex-direction:column;}
.ifm__stage{position:relative;width:100%;aspect-ratio:var(--if-ratio);}

/* ---- testata: passa sopra il prodotto, resta leggibile ---- */
.ifm__head{position:absolute;z-index:8;left:0;top:5%;width:var(--if-namew);pointer-events:none;}
.ifm__eyebrow{display:block;margin:0 0 12px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;font-size:clamp(9px,.8vw,11px);line-height:1;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint,rgba(45,74,62,.5));}
.ifm__text{display:inline-block;text-decoration:none;color:inherit;pointer-events:auto;}
.ifm__name{margin:0;font-family:"Cormorant",Georgia,serif;font-weight:500;font-size:34px;font-size:clamp(24px,2.5vw,40px);line-height:1.08;letter-spacing:-.01em;color:var(--verde,#2D4A3E);}

/* ---- counter ---- */
.ifm__index{position:absolute;z-index:8;right:0;top:0;display:flex;align-items:center;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;font-size:clamp(10px,.9vw,12px);line-height:1;letter-spacing:.08em;color:var(--ink-faint,rgba(45,74,62,.42));white-space:nowrap;}
.ifm__cur{color:var(--verde,#2D4A3E);}
/* Le frecce sparivano perché il kit di Elementor scrive `.elementor-kit-N
   button {color: ...}` e quella regola vale (0,2,0), mentre `.ifm__nav`
   vale (0,1,0): il colore del kit vinceva e il chevron, che disegna con
   `currentColor`, prendeva il colore dello sfondo. Il background era già
   difeso con !important, il colore no.
   La classe ripetuta porta la specificità a (0,3,0) e chiude la questione
   senza aggiungere altri !important. */
.ifm__nav{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin:0;background:transparent !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;-webkit-appearance:none;appearance:none;cursor:pointer;transition:opacity .25s ease;}
/* La specificita' a (0,3,0) non e' bastata a farle comparire, quindi il
   colpevole non e' una regola del kit ma qualcosa che arriva con
   !important, oppure una dimensione azzerata. Qui le quattro proprieta'
   che decidono se una freccia si vede o no sono presidiate: colore,
   opacita', dimensione del riquadro e tratto del chevron. Il tratto non
   passa piu' da `currentColor`, che dipende da un'eredita' che qualcuno
   evidentemente riscrive. */
/* Il chevron misurava 0x15: altezza giusta, larghezza zero. Non era il
   colore e non era la specificita' della `width`, che era gia' forzata.
   Era il flexbox: il bottone e' un contenitore flex, il kit di Elementor
   gli mette il proprio padding (la nostra `padding:0` valeva (0,1,0) e
   perdeva) e riduce lo spazio interno; un elemento flex con `min-width:0`
   puo' essere compresso sotto la larghezza dichiarata, fino a sparire.
   L'altezza sopravviveva perche' sull'asse trasversale non c'e' contesa.

   Si chiude togliendo il padding di mezzo e vietando al chevron di
   restringersi. */
.ifm__nav.ifm__nav.ifm__nav{color:var(--verde,#2D4A3E) !important;opacity:.7 !important;width:32px !important;height:32px !important;min-width:32px !important;min-height:32px !important;padding:0 !important;box-sizing:border-box !important;overflow:visible !important;visibility:visible !important;flex:0 0 auto !important;}
.ifm__chev.ifm__chev.ifm__chev{display:block !important;flex:0 0 auto !important;width:15px !important;height:15px !important;min-width:15px !important;max-width:none !important;fill:none !important;stroke:var(--verde,#2D4A3E) !important;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;}
.ifm__chev.ifm__chev.ifm__chev polyline{fill:none !important;stroke:inherit;}
.ifm__nav.ifm__nav.ifm__nav:hover{opacity:1 !important;}
.ifm__nav.ifm__nav.ifm__nav:focus-visible{opacity:1;outline:1px solid var(--verde,#2D4A3E);outline-offset:2px;}

/* ---- prodotto ---- */
.ifm__prod{position:absolute;z-index:4;width:var(--if-pw);left:var(--if-px);top:var(--if-py);pointer-events:none;opacity:0;transition:opacity .55s ease;}
.ifm__float{animation:ifmDrift 8s ease-in-out infinite alternate;}
.ifm__prod.is-active{opacity:1;}
.ifm__img{display:block;width:100%;height:auto;transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .55s ease;}
.ifm__prod:not(.is-active) .ifm__img{transform:translateX(-22px) scale(.97);}
@keyframes ifmDrift{from{transform:translate(0,0)}to{transform:translate(-10px,-22px)}}

.ifm__shade{position:absolute;z-index:2;pointer-events:none;
	background:radial-gradient(50% 50% at 50% 50%,
		rgba(45,74,62,calc(var(--if-shade) * 1.7)) 0%,
		rgba(45,74,62,calc(var(--if-shade) * .65)) 44%,
		rgba(45,74,62,0) 72%);}

/* ---- leader ---- */
.ifm__leaders{position:absolute;inset:0;z-index:3;width:100%;height:100%;overflow:visible;pointer-events:none;}
.ifm__leader{fill:none;stroke:rgba(45,74,62,var(--if-lk));stroke-width:1;vector-effect:non-scaling-stroke;}

/* ---- callout, quote sfalsate ---- */
/* Larghezza e allineamento dei callout.

   La leader parte dal bordo destro del *testo*, non del riquadro: con
   `text-align:right` il testo si appoggia al bordo destro del riquadro e la
   linea nasce a un passo dal prodotto. Allineando a sinistra il testo
   finisce dove finisce, e la linea guadagna tutto lo spazio che avanza. In
   piu' i tre valori hanno lunghezze diverse, quindi le leader nascono a
   quote diverse: e' il disallineamento che l'estetica AR vuole, ottenuto
   dal contenuto invece che da un offset scritto a mano.

   Effetto collaterale utile: labels e valori si incolonnano con l'occhiello
   e il titolo, che partono dallo stesso bordo.

   Per tornare all'allineamento a destra basta `--if-coalign:right` sul
   widget, in Advanced. */
.ifm__co{position:absolute;z-index:5;width:34%;text-align:var(--if-coalign,left);}
.ifm__lab{display:block;margin-bottom:2px;font-family:"Cormorant",Georgia,serif;font-weight:500;font-size:17px;font-size:clamp(15px,1.3vw,19px);color:var(--ink-muted,rgba(45,74,62,.62));}
.ifm__v-formato,.ifm__v-utilizzo,.ifm__v-pezzatura{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12.5px;font-size:clamp(11px,.95vw,13px);line-height:1.2;letter-spacing:.05em;text-transform:uppercase;color:var(--verde,#2D4A3E);}
/* quote sfalsate e rientri diversi: il disallineamento e' voluto */
.ifm__co--formato{left:0;top:32%;}
.ifm__co--pezzatura{left:3%;top:52%;}
.ifm__co--utilizzo{left:0;top:70%;}
/* variante: il terzo dato sul lato opposto, richiede prodotto piu' piccolo */
.ifm--split .ifm__co--formato{left:auto;right:0;top:42%;text-align:right;}

.ifm__stamp{position:absolute;z-index:5;right:0;bottom:1%;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;font-size:clamp(9px,.7vw,10px);letter-spacing:.26em;text-transform:uppercase;color:rgba(45,74,62,.32);}

/* ---- linea di caricamento ---- */
.ifm__load{position:relative;flex:0 0 auto;width:100%;height:1px;margin-top:10px;background:rgba(45,74,62,.1);}
.ifm__load i{position:absolute;left:0;top:0;width:100%;height:1px;background:var(--verde,#2D4A3E);transform-origin:left;transform:scaleX(0);}

/* ---- ingressi ---- */
@keyframes ifmUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.ifm.is-enter .ifm__eyebrow{animation:ifmUp .5s ease both;animation-delay:.04s;}
.ifm.is-enter .ifm__name{animation:ifmUp .5s ease both;animation-delay:.1s;}
.ifm.is-enter .ifm__co--pezzatura{animation:ifmUp .55s ease both;animation-delay:.22s;}
.ifm.is-enter .ifm__co--formato{animation:ifmUp .55s ease both;animation-delay:.3s;}
.ifm.is-enter .ifm__co--utilizzo{animation:ifmUp .55s ease both;animation-delay:.38s;}

/* ---- layout minimale ---- */
.ifm--min .ifm__stage{aspect-ratio:auto;height:auto;padding-bottom:12px;}
.ifm--min .ifm__head,.ifm--min .ifm__prod{position:static;width:auto;}
.ifm--min .ifm__prod{width:58%;margin:18px auto 0;}
.ifm--min .ifm__leaders,.ifm--min .ifm__shade,.ifm--min .ifm__stamp{display:none;}
.ifm--min .ifm__co{position:static;width:auto;text-align:left;margin-top:12px;}
.ifm--min .ifm__lab{display:inline;margin-right:10px;}

/* ---- Sotto 1024px di finestra la composizione decade a lista.
   Una sola media query classica: nessuna container query, nessuna classe
   applicata dal JavaScript. A finestra larga non puo' scattare.
   La classe ifm--nostack la disattiva del tutto. ---- */
@media (max-width:1024px){
	.ifm:not(.ifm--nostack) .ifm__stage{aspect-ratio:auto;height:auto;}
	.ifm:not(.ifm--nostack) .ifm__index{position:static;display:flex;justify-content:flex-end;margin-bottom:14px;}
	.ifm:not(.ifm--nostack) .ifm__head{position:static;width:100%;margin-bottom:16px;}
	.ifm:not(.ifm--nostack) .ifm__name{font-size:26px;}
	.ifm:not(.ifm--nostack) .ifm__prod{position:relative;width:70%;left:auto;top:auto;margin:0 auto;opacity:1;}
	.ifm:not(.ifm--nostack) .ifm__prod:not(.is-active){position:absolute;top:0;left:15%;opacity:0;}
	.ifm:not(.ifm--nostack) .ifm__leaders,
	.ifm:not(.ifm--nostack) .ifm__stamp,
	.ifm:not(.ifm--nostack) .ifm__shade,
	.ifm:not(.ifm--nostack) .ifm__veil{display:none;}
	.ifm:not(.ifm--nostack) .ifm__co{position:static;width:auto;text-align:left;margin-top:14px;}
}

@media (max-width:600px){
	.ifm:not(.ifm--nostack) .ifm__name{font-size:23px;}
	.ifm:not(.ifm--nostack) .ifm__prod{width:82%;}
}

@media (prefers-reduced-motion: reduce){
	.ifm__float{animation:none;}
	.ifm__img{transition:opacity .3s ease;transform:none !important;}
	.ifm.is-enter *{animation:none !important;}
	.ifm__load i{transition:none !important;}
}


/* =========================================================
   Fondo scuro (video o immagine con overlay sulla sezione)
   Leggibilita affidata a un velo sfumato e alla palette
   invertita, non a ombre o contorni.
   ========================================================= */

.ifm--dark{--if-lk:.34;--if-shade:.16;}

/* velo: due macchie sfumate sotto testata e callout, senza bordi percepibili */
.ifm__veil{position:absolute;inset:-10% -8%;z-index:1;pointer-events:none;
	background:
		radial-gradient(62% 55% at 16% 20%, rgba(24,40,33,var(--if-veil)) 0%, rgba(24,40,33,0) 72%),
		radial-gradient(52% 46% at 10% 74%, rgba(24,40,33,calc(var(--if-veil) * .85)) 0%, rgba(24,40,33,0) 74%),
		linear-gradient(180deg, rgba(24,40,33,calc(var(--if-veil) * .35)) 0%, rgba(24,40,33,0) 34%);}

.ifm--dark .ifm__name{color:var(--pietra,#F5F2EC);}
.ifm--dark .ifm__eyebrow{color:rgba(245,242,236,.78);}
/* su scuro le chiavi salgono di opacita: la gerarchia resta affidata
   al contrasto fra serif e mono, non a un grigio che il video mangia */
.ifm--dark .ifm__lab{color:rgba(245,242,236,.88);}
.ifm--dark .ifm__v-formato,
.ifm--dark .ifm__v-utilizzo,
.ifm--dark .ifm__v-pezzatura{color:var(--pietra,#F5F2EC);}
.ifm--dark .ifm__index{color:rgba(245,242,236,.72);}
.ifm--dark .ifm__cur{color:var(--pietra,#F5F2EC);}
.ifm--dark .ifm__nav.ifm__nav.ifm__nav{color:var(--pietra,#F5F2EC) !important;opacity:.78 !important;}
.ifm--dark .ifm__chev.ifm__chev.ifm__chev{stroke:var(--pietra,#F5F2EC) !important;}
.ifm--dark .ifm__nav.ifm__nav.ifm__nav:hover{opacity:1 !important;}
.ifm--dark .ifm__nav:focus-visible{outline-color:var(--pietra,#F5F2EC);}
.ifm--dark .ifm__leader{stroke:rgba(245,242,236,var(--if-lk));}
.ifm--dark .ifm__stamp{color:rgba(245,242,236,.60);}
.ifm--dark .ifm__load{background:rgba(245,242,236,.18);}
.ifm--dark .ifm__load i{background:var(--pietra,#F5F2EC);}

/* su scuro l'ancoraggio diventa luce: l'ombra scura sparirebbe nel fondo */
.ifm--dark .ifm__shade{
	background:radial-gradient(50% 50% at 50% 50%,
		rgba(245,242,236,calc(var(--if-shade) * 1.4)) 0%,
		rgba(245,242,236,calc(var(--if-shade) * .5)) 46%,
		rgba(245,242,236,0) 74%);}