/* Base del design — variabili, reset, utility.
   Lo stile dei blocchi (colori, testi, spazi, bordi, layout) NON sta qui: è nelle opzioni dei widget e nel Kit globale.
   Qui restano solo le basi comuni e poche utility `lto-…` da inserire nel campo «Classi CSS» di un widget. */

/* Variabili: replicano i colori del Kit (servono alle utility e ai widget custom). Adattare ai colori del cliente. */
:root{
  --lto-gold:#c8a674;--lto-sand:#ede4d8;--lto-ink:#101820;--lto-paper:#f5f5f5;--lto-white:#ffffff;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.lto{background-color:var(--lto-white);color:var(--lto-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;margin:0;overflow-x:hidden}
img{max-width:100%;height:auto}
p{margin:0 0 1em}

/* Neutralizza i valori predefiniti di Elementor / Hello */
body.lto :where(.elementor-widget:not(:last-child)){margin-block-end:0}
body.lto .e-con{--gap:0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px}
body.lto .elementor-widget-container{min-width:0}
body.lto .site-main,body.lto #content,body.lto .page-content{margin:0;padding:0;max-width:none}
body.lto .page-header{display:none}
body.lto .elementor-widget-heading .elementor-heading-title{margin:0;font-optical-sizing:auto}
body.lto .elementor-widget-heading .elementor-heading-title a,body.lto .elementor-widget-text-editor a{color:inherit}
body.lto .elementor-widget-text-editor p:last-child{margin-bottom:0}
body.lto .elementor-widget-heading p.elementor-heading-title,body.lto .elementor-widget-heading span.elementor-heading-title,body.lto .elementor-widget-heading div.elementor-heading-title{text-transform:none}
/* Loop Grid: le schede riempiono l'altezza e non sforano la colonna */
body.lto .elementor-loop-container{align-items:stretch}
body.lto .e-loop-item{height:100%;min-width:0}
body.lto .e-loop-item>.e-con{height:100%}
/* Senza immagine in evidenza Elementor mostra un segnaposto grigio */
body.lto img[src*="elementor/assets/images/placeholder"]{display:none}
/* Se un contenitore non deve poter scorrere da solo (es. mappe con tooltip) usare overflow:clip invece di hidden */

/* ---------- Utility (lto-…) ---------- */
/* Etichetta di sezione con trattino davanti: classe sul widget Editor di testo */
body.lto .lto-eyebrow{display:flex;align-items:center;gap:.6em}
body.lto .lto-eyebrow::before{content:"";width:18px;height:1.5px;background:currentColor;flex:none}
body.lto .lto-eyebrow p{margin:0}
/* Link con sottolineatura che si disegna al passaggio del mouse: classe sul widget Pulsante */
body.lto .lto-link .elementor-button{background-image:linear-gradient(var(--lto-gold),var(--lto-gold));background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;padding-bottom:2px;transition:background-size .3s ease}
body.lto .lto-link .elementor-button:hover{background-size:100% 2px}
/* Spinge un elemento in fondo a una card (colonna flex) */
body.lto .lto-push{margin-top:auto}
/* Modulo in riga (campo + pulsante, a capo sotto i 480px): classe sul widget Form */
body.lto .lto-inline-form .elementor-form-fields-wrapper{flex-wrap:nowrap;align-items:stretch;margin:0;gap:10px}
body.lto .lto-inline-form .elementor-field-group{padding:0}
body.lto .lto-inline-form .elementor-field-type-email{flex:1;min-width:0;width:auto}
body.lto .lto-inline-form .elementor-field-type-submit{width:auto;flex:none}
body.lto .lto-inline-form .elementor-button{height:100%}
@media(max-width:480px){body.lto .lto-inline-form .elementor-form-fields-wrapper{flex-wrap:wrap}body.lto .lto-inline-form .elementor-field-type-submit{width:100%}}
/* Aggiungere qui SOLO utility ripetute in più punti; i dettagli unici vanno nel «CSS personalizzato» dell'elemento. */
/* Parola in evidenza dentro un testo (oro, grassetto, un po' più grande): <strong class="lto-gold"> nel widget Editor di testo */
body.lto .lto-gold{color:var(--lto-gold);font-weight:700;font-size:1.09em}

/* ---------- Animazioni (GSAP, assets/js/anim.js) ----------
   Hero: testi e foto di sfondo nascosti finché GSAP non li anima (classe aggiunta in <head>, tolta dallo script o dopo 3 s): niente lampo. Mai nell'editor. */
html.lto-anim body:not(.elementor-editor-active) .lto-a-hero > *,
html.lto-anim body:not(.elementor-editor-active) .lto-a-hero > .e-con-inner > * { opacity: 0; }
html.lto-anim body:not(.elementor-editor-active) .lto-a-hero,
.lto-a-hero.lto-hero-zoom { background-image: none !important; }
/* la foto copiata dallo script sta su uno strato SOTTO l'overlay (::before) e sotto i testi */
.lto-a-hero.lto-hero-zoom { isolation: isolate; overflow: hidden; }
.lto-a-hero .lto-hero-bg { position: absolute; inset: 0; z-index: -1; will-change: transform, opacity; pointer-events: none; }

/* ---------- Header fisso e «torna su» ----------
   Header: fisso con l'opzione nativa (Avanzate → Effetti di movimento → Fisso); dopo 24 px di scorrimento Elementor aggiunge
   `elementor-sticky--effects`: qui solo un'ombra leggera. «Torna su»: compare in dissolvenza dopo 600 px (assets/js/lto-ui.js). */
.lto-hdr.elementor-sticky--effects { box-shadow: 0 2px 24px rgba(97, 80, 56, .08); transition: box-shadow .3s; }
.lto-totop { opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
body.lto-scrolled .lto-totop { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .lto-totop, .lto-hdr.elementor-sticky--effects { transition: none; } }

/* Loop Grid con l'ultima riga centrata (classe `lto-grid-center` sul widget): 3 colonne desktop, 2 tablet, 1 telefono, spazio 20 px.
   Elementor non ha l'opzione: la griglia diventa flex a capo. Le colonne qui devono seguire quelle impostate nel widget. */
.lto-grid-center .elementor-loop-container { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 20px; }
.lto-grid-center .elementor-loop-container > .e-loop-item { flex: 0 0 calc((100% - 40px) / 3); max-width: calc((100% - 40px) / 3); display: flex; height: auto; }
.lto-grid-center .e-loop-item > .e-con { flex: 1 1 auto; --height: auto; }   /* card della stessa altezza nella riga: card e contenitore senza altezza fissa, si allungano */
@media (max-width: 1024px) { .lto-grid-center .elementor-loop-container > .e-loop-item { flex-basis: calc((100% - 20px) / 2); max-width: calc((100% - 20px) / 2); } }
@media (max-width: 767px) { .lto-grid-center .elementor-loop-container > .e-loop-item { flex-basis: 100%; max-width: 100%; } }

/* Ancore: le sezioni con ID si fermano sotto l'header fisso (altezza misurata da lto-ui.js) */
body.lto [id].e-con { scroll-margin-top: calc(var(--lto-hdr-h, 96px) + 8px); }

/* Link riconoscibili nei testi legali e nella casella del consenso privacy del modulo */
.lto-legal .elementor-widget-text-editor a, .elementor-field-type-acceptance a { text-decoration: underline; text-underline-offset: 3px; }

/* `lto-center` su un contenitore: testi e pulsanti centrati anche dentro un blocco riutilizzabile allineato a sinistra
   (es. «Orders & Inquiries» nello Shop; in Contact e nelle schede resta a sinistra) */
.lto-center .elementor-widget-heading .elementor-heading-title, .lto-center .elementor-widget-text-editor { text-align: center; }
.lto-center .elementor-widget-button { align-self: center; text-align: center; }   /* «Allineamento: sinistra» del pulsante qui non vale */
.lto-center .elementor-widget-button .elementor-button-wrapper { display: flex; justify-content: center; }

/* `lto-fill` su un widget Immagine dentro una griglia: la foto riempie tutta l'altezza della cella e NON la decide
   (l'altezza viene dal testo accanto, con un minimo di --lto-fill-min). Su telefono resta l'altezza impostata nel widget. */
@media (min-width: 768px) {
	.lto-fill { position: relative; height: 100%; min-height: var(--lto-fill-min, min(34vw, 520px)); }
	.lto-fill > .elementor-widget-container { position: absolute; inset: 0; }
	.lto-fill img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
}