@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.). */
header.head-menu {
  position: fixed;
  z-index: 999;
  top: 25px;
  left: calc(50vw - 960px);
  height: clamp(70px, 6vw, 100px);
  padding: clamp(8px, 1.1vw, 20px) clamp(20px, 1.5vw, 30px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
  background-color: #FFFFFF;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  /*display: grid;
  grid-template-columns: 220px 1fr auto;
  grid-template-areas: "logo menu menu-dx";*/
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: nowrap;
  /* --- SEARCH A MENU APERTO ---------------------------------------------- */
}
header.head-menu .logo {
  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: 100%;
  z-index: 50;
  flex: 0 0 clamp(180px, 7vw, 220px);
}
header.head-menu .logo img {
  width: auto;
  height: 100%;
}
header.head-menu .main-menu {
  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;
  flex-grow: 1;
  /*width: calc(100% - calc(40px + clamp(50px, 2vw, 60px) + 122px + 40px + clamp(6px, 0.8vw, 16px) * 2) - clamp(180px, 7vw, 220px));*/
}
header.head-menu .main-menu li {
  /*&.hide {
    display: none;
  }*/
}
header.head-menu .main-menu li a, header.head-menu .main-menu li .a {
  color: #262626;
  /*font-size: clamp(15px, 1vw, 18px);*/
  font-size: clamp(15px, 1vw, 18px);
  padding: clamp(12px, 1vw, 20px);
  /* font-family: "Manrope";
   font-style: normal;*/
  font-weight: 500;
  -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;
  position: relative;
}
header.head-menu .main-menu li a::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: clamp(12px, 1vw, 20px);
  width: 50%;
  height: 2px;
  background-color: #EA7600;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
header.head-menu .main-menu li a:hover::after {
  transform: scaleX(1);
}
header.head-menu .main-menu li a.selected::after {
  content: "";
  position: absolute;
  bottom: 8px;
  left: clamp(12px, 1vw, 20px);
  width: 50%;
  height: 2px;
  background-color: #EA7600;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.3s ease;
}
header.head-menu .menu-actions {
  grid-area: menu-dx;
  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(6px, 0.8vw, 16px);
  z-index: 50;
}
header.head-menu .menu-actions li:nth-child(2) {
  flex: 0 0 clamp(50px, 2vw, 60px);
}
header.head-menu .menu-actions img {
  flex-shrink: 0;
}
header.head-menu .menu-actions .round-btn {
  height: clamp(48px, 3.2vw, 58px);
  width: clamp(48px, 3.2vw, 58px);
  flex: 0 0 clamp(48px, 2vw, 58px);
  min-height: inherit;
}
header.head-menu .menu-actions .round-btn img {
  width: 60%;
}
header.head-menu .menu-actions .initial-username {
  font-size: 22px;
  font-weight: 700;
  background-color: #1D428A;
}
header.head-menu .menu-actions .initial-username:hover {
  background-color: #4A68A1;
}
header.head-menu .menu-actions .orange-btn {
  white-space: nowrap;
}
header.head-menu .menu-actions li.btn-cart-container a {
  position: relative;
}
header.head-menu .menu-actions li.btn-cart-container a strong {
  position: absolute;
  right: 0px;
  top: 0px;
  background-color: #1D428A;
  color: #FFFFFF;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  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;
  font-size: 14px;
}
header.head-menu .menu-actions li.btn-cart-container a strong.hide {
  display: none;
}
header.head-menu li.searchBtn-menu {
  height: 100%;
}
header.head-menu li.searchBtn-menu .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;
  height: 100%;
  /*display: block;*/
}
header.head-menu #search {
  display: none;
  flex-grow: 1;
  margin: 0 clamp(20px, 1.5vw, 30px);
  height: clamp(48px, 3.2vw, 58px);
  border: 0;
  background-color: #F7F7F7;
  background-image: url("/library/pagination/ui/Search.svg");
  background-repeat: no-repeat;
  background-position: calc(100% - 20px) center;
  background-size: 24px;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  padding: 0 56px 0 24px;
  font-size: clamp(16px, 1vw, 18px);
  /* font-family: "Manrope";
   font-style: normal;*/
  font-weight: 500;
  /* logo e .menu-actions stanno a 50: senza questo il campo finisce
     sotto .menu-aside, che e' un figlio dell'header con z-index 20 */
  z-index: 50;
  min-width: 0;
}
header.head-menu #search:focus {
  outline: none;
}
header.head-menu.menu-open .main-menu {
  display: none;
}
header.head-menu.menu-open #search {
  display: block;
}

.searchContainer {
  -webkit-transition: opacity 0.5s ease 0s;
  -moz-transition: opacity 0.5s ease 0s;
  -ms-transition: opacity 0.5s ease 0s;
  -o-transition: opacity 0.5s ease 0s;
  transition: opacity 0.5s ease 0s;
  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;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: clamp(70px, 6vw, 100px);
  right: 0;
  left: 0;
  z-index: 19;
  background-color: #FFFFFF;
  padding: 20px;
  -webkit-border-radius: 0 0 20px 20px;
  -moz-border-radius: 0 0 20px 20px;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.searchContainer.visible {
  opacity: 1;
  pointer-events: auto;
}

.menu-aside {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease 0s;
  -moz-transition: opacity 0.5s ease 0s;
  -ms-transition: opacity 0.5s ease 0s;
  -o-transition: opacity 0.5s ease 0s;
  transition: opacity 0.5s ease 0s;
  background-color: #FFFFFF;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
  position: absolute;
  top: 0px;
  right: 0px;
  height: calc(100vh - 50px);
  width: 100%;
  z-index: 20;
  pointer-events: none;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
  padding: clamp(70px, 8vw, 130px) clamp(20px, 1.5vw, 30px) clamp(20px, 1.5vw, 30px) clamp(20px, 1.5vw, 30px);
  display: grid;
  /* la regola base `aside { @include flex() }` lascia align-items/justify-content
     a center: qui il display diventa grid ma quelle due proprieta' resterebbero
     e centrerebbero gli item nelle righe (era il login-container a mezz'aria).
     stretch = default della grid: gli item riempiono la riga e partono in alto. */
  align-items: stretch;
  justify-content: normal;
  /* minmax(0,...) e non 1fr: `1fr` vale `minmax(auto, 1fr)` e il minimo
     automatico della traccia e' il min-content piu' grande tra i suoi item.
     Il footer (.menu-aside-bottom) ha min-content ~834px e allargherebbe la
     colonna del menu ben oltre la larghezza dell'aside. */
  grid-template-columns: minmax(0, 1fr) 300px;
  /* 1fr sulla prima riga: assorbe lo spazio libero e spinge il footer in basso.
     Con due righe auto lo spazio resterebbe FUORI dalle righe (ammucchiato da
     align-content) e align-self sul footer non avrebbe margine di manovra. */
  grid-template-rows: 1fr auto;
  grid-template-areas: "menu menu-dx" "footer footer";
  gap: clamp(20px, 1.5vw, 30px);
  /* --- PANNELLI A COLONNE ------------------------------------------------ */
  /* Ogni ul.menu e' una colonna dentro .menu-container. Il JS aggiunge
     .open + data-level ai pannelli e data-depth sull'aside. */
  /* @at-root: le @keyframes devono stare a livello radice, dentro un selettore
     sono CSS invalido. Tenuta qui per averla accanto a chi la usa. */
}
.menu-aside.visible {
  opacity: 1;
  pointer-events: auto;
}
@keyframes menuPanelFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.menu-aside .menu-container {
  grid-area: menu;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  /* min-width/height 0: dentro una traccia grid un flex container non scende
     sotto il contenuto minimo, quindi sfonderebbe invece di attivare gli scroll */
  min-width: 0;
  min-height: 0;
  /* oltre 4 livelli le colonne sfondano: scroll orizzontale invece di taglio */
  overflow-x: auto;
  overflow-y: hidden;
  gap: clamp(20px, 1.5vw, 40px);
  /* Back UNICO, fuori dai pannelli. Prima c'era una <li class="backMenu">
     dentro ogni ul.menu, quindi scorreva insieme alla colonna. Ora e' un solo
     elemento, figlio diretto di .menu-container.
     Il JS non e' cambiato: l'handler in grkfn.js e' delegato su .menu-aside,
     quindi intercetta il click da qualunque punto dentro l'aside.
     Su desktop resta nascosto, esattamente come prima. */
}
.menu-aside .menu-container ul.menu {
  display: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  width: auto;
  /* .open batte .hide (0,1,0) presente nel markup come fallback no-JS */
}
.menu-aside .menu-container ul.menu.open {
  display: block;
  /* Comparsa in dissolvenza. @keyframes e non transition: il pannello
     passa da display:none a display:block e le transition non partono
     sul display; le animation si avviano quando l'elemento viene
     renderizzato. Solo opacity, niente transform: il layout delle
     colonne non si muove.
     Escluso il livello 0: il fade dell'apertura del menu lo fa gia'
     .menu-aside (opacity + .visible), quindi qui sarebbe doppio e
     invisibile. Da 1 in su sono le colonne aperte col click, che sono
     quelle che devono comparire dolcemente.
     NB menuRender() fa removeClass('open') e subito addClass('open') su
     tutti i pannelli nello stesso tick: senza ricalcolo di stile in mezzo
     i pannelli gia' aperti NON rianimano. */
}
.menu-aside .menu-container ul.menu.open:not([data-level="0"]) {
  animation: menuPanelFade 180ms ease-out both;
  /* annidata qui e non a livello radice: il selettore generato e'
     identico a quello sopra, quindi a pari specificita' conta l'ordine
     e deve venire dopo */
}
@media (prefers-reduced-motion: reduce) {
  .menu-aside .menu-container ul.menu.open:not([data-level="0"]) {
    animation: none;
  }
}
.menu-aside .menu-container ul.menu:not([data-level="0"]) {
  border-left: 1px solid #E0E1E3;
  padding-left: clamp(20px, 1.5vw, 40px);
}
.menu-aside .menu-container ul.menu > li {
  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;
  /* voce il cui sottomenu e' aperto */
}
.menu-aside .menu-container ul.menu > li > a {
  flex: 1 1 auto;
}
.menu-aside .menu-container ul.menu > li > img {
  flex: 0 0 13px;
  cursor: pointer;
}
.menu-aside .menu-container ul.menu > li > img:hover {
  color: #EA7600;
}
.menu-aside .menu-container ul.menu > li.open > a, .menu-aside .menu-container ul.menu > li.open > .nextMenu {
  font-weight: 700;
}
.menu-aside .menu-container ul.menu > li a.active {
  color: #EA7600;
}
.menu-aside .menu-container ul.menu > li.show-all {
  padding-top: 5px;
}
.menu-aside .menu-container ul.menu > li.show-all a {
  position: relative;
  width: auto;
  border-width: 1px;
  border-style: solid;
  border-color: #262626;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  cursor: pointer;
  padding: 0 20px;
  height: 40px;
  min-width: 200px;
}
.menu-aside .menu-container ul.menu > li.show-all a::after {
  position: absolute;
  right: 15px;
  top: 7px;
  content: url("/library/pagination/ui/ShowAll.svg");
  -webkit-transition: opacity 0.5s ease 0s;
  -moz-transition: opacity 0.5s ease 0s;
  -ms-transition: opacity 0.5s ease 0s;
  -o-transition: opacity 0.5s ease 0s;
  transition: opacity 0.5s ease 0s;
}
.menu-aside .menu-container ul.menu > li.show-all a:hover {
  border-color: #A1A6AB;
}
.menu-aside .menu-container ul.menu > li.show-all a:hover::after {
  opacity: 0.4;
}
.menu-aside .menu-container > .backMenu {
  display: none;
  background-color: #EA7600;
  -webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  border-radius: 35px;
  padding: 0 10px;
  margin: 20px 0;
  cursor: pointer;
}
.menu-aside .menu-container > .backMenu .a {
  padding: 10px 20px;
}
.menu-aside .menu-container > .backMenu .a span {
  color: #FFFFFF;
}
.menu-aside .menu-container > .backMenu img {
  width: 30px;
}
.menu-aside .close-menu {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
  flex-wrap: nowrap;
  width: calc(100% - 50px);
  margin: 30px 25px;
  color: #262626;
}
.menu-aside .close-menu img {
  width: 40px;
}
.menu-aside ul {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-aside ul li {
  margin: 0;
  padding: 0;
}
.menu-aside ul li:before {
  display: none;
}
.menu-aside ul li a, .menu-aside ul li .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;
  justify-content: flex-start;
  color: #262626;
  font-size: 16px;
  padding: clamp(8px, 1.2vh, 20px) 20px;
  /* font-family: "Manrope";
   font-style: normal;*/
  font-weight: 500;
  -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;
}
.menu-aside ul li a:hover, .menu-aside ul li .a:hover {
  color: #A1A6AB;
}
.menu-aside ul li a img, .menu-aside ul li .a img {
  max-width: 40px;
  margin-right: clamp(10px, 2vw, 20px);
}
.menu-aside ul li.choose-lang {
  border-bottom: 0;
  padding: 25px 20px;
  /* font-family: "Manrope";
   font-style: normal;*/
  font-weight: 500;
  font-size: 18px;
}
.menu-aside ul li.choose-lang div {
  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-top: 15px;
}
.menu-aside ul li.choose-lang div a {
  gap: 26px;
  background: #EA7600;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border-bottom: 0;
  justify-content: center;
  padding: 15px 10px;
  width: calc(50% - 13px);
  flex: 0 0 calc(50% - 13px);
  color: #FFFFFF;
  -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;
}
.menu-aside ul li.choose-lang div a:hover {
  background: #262626;
}
.menu-aside ul li.choose-lang div a.active {
  background: #82898F;
}
.menu-aside .login-container {
  grid-area: login;
}
.menu-aside .login-container .contact-form {
  background-color: #EA7600;
  padding: 16px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border-radius: 16px;
}
.menu-aside .login-container .contact-form section {
  gap: 16px clamp(24px, 2vw, 32px);
}
.menu-aside .login-container .contact-form .info-login {
  flex-direction: column;
}
.menu-aside .login-container .contact-form .info-login .input-block {
  width: 100%;
  flex: 100%;
  border: none;
}
.menu-aside .login-container .contact-form .info-login .input-block img {
  display: none;
}
.menu-aside .login-container .loginText a, .menu-aside .login-container label {
  color: #FFFFFF;
}
.menu-aside .login-container .flex-direction-column {
  gap: 16px;
  margin: clamp(20px, 1.5vw, 40px) 0;
}
.menu-aside .menu-aside-bottom {
  grid-area: footer;
  background-color: #EA7600;
  /* non serve align-self: la riga 'auto' e' alta quanto il contenuto ed e'
     gia' l'ultima, il lavoro lo fa 1fr sulla prima riga */
  padding: clamp(20px, 1.5vw, 40px);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: nowrap;
}
.menu-aside .menu-aside-bottom .address {
  background-color: #FFFFFF;
  margin: 0;
  font-style: normal;
  width: clamp(300px, 30vw, 450px);
}
.menu-aside .menu-aside-bottom .col {
  /*max-width: 350px;*/
}
.menu-aside .menu-aside-bottom .col .partners {
  width: 55px;
}
.menu-aside .menu-aside-bottom .col .partners p {
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 0 2px 0;
}
.menu-aside .menu-aside-bottom a:not(.btn) {
  color: #FFFFFF;
  display: block;
  padding: 6px 0;
  width: 100%;
  -webkit-transition: opacity 0.5s ease 0s;
  -moz-transition: opacity 0.5s ease 0s;
  -ms-transition: opacity 0.5s ease 0s;
  -o-transition: opacity 0.5s ease 0s;
  transition: opacity 0.5s ease 0s;
}
.menu-aside .menu-aside-bottom a:not(.btn):hover {
  color: #FFFFFF;
  opacity: 0.7;
}
.menu-aside .menu-aside-bottom ul li {
  display: block;
}
.menu-aside .menu-dx {
  grid-area: menu-dx;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: clamp(30px, 2.5vw, 50px);
}
.menu-aside .menu-dx h3 {
  font-size: 22px;
  color: #EA7600;
  margin-bottom: 10px;
}
.menu-aside h4 {
  font-size: 18px;
}
.menu-aside .change-lang .orange-btn {
  margin: clamp(20px, 1.5vw, 30px) 0;
  padding: 0 27px;
}
.menu-aside .change-lang .orange-btn:not(:last-child) {
  margin-right: 10px;
}
.menu-aside .change-lang .orange-btn.active {
  background-color: #F7C899;
  color: #262626;
}
.menu-aside .address .btn {
  margin-top: 12px;
}
.menu-aside .address p {
  gap: 15px;
}
.menu-aside .address p img {
  width: 35px;
}

.menu-in {
  overflow: hidden;
}
.menu-in header.head-menu li.searchBtn-menu {
  display: none;
  pointer-events: none;
  opacity: 0;
}

footer {
  margin-bottom: 25px !important;
  box-sizing: border-box;
  align-items: start;
  padding: clamp(25px, 5vw, 50px);
  padding-bottom: 20px;
  background-color: #1D428A;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  border-radius: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: "claim . . newsletter newsletter" "contattigenerali infogenerali quicklinks eshop social" "companyinfo companyinfo companyinfo companyinfo companyinfo";
}
footer .footer-claim {
  grid-area: claim;
  margin-bottom: clamp(45px, 2.5vw, 80px);
  padding-right: clamp(20px, 1.5vw, 30px);
}
footer .footer-claim h3 {
  color: #EA7600;
  margin: 0 0 15px 0;
  padding: 0;
}
footer .footer-claim p {
  color: #FFFFFF;
}
footer h4 {
  font-size: 18px;
  color: #FFFFFF;
  margin-bottom: 30px;
  margin-top: clamp(45px, 2.5vw, 80px);
  /* font-family: "Manrope";
   font-style: normal;*/
  font-weight: 600;
}
footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
footer ul li a {
  display: block;
  padding: 5px 0;
  color: #C1C4C7;
  text-decoration: none;
  -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;
}
footer ul li a:hover {
  color: #FFFFFF;
}
footer .footer-newsletter {
  grid-area: newsletter;
  margin-bottom: clamp(20px, 1.5vw, 40px);
}
footer .footer-newsletter .newsletter-form {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 16px;
}
footer .footer-newsletter .newsletter-input-wrap {
  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;
  background-color: #FFFFFF;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  border-radius: 50px;
  padding: 6px 6px 6px 24px;
  width: 100%;
}
footer .footer-newsletter .newsletter-input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  color: #262626;
  min-width: 100px;
}
footer .footer-newsletter .newsletter-input-wrap input::placeholder {
  color: #A1A6AB;
}
footer .footer-newsletter .newsletter-input-wrap .btn {
  flex: 0 0 auto;
  font-size: 16px;
  white-space: nowrap;
}
footer .footer-newsletter .newsletter-input-wrap .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
footer .footer-newsletter .newsletter-gdpr {
  color: #FFFFFF;
}
footer .footer-newsletter .newsletter-gdpr label {
  flex-direction: row-reverse;
}
footer .footer-contacts {
  border-top: 1px solid #4A68A1;
  grid-area: contattigenerali;
}
footer .footer-contacts ul li a, footer .footer-contacts ul li span {
  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;
  column-gap: 10px;
  justify-content: flex-start;
}
footer .footer-contacts ul li a img, footer .footer-contacts ul li span img {
  width: 40px;
  flex: 0 0 40px;
}
footer .footer-contacts ul li span {
  color: #C1C4C7;
}
footer .footer-1 {
  border-top: 1px solid #4A68A1;
  grid-area: quicklinks;
}
footer .footer-2 {
  border-top: 1px solid #4A68A1;
  grid-area: infogenerali;
}
footer .footer-3 {
  border-top: 1px solid #4A68A1;
  grid-area: eshop;
}
footer .footer-social {
  border-top: 1px solid #4A68A1;
  grid-area: social;
}
footer .footer-social ul {
  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: flex-start;
  column-gap: 10px;
}
footer .footer-social ul li a {
  text-align: center;
  border: 1px solid #C1C4C7;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  padding: 5px 10px;
}
footer .footer-social .partners {
  margin-top: 30px;
  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: flex-start;
  column-gap: 10px;
}
footer .footer-social .partners .rexroth {
  width: 70px;
  flex: 0 0 70px;
}
footer .footer-social .partners .ariba {
  width: 130px;
  flex: 0 0 130px;
}
footer .company-info {
  margin-top: clamp(45px, 2.5vw, 80px);
  border-top: 1px solid #4A68A1;
  grid-area: companyinfo;
  text-align: center;
  padding-top: clamp(15px, 2vw, 24px);
}
footer .company-info .tooltip:hover {
  cursor: pointer;
  cursor: hand;
}
footer .company-info p {
  color: #778EB9;
  letter-spacing: 1%;
  font-size: 14px;
}
footer .company-info p a, footer .company-info p .a {
  color: #778EB9;
  letter-spacing: 2%;
  -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;
}
footer .company-info p a:not(:first-child)::before, footer .company-info p .a:not(:first-child)::before {
  content: "  |  ";
}
footer .company-info p a:hover, footer .company-info p .a:hover {
  color: #FFFFFF;
}
footer .company-info p a:hover::before, footer .company-info p .a:hover::before {
  color: #778EB9;
}

.page-header-small .breadcrumb {
  margin: 0;
  flex-grow: 1;
}
.page-header-small .breadcrumb li a span {
  padding: 0 8px;
}

.breadcrumb {
  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;
  padding-inline-start: 5px;
  padding-left: 5px !important;
}
.breadcrumb li {
  font-size: 15px;
  line-height: 15px;
}
.breadcrumb li a span {
  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;
  color: #FFFFFF;
  gap: 16px;
  padding: 8px;
  -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;
}
.breadcrumb li a span:hover {
  color: #99C6EB;
}
.breadcrumb li img {
  width: 30px;
}
.breadcrumb li:not(:last-child) {
  display: flex;
  align-items: center;
}
.breadcrumb li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background-color: #FFFFFF;
  mask-image: url("/library/pagination/ui/Chevron-Mini.svg");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
  will-change: transform;
}

/* ---------------------------------------------------------------------------------------------------- */
/* SUBMENU ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
.submenu-container {
  width: 250px;
  max-width: 100%;
}
.submenu-container .help {
  background-color: #1D428A;
  padding: 20px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  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;
  gap: 16px;
}
.submenu-container .help h3, .submenu-container .help p {
  color: #FFFFFF;
}

.submenu {
  width: clamp(320px, 18vw, 350px);
  max-width: 100%;
  flex-shrink: 0;
  flex-grow: 0;
}
.submenu li {
  width: 100%;
  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;
}
.submenu li a {
  color: #262626;
  -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;
  padding: 15px 0;
  display: block;
}
.submenu li a:hover {
  color: #EA7600;
}
.submenu li a.selected::before {
  width: 15px;
  height: 15px;
  display: inline-block;
  margin-right: 16px;
  background-color: #EA7600;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  content: "";
}
.submenu li a.btn {
  width: auto;
  margin: 15px 0 0 0;
  text-align: center;
  color: #FFFFFF;
  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;
  padding: 0 32px;
}
.submenu li:not(:last-child, .submenu-title) {
  border-bottom: 1px solid #F7F7F7;
}
.submenu li.customer-code {
  border-bottom: 0;
}
.submenu li.customer-code a {
  color: #262626;
  cursor: default;
}
.submenu li.customer-code a span {
  /* font-family: "Manrope";
   font-style: normal;*/
  font-weight: 600;
}
.submenu li.customer-code a:hover {
  color: #262626;
}
.submenu li.tags a {
  display: inline-block;
  background-color: #1D428A;
  color: #FFFFFF;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  margin: 1px 0;
  font-size: 14px;
  font-weight: 700;
  -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;
  padding: 4px 8px;
}
.submenu li.tags a:hover {
  background-color: #0071CE;
}
.submenu li.submenu-title {
  font-size: clamp(18px, 1.5vw, 20px);
  display: block;
  /* font-family: "Manrope";
   font-style: normal;*/
  font-weight: 700;
  padding-bottom: 15px;
}
.submenu li.submenu-title:not(:first-child) {
  padding-top: 30px;
}
.submenu li.submenu-title:after {
  content: "";
  width: 40px;
  height: 2px;
  border-radius: 1px;
  background-color: #EA7600;
  display: block;
  margin-top: 8px;
}
.submenu .recents a {
  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;
  gap: 16px;
}
.submenu .recents a p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 700;
  font-size: 15px;
  line-height: normal;
}
.submenu .recents a img {
  width: 75px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

/* ---------------------------------------------------------------------------------------------------- */
/* MEDIA QUERY ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
.submenu-mobile {
  display: none;
}

@media all and (max-width: 2000px) {
  header.head-menu {
    left: 40px;
    /*left: 25px;*/
  }
}
@media all and (max-width: 1680px) {
  footer {
    grid-template-areas: "claim . newsletter  newsletter " "contattigenerali quicklinks  eshop  social" "companyinfo companyinfo companyinfo companyinfo";
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  footer .footer-2 {
    display: none;
  }
}
@media all and (max-width: 1536px) {
  header.head-menu {
    left: 25px;
    width: calc(100% - 50px);
  }
  .searchContainer {
    width: calc(100% - 50px);
  }
}
@media all and (max-width: 1440px) {
  header.head-menu .main-menu li a,
  header.head-menu .main-menu li .a {
    padding: 10px;
  }
}
@media all and (max-width: 1430px) {
  footer {
    grid-template-areas: "claim newsletter  newsletter " "contattigenerali quicklinks  eshop " "social social social" "companyinfo companyinfo companyinfo";
    grid-template-columns: 50% 1fr 1fr;
  }
  footer .footer-2 {
    display: none;
  }
  footer .footer-social {
    margin-top: clamp(45px, 2.5vw, 80px);
  }
  footer .footer-social .soc {
    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;
    gap: clamp(20px, 1.5vw, 30px);
  }
}
@media all and (max-width: 1360px) {
  header.head-menu .logo {
    flex: 0 0 100px;
  }
  .no1360-1279 {
    display: none;
  }
  .si1360-1279 {
    display: block !important;
  }
}
@media all and (max-width: 1335px) {
  header.head-menu .main-menu li a, header.head-menu .main-menu li .a {
    font-size: 15px;
    padding: 10px;
  }
}
@media all and (max-width: 1279px) {
  header.head-menu .main-menu {
    display: none;
  }
  header.head-menu .logo {
    flex: 0 0 clamp(180px, 7vw, 220px);
  }
  .no1360-1279 {
    display: block;
  }
  .si1360-1279 {
    display: none !important;
  }
  .menu-aside ul li a:not(.round-btn) img {
    display: none;
  }
}
@media all and (max-width: 1023px) {
  .page-side-menu, .strip.page-side-menu {
    flex-direction: column;
  }
  .page-side-menu .submenu, .page-side-menu .submenu-container .help, .strip.page-side-menu .submenu, .strip.page-side-menu .submenu-container .help {
    display: none;
  }
  .page-side-menu .address-container, .page-side-menu .form-container, .strip.page-side-menu .address-container, .strip.page-side-menu .form-container {
    width: 100%;
  }
  .blog .page-side-menu, .strip.page-side-menu {
    flex-direction: column-reverse;
  }
  .reserved-pages.strip.page-side-menu {
    flex-direction: column;
  }
  .submenu-mobile {
    display: block;
  }
  /* MENU ASIDE: da tablet in giu' una colonna alla volta, si vede solo il
     pannello piu' profondo. data-depth (aside) e data-level (ul) dal JS. */
  /* NB: i selettori devono includere .menu-container, altrimenti perdono
     per specificita' contro le regole desktop */
  .menu-aside {
    /* la grid diventa una colonna sola: menu, login, footer impilati.
       minmax(0,1fr) e non 1fr: `1fr` vale `minmax(auto, 1fr)` e il minimo
       automatico della traccia e' il min-content piu' grande tra i suoi item,
       quindi un figlio "largo" allargherebbe la colonna e il menu sforerebbe */
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "menu" "menu-dx" "footer";
    /* Una colonna alla volta, ma il pannello nuovo ENTRA DA DESTRA e COPRE
       quello da cui e' stato chiamato.
       Per farlo non si puo' usare il display: con display:none il pannello
       sotto non esiste, quindi non c'e' niente da coprire, e le transition non
       partono sul display. Quindi: tutti i pannelli restano renderizzati,
       sovrapposti in absolute, e si muove solo il transform.
       Effetto collaterale gratuito: il ritorno (.backMenu) toglie .open al
       pannello profondo, che esce verso destra scoprendo quello sotto. */
    /* Piu' profondo = piu' in alto, cosi' copre quello da cui e' partito.
       Senza z-index vincerebbe l'ordine nel DOM, che non corrisponde alla
       profondita' (i pannelli sono fratelli stampati in ordine di sorgente).

       Agganciato alle classi .stepN e NON a .open[data-level]: alla chiusura
       menuRender() fa removeClass('open').removeAttr('data-level'), quindi con
       quegli agganci il pannello perdeva lo z-index nell'istante in cui iniziava
       a uscire e finiva DIETRO agli altri, invece di scivolare via sopra.
       Si vedeva solo su step3: chiudendo step2 finiva dietro a step1, che non ha
       background, quindi lo scorrimento era visibile per trasparenza; step3
       invece finiva dietro a step2, che e' bianco pieno, e sembrava sparire di
       colpo. Le classi .stepN sono statiche nel markup: restano anche a
       pannello chiuso, e la transizione di uscita si vede fino in fondo. */
  }
  .menu-aside .menu-container ul.menu {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    border-left: 0;
    /* sovrapposti invece che affiancati. In absolute flex/min-width non
       contano piu', ma restano validi sopra il breakpoint */
    position: absolute;
    /* top 70px: lascia spazio al .backMenu unico, che sta fermo sopra */
    inset: 50px 0 0 0;
    /* parcheggiato fuori schermo a destra: lo nasconde l'overflow-x:hidden
       di .menu-container, qui sotto */
    transform: translateX(100%);
    /* visibility e non display: e' transizionabile, quindi il pannello
       chiuso esce dal tab order senza rompere l'animazione */
    visibility: hidden;
    /* top nella lista: alla profondita' 1 il pannello riprende i 70px del
       back (regola in fondo al blocco mobile) e senza transizione quello
       scatto si vedrebbe proprio mentre la radice viene scoperta */
    transition: transform 280ms cubic-bezier(0.2, 0.7, 0.3, 1), visibility 280ms, top 280ms cubic-bezier(0.2, 0.7, 0.3, 1);
    /* deve battere sia il display:none desktop sia il vecchio
       .open{display:none} di questo blocco: i pannelli non si nascondono
       piu' col display */
  }
  .menu-aside .menu-container ul.menu, .menu-aside .menu-container ul.menu.open {
    display: block;
  }
  .menu-aside .menu-container ul.menu.open {
    transform: translateX(0);
    visibility: visible;
  }
  /* Il back c'e' solo se c'e' dove tornare: data-depth="1" significa che
     l'unico pannello aperto e' la radice. Il JS scrive data-depth sull'aside a
     ogni menuRender(), quindi non serve altro codice.
     Spostato fuori col transform e non nascosto col display: cosi' entra e
     esce scorrendo, in coppia con lo step2. visibility per togliergli il
     focus quando e' fuori. */
  /* Senza back visibile i pannelli si riprendono i 70px in alto */
  /*.menu-aside .menu-aside-bottom .address {
    width: 100%;
  }*/
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .menu-aside .menu-container ul.menu {
    transition: none;
  }
}
@media all and (max-width: 1023px) {
  .menu-aside .menu-container ul.menu.step1 {
    z-index: 1;
  }
  .menu-aside .menu-container ul.menu.step2 {
    z-index: 2;
  }
  .menu-aside .menu-container ul.menu.step3 {
    z-index: 3;
  }
  .menu-aside .menu-container {
    overflow-x: hidden;
    /* riferimento per i pannelli in absolute qui sopra: senza questo si
       ancorerebbero al primo antenato posizionato, fuori dal menu */
    position: relative;
    /* Il back sta fermo in alto e i pannelli scorrono sotto (top: 70px, sopra).
       In absolute e non in flusso: .menu-container e' un flex row con
       align-items:stretch, quindi come flex item la pillola si stirerebbe in
       altezza. z-index sopra i pannelli, che stanno da 1 a 8. */
  }
  .menu-aside .menu-container > .backMenu {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    margin: 0;
    /* Entra ed esce insieme al pannello, non col display: il display non si
       anima, ed e' per questo che in apertura compariva di colpo.
       Stessa durata e stessa curva dei .step, altrimenti si vedono due
       movimenti sfasati. left+right lo rendono larghezza piena, quindi
       translateX(100%) lo porta fuori esattamente come i pannelli.
       Stato a riposo = dentro; fuori lo mette la regola su [data-depth="1"]. */
    transform: translateX(0);
    visibility: visible;
    transition: transform 280ms cubic-bezier(0.2, 0.7, 0.3, 1), visibility 280ms;
  }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .menu-aside .menu-container > .backMenu {
    transition: none;
  }
}
@media all and (max-width: 1023px) {
  .menu-aside .menu-container ul.menu:not([data-level="0"]) {
    border-left: none;
    padding-left: 0;
    background-color: #FFFFFF;
  }
  .menu-aside[data-depth="1"] .menu-container > .backMenu {
    transform: translateX(100%);
    visibility: hidden;
  }
  .menu-aside[data-depth="1"] .menu-container ul.menu {
    inset: 50px 0 0 0;
  }
  .menu-aside .menu-aside-bottom {
    display: none;
  }
  .menu-aside .menu-container ul.menu > li.da1023 {
    display: flex !important;
  }
  footer {
    grid-template-columns: 50% 50%;
    grid-template-areas: "claim claim" "newsletter newsletter" "social social" "infogenerali quicklinks" "contattigenerali contattigenerali" "companyinfo companyinfo";
  }
  footer > * {
    text-align: center;
  }
  footer h4 {
    margin: clamp(20px, 1.5vw, 40px) 0;
  }
  footer .footer-claim {
    margin-bottom: clamp(20px, 1.5vw, 40px);
  }
  footer .footer-claim h3 {
    font-size: clamp(30px, 3vw, 48px);
  }
  footer .footer-3 {
    display: none;
  }
  footer .footer-2 {
    display: block;
  }
  footer .company-info {
    margin-top: clamp(20px, 1.5vw, 40px);
  }
  footer .company-info p a {
    display: none;
  }
  footer .footer-social {
    border-top: 0;
    margin-top: 0;
  }
  footer .footer-social ul {
    margin: 0 auto;
  }
  footer .footer-social .partners {
    display: none;
  }
  footer .footer-1, footer .footer-2 {
    margin-top: clamp(20px, 1.5vw, 40px);
  }
  footer .footer-1, footer .footer-2, footer .footer-contacts {
    text-align: left;
    border-top: 0;
  }
}
@media all and (max-width: 920px) {
  /*footer .footer-contacts ul li a img,
  footer .footer-contacts ul li span img {
    display: none;
  }*/
}
@media all and (max-width: 767px) {
  .bottom-utility {
    display: block;
  }
  .si1360-1279 {
    display: block !important;
  }
  header.head-menu {
    top: 0;
    left: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    width: 100%;
  }
  header.head-menu .menu-aside {
    height: 100dvh;
  }
  .page-header-small {
    padding-top: 90px;
  }
  .page-header-small.empty {
    padding-top: 70px;
  }
  header.head-menu .menu-actions li.btn-cart-container a img {
    width: 30px;
  }
  .round-btn.btn-outline-black {
    border: none;
  }
  .round-btn.btn-outline-black img {
    width: 100% !important;
  }
}
@media all and (max-width: 568px) {
  header.head-menu .logo img {
    height: 90%;
  }
  header.head-menu .logo {
    flex: 0 0 52px;
  }
  header.head-menu {
    padding-left: 15px;
    padding-right: 15px;
  }
  footer {
    padding: 30px 20px 20px 20px;
  }
  footer .checkboxes .checkbox label {
    font-size: 12px;
    gap: 5px;
    text-align: left;
  }
  footer ul li {
    font-size: 15px;
  }
  footer .footer-2 {
    margin-right: 10px;
  }
  footer .footer-1 {
    margin-left: 10px;
  }
}

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