/* ==========================================================================
   Sezione libera (BloccoSezioneLibera + Elemento<Tipo>) - stile base per tutti i temi.
   Un tema lo adatta ridefinendo le variabili --sl-* (es. in .pagina-blocchi { ... })
   o sovrascrivendo i template in templates/blocchi/.
   Colori: --b-sfondo (sezione) e --el-colore / --el-su-colore (elemento) arrivano dall'admin.
   ========================================================================== */
.blocco--sezionelibera {
    --b-sfondo: #ffffff;
    --sl-max: 1200px;          /* larghezza massima "contenuta" */
    --sl-lato: 24px;           /* margine laterale */
    --sl-gap: 40px;            /* spazio tra colonne */
    --sl-el-gap: 16px;         /* spazio tra elementi */
    --sl-accento: #333333;     /* colore pulsanti se non scelto */
    --sl-testo: inherit;
    --sl-raggio: 10px;
    --sl-font-titoli: inherit;
    --sl-titolo-s: 20px; --sl-titolo-m: 26px; --sl-titolo-l: 34px; --sl-titolo-xl: 44px;
    --sl-testo-s: 13px; --sl-testo-m: 15px; --sl-testo-l: 17px; --sl-testo-xl: 20px;
    --sl-sp-s: 16px; --sl-sp-m: 32px; --sl-sp-l: 56px; --sl-sp-xl: 88px;
    background: var(--b-sfondo);
}

/* sezione e colonne */
.sl { padding: var(--sl-spazio, 80px) 0; }
.sl--spazio-s { --sl-spazio: 24px; }
.sl--spazio-m { --sl-spazio: 48px; }
.sl--spazio-l { --sl-spazio: 80px; }
.sl--spazio-xl { --sl-spazio: 120px; }
.sl__griglia {
    display: grid;
    grid-template-columns: var(--sl-colonne, 1fr 1fr);
    gap: var(--sl-gap);
    max-width: var(--sl-max);
    margin: 0 auto;
    padding: 0 var(--sl-lato);
}
.sl--piena .sl__griglia { max-width: none; padding: 0; }
/* larghezza del contenuto: stretta (testi da leggere), normale (--sl-max), larga, tutta la pagina (.sl--piena) */
.sl.sl--larghezza-stretta { --sl-max: 800px; }
.sl.sl--larghezza-larga { --sl-max: 1500px; }
.sl__col { display: flex; flex-direction: column; min-width: 0; }
.sl--v-alto .sl__col { justify-content: flex-start; }
.sl--v-centro .sl__col { justify-content: center; }
.sl--v-basso .sl__col { justify-content: flex-end; }

/* elementi: comuni */
.sl-el { margin: 0 0 var(--sl-el-gap); color: var(--el-colore, var(--sl-testo)); }
.sl-el:last-child { margin-bottom: 0; }
.sl-al--sx { text-align: left; }
.sl-al--centro { text-align: center; }
.sl-al--dx { text-align: right; }

/* Titolo */
.sl-el--titolo { font-family: var(--sl-font-titoli); font-weight: 400; line-height: 1.15; letter-spacing: .01em; color: var(--el-colore, inherit) !important; }
.sl-el--titolo.sl-dim--s { font-size: var(--sl-titolo-s); }
.sl-el--titolo.sl-dim--m { font-size: var(--sl-titolo-m); }
.sl-el--titolo.sl-dim--l { font-size: var(--sl-titolo-l); }
.sl-el--titolo.sl-dim--xl { font-size: var(--sl-titolo-xl); }

/* Testo */
.sl-el--testo { line-height: 1.6; }
.sl-el--testo.sl-dim--s { font-size: var(--sl-testo-s); }
.sl-el--testo.sl-dim--m { font-size: var(--sl-testo-m); }
.sl-el--testo.sl-dim--l { font-size: var(--sl-testo-l); }
.sl-el--testo.sl-dim--xl { font-size: var(--sl-testo-xl); }
.sl-el--testo p { margin: 0 0 .8em; color: inherit; font-size: inherit; }
.sl-el--testo p:last-child { margin-bottom: 0; }
.sl-el--testo a { color: inherit; text-decoration: underline; }

/* Immagine */
.sl-el--immagine { margin-left: 0; margin-right: 0; }
.sl-img { display: inline-block; vertical-align: top; overflow: hidden; }
.sl-img--w100 { width: 100%; }
.sl-img--w75 { width: 75%; }
.sl-img--w50 { width: 50%; }
.sl-img a { display: block; }
.sl-img img { display: block; width: 100%; height: auto; }
.sl-img--1-1 img, .sl-img--4-3 img, .sl-img--3-4 img, .sl-img--16-9 img { height: 100%; object-fit: cover; }
.sl-img--1-1 { aspect-ratio: 1 / 1; }
.sl-img--4-3 { aspect-ratio: 4 / 3; }
.sl-img--3-4 { aspect-ratio: 3 / 4; }
.sl-img--16-9 { aspect-ratio: 16 / 9; }
.sl-img--1-1 a, .sl-img--4-3 a, .sl-img--3-4 a, .sl-img--16-9 a { height: 100%; }
.sl-img--tondo { border-radius: var(--sl-raggio); }

/* Pulsante */
.sl-btn {
    display: inline-block;
    padding: .9em 1.8em;
    border: 1px solid var(--el-colore, var(--sl-accento));
    font-size: 13px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
    text-decoration: none;
    transition: background-color .25s ease, color .25s ease, opacity .25s ease;
}
.sl-el--pulsante.sl-dim--s .sl-btn { font-size: 11px; }
.sl-el--pulsante.sl-dim--l .sl-btn { font-size: 15px; }
.sl-btn--pieno { background: var(--el-colore, var(--sl-accento)); color: var(--el-su-colore, #fff) !important; }
.sl-btn--pieno:hover, .sl-btn--pieno:focus { opacity: .85; text-decoration: none; }
.sl-btn--contorno { background: transparent; color: var(--el-colore, var(--sl-accento)) !important; }
.sl-btn--contorno:hover, .sl-btn--contorno:focus { background: var(--el-colore, var(--sl-accento)); color: var(--el-su-colore, #fff) !important; text-decoration: none; }
.sl-btn--link { border: 0; padding-left: 0; padding-right: 0; background: none; color: var(--el-colore, var(--sl-accento)) !important; text-decoration: underline; }
.sl-btn--larga { display: block; text-align: center; }

/* Video (copertina + player al clic) */
.sl-video { position: relative; background: #000; overflow: hidden; aspect-ratio: 16 / 9; }
.sl-video--4-3 { aspect-ratio: 4 / 3; }
.sl-video--9-16 { aspect-ratio: 9 / 16; max-width: 420px; margin: 0 auto; }
.sl-video iframe, .sl-video__play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sl-video__play { padding: 0; background: #000; cursor: pointer; }
.sl-video__play img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9; transition: opacity .2s; }
.sl-video__play:hover img, .sl-video__play:focus img { opacity: 1; }
.sl-video__icona { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 12px; background: rgba(0,0,0,.7); }
.sl-video__icona:after { content: ''; position: absolute; left: 27px; top: 14px; border-left: 18px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.sl-video__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

/* Spaziatore */
.sl-el--spaziatore { margin: 0; }
.sl-sp--s { height: var(--sl-sp-s); }
.sl-sp--m { height: var(--sl-sp-m); }
.sl-sp--l { height: var(--sl-sp-l); }
.sl-sp--xl { height: var(--sl-sp-xl); }

/* Divisore */
.sl-hr { border: 0; border-top: 1px solid var(--el-colore, currentColor); opacity: .35; margin: .5em 0; display: inline-block; vertical-align: middle; }
.sl-el--divisore[style] .sl-hr { opacity: 1; }
.sl-hr--w100 { width: 100%; }
.sl-hr--w50 { width: 50%; }
.sl-hr--w20 { width: 20%; }

/* Telefono */
@media (max-width: 767px) {
    .sl { padding: calc(var(--sl-spazio, 80px) * .6) 0; }
    .sl__griglia { grid-template-columns: 1fr; gap: 24px; padding: 0 16px; }
    .sl--piena .sl__griglia { padding: 0; }
    .sl--mobile-inverti .sl__griglia { display: flex; flex-direction: column-reverse; }
    .sl-el--titolo.sl-dim--l { font-size: calc(var(--sl-titolo-l) * .82); }
    .sl-el--titolo.sl-dim--xl { font-size: calc(var(--sl-titolo-xl) * .72); }
    .sl-img--w75, .sl-img--w50 { width: 100%; }
    .sl-sp-tel--meta { height: calc(var(--sl-sp-m) / 2); }
    .sl-sp--s.sl-sp-tel--meta { height: calc(var(--sl-sp-s) / 2); }
    .sl-sp--l.sl-sp-tel--meta { height: calc(var(--sl-sp-l) / 2); }
    .sl-sp--xl.sl-sp-tel--meta { height: calc(var(--sl-sp-xl) / 2); }
    .sl-sp-tel--nascosto { display: none; }
}

/* Animazioni d'entrata: attive solo se lo script le ha accese (senza script tutto resta visibile) */
.sl-anim-on [data-sl-anim] { opacity: 0; transition: opacity .6s ease, transform .6s ease; }
.sl-anim-on [data-sl-anim="sali"] { transform: translateY(24px); }
.sl-anim-on [data-sl-anim="zoom"] { transform: scale(.95); }
.sl-anim-on [data-sl-anim].sl-in { opacity: 1; transform: none; }
/* "Riduci movimento" (es. Effetti di animazione disattivati in Windows): lo sceglie il seller per sezione.
   sl--rm-dissolvenza (predefinito): niente spostamenti, solo dissolvenza; sl--rm-completa: come per tutti;
   sl--rm-nessuna: elementi subito visibili. L'anteprima dell'admin puo' chiedere l'effetto completo. */
@media (prefers-reduced-motion: reduce) {
    .sl-anim-on:not(.sl-anim-completa) .sl--rm-dissolvenza [data-sl-anim] { transform: none !important; transition: opacity .5s ease; }
    .sl-anim-on:not(.sl-anim-completa) .sl--rm-nessuna [data-sl-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Segnaposto: solo nell'anteprima dell'admin (elementi o colonne ancora vuoti) */
.sl-segnaposto { border: 2px dashed rgba(0,0,0,.25); color: rgba(0,0,0,.45); font: 13px/1.4 Arial, sans-serif; padding: 14px; text-align: center; background: rgba(255,255,255,.4); }
.sl-segnaposto--col { min-height: 120px; display: flex; align-items: center; justify-content: center; }

/* ==========================================================================
   Blocco Prodotti (templates/blocchi/Prodotti.tpl.php): card del tema dentro una sezione
   ========================================================================== */
.blocco--prodotti { --b-sfondo: #ffffff; --b-titolo: #191919; background: var(--b-sfondo); padding: 48px 0; }
.blocco-prodotti__testa { max-width: var(--sl-max, 1200px); margin: 0 auto 24px; padding: 0 24px; text-align: center; }
.blocco-prodotti__titolo { margin: 0; font-weight: 400; color: var(--b-titolo) !important; }
.blocco-prodotti__sottotitolo { margin: 6px 0 0; opacity: .75; }
.blocco-prodotti__corpo { max-width: var(--sl-max, 1200px); margin: 0 auto; padding: 0 24px; }
.blocco-prodotti__griglia { margin-left: 0; margin-right: 0; }
.blocco-prodotti__piede { text-align: center; margin-top: 24px; }
/* carosello: le card del tema scorrono di lato (dito, trackpad, rotellina con Maiusc) */
.blocco-prodotti--carosello .blocco-prodotti__griglia {
    display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 8px;
}
.blocco-prodotti--carosello .blocco-prodotti__griglia::before,
.blocco-prodotti--carosello .blocco-prodotti__griglia::after { display: none; }
.blocco-prodotti--carosello .blocco-prodotti__griglia > * { flex: 0 0 25%; max-width: 25%; float: none; scroll-snap-align: start; }
@media (max-width: 991px) { .blocco-prodotti--carosello .blocco-prodotti__griglia > * { flex-basis: 40%; max-width: 40%; } }
@media (max-width: 767px) {
    .blocco--prodotti { padding: 32px 0; }
    .blocco-prodotti__corpo, .blocco-prodotti__testa { padding: 0 12px; }
    .blocco-prodotti--carosello .blocco-prodotti__griglia > * { flex-basis: 70%; max-width: 70%; }
}

/* ==========================================================================
   Apertura a tutta immagine (BloccoHeroSfondo) - stile base, i temi lo adattano
   ========================================================================== */
.blocco--herosfondo {
    --b-occhiello: #f1d9a6; --b-titolo: #ffffff; --b-testo: #ffffff; --b-btn-sfondo: #ffffff; --b-btn-testo: #191919; --b-velatura: #000000;
    position: relative; display: flex; overflow: hidden; color: var(--b-testo);
}
.blocco--herosfondo.blocco--scuro { --b-occhiello: #8b1a1a; --b-titolo: #191919; --b-testo: #333333; --b-btn-sfondo: #191919; --b-btn-testo: #ffffff; --b-velatura: #ffffff; }
.hs--alt-media { min-height: 420px; }
.hs--alt-alta { min-height: 560px; }
.hs--alt-schermo { min-height: 85vh; }
.hs__foto, .hs__foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hs__foto img { object-fit: cover; }
.hs__velo { position: absolute; inset: 0; background: var(--b-velatura); opacity: 0; }
.hs--vel-leggera .hs__velo { opacity: .2; }
.hs--vel-media .hs__velo { opacity: .38; }
.hs--vel-forte .hs__velo { opacity: .55; }
.hs__testo { box-sizing: border-box; position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: auto; padding: 60px 24px; display: flex; flex-direction: column; }
.hs--pos-centro .hs__testo { align-items: center; text-align: center; }
.hs--pos-sinistra .hs__testo { align-items: flex-start; text-align: left; }
.hs--pos-destra .hs__testo { align-items: flex-end; text-align: right; }
.hs__testo > * { max-width: 640px; }
.hs__occhiello { margin: 0 0 10px; font-size: 13px; letter-spacing: .25em; text-transform: uppercase; color: var(--b-occhiello); }
.blocco--herosfondo .hs__titolo { margin: 0 0 16px; font-size: 56px; line-height: 1.05; font-weight: 400; color: var(--b-titolo) !important; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.hs__descr { margin: 0 0 24px; font-size: 18px; line-height: 1.5; color: var(--b-testo); }
.hs__btn { display: inline-block; padding: 13px 28px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; background: var(--b-btn-sfondo); color: var(--b-btn-testo) !important; border: 1px solid var(--b-btn-sfondo); text-decoration: none; transition: background .2s, color .2s; }
.hs__btn:hover, .hs__btn:focus { background: transparent; color: var(--b-btn-sfondo) !important; text-decoration: none; }
@media (max-width: 767px) {
    .hs--alt-media { min-height: 340px; } .hs--alt-alta { min-height: 440px; } .hs--alt-schermo { min-height: 80vh; }
    .blocco--herosfondo .hs__titolo { font-size: 36px; }
    .hs__descr { font-size: 16px; }
    .hs--pos-sinistra .hs__testo, .hs--pos-destra .hs__testo { align-items: center; text-align: center; }
}

/* ==========================================================================
   Decorazione sopra il titolo (BloccoTipo::HtmlOrnamento)
   ========================================================================== */
.blocco-ornamento { display: block; margin: 0 0 12px; line-height: 0; text-align: center; }
.blocco-ornamento img { display: inline-block; width: auto; height: 36px; max-width: 160px; object-fit: contain; }

/* ==========================================================================
   Marche (BloccoMarche)
   ========================================================================== */
.blocco--marche {
    --b-sfondo: #ffffff; --b-titolo: #191919; --b-sottotitolo: #555555; --b-riquadri: #ffffff; --b-bordi: #e5e0d8; --b-btn-testo: #191919; --b-nomi: #191919;
    padding: 0 24px 56px 24px; background: var(--b-sfondo); text-align: center;
}
.blocco--marche.blocco--scuro { --b-sfondo: #1f3a2c; --b-titolo: #d9b46a; --b-sottotitolo: #e8e2d4; --b-riquadri: #ffffff; --b-bordi: #d9b46a; --b-btn-testo: #8b1a1a; }
.blocco--marche .bm__titolo { margin: 0 0 8px; font-size: 32px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--b-titolo) !important; }
.bm__sottotitolo { margin: 0 auto 28px; max-width: 700px; font-size: 16px; color: var(--b-sottotitolo); }
.bm__griglia { box-sizing: border-box; list-style: none; margin: 0 auto; padding: 0; max-width: 1200px; display: grid; grid-template-columns: repeat(var(--bm-col, 5), minmax(0, 1fr)); gap: 12px; }
.bm__griglia li { list-style: none; margin: 0; }
.bm__voce { box-sizing: border-box; display: flex; align-items: center; justify-content: center; height: 100%; min-height: 84px; padding: 14px; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.bm--riquadri .bm__voce, .bm--nomi .bm__voce { background: var(--b-riquadri); border: 1px solid var(--b-bordi); }
.bm__voce:hover, .bm__voce:focus { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); text-decoration: none; }
.bm__voce img { display: block; max-width: 100%; max-height: 56px; object-fit: contain; }
.bm--liberi .bm__voce img { filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.bm--liberi .bm__voce:hover img { filter: none; opacity: 1; }
.bm__nome { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--b-nomi, #191919); }
.bm--nomi .bm__voce { min-height: 56px; padding: 12px; }
.bm__tutti { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--b-btn-testo) !important; }
@media (max-width: 767px) {
    .bm__griglia { grid-template-columns: repeat(var(--bm-col-tel, 2), minmax(0, 1fr)); gap: 8px; }
    .bm__voce { min-height: 64px; padding: 10px; }
    .bm__voce img { max-height: 40px; }
    .blocco--marche .bm__titolo { font-size: 24px; }
}