@charset "UTF-8";
/* COLOR VARIABLES
============================================= */
/* BASE */
/* GREY */
/* BLUE */
/* AZURE */
/* ORANGE */
/* YELLOW */
/* ============================================= */
/*$marginMenu: 150px;*/
/* COLORS
============================================= */
/* BG IMAGES
============================================= */
/* FLEXBOX
============================================= */
/* GRID
============================================= */
/* BOX SHADOW
============================================= */
/* OPACITY
============================================= */
/* TRANSITION
============================================= */
/* TRANSFORM
============================================= */
/* BORDER RADIUS
============================================= */
/* TEXT TRANSFORM
============================================= */
/* FONT
============================================= */
/* MANROPE
   =============================================
   font-display: optional e NON swap.

   Con "swap" il browser disegna subito col font di sistema e poi sostituisce
   Manrope quando arriva: la sostituzione e' per definizione un ricalcolo delle
   larghezze. Sul menu si vedeva come un guizzo — la riga di voci e' larga 18px
   in piu' col font vero, e avendo justify-content:center ogni voce si spostava
   di ~9px.

   Con "optional" il browser da al font ~100ms: se e' pronto lo usa da subito,
   se non lo e' tiene il fallback per QUESTA visita e non sostituisce piu'.
   In nessuno dei due casi il layout si muove.

   Perche' funziona bene qui: i woff2 sono self-hosted e pesano 14KB l'uno, e
   sono precaricati in _css.php (400, 500, 700), quindi la finestra dei 100ms
   la rispettano praticamente sempre.

   Il compromesso, da sapere: alla primissima visita con cache vuota e rete
   lenta la pagina puo' restare col font di sistema fino alla navigazione
   successiva. E' il prezzo di non avere spostamenti.
   ============================================= */
/* manrope-regular - latin */
@font-face {
  font-display: optional; /* vedi la nota sopra il primo @font-face */
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  src: url("/library/fonts/manrope-v20-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-500 - latin */
@font-face {
  font-display: optional; /* vedi la nota sopra il primo @font-face */
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  src: url("/library/fonts/manrope-v20-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-600 - latin */
@font-face {
  font-display: optional; /* vedi la nota sopra il primo @font-face */
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  src: url("/library/fonts/manrope-v20-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-700 - latin */
@font-face {
  font-display: optional; /* vedi la nota sopra il primo @font-face */
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  src: url("/library/fonts/manrope-v20-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* manrope-800 - latin */
@font-face {
  font-display: optional; /* vedi la nota sopra il primo @font-face */
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  src: url("/library/fonts/manrope-v20-latin-800.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* SCROLLBAR
============================================= */
/* Barra di scroll sottile, aspetto simile a quella di macOS.
   Va dichiarata due volte: `scrollbar-width`/`scrollbar-color` e' lo standard
   (Firefox e Chromium 121+), i pseudo-elementi ::-webkit-scrollbar coprono
   Safari e i Chromium precedenti. Dove valgono entrambi vincono i pseudo.

   NON usarlo con un selettore universale: i ::-webkit-scrollbar hanno la
   precedenza su `scrollbar-width: none`, quindi farebbero ricomparire le barre
   nascoste di proposito (.filtri-shop, .menu-container, ecc.). */
.page-header p {
  max-width: 100%;
}

/* Due colonne SENZA grid-template-areas.
   Le aree nominate obbligherebbero a enumerare tutte le righe, quindi ogni
   elemento opzionale (h3, .proj-sectors, ...) raddoppierebbe le varianti da
   scrivere con :has() — e un elemento con `grid-area` non dichiarata nel
   template attivo viene auto-posizionato in una colonna implicita, rompendo
   il layout a due colonne.
   Qui invece: l'immagine occupa la colonna 1, tutto il resto va in colonna 2
   nell'ordine del DOM. Esistono solo le righe degli elementi realmente
   presenti, quindi non c'e' nessuna combinazione da prevedere. */
.detail-intro {
  display: grid;
  align-content: start;
  grid-template-columns: calc(45% - clamp(45px, 4vw, 80px) / 2) calc(55% - clamp(45px, 4vw, 80px) / 2);
  column-gap: clamp(45px, 4vw, 80px);
  /* row-gap 0 e spaziatura affidata ai margini: cosi' lo span generoso della
     .pic (sotto) non genera spazio morto, perche' una riga vuota resta a 0px
     ma i suoi gap verrebbero comunque applicati. */
  row-gap: 0;
}
.detail-intro > .pic {
  grid-column: 1;
  /* span ampio: copre tutte le righe generate dalla colonna 2, qualunque
     sia il numero di elementi presenti */
  grid-row: 1/span 30;
  align-self: start;
}
.detail-intro > .pic picture {
  aspect-ratio: 1/1;
}
.detail-intro > .pic picture img {
  object-fit: cover;
  height: 100%;
}
.detail-intro > *:not(.pic) {
  grid-column: 2;
  margin-bottom: clamp(20px, 1.5vw, 30px);
}
.detail-intro > *:not(.pic):last-child {
  margin-bottom: 0;
}
.detail-intro h3 {
  color: #636B73;
}

.utility {
  width: 100%;
}
.utility ul {
  margin: 0;
  border: 1px solid #E0E1E3;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 60px;
  -webkit-border-radius: 32px;
  -moz-border-radius: 32px;
  border-radius: 32px;
  padding: 0 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  white-space: nowrap;
}
.utility ul li:not(:last-child) {
  border-right: 1px solid #E0E1E3;
}
.utility ul li.buy {
  flex-grow: 2;
  text-align: right;
}
.utility ul li.buy .btn-buy {
  background: #EA7600;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  color: #FFFFFF;
  /* font-family: "Manrope";
   font-style: normal;*/
  font-weight: 600;
  padding: 8px 20px;
  -webkit-transition: background 0.5s ease 0s;
  -moz-transition: background 0.5s ease 0s;
  -ms-transition: background 0.5s ease 0s;
  -o-transition: background 0.5s ease 0s;
  transition: background 0.5s ease 0s;
}
.utility ul li.buy:hover .btn-buy {
  background: #EE9133;
}
.utility a, .utility .a {
  background-color: #FFFFFF;
  color: #262626;
  min-height: auto;
  padding: 0 20px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-transition: color 0.5s ease 0s;
  -moz-transition: color 0.5s ease 0s;
  -ms-transition: color 0.5s ease 0s;
  -o-transition: color 0.5s ease 0s;
  transition: color 0.5s ease 0s;
  flex-direction: row-reverse;
}
.utility a:hover, .utility .a:hover {
  background-color: #FFFFFF;
  color: #0071CE;
}

.technical-prod {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: flex-start;
  justify-content: psace-between;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: clamp(30px, 2.5vw, 50px);
}
.technical-prod div.col:not(:last-child) {
  width: calc(60% - clamp(30px, 2.5vw, 50px) / 2);
}
.technical-prod div.col:last-child {
  width: calc(40% - clamp(30px, 2.5vw, 50px) / 2);
}
.technical-prod div.col:only-child {
  flex: 1 1 100%;
  max-width: 100%;
  /* eventuale margin: 0 auto; se vuoi centrarlo con una larghezza massima */
}
.technical-prod div.col.manufacturer img {
  max-width: 300px;
}
.technical-prod table:nth-of-type(2) {
  margin-top: clamp(24px, 2vw, 32px);
}

.prod-cta {
  display: grid;
  grid-template-columns: 30% 150px 150px 1fr;
  grid-template-areas: "intro spec1 spec2 desc";
  gap: clamp(30px, 2.5vw, 50px);
}
.prod-cta .intro {
  grid-area: intro;
}
.prod-cta .spec1 {
  align-self: start;
  grid-area: spec1;
}
.prod-cta .spec2 {
  align-self: start;
  grid-area: spec2;
}
.prod-cta .desc {
  grid-area: desc;
}
.prod-cta .intro, .prod-cta .spec1, .prod-cta .spec2 {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  flex-wrap: nowrap;
}
.prod-cta .desc {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: clamp(20px, 1.5vw, 30px);
}
.prod-cta .small-btn {
  margin: 0 0 16px 0;
}
.prod-cta .round-btn {
  flex-shrink: 0;
  margin-top: 0;
}
.prod-cta.proj-cta {
  grid-template-columns: 30% 1fr;
  grid-template-areas: "intro desc";
}

.txtProjects h2, .txtProjects h3, .txtProjects h4, .txtProjects h5 {
  margin-top: clamp(20px, 1.5vw, 30px);
}

.prev-next {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin-bottom: clamp(20px, 1.5vw, 40px);
}
.prev-next a {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 20px;
}
.prev-next a img {
  width: 50px;
  border: 1px solid #262626;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  padding: 5px;
}
.prev-next a span {
  color: #262626;
  font-size: 14px;
  white-space: nowrap;
}
.prev-next a.inactive {
  opacity: 0.3;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------------------------------- */
/* MEDIA QUERY ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
@media all and (max-width: 880px) {
  /* Una colonna. L'ordine (titolo, immagine, poi tutto il resto) lo da' `order`,
     che l'auto-placement della grid rispetta: niente aree da enumerare.
     Nota: la vecchia versione ad aree non dichiarava subtitle ne' sectors,
     quindi su mobile h3 e .proj-sectors finivano auto-posizionati alla cieca. */
  .detail-intro {
    grid-template-columns: 100%;
  }
  .detail-intro > .pic {
    grid-column: 1;
    grid-row: auto;
    order: 1;
    margin-bottom: clamp(20px, 1.5vw, 30px);
  }
  .detail-intro > *:not(.pic) {
    grid-column: 1;
    order: 2;
  }
  .detail-intro > h2 {
    order: 0;
  }
  .prod-cta {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "intro intro" "spec1 spec2" "desc desc";
  }
  .prod-cta.proj-cta {
    grid-template-columns: 100%;
    grid-template-areas: "intro" "desc";
    gap: 10px;
  }
  .prev-next a {
    color: #262626;
  }
  .prev-next a.prev::after {
    content: "prev";
  }
  .prev-next a.next::before {
    content: "next";
  }
  .prev-next a span {
    display: none;
  }
}

/*# sourceMappingURL=detail.css.map */