/* =====================================================================
   LAB - FOGLIO DELLE TOPPE - ultimo della cascata su ?sago_t=1
   =====================================================================
   Caricato SOLO da ?sago_t=1 (elenco $sheets in
   sagomato-configuratore-standalone.php:114). Sulla pagina dei clienti e
   su ?sago_a=1 non arriva: qui dentro non si puo' rompere nulla di loro.

   A cosa serve: correggere in coda cio' che i fogli di zona non possono
   correggere in tempo. Ogni sezione qui e' un DEBITO, non una casa: la
   sua meta' e' il foglio di zona indicato in "DA PORTARE VIA".

   Come si legge una sezione:
     COSA    il difetto visibile che corregge
     PERCHE' la causa, non il sintomo
     CONTRO  chi vince la proprieta' se questa regola non c'e'
             (e' l'unica giustificazione ammessa per un !important)

   Regola della casa: due regole DI QUESTO FOGLIO non devono contendersi
   la stessa proprieta'. Se succede, una delle due va cancellata, non
   rafforzata. E' gia' costato tre giri a vuoto.

   Potatura del 16/08 (agent 'debito'): -18.278 byte e -81 !important,
   con le immagini della pagina identiche pixel per pixel a 390, 768,
   1024 e 1440 px. Attrezzi e prove in /root/backups/2026-08-16-debito/.

   Numerazione: i numeri hanno buchi (5, 6, 10, 11, 13 non ci sono piu')
   perche' sono citati per numero nei rapporti degli altri agent. Non
   rinumerare. Indice: 1-bis, 2, 3, 4, 7, 8, 9, 12, 14, 15, 16, 17.
   ===================================================================== */

/* =====================================================================
   1-bis. VIA "RICHIEDI PREVENTIVO PERSONALIZZATO"
   =====================================================================
   COSA    toglie il bottone "Richiedi preventivo personalizzato".
   PERCHE' decisione di prodotto, chiesta due volte. Era gia' stata presa
           su una famiglia di fogli che non e' piu' caricata, e il bottone
           e' tornato: per questo sta scritta qui e non li'.
   CONTRO  nessuno: nessun'altra regola dichiara display su quel nodo.
           L'!important e' quindi solo prudenziale.

   Perche' e' lecito nascondere un nodo preesistente, qui e solo qui: il
   bottone e' <button ... disabled>, gia' inerte e non raggiungibile da
   tastiera; nessuno script lo cerca; non e' un contenitore d'anteprima,
   quindi non tocca le soglie che standalone.js misura.
   Se venisse riattivato con un comportamento vero, questa regola va
   cancellata PRIMA di rimetterlo in pagina.
   --------------------------------------------------------------------- */

html[data-sago-a] main .sago-summary-column .sago-secondary-button{
  display:none !important;
}

/* =====================================================================
   2. GOMMAPIUMA NERA REALISTICA
   =====================================================================
   COSA    il blocchetto dello spessore era azzurro piatto e diventava blu
           pieno da selezionato. Ora e' gommapiuma nera opaca.
   PERCHE' non somigliava al materiale, e un materiale che cambia colore
           quando lo scegli e' una bugia visiva: la selezione la dicono
           gia' il filetto della scheda e la spunta.
   CONTRO  il fondo azzurro di standalone.css e la variante .is-selected,
           entrambe con !important: serve il mio per batterle.

   Le scelte, in breve: corpo #26282c -> #1b1d20 (il nero pieno legge come
   un buco); nessun riflesso speculare, altrimenti sembra plastica; pori a
   celle aperte con feTurbulence fuso in soft-light, che schiarisce e
   scurisce localmente lasciando intatto il tono medio - un motivo
   ripetuto si riconoscerebbe a occhio; taglio superiore piu' chiaro
   perche' le celle recise prendono luce; spigoli appena smussati.
   Nessuna richiesta di rete: il rumore e' un data: URI di 300 byte.
   --------------------------------------------------------------------- */

html[data-sago-a] .sago-main-column .sago-foam-block,
html[data-sago-a] .sago-main-column .sago-rubber-height-card.is-selected .sago-foam-block{
  border:1px solid #101214 !important;
  border-top-color:#41454b !important;
  border-radius:2px !important;
  background-color:#212327 !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23p)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.16) 0, rgba(255,255,255,.04) 2px, rgba(255,255,255,0) 6px),
    linear-gradient(180deg, #26282c 0, #1b1d20 100%) !important;
  background-size:96px 96px, 100% 100%, 100% 100% !important;
  background-repeat:repeat, no-repeat, no-repeat !important;
  background-blend-mode:soft-light, normal, normal !important;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.55) !important;
}

/* =====================================================================
   3. NOTA SULLA FORMULA DELLO SPESSORE
   =====================================================================
   Non e' CSS: l'altezza del blocchetto arriva da templates/standalone-t.php
   come stile in riga (--sago-foam-block-height). La formula precedente,
   6 + mm*0.84 con tetto a 52px, faceva uscire 15 e 55 mm in rapporto
   2,80x invece di 3,67x. Corretta nel template a mm*0.98, che
   nell'intervallo a listino non tocca ne' minimo ne' massimo: il rapporto
   fra due schede qualsiasi ora e' esattamente quello reale.
   Se un domani entrasse a listino uno spessore sopra i 57 mm, il tetto
   tornerebbe a comprimere e la formula andrebbe ripensata.
   ===================================================================== */

/* =====================================================================
   4. VIA LA DESCRIZIONE INUTILE SOTTO LE QUANTITA'
   =====================================================================
   COSA    nasconde i tre paragrafi sotto le quantita' (nodo .sgq-why,
           creato da standalone-a-quantity.js).
   PERCHE' spiegavano a parole cio' che i numeri gia' dicono. Un'interfaccia
           che ha bisogno di tre paragrafi per spiegare una fila di bottoni
           ha un problema nei bottoni, non nella spiegazione.
   CONTRO  nessuno: il nodo nasce a runtime e nessun foglio lo veste.
           Nascosto qui e non tolto dal JS perche' quel file e' condiviso
           con la variante A, che i paragrafi li vuole.
   --------------------------------------------------------------------- */

html[data-sago-a] .sago-main-column .sgq-why{
  display:none !important;
}

/* [Sezione rimossa il 16/08: "5. IL TASTO PER VEDERE IL 3D PIU' GRANDE" e' stata riassorbita in
   standalone-lab-stage.css, che la fa meglio e con i numeri giusti.
   Vedi il rapporto dell'agent 'preview tecnica definitiva'. ] */

/* =====================================================================
   7. SEI ICONE NEL RIEPILOGO
   =====================================================================
   COSA    da' un'icona a ognuna delle sei righe del riepilogo.
   PERCHE' le righe sono <dl><div><dt>Etichetta</dt><dd>valore</dd></div>:
           nel markup non c'e' nessun nodo per un'icona e il template non
           si tocca. Quindi l'icona nasce come ::before del <dt>, ritagliata
           con mask-image da un SVG in data: URI - nessun file, nessuna
           richiesta di rete, e il colore lo da' background-color, cosi'
           segue il tema.
   CONTRO  nessuno: prima di questa sezione nessuno disegnava quei ::before.

   Prezzo da pagare: le righe si distinguono solo per POSIZIONE
   (:nth-child sul <div>). Se cambia l'ordine delle voci, cambiano le
   icone. E' scritto qui perche' chi lo scoprira' sappia dove guardare.
   ATTENZIONE: questa sezione era presente DUE VOLTE, byte per byte
   identica; la copia in fondo e' stata tolta il 16/08.
   --------------------------------------------------------------------- */

html[data-sago-a] main .sago-summary-column .sago-summary-details dl > div > dt{
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
}

html[data-sago-a] main .sago-summary-column .sago-summary-details dl > div > dt::before{
  content:"";
  flex:0 0 17px;
  width:17px;
  height:17px;
  background-color:var(--ast-blue-text, #075fbd);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:17px 17px;
  mask-size:17px 17px;
  opacity:.85;
}

/* 1. File - un documento con l'angolo piegato */
html[data-sago-a] main .sago-summary-column .sago-summary-details dl > div:nth-child(1) > dt::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 3.6h7L18 8.4v12H6.2Z'/%3E%3Cpath d='M13.2 3.6v4.8H18'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.2 3.6h7L18 8.4v12H6.2Z'/%3E%3Cpath d='M13.2 3.6v4.8H18'/%3E%3C/svg%3E");
}

/* 2. Dimensioni - un righello con le tacche */
html[data-sago-a] main .sago-summary-column .sago-summary-details dl > div:nth-child(2) > dt::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='8.4' width='18.8' height='7.2' rx='1'/%3E%3Cpath d='M7 8.4v3M12 8.4v4.2M17 8.4v3'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.6' y='8.4' width='18.8' height='7.2' rx='1'/%3E%3Cpath d='M7 8.4v3M12 8.4v4.2M17 8.4v3'/%3E%3C/svg%3E");
}

/* 3. Materiale - strati sovrapposti, che e' cio' che una lastra e' */
html[data-sago-a] main .sago-summary-column .sago-summary-details dl > div:nth-child(3) > dt::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.6 8.4 4.2-8.4 4.2-8.4-4.2Z'/%3E%3Cpath d='m3.6 12 8.4 4.2 8.4-4.2'/%3E%3Cpath d='m3.6 16.2 8.4 4.2 8.4-4.2'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.6 8.4 4.2-8.4 4.2-8.4-4.2Z'/%3E%3Cpath d='m3.6 12 8.4 4.2 8.4-4.2'/%3E%3Cpath d='m3.6 16.2 8.4 4.2 8.4-4.2'/%3E%3C/svg%3E");
}

/* 4. Quantita' - quattro pezzi uguali */
html[data-sago-a] main .sago-summary-column .sago-summary-details dl > div:nth-child(4) > dt::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='3.6' width='7' height='7' rx='1'/%3E%3Crect x='13.4' y='3.6' width='7' height='7' rx='1'/%3E%3Crect x='3.6' y='13.4' width='7' height='7' rx='1'/%3E%3Crect x='13.4' y='13.4' width='7' height='7' rx='1'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.6' y='3.6' width='7' height='7' rx='1'/%3E%3Crect x='13.4' y='3.6' width='7' height='7' rx='1'/%3E%3Crect x='3.6' y='13.4' width='7' height='7' rx='1'/%3E%3Crect x='13.4' y='13.4' width='7' height='7' rx='1'/%3E%3C/svg%3E");
}

/* 5. Resa preliminare - i pezzi disposti dentro il foglio */
html[data-sago-a] main .sago-summary-column .sago-summary-details dl > div:nth-child(5) > dt::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='4.4' width='18.4' height='15.2' rx='1.2'/%3E%3Crect x='5.6' y='7.4' width='5' height='4'/%3E%3Crect x='13.4' y='7.4' width='5' height='4'/%3E%3Crect x='5.6' y='13.2' width='5' height='3.4'/%3E%3Crect x='13.4' y='13.2' width='5' height='3.4'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='4.4' width='18.4' height='15.2' rx='1.2'/%3E%3Crect x='5.6' y='7.4' width='5' height='4'/%3E%3Crect x='13.4' y='7.4' width='5' height='4'/%3E%3Crect x='5.6' y='13.2' width='5' height='3.4'/%3E%3Crect x='13.4' y='13.2' width='5' height='3.4'/%3E%3C/svg%3E");
}

/* 6. Lastre / fogli - due fogli sfalsati, uno dietro l'altro */
html[data-sago-a] main .sago-summary-column .sago-summary-details dl > div:nth-child(6) > dt::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.6 3.6h11.8v12.8H8.6Z'/%3E%3Cpath d='M15.4 20.4H3.6V7.6h2.4'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.6 3.6h11.8v12.8H8.6Z'/%3E%3Cpath d='M15.4 20.4H3.6V7.6h2.4'/%3E%3C/svg%3E");
}

/* Senza supporto alle maschere un quadrato pieno non e' un'icona, e' un
   errore: in quel caso non si disegna niente e resta la sola etichetta. */
@supports not ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  html[data-sago-a] main .sago-summary-column .sago-summary-details dl > div > dt::before{
    display:none;
  }
}

/* =====================================================================
   8. LA CAUSA VERA DELLE RASSICURAZIONI - trovata misurando la cascata
   =====================================================================
   Tre correzioni di fila non si sono viste. Non erano sbagliate: erano
   tutte sotto il punto in cui il danno veniva fatto.

     standalone.css:13  @media (max-width:1180px){
        .sago-summary-column{grid-column:1/-1; grid-template-columns:1fr 1fr}
     }

   Sotto i 1180px LA COLONNA INTERA diventa una griglia a DUE colonne, e i
   suoi pannelli - prezzo, riepilogo, nota di verifica, lista servizi - si
   distribuiscono a coppie. La lista finiva in una cella larga meta'
   colonna: circa 180px. Meno 26 dell'icona, meno rientri e spazi, restano
   ~110px per il testo. E' esattamente la larghezza che si vedeva.

   Ecco perche' agire sulla lista o sulla riga non poteva bastare: erano
   entrambe corrette, ma dentro un contenitore largo la meta' del previsto.
   E' anche il motivo per cui la nota di verifica sembrava "staccata": era
   nell'altra cella.

   La colonna torna un blocco: i pannelli si impilano sempre, a qualunque
   larghezza, ognuno largo quanto la colonna. Era il comportamento che tutti
   davano per scontato scrivendo i propri fogli.
   --------------------------------------------------------------------- */

html[data-sago-a] main .sago-configurator .sago-summary-column{
  display:block !important;
  grid-template-columns:none !important;
}

/* Impilati, i pannelli hanno bisogno del proprio stacco: senza la griglia
   non c'e' piu' un gap a separarli. */
html[data-sago-a] main .sago-configurator .sago-summary-column > .sago-panel,
html[data-sago-a] main .sago-configurator .sago-summary-column > .sago-summary-card{
  margin-bottom:14px !important;
}

/* La lista e' l'ultimo blocco: sotto non serve stacco, e la nota di
   verifica resta incollata alla lista perche' formano un elenco solo. */
html[data-sago-a] main .sago-configurator .sago-summary-column > .sago-verification-note{
  margin-bottom:0 !important;
}

html[data-sago-a] main .sago-configurator .sago-summary-column > .sago-service-list{
  margin-bottom:0 !important;
}

/* =====================================================================
   9. RASSICURAZIONI - QUINTO TENTATIVO, E CAMBIO DI METODO
   =====================================================================
   Quattro correzioni mirate non hanno funzionato. Ogni volta avevo
   individuato UNA regola avversaria e l'avevo battuta; ogni volta ne
   restava un'altra che non vedevo. Su questa pagina convivono
   standalone.css, sei fogli 'lab' e sedici blocchi inline con 964
   !important: cercare l'ultimo avversario a colpi di ipotesi non
   converge, e chi guarda la pagina intanto vede sempre lo stesso difetto.

   Percio' qui non si batte piu' nessuno: si azzera.
   'all:revert' riporta ogni proprieta' al valore del browser, cancellando
   in un colpo tutte le dichiarazioni d'autore su questi nodi - le mie
   comprese, e quelle che non sono riuscito a trovare. Da li' il blocco
   viene ricostruito da zero, dichiarando esplicitamente tutto cio' che
   conta. E' l'unico modo onesto di ottenere un risultato prevedibile
   senza poter vedere la pagina.

   NON tocco lo <span> dell'icona: le sue maschere SVG vengono dal foglio
   della colonna e funzionano. Azzerarlo cancellerebbe le icone.
   --------------------------------------------------------------------- */

html[data-sago-a] main .sago-summary-column .sago-verification-note,
html[data-sago-a] main .sago-summary-column .sago-verification-note > div,
html[data-sago-a] main .sago-summary-column .sago-verification-note strong,
html[data-sago-a] main .sago-summary-column .sago-verification-note p,
html[data-sago-a] main .sago-summary-column .sago-service-list,
html[data-sago-a] main .sago-summary-column .sago-service-list > div,
html[data-sago-a] main .sago-summary-column .sago-service-list > div > p,
html[data-sago-a] main .sago-summary-column .sago-service-list strong,
html[data-sago-a] main .sago-summary-column .sago-service-list small{
  all:revert !important;
}

/* --- Ricostruzione, da zero ------------------------------------------ */

/* Il contenitore delle tre voci: un elenco, non una griglia. */
html[data-sago-a] main .sago-summary-column .sago-service-list{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  border:1px solid var(--ast-line, #d7e3ee) !important;
  border-top:0 !important;
  border-radius:0 0 var(--ast-r, 4px) var(--ast-r, 4px) !important;
  background:var(--ast-paper, #ffffff) !important;
  box-sizing:border-box !important;
}

/* La prima voce sta in un blocco a parte nel markup: qui diventa la
   testa dello stesso elenco. */
html[data-sago-a] main .sago-summary-column .sago-verification-note{
  display:grid !important;
  grid-template-columns:34px minmax(0, 1fr) !important; /* era 29px: la
     colonna era piu'stretta dell&#39;icona che deve contenere (34px), quindi
     l&#39;icona sbordava di 5px e lo spazio verso il testo scendeva da 13 a 8.
     Misurato col browser, non stimato. */
  align-items:start !important;
  column-gap:13px !important;
  row-gap:0 !important;
  width:100% !important;
  margin:0 !important;
  padding:16px 15px !important;
  border:1px solid var(--ast-line, #d7e3ee) !important;
  border-radius:var(--ast-r, 4px) var(--ast-r, 4px) 0 0 !important;
  background:var(--ast-paper, #ffffff) !important;
  box-sizing:border-box !important;
}

/* Ogni voce: due colonne, icona e testo. Il testo prende tutto lo
   spazio che resta, e minmax(0,1fr) gli impedisce di sfondare quando
   contiene una parola lunga che non va a capo. */
html[data-sago-a] main .sago-summary-column .sago-service-list > div{
  display:grid !important;
  grid-template-columns:34px minmax(0, 1fr) !important; /* era 29px: la
     colonna era piu'stretta dell&#39;icona che deve contenere (34px), quindi
     l&#39;icona sbordava di 5px e lo spazio verso il testo scendeva da 13 a 8.
     Misurato col browser, non stimato. */
  align-items:start !important;
  column-gap:13px !important;
  row-gap:0 !important;
  width:100% !important;
  margin:0 !important;
  padding:16px 15px !important;
  border:0 !important;
  border-top:1px solid var(--ast-line, #d7e3ee) !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
}

/* La cella di testo. width:auto le lascia occupare la colonna intera. */
html[data-sago-a] main .sago-summary-column .sago-service-list > div > p,
html[data-sago-a] main .sago-summary-column .sago-verification-note > div{
  display:block !important;
  width:auto !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

html[data-sago-a] main .sago-summary-column .sago-service-list strong,
html[data-sago-a] main .sago-summary-column .sago-verification-note strong{
  display:block !important;
  margin:0 !important;
  font-size:13px !important;
  font-weight:700 !important;
  line-height:1.35 !important;
  color:var(--ast-navy, #0b2745) !important;
}

html[data-sago-a] main .sago-summary-column .sago-service-list small,
html[data-sago-a] main .sago-summary-column .sago-verification-note p{
  display:block !important;
  margin:3px 0 0 !important;
  font-size:12px !important;
  font-weight:400 !important;
  line-height:1.45 !important;
  color:var(--ast-copy, #62788e) !important;
}

/* [Sezione rimossa il 16/08: "10. IL BOTTONE DEL 3D NON DEVE COPRIRE LA NOTA" e' stata riassorbita in
   standalone-lab-stage.css, che la fa meglio e con i numeri giusti.
   Vedi il rapporto dell'agent 'preview tecnica definitiva'. ] */

/* =====================================================================
   12. VIA LA MACCHIA BLU NELL'ANGOLO DEI PANNELLI
   =====================================================================
   Il committente: "perche' c'e' quella macchia blu a destra?".
   Non e' un difetto: e' decorazione voluta da un mu-plugin, che appende a
   ogni scheda uno ::after posizionato a -28px dall'angolo, 82x82, con un
   gradiente radiale dell'accento all'8%. Lo stesso trucco in versione
   58x58 sta sulle schede di fiducia della testata.
   Nel linguaggio della pagina astucci aloni sfumati non esistono: la
   profondita' la fanno filetti azzurrati e fondi tenui, e un alone che
   sborda dall'angolo di un pannello squadrato legge come una sbavatura.
   Sono pseudo-elementi puramente decorativi: nessuno script li misura,
   quindi qui display:none non ha controindicazioni.
   La specificita' e' alzata a (0,3,2) perche' l'originale e' (0,2,1) con
   !important su ogni dichiarazione.
   --------------------------------------------------------------------- */

html[data-sago-a][data-sago-info-cards-v5="1"] body .sago-info-card-v5::after,
html[data-sago-a][data-sago-trust-v4="1"] body .sago-trust-card-v4::after{
  display:none !important;
  content:none !important;
  background:none !important;
}

/* =====================================================================
   14. LE QUATTRO RASSICURAZIONI - VARIANTE "A / ELENCO", SUI NODI VERI
   =====================================================================
   QUESTO E' IL BLOCCO CHE CONTA. Tutto cio' che sta piu' su e' scritto
   sui nodi del markup - .sago-service-list, il <p>, lo <strong>, lo
   <small> - e su questa pagina quei nodi A SCHERMO NON ESISTONO PIU':
   un mu-plugin li ricostruisce a runtime in una struttura sua.

     .sago-info-stack-v5     il contenitore
     .sago-info-card-v5      ogni voce
     .sago-info-icon-v5      il riquadro dell'icona (+ il suo <svg>)
     .sago-info-copy-v5      la colonna di testo
     .sago-info-title-v5     il titolo
     .sago-info-subtitle-v5  il sottotitolo

   E' il motivo per cui cinque correzioni di fila non si sono viste: erano
   giuste e arrivavano a destinazione, ma la destinazione era vuota.
   Le regole precedenti restano come rete: se un domani quel mu-plugin
   venisse tolto, la forma del markup e' comunque vestita.

   I difetti che il mu-plugin introduce, e che qui vengono annullati:
     min-height:65px !important  -> il testo delle voci lunghe TRABOCCA
                                    fuori dal riquadro. E' cio' che si
                                    vedeva: titoli tagliati a meta'.
     font-size:10.5px !important -> sotto il minimo di 12px del progetto.
     border-radius:15px          -> grammatica estranea: qui i raggi sono 4.
     ::after alone radiale       -> la "macchia blu", gia' tolta sopra.

   La specificita' e' (0,3,2) contro il loro (0,2,1): il loro !important
   non basta, serve anche il mio, e serve vincere di specificita'.
   --------------------------------------------------------------------- */

/* Ogni voce. NIENTE min-height: l'altezza la decide il testo, quindi non
   puo' traboccare per costruzione. align-items:start e non center perche'
   con due righe di sottotitolo l'icona deve restare in alto, allineata al
   titolo, non fluttuare a meta' del blocco. */
html[data-sago-a][data-sago-info-cards-v5="1"] body .sago-info-card-v5{
  position:relative !important;
  display:grid !important;
  grid-template-columns:34px minmax(0, 1fr) !important;
  align-items:start !important;
  column-gap:13px !important;
  row-gap:0 !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:15px !important;
  border:0 !important;
  box-sizing:border-box !important;
}

html[data-sago-a][data-sago-info-cards-v5="1"] body .sago-info-card-v5 + .sago-info-card-v5{
  border-top:1px solid var(--ast-line, #d7e3ee) !important;
}

/* Il riquadro dell'icona: 34px e raggio 6, non 39 e raggio 15. */
html[data-sago-a][data-sago-info-cards-v5="1"] body .sago-info-icon-v5{
  width:34px !important;
  height:34px !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:6px !important;
  display:grid !important;
  place-items:center !important;
  box-shadow:none !important;
}

html[data-sago-a][data-sago-info-cards-v5="1"] body .sago-info-icon-v5 svg{
  width:17px !important;
  height:17px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.7 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* La colonna di testo. display:block e non flex: il flex in colonna con
   align-items:flex-start faceva restringere i figli al proprio contenuto
   invece di dargli la larghezza della cella, ed e' una delle ragioni per
   cui il testo si strizzava. minmax(0,1fr) sulla cella piu' min-width:0
   qui impediscono a una parola lunga come "automaticamente" di allargare
   la colonna e sfondare il pannello. */
html[data-sago-a][data-sago-info-cards-v5="1"] body .sago-info-copy-v5{
  display:block !important;
  min-width:0 !important;
  max-width:none !important;
  width:auto !important;
  margin:0 !important;
  gap:0 !important;
}

/* Da 10,5px a 12,5px: sotto i 12 su questo progetto non si scende, ed era
   anche la ragione per cui il sottotitolo sembrava sbiadito. 4,57:1 su
   bianco, sopra AA. */
html[data-sago-a][data-sago-info-cards-v5="1"] body .sago-info-subtitle-v5{
  display:block !important;
  margin:3px 0 0 !important;
  font-family:var(--ast-sans, Inter, "Segoe UI", Arial, sans-serif) !important;
  font-size:12.5px !important;
  font-weight:400 !important;
  line-height:1.45 !important;
  color:var(--ast-copy, #62788e) !important;
  text-wrap:pretty;
}

/* =====================================================================
   15. RASSICURAZIONI - RIFINITURA SULLE REGOLE COMPLETE
   =====================================================================
   Letto finalmente il blocco inline per intero invece che troncato, sono
   emerse due cose che cambiano il lavoro in meglio:

   a) le schede portano gia' CLASSI SEMANTICHE - .is-technical, .is-delivery,
      .is-production, .is-support - ognuna con il proprio --sago-accent.
      Usare quelle invece di :nth-child e' piu' giusto: se un domani
      l'ordine delle voci cambia, il colore segue il significato invece di
      seguire la posizione. Le tinte restano le mie, gia' verificate per
      contrasto; quelle del mu-plugin (#c7830a, #16865e, #7257d9) non le
      ho misurate e non le adotto alla cieca.

   b) restavano addosso alle schede una sfumatura di fondo in diagonale,
      un'ombra da 20px, un raggio da 15px, un sollevamento di 2px al
      passaggio del mouse e un min-height:65px. Tutta grammatica della
      direzione precedente: in questa pagina non ci sono ne' ombre ne'
      sollevamenti, e l'altezza la decide il testo.
   --------------------------------------------------------------------- */

/* Colore per significato, non per posizione. */
html[data-sago-a][data-sago-info-cards-v5="1"] body .sago-info-card-v5.is-technical .sago-info-icon-v5{
  background:#edfaf5 !important; color:#04795a !important;
}
html[data-sago-a][data-sago-info-cards-v5="1"] body .sago-info-card-v5.is-delivery .sago-info-icon-v5{
  background:#fdf6e7 !important; color:#8a5a08 !important;
}
html[data-sago-a][data-sago-info-cards-v5="1"] body .sago-info-card-v5.is-production .sago-info-icon-v5{
  background:#f5f9fd !important; color:#075fbd !important;
}
html[data-sago-a][data-sago-info-cards-v5="1"] body .sago-info-card-v5.is-support .sago-info-icon-v5{
  background:#f2effd !important; color:#5b3fc4 !important;
}

/* Niente sfumature, niente ombre, niente sollevamento al passaggio del
   mouse: su questa pagina la profondita' la fanno i filetti. */
html[data-sago-a][data-sago-info-cards-v5="1"] body .sago-info-card-v5,
html[data-sago-a][data-sago-info-cards-v5="1"] body .sago-info-card-v5:hover{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  transform:none !important;
  border-radius:0 !important;
  min-height:0 !important;
  overflow:visible !important;
  transition:none !important;
  text-align:left !important;
}

/* Il testo era centrato e appoggiato su un blocco chiaro. Qui ogni
   proprieta' che poteva produrre quell'effetto viene dichiarata a mano:
   allineamento a sinistra, nessun fondo, nessun rientro. */
html[data-sago-a][data-sago-info-cards-v5="1"] body .sago-info-copy-v5,
html[data-sago-a][data-sago-info-cards-v5="1"] body .sago-info-title-v5,
html[data-sago-a][data-sago-info-cards-v5="1"] body .sago-info-subtitle-v5{
  text-align:left !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  text-indent:0 !important;
}

/* =====================================================================
   16. SPEDIZIONE INCLUSA - rifatta piu' pulita
   =====================================================================
   Era una pastiglia verde piena con una spunta, larga quanto il testo.
   Due cose non andavano: la spunta non dice "spedizione", dice solo "si";
   e una pastiglia che galleggia a meta' larghezza spezza il ritmo di una
   colonna fatta di righe piene.
   Ora e' una riga come le rassicurazioni piu' sotto - stesso riquadro
   d'icona da 26px, stessa tinta, stessa griglia - cosi' la colonna si
   legge come un sistema solo invece che come tre stili diversi.
   L'icona e' un furgone: dice di cosa si sta parlando prima che si legga
   la frase. Disegnata a tratto 1.7 con estremi arrotondati, la stessa
   mano delle altre; ritagliata da un SVG in data: URI, nessuna richiesta
   di rete.
   Contrasti: testo #04795a su bianco 5,93:1; glifo su #edfaf5 5,04:1.
   --------------------------------------------------------------------- */

html[data-sago-a] main .sago-summary-column .sago-shipping-included{
  display:grid !important;
  grid-template-columns:26px minmax(0, 1fr) !important;
  align-items:center !important;
  column-gap:11px !important;
  width:100% !important;
  margin:12px 0 0 !important;
  padding:12px 13px !important;
  border:1px solid var(--ast-line, #d7e3ee) !important;
  border-radius:var(--ast-r, 4px) !important;
  background:var(--ast-paper, #ffffff) !important;
  color:var(--ast-navy, #0b2745) !important;
  font-family:var(--ast-sans, Inter, "Segoe UI", Arial, sans-serif) !important;
  font-size:13px !important;
  font-weight:650 !important;
  line-height:1.35 !important;
  letter-spacing:-.004em !important;
  box-sizing:border-box !important;
  box-shadow:none !important;
}

html[data-sago-a] main .sago-summary-column .sago-shipping-included::before{
  content:"" !important;
  display:block !important;
  width:26px !important;
  height:26px !important;
  flex:none !important;
  border-radius:6px !important;
  background-color:#edfaf5 !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304795a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.9 6.6h10.9v9.9H2.9Z'/%3E%3Cpath d='M13.8 9.9h3.5l3.4 3.3v3.3h-6.9Z'/%3E%3Ccircle cx='7' cy='18.3' r='1.8'/%3E%3Ccircle cx='17.3' cy='18.3' r='1.8'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:16px 16px !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}

/* La parola che porta il significato si stacca dal resto: "inclusa" e'
   l'informazione, il resto e' contorno. Il verde non e' l'unico segnale -
   c'e' l'icona del furgone e c'e' la parola scritta. */
html[data-sago-a] main .sago-summary-column .sago-shipping-included em,
html[data-sago-a] main .sago-summary-column .sago-shipping-included b{
  font-style:normal !important;
  color:var(--ast-green-text, #04795a) !important;
  font-weight:700 !important;
}


/* ---------------------------------------------------------------------
   NOTA SU QUESTO BLOCCO, perche' e' gia' sparito una volta.
   Il 16/08 ho ripulito il foglio togliendo tre sezioni riassorbite
   altrove, e la funzione che le tagliava andava dall'inizio di una
   sezione all'inizio della SECONDA successiva invece che della prima:
   si e' portata via anche il blocco che veniva subito dopo, cioe'
   questo. Le colonne sono tornate strette e il committente se n'e'
   accorto prima di me. Rimesso dal backup
   /root/backups/2026-08-16-preview/standalone-lab-fix.css.pre-pulizia
   --------------------------------------------------------------------- */
/* =====================================================================
   6. COLONNE LATERALI PIU' LARGHE DEL 10%, CENTRALE PIU' STRETTA
   =====================================================================
   Richiesta del committente. Le laterali erano clamp(288px,23vw,368px):
   +10% su tutti e tre i termini. La centrale non va toccata: e' 1fr,
   quindi si stringe da sola di quanto crescono le altre due.
   Il minimo sale a 317px, che resta sotto i 330px della colonna astucci,
   quindi il segmento "Disegno tecnico / Vista 3D" ci sta ancora su una riga.
   --------------------------------------------------------------------- */

/* Secondo +10% chiesto dal committente: da clamp(317,25.3vw,405) si passa
   a clamp(349,27.8vw,446). Rispetto alla misura di partenza (288/23vw/368)
   le laterali sono cresciute del 21% complessivo.
   La centrale resta 1fr e si stringe da sola di quanto crescono le altre
   due: a 1440px passa da circa 630 a circa 570px, che e' ancora sopra i
   560px minimi che la pagina astucci da' alla sua colonna di lavoro.
   Se si volesse un terzo giro, quello e' il limite da guardare. */
@media (min-width:1181px){
  html[data-sago-a] body .sago-page .sago-configurator{
    grid-template-columns:
      minmax(0, clamp(349px, 27.8vw, 446px))
      minmax(0, 1fr)
      minmax(0, clamp(349px, 27.8vw, 446px)) !important;
  }
}


/* =====================================================================
   17. IL CENTRAMENTO - LA CAUSA VERA, TROVATA VEDENDO LA PAGINA
   =====================================================================
   Sei tentativi falliti, e la risposta era una riga sola:

     main .sago-configurator .sago-summary-column .sago-service-list > div > span
     { justify-items: center }        in standalone-lab-quote.css, SENZA !important

   Chi l'ha scritta la pensava rivolta allo <span> dell'icona, e su un
   contenitore in blocco `justify-items` per anni e' stato inerte. Chrome
   moderno lo applica: diventa il `justify-self` predefinito dei figli, e
   un figlio in blocco si restringe al contenuto e si centra.
   Poi il mu-plugin ha ricostruito le voci, e la colonna di testo e'
   diventata anch'essa uno <span> figlio diretto del div: da quel momento
   quella riga ha centrato e ristretto il testo. Da 323 px a un centinaio.

   Vinceva senza `!important` perche' nessun altro dichiarava quella
   proprieta': nelle mie cinque correzioni precedenti non l'ho mai
   nominata, quindi non l'ho mai battuta. E' il difetto perfetto: una
   regola che non e' mai stata sbagliata, ma che ha cambiato significato
   sotto i piedi di chi l'aveva scritta.

   Trovata in dieci secondi con /opt/sagovedi, chiedendo alla pagina vera
   la catena dei contenitori invece di dedurla.
   --------------------------------------------------------------------- */

/* 17-bis, 17/08: `> div > span` prendeva DUE nodi, non uno. Dopo il
   rifacimento del mu-plugin sono figli diretti del div sia la colonna di
   testo (.sago-info-copy-v5) sia il quadratino colorato dell'icona
   (.sago-info-icon-v5). Su quest'ultimo `align-items/justify-items:start`
   sono il contrario di cio' che serve: il quadratino e' una griglia da
   34px che deve tenere il suo <svg> da 17px al centro, e lo dichiara alla
   riga 472 con `place-items:center !important`. Quella riga perdeva per
   specificita' - (0,3,2) contro i (0,3,4) di questo selettore - percio'
   l'icona finiva nell'angolo in alto a sinistra, sotto la curva del
   border-radius, e sembrava tagliata.
   Si esclude il solo nodo che non doveva mai essere colpito, invece di
   aggiungere una regola che rimetta al centro cio' che questa ha spostato:
   la colonna di testo, che e' il bersaglio vero della sezione 17, resta
   coperta dalla riga .sago-info-copy-v5 qui sotto, e il markup senza
   mu-plugin (lo <span> col rombo) non ha questa classe, quindi si comporta
   esattamente come prima. */
html[data-sago-a] main .sago-summary-column .sago-service-list > div,
html[data-sago-a] main .sago-summary-column .sago-service-list > div > span:not(.sago-info-icon-v5),
html[data-sago-a][data-sago-info-cards-v5="1"] body .sago-info-card-v5,
html[data-sago-a][data-sago-info-cards-v5="1"] body .sago-info-copy-v5{
  justify-items:start !important;
  justify-self:stretch !important;
  align-items:start !important;
  text-align:left !important;
}

/* =====================================================================
   18. IL BOTTONE GRANDE CHE NON FA NIENTE  (rimessa, vedi nota in fondo)
   =====================================================================
   Visto con /opt/sagovedi, non dedotto: senza un DXF caricato la colonna
   sinistra mostra DUE comandi con la stessa identica scritta "Carica
   prima un DXF" - uno piccolo dentro il disegno e uno grande, azzurro
   pieno, largo quanto il pannello, che per giunta copre l'etichetta
   "Larghezza". Sono due nodi diversi che portano anche la stessa classe
   .sago-open-piece-preview: e' il motivo per cui ogni regola scritta su
   quella classe ne ha sempre colpiti due.

   Il grande e' #sago-open-advanced-preview, che apre il 3D a schermo
   intero. Sulla pagina dei clienti standalone.css lo tiene a display:none
   finche' non e' pronto, e ha ragione: il bottone piu' evidente della
   colonna che non fa niente quando lo premi e' peggio di un bottone
   assente. Un foglio della famiglia lab lo ha resuscitato con !important.

   PRIMO TENTATIVO SBAGLIATO, e la prova e' arrivata in dieci secondi:
   avevo agganciato :disabled, ma guardando la pagina vera quel bottone
   al primo caricamento NON porta quell'attributo, quindi la regola non
   colpiva niente. standalone.js gli mette invece la classe `is-ready`
   quando il DXF e' valido (classList.toggle("is-ready", valid)): quello
   e' l'aggancio affidabile. :disabled resta come rete.
   --------------------------------------------------------------------- */

html[data-sago-a] .sago-visual-column .sago-drawing-wrap #sago-open-advanced-preview:not(.is-ready),
html[data-sago-a] .sago-visual-column #sago-open-advanced-preview:not(.is-ready),
html[data-sago-a] .sago-visual-column #sago-open-advanced-preview:disabled{
  display:none !important;
}

/* Senza il bottone, la fascia riservata in fondo al riquadro lascerebbe
   una striscia vuota sotto il disegno. Torna a zero finche' il file non
   c'e'; quando arriva, il valore lo rimette il foglio della zona. */
html[data-sago-a] .sago-visual-column .sago-drawing-wrap:not(.sago-advanced-has-file){
  padding-bottom:0 !important;
}

/* =====================================================================
   19. I NOMI DEI MATERIALI ERANO TAGLIATI DAL CARTELLINO
   =====================================================================
   Visto con /opt/sagovedi a 1440px: "Cartoncino" -> "Cartonci",
   "Microonda" -> "Microon", "Cartone ondulato" -> "Cartone". Il cartellino
   "PRESTO ONLINE" si sovrapponeva al nome. Succedeva da 460px in su, cioe'
   ovunque tranne che sul telefono, ed e' il passo in cui il cliente
   sceglie cosa comprare.

   Causa, letta dallo stile calcolato:
     grid-template-columns: minmax(0, 1fr) auto   in standalone-lab-steps.css
   Il minmax(0, ...) permette alla colonna del nome di scendere SOTTO la
   larghezza del testo; il cartellino accanto ha white-space:nowrap e non
   cede un pixel. Il nome trabocca e il cartellino, dipinto dopo, lo copre.

   La correzione e' cambiare il pavimento della colonna da 0 a min-content:
   min-content e' la parola piu' lunga, quindi il nome non puo' piu' essere
   tagliato a meta'. Se lo spazio non basta per entrambi, e' il CARTELLINO
   ad andare a capo sotto - che e' l'ordine giusto delle priorita': il nome
   del materiale e' l'informazione, il cartellino e' lo stato.
   --------------------------------------------------------------------- */

html[data-sago-a] .sago-main-column .sago-family-tab{
  grid-template-columns:minmax(min-content, 1fr) auto !important;
  align-items:start !important;
  column-gap:10px !important;
}

/* Il nome non si tronca e non si sovrappone: al massimo va a capo. */
html[data-sago-a] .sago-main-column .sago-family-tab > strong,
html[data-sago-a] .sago-main-column .sago-family-tab > b{
  min-width:0 !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:normal !important;
  text-wrap:pretty;
}

/* Sotto i 560px di scheda il cartellino scende su una riga propria invece
   di contendere lo spazio: due informazioni su due righe si leggono, due
   sovrapposte no. */
@media (max-width:560px){
  html[data-sago-a] .sago-main-column .sago-family-tab{
    grid-template-columns:minmax(0, 1fr) !important;
  }
  html[data-sago-a] .sago-main-column .sago-family-tab > *:nth-child(2){
    justify-self:start !important;
    margin-top:4px !important;
  }
}

/* --- 19-bis. E ora il cartellino non deve tagliarsi a sua volta -------
   COSA    "PRESTO ONLINE" usciva come "PRESTO ONLIN".
   PERCHE' con il pavimento della colonna del nome alzato a min-content, lo
           spazio conteso e' passato dall'altra parte: il nome sta intero e
           a stringersi e' il cartellino, che pero' ha white-space:nowrap e
           non puo' andare a capo, quindi viene tagliato.
           Ho spostato il difetto invece di risolverlo, ed e' esattamente
           l'errore che si fa quando si aggiusta una colonna sola di due
           che si contendono la stessa riga.
   CONTRO  il white-space:nowrap del foglio della zona.

   Ora il cartellino puo' andare a capo: "PRESTO" sopra e "ONLINE" sotto
   quando non c'e' spazio, intero quando c'e'. Due righe corte si leggono,
   una riga tagliata no. Il nome resta la prima cosa che si legge. */

/* SECONDO ERRORE, e lo lascio scritto: avevo puntato *:nth-child(2)
   credendo fosse il cartellino. La struttura vera, letta dal servito, e':
     <button class="sago-family-tab">
       <strong>Gommapiuma</strong>              <- nome
       <span>Interni morbidi e protettivi</span> <- descrizione
       <b>6 opzioni</b> / <b>PRESTO ONLINE</b>   <- cartellino
     </button>
   Il secondo figlio e' la DESCRIZIONE: l'ho centrata per sbaglio, e si
   vedeva. Il cartellino e' il <b>. Due volte ho aggiustato l'elemento
   sbagliato perche' ho dedotto la struttura invece di leggerla. */

html[data-sago-a] .sago-main-column .sago-family-tab > b{
  white-space:normal !important;
  min-width:0 !important;
  overflow:visible !important;
  line-height:1.25 !important;
  text-align:center !important;
  hyphens:none;
}

/* La descrizione torna a sinistra come era, e come stanno tutti gli altri
   testi di questa pagina. */
html[data-sago-a] .sago-main-column .sago-family-tab > span{
  text-align:left !important;
}

/* --- 19-ter. Il cartellino prende una riga sua ------------------------
   COSA    "PRESTO ONLINE" restava tagliato in "PRESTO ONLIN".
   PERCHE' misurato: la sua colonna vale 79px e il testo ne chiede ~110.
           Non era un problema di andare a capo - era che su quella riga
           lo spazio non c'e' proprio. Il nome e il cartellino si
           contendevano la stessa riga in una scheda larga 246px.
   CONTRO  la disposizione a due colonne del foglio di zona.

   Percio' il cartellino scende su una riga propria, allineato a sinistra
   sotto il nome. La scheda cresce di una riga, e in cambio non c'e'
   nessuna larghezza a cui qualcosa possa essere tagliato: e' una
   soluzione che non dipende da quanto spazio c'e'.
   Il font non si poteva rimpicciolire: su questo progetto 12px e' il
   pavimento, e il cartellino ci sta gia' sopra. */

html[data-sago-a] .sago-main-column .sago-family-tab > b{
  grid-column:1 / -1 !important;
  grid-row:auto !important;
  justify-self:start !important;
  width:auto !important;
  max-width:100% !important;
  margin-top:6px !important;
  text-align:left !important;
}
