/* dark_theme */
/*     background-image: radial-gradient(at 50% 0%, #2c2c2c 0%, #0a0a0a 100%);
    background-attachment: fixed; */


:root.dark_theme {
  --body-background-color: #1c1c1c;
  --body-text-color: #6c6c6c;
  --border-color: rgb( 255 255 255 / 7% );
  /* ⚠️ Il fondo di una scheda: era scritto dentro `.card` e valeva solo per lo scuro —
     bianco al 5% su fondo bianco non si vede, e nel tema chiaro le schede sparivano.
     Ora e' un grigio PIENO: il bianco in trasparenza cambiava con cio' che stava sotto. */
  --panel-background-color: #272727;
  --accent-color: #ff5722;
  /* La prima riga di un `h1` e' piu' chiara del corpo: e' il titolo a portare la luce */
  --heading-color: #c4c4c4;
}

/* light_theme */
:root.light_theme {
  --body-background-color: white ;
  --body-text-color: #6c6c6c;
  --border-color: rgba(0, 0, 0, 0.1);
  --panel-background-color: #f6f6f6;
  --accent-color: #ff5722;
  --heading-color: var( --body-text-color );
}

/* html */
/* 1. Reset e Layout (Indipendenti dal tema) */
html {
    /* ⚠️ Il ripiego resta la pila di sistema: se Google non risponde la pagina si legge
       lo stesso, invece di restare senza carattere finche' il foglio non arriva. */
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

a
{
    text-decoration: none;
    color: inherit;
}

p
{
    margin: 0;
}

a.active
{
    font-weight: bold;
    color:var(--accent-color);
}

h1,h2,h3,h4,h5
{
  /*   padding: 0;

    margin-bottom: 12px; */
}


.hidden{ display:none !important; }



:root {
    /* Definiamo delle scale fluide */
    --font-size-h1: clamp(1.8rem, 2vw + 1rem, 2.5rem);
    --font-size-h2: clamp(1.5rem, 1.8vw + 0.5rem, 1.8rem);
    /* --font-size-p: clamp(1rem, 1vw + 0.5rem, 1.2rem); */
}

h1 { font-size: var(--font-size-h1); line-height: 1.2; }

/*
 * LE DUE RIGHE DI UN `h1` HANNO DUE MISURE. Prima le prendevano tutte e due dall'`h1`, quindi
 * erano identiche e la gerarchia fra titolo e sottotitolo la faceva il solo colore.
 *
 * ⚠️ Le classi le mette `h1.php`, e le regole sono legate all'`h1`: la stessa coppia
 * `line_1`/`line_2` la usa anche `h2`, che deve restare com'e'.
 */
h1 .line-1 { font-size: 45px; color: var( --heading-color ); }
h1 .line-2 { font-size: 30px; }
h2 { font-size: var(--font-size-h2);  color:#999999 }
p  { font-size: var(--font-size-p);  line-height: 1.4; text-align: inherit; }


img{
    border-radius:16px;
}

/* body */
body {
    margin: 0;
    padding: 0;
    font-size: 20px;
   /*  padding-top:60px; */

    background-color: var( --body-background-color );
    color: var( --body-text-color );

    display: flex;
    flex-direction: column;
    min-height: 100vh;

    text-align: center;
}

@media (max-width: 768px) {

  body {
    text-align: left;
  }
}

/* body-header */
   body>header {
            flex: 1 0 auto;
        text-align: center;
       
   }

/* body>header .content {
  display: flex;
  justify-content: space-between;

  align-items: center;


  padding: 0 20px;

  height: 60px;
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  z-index: 1000;
  background-color: var(--body-background-color);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
} */

body>header .content {
display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
}



body>header nav ul {
  display: flex;
  list-style: none;
  gap: 0;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
}

body>header nav li {
  border-left: 1px solid var(--border-color);
  padding: 10px 20px;
}

body>header nav li:first-child {
  border-left: unset;
}


.material-symbols-outlined.main-menu-button {
  display: none;
  cursor: pointer;
}

/*
 * ⛔ `~` E NON `+`: il `+` vuole il fratello IMMEDIATO, e fra il bottone e il `nav` ora c'e'
 * la riga delle lingue — spostata li' fuori perche' dentro il `nav` se ne andava con la barra
 * a scomparsa. Da quel momento la regola non ha piu' agganciato niente e sul telefono il
 * menu non si apriva piu': nessun errore, solo un bottone che non fa niente.
 */
.main-menu-button:hover ~ nav.main-menu {
  right: 0;
}

/*
 * ⚠️ UNA RIGA FLEX, e lo spazio fra « EN », « | » e « IT » lo da' il `gap`: scritto nel
 * markup sarebbe uno spazio che va a capo dove non deve.
 *
 * ⛔ Non la classe `.flex-row`: quella porta `width: 100%` e `justify-content: space-between`,
 * cioe' spingerebbe EN a sinistra e IT a destra su tutta la larghezza della testata. Serve
 * una riga che sia larga quanto il suo contenuto, ed e' il caso opposto.
 */
.language-menu {
    position: absolute;

    /* ⚠️ 20px e non 0: e' il RIENTRO DI `.content` ( 1280 dentro 1320 ), quindi la riga
       finisce esattamente sul bordo destro del menu che le sta sotto. A 0 sporgerebbe di
       20px oltre il menu e oltre tutto il resto della pagina, e sembrerebbe un difetto. */
    right: 20px;
    top: 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.language-menu .separator { color: var( --border-color ); }

   


@media (max-width: 768px) {

  nav.main-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 200px;
    height: 100vh;
    background: var(--body-background-color);
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
   /*  padding: 20px 0; */
    filter: drop-shadow( 2px 4px 6px black );
  }


  .material-symbols-outlined.main-menu-button {
    display: unset;

  }


  nav.main-menu:hover {
    right: 0;
  }


  /* Trasforma la lista in verticale */
  nav.main-menu ul {
    flex-direction: column;
    align-items: flex-start;
  }

  nav.main-menu ul li {
    margin: 10px 0;

    /*
     * ⛔ VIA IL FILETTO A SINISTRA. In orizzontale separa una voce dall'altra ed e' il motivo
     * per cui la prima non ce l'ha; in verticale non separa piu' niente — e' una stanghetta
     * accanto al testo — e visto che la prima ne e' priva, « Home » restava disallineata di
     * quel pixel rispetto a tutte le altre.
     */
    border-left: 0;
  }

  .main-menu-button {
    display: unset;
  }

}

/* body-main */
body>main {
   flex: 1 0 auto;
   position: relative;
   
   background-color: var(--body-background-color);
}

/* body-footer */
body>footer {
    text-align: left;

    /* ⛔ NIENTE FONDO: il piede sta sul fondo della pagina come tutto il resto, e a
       staccarlo basta un filetto. Prima era una fascia scura CABLATA, quindi nel tema
       chiaro diventava una macchia nera con sopra il testo nero del corpo. Senza fondo
       non serve nemmeno dirgli di che colore scrivere: eredita, e vale in tutti e due
       i temi. */
    border-top: 1px solid var( --border-color );
}

body>footer>.content{
    padding:40px;
}

/*
 * LA PRIMA RIGA DELLA TERZA COLONNA DEL PIEDE: chiara come un titolo e un po' piu' grande del
 * corpo, che qui e' 20px.
 *
 * ⚠️ Il colore viene dalla PALETTE ( `--heading-color`, lo stesso dell'`h1` ) e non e' un
 * bianco scritto: nel tema chiaro quel valore e' il testo del corpo, quindi la riga si
 * ingrandisce e basta invece di sparire sul fondo bianco.
 *
 * ⚠️ Si aggancia a `data-prop-name` e non a una classe nuova: il template e' condiviso, e un
 * attributo che c'e' gia' evita di toccarlo. ⛔ Ma `themes/default` lo condividono PIU' SITI:
 * ogni riga di questo foglio si vede su tutti quelli che non hanno un tema loro.
 */
body>footer [data-prop-name="text_1"] { font-size: 24px; color: var( --heading-color ); }

@media (max-width: 768px) {

  body>footer>.content {
    
    display: block;
    
  }
}

/* max-w-1320 */
.max-w-1320 {
    width: 100%;           /* Occupa tutto lo spazio sui dispositivi piccoli */
    max-width: 1320px;    /* Si ferma a questa larghezza sui monitor grandi */
    margin: 0 auto;       /* Centra il contenitore nella pagina */
    padding: 0 20px;      /* Evita che il contenuto tocchi i bordi su mobile */
}

/* property-input */
.property { margin-bottom: 15px; }

.property input, .property textarea, .property select {
    width: 100%;
    padding: 8px; border: 1px solid var(--border-color); border-radius: 4px;
    background: transparent;
    color:inherit;
}

.property textarea {
    resize: vertical;
    font-family: inherit;
}

/* admin.css */
.property label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    text-transform: capitalize; /* Trasforma 'title' in 'Title' a video */
}

/* image */
img.fit-in-parent
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* card */
 .card { background: var( --panel-background-color ); padding: 30px; border-radius: 20px; text-align: left; }

/*
 * IL PREZZO DI UN PIANO, dentro il testo della scheda.
 *
 * ⚠️ Sta in `itemDescription` e non in una property sua: le schede dei piani sono tre, e un
 * campo nuovo nel modulo `card-image` sarebbe rimasto vuoto sulle altre trentatre'.
 *
 * ⚠️ E' un `div` dentro il testo modificabile, che e' l'unica forma che regge: il parser
 * tiene un blocco DENTRO l'elemento con `data-prop-name`, mentre da un `<p>` uscirebbe.
 */
.card .price { font-size: 28px; font-weight: 800; line-height: 1.2;
               color: var( --heading-color ); margin-bottom: 16px; }

/*
 * I TITOLETTI DENTRO UNA SCHEDA, quando le cose da elencare sono di tipi diversi.
 *
 * ⚠️ Stanno anche loro dentro `itemDescription`, come il prezzo: sono `div`, quindi il parser
 * li tiene dentro l'elemento modificabile e vanno a capo da soli.
 *
 * ⚠️ Il primo non ha il margine sopra: segue il prezzo, che il suo stacco ce l'ha gia'.
 */
.card .heading             { font-weight: 800; color: var( --heading-color );
                             margin: 18px 0 4px 0; }
.card .price + .heading    { margin-top: 0; }

/*
 * ⚠️ LA RIGA DEL TITOLO HA UN'ALTEZZA FISSA, ed e' quello che tiene le immagini di una fila
 * alla stessa quota: un titolo su una riga e uno su due farebbero partire le figure da due
 * altezze diverse, e la fila si vedrebbe storta.
 *
 * ⚠️ `height` e non `min-height`, e la differenza conta: `min-height` lascerebbe crescere la
 * riga con un titolo lungo, e allora l'allineamento — che e' tutto il motivo di questa regola
 * — salterebbe proprio nel caso in cui serve. Il prezzo e' che un titolo di tre righe esce
 * dalla sua scatola invece di spingere in giu' il resto.
 *
 * ⚠️ Il centraggio verticale ce l'ha gia' `.flex-row` ( `align-items: center` ): qui basta
 * l'altezza.
 */
 .card .title { height: 60px; }



/*
 * ⛔ UN RAPPORTO SOLO PER TUTTE, ed e' l'unica cosa che tiene le schede di una fila alte
 * uguali. Le fotografie di un progetto hanno rapporti diversi — misurate: 2,13 / 1,54 / 1,71
 * — e senza un rapporto fissato quella differenza diventa la differenza di altezza fra le
 * schede. E' il `ratio-3_2` del sito di riferimento.
 *
 * ⚠️ Vale anche ora che l'immagine sta SOTTO IL TITOLO e non piu' in fondo: cio' che tiene
 * allineato il testo di schede accanto e' che la figura sopra di esso sia sempre alta uguale.
 *
 * ⚠️ `width: 100%` e non `max-width`: senza una larghezza DEFINITA `aspect-ratio` non ha da
 * cosa calcolare l'altezza e non fa niente.
 *
 * ⚠️ `object-fit: cover` ritaglia invece di deformare: una schermata schiacciata si vede, e
 * si vede peggio di un bordo tagliato.
 *
 * ⛔ Tolto `max-height: 230px`: con un rapporto fissato l'altezza e' gia' decisa dalla
 * larghezza, e un tetto sopra la rimetterebbe in discussione proprio nelle schede larghe —
 * cioe' sul telefono, dove la fila diventa una colonna.
 */
 .card img{
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    border-radius: 10px;
    /* 40 sotto e 20 sopra: la figura sta piu' vicina al suo titolo che al testo che segue */
    margin: 20px auto 40px auto;

    /* ⚠️ La stessa ombra dell'immagine grande dell'intro, che sta sul NODO
       ( `filter: drop-shadow(2px 4px 6px black)` ). Qui e' nel foglio e non sul nodo perche'
       le schede sono trentatre' e l'ombra e' dello STILE, non di una di loro. */
    filter: drop-shadow( 2px 4px 6px black );
 }
    

/* button */
.button{
   
   /* ⚠️ Era `#3498dc`, che per giunta non e' nemmeno l'accento del tema ( `#3498db` ):
      un colore cablato e sbagliato di una lettera. */
   border: 2px solid var( --accent-color );
    cursor: pointer;
    padding: 16px 50px;
    border-radius: 30px;
    font-weight: 800;
    display: inline-block;
 }

/* grid-auto */
.grid-auto {
  display: grid;
  gap: 16px;
  padding: 20px;

  /* 1. Valore di default se non metti nulla nell'HTML */
  --cols-desktop: 4; 
  
  /* 2. Di base (Mobile) usiamo 1 colonna */
  --cols: 1;

  /* 3. La magia: usiamo il valore calcolato */
  grid-template-columns: repeat(var(--cols), 1fr);
}


/*  .grid-auto img
  {
      max-width: 400px;
      max-height: 400px;
  }
  */

@media (min-width: 600px) {
  .grid-auto {
    /* Su Tablet passiamo a 2 */
    --cols: 2;
  }
}

@media (min-width: 1000px) {
  .grid-auto {
    /* Su Desktop usiamo il valore "scelto" (quello dell'HTML o il default 4) */
    --cols: var(--cols-desktop);
  }
}

/*
 * ⛔ UN TESTO MODIFICABILE E' SEMPRE UN `div`, e queste due regole sono cio' che serve
 * perche' il passaggio da `<p>` e da `<span>` non si veda.
 *
 * ⚠️ `.text-block` porta le misure che il `<p>` aveva QUI — `line-height: 1.4`, margine
 * zero — non quelle di un altro tema: in `chplus` lo stesso nome vale 1.725rem, perche'
 * li' il paragrafo era un'altra cosa.
 */
.text-block { line-height: 1.4; }

/*
 * ⚠️ DUE TESTI SULLA STESSA RIGA VOGLIONO UNA RIGA FLEX. Due `div` da soli si impilano, e
 * uno spazio scritto nel markup finirebbe DENTRO al testo salvato: lo spazio lo da' il
 * `gap`. `.inline` serve dove la riga sta accanto a qualcos'altro sulla stessa linea —
 * il marchio della testata.
 */
.editable-row        { display: flex; align-items: baseline; gap: 6px; }
.editable-row.inline { display: inline-flex; }

/*
 * IL MODULO `menu`. Dentro la testata lo veste gia' `body>header nav ul`; fuori — dentro
 * `main`, per le sottopagine di una sezione — non lo vestiva NIENTE, e usciva come un elenco
 * puntato incolonnato. Qui c'e' il minimo perche' si regga da solo dovunque lo si metta.
 */
.menu ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

/* ⚠️ Il peso sta sul `li`, non sull'`a`: l'anchor lo eredita, e cosi' il `bold` di
   `a.active` continua a vincere sulla voce corrente. Scritto sull'`a` avrebbe vinto lui,
   e la voce attiva avrebbe smesso di distinguersi. */
.menu li { padding: 10px 20px; border-left: 1px solid var( --border-color ); font-weight: 200; font-size: 18px; }
/*
 * ⛔ SOLO IL BORDO, NON IL PADDING. Il `padding-left: 0` toglieva il rientro alla prima voce:
 * in orizzontale non si nota, ma sul telefono la lista diventa VERTICALE e « Home » partiva
 * 20px piu' a sinistra di tutte le altre. La regola della testata che c'era gia'
 * ( `body>header nav li:first-child` ) toglie infatti il solo `border-left`.
 */
.menu li:first-child { border-left: 0; }

/*
 * IL MARCHIO, ora che e' un nodo `image` dentro `.logo`.
 *
 * ⚠️ Il modulo `image` veste la sua immagine con `fit-in-parent` — `width: 100%; height: 100%;
 * object-fit: cover` — che per una fotografia dentro una scheda e' giusto e per un marchio no:
 * lo stirerebbe a tutta la colonna. Qui la rimettiamo alla sua misura naturale.
 *
 * ⚠️ E niente angoli stondati: `img { border-radius: 16px }` vale per le fotografie del sito,
 * non per un segno su fondo trasparente.
 *
 * ⚠️ Il `-20px` sotto era un `style` scritto sull'`<img>` della testata: ora l'immagine e' un
 * nodo e quell'attributo non c'e' piu', quindi la misura sta qui.
 */
.logo .xnode img {
    width: 100%;
    height: auto;
    object-fit: initial;
    border-radius: 0;
}

/*
 * ⛔ IL MARCHIO HA UNA MISURA SUA, e non e' pignoleria: `.logo` e' un elemento flex, quindi
 * era largo quanto il suo contenuto piu' largo — cioe' quanto la SCRITTA sotto — e il segno
 * si adeguava. Misurato sulle due lingue della stessa pagina: 154px con la didascalia
 * inglese e 175 con quella italiana, il 14% di differenza.
 * Un marchio che cambia taglia con la lunghezza della didascalia non e' un marchio.
 *
 * ⚠️ Una misura sola per lato: l'altezza la da' il rapporto del file ( il `viewBox` e'
 * quadrato ), quindi non c'e' una seconda misura che un giorno diverge.
 */
body > header .logo .xnode { width: 158px; margin-bottom: -20px; }
body > footer .logo .xnode { width: 141px; }

/*
 * IL TESTO LEGALE — privacy e condizioni, presi dai documenti dell'applicazione.
 *
 * ⚠️ Una classe sua e non il modulo `description`: quel modulo veste anche gli intro delle
 * pagine, che sono centrati e non hanno ne' tabelle ne' sottotitoli. Qui serve l'opposto,
 * a partire dall'allineamento — il corpo del sito e' centrato.
 *
 * ⚠️ Le misure sono quelle dei file dell'app ( `privacy-it.html` ), cosi' i due documenti
 * si leggono uguali; i COLORI no, che li' erano cablati e qui vengono dalla palette.
 */
.legal-text            { text-align: left; }
.legal-text .meta      { opacity: .6; font-size: .875rem; margin-bottom: 2rem; }
.legal-text h2         { font-size: 1.1rem; margin-top: 2.2rem; color: var( --heading-color ); }
.legal-text p          { margin: 0 0 1rem 0; }
.legal-text ul         { margin: 0 0 1rem 0; padding-left: 1.4rem; }
.legal-text li         { margin-bottom: .4rem; }
.legal-text a          { color: var( --accent-color ); }
.legal-text code       { font-size: .95em; }

.legal-text table      { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .95rem; }
.legal-text th,
.legal-text td         { border: 1px solid var( --border-color ); padding: .5rem .6rem;
                         text-align: left; vertical-align: top; }
/* La prima colonna e' l'etichetta della riga: tenerla stretta lascia il testo alla seconda */
.legal-text th         { width: 30%; font-weight: 600; }

/* Il riquadro degli avvisi, che nei file dell'app era un bordo azzurro cablato */
.legal-text .box       { border-left: 3px solid var( --accent-color );
                         padding: .1rem 0 .1rem 1rem; margin: 1.2rem 0; }

/* text-in-columns */
.text-in-columns {
    /* 1. Usiamo la variabile per determinare il numero di colonne */
    column-count: var(--cols);
    
    /* 2. Definiamo uno spazio tra le colonne per leggibilità */
    column-gap: 40px; 
    
    /* 3. Evitiamo che il testo sia troppo attaccato ai bordi */
    //text-align: justify; 
    
    /* Valore di default per la variabile personalizzata */
    --cols-desktop: 4; 
    
    /* Di base (Mobile, sotto i 600px) è sempre 1 */
    --cols: 1;
}

/* Questa scatta tra 600px e 999px */
@media (min-width: 600px) and (max-width: 999px) {
  .text-in-columns {
    /* Sceglie il valore minore tra 2 e il massimo del desktop.
       Se --cols-desktop è 1, min(2, 1) restituirà 1.
       Se --cols-desktop è 4, min(2, 4) restituirà 2. */
    --cols: min(2, var(--cols-desktop));
  }
}

/* Questa scatta dai 1000px in su */
@media (min-width: 1000px) {
  .text-in-columns {
    --cols: var(--cols-desktop);
  }
}

/* title-subtitle */
/* .title-subtitle {
  text-align: left;
  display: block;
  padding-bottom: 16px;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--border-color);
}

@media (min-width: 600px) {
  .title-subtitle {
     display: flex;
  }
}

@media (min-width: 1000px) {
  .title-subtitle {
      display: flex;
  }
} */

/* image-zoomable */
/* .image-gallery img {
   
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.image-gallery img:hover {
    transform: scale(1.10); 
    cursor: zoom-in;
} */



/*
 * ⭐ `zoomable` E' L'UNICA COSA CHE DICE « questa immagine si apre ». La mettono i template
 * che emettono `showImageFullScreen` — oggi `card-image` e `image` — e da li' viene il
 * cursore. Prima il cursore stava solo su `.zoomable img`, cioe' sulla classe messa su un
 * CONTENITORE, e nessuna immagine cliccabile del sito la portava: la lente non si vedeva da
 * nessuna parte.
 *
 * ⚠️ Due forme, e servono tutte e due: `img.zoomable` e' l'immagine marcata direttamente,
 * `.zoomable img` e' la marcatura sul contenitore, che dei documenti usano gia': tutte e due
 * le strade devono reggere.
 */
img.zoomable,
.zoomable img { cursor: zoom-in; }

/*
 * ⚠️ L'INGRANDIMENTO AL PASSAGGIO resta sul solo CONTENITORE marcato, e non e' una svista:
 * darlo anche alle immagini delle schede vorrebbe dire farle crescere tutte al passaggio del
 * mouse, che e' un cambio d'aspetto, non un cursore.
 */
.zoomable img {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.zoomable img:hover
{
    transform: scale(1.10); 
}

/*
 * ⛔ DENTRO L'EDITOR NON SI APRE NIENTE: `utils.js` ferma il click sulle immagini di proposito,
 * per non disturbare la modifica di `src`. La lente prometterebbe una cosa che non succede.
 */
.editing img.zoomable,
.editing .zoomable img { cursor: default; }

/* full-screen-overlay */
.full-screen-overlay
{
   
    display: flex;
    position: fixed;      /* Fondamentale: rimane sopra lo scroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.92); /* Quasi nero */
    z-index: 99999;       /* Sopra a tutto il CMS */
    cursor: zoom-out;     /* Icona lente che rimpicciolisce */
    
    /* Centratura perfetta dell'immagine */
    justify-content: center;
    align-items: center;
    
    /* Effetto sfocato opzionale per il fondo */
    backdrop-filter: blur(8px);
}






.full-screen-overlay > img {
    /* Rimuovi width: 100% e height: 100% */
    max-width: 90%;
    max-height: 90%;
    width: auto;      /* Lascia che il browser calcoli la larghezza */
    height: auto;     /* Lascia che il browser calcoli l'altezza */
    object-fit: contain;
    filter: drop-shadow( 2px 4px 6px black );
    transition: transform 0.3s ease;
}



/* flex-row */
/* .flex-x
{
   display:flex; align-items:center; justify-content:space-between;
} */


.flex-row
{
     display:flex; align-items:center;  gap: 4px; flex-direction: row; width: 100%;
     justify-content: space-between;
}

.flex-row input
{
    width:100%;
    flex:1;
}

/* ⚠️ LE REGOLE DELL'EDITOR NON STANNO PIU' QUI. Selezione, testi modificabili e indicatori
   di rilascio erano copiati in OGNI tema — l'anteprima e' un iframe, dove `application.css`
   non arriva — e il tema che se li dimenticava aveva un editor che sembrava rotto: si clicca
   un nodo, nell'albero la selezione c'e' davvero, e nella pagina non succede niente. Ora
   sono in `res/css/inline-edit.css`, che `page-composer.php` inietta da se' con `?edit=1`.
   Qui va solo cio' che dipende dal markup di QUESTO tema, sotto `.editing`. */


/*
 * ============================================================================================
 * TREE-VIEW — l'albero delle categorie ( modulo `tree-view` )
 *
 * ⚠️ SOLO SELETTORI NUOVI, tutti sotto `.tree-view`: questo foglio lo condividono piu' siti,
 * e una regola che tocchi qualcosa di esistente si vedrebbe anche su chi non ha mai chiesto
 * un albero. Chi non usa il modulo non vede niente di tutto questo.
 *
 * ⚠️ I colori vengono dalla PALETTE, quindi la treeview funziona nei due temi senza una
 * seconda serie di regole.
 * ============================================================================================
 */
/*
 * ⚠️ `text-align: left` DICHIARATO, non ereditato: il tema centra il testo delle pagine, e un
 * albero che si centra non si legge — il rientro dei livelli e' cio' che dice la profondita',
 * e centrando lo si perde. Va sull'`ul` cosi' vale anche per gli annidati.
 */
.tree-view ul            { list-style: none; margin: 0; padding: 0; text-align: left; }

/* Il rientro dei livelli lo porta la lista annidata, non un padding per profondita' */
.tree-view ul ul         { margin-left: 10px; padding-left: 10px;
                           border-left: 1px solid var( --border-color ); }

.tree-view li            { margin: 0; }

.tree-view a,
.tree-view summary > span { display: block; padding: 6px 8px; border-radius: 6px;
                            text-decoration: none; color: var( --body-text-color );
                            font-size: 15px; line-height: 1.3; }

.tree-view a:hover       { background: var( --panel-background-color );
                           color: var( --heading-color ); }

/* La pagina che si sta guardando: e' l'unico posto dove serve l'accento */
.tree-view a.active      { color: var( --accent-color ); font-weight: 700; }

/*
 * ⚠️ Il triangolino e' quello NATIVO di `<summary>`, non un'icona: cosi' segue il verso di
 * lettura della lingua e non serve il font delle icone — che e' un sottoinsieme, e un nome
 * nuovo uscirebbe come parola.
 */
.tree-view summary       { display: flex; align-items: center; cursor: pointer;
                           list-style: none; gap: 4px; }

.tree-view summary::before { content: ""; flex: 0 0 auto; width: 0; height: 0;
                             border-left: 5px solid var( --body-text-color );
                             border-top: 4px solid transparent;
                             border-bottom: 4px solid transparent;
                             transition: transform .12s ease; }

.tree-view details[open] > summary::before { transform: rotate( 90deg ); }

/* ⚠️ Il marcatore di default di Safari non se ne va con `list-style` */
.tree-view summary::-webkit-details-marker { display: none; }

.tree-view summary > a,
.tree-view summary > span { flex: 1; font-weight: 600; color: var( --heading-color ); }

.tree-view li.leaf > a   { font-weight: 400; }

/*
 * PRODUCT-CARD — le caratteristiche di un prodotto ( modulo `product-card` ).
 * ⚠️ Solo selettori NUOVI, tutti sotto `.product-card`: questo foglio lo condividono piu'
 * siti, e chi non usa il modulo non vede niente di tutto questo.
 */
.product-card .product-code  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                               font-size: 12px; letter-spacing: .04em; opacity: .65;
                               margin-bottom: 12px; }

/* ⚠️ Due colonne con `dt` a larghezza fissa: le etichette si incolonnano da sole, senza
   una tabella e senza doverle misurare. */
.product-card .product-specs { display: grid; grid-template-columns: max-content 1fr;
                               gap: 4px 14px; margin: 0; font-size: 14px; line-height: 1.45; }

.product-card .product-specs dt { opacity: .6; }
.product-card .product-specs dd { margin: 0; }
.product-card .product-specs dd code { font-size: 12.5px; word-break: break-all; }


/* ─── banner dei cookie ─────────────────────────────────────────────────────
   Una fascia in basso, con i colori del sito. ⚠️ `:not([hidden])` sul `display`:
   scritto sul solo tag, `flex` vincerebbe sull'attributo `hidden` e il banner
   comparirebbe anche a chi ha gia' scelto. */

cookie-consent:not([hidden]) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    /* il contenuto sulla griglia del sito ( max-w-1320 ), la fascia larga quanto la finestra */
    padding: 18px max( 20px, calc( ( 100% - 1320px ) / 2 + 20px ) );
    background: var( --panel-background-color );
    border-top: 1px solid var( --border-color );
    color: var( --body-text-color );
    font-size: 0.875rem;
    line-height: 1.5rem;
}
.cookie-consent-text a { color: var( --heading-color ); text-decoration: underline; }
.cookie-consent-buttons { display: flex; gap: 10px; flex: 0 0 auto; }

/* ⚠️ I due bottoni sono IDENTICI: un « Rifiuta » meno visibile non e' una scelta libera */
.cookie-consent-buttons button {
    font: inherit;
    color: var( --heading-color );
    background: none;
    border: 1px solid var( --heading-color );
    border-radius: 6px;
    padding: 6px 18px;
    cursor: pointer;
}
.cookie-consent-buttons button:hover { background: var( --heading-color ); color: var( --panel-background-color ); }

@media ( max-width: 767px ) {
    cookie-consent:not([hidden]) { flex-direction: column; align-items: stretch; padding: 16px 20px; }
    .cookie-consent-buttons button { flex: 1; }
}