/* Il caricamento del font Mulish e' stato spostato in
   themes/classic/templates/_partials/head.tpl.
   Qui era un @import: obbligava il browser a scaricare prima questo
   foglio, poi accorgersi dell'import, poi contattare Google, e solo
   allora prendere il font. Quattro attese in fila prima di poter
   disegnare del testo. NON rimetterlo qui. */

/* ============================================================
   SCALA TIPOGRAFICA FLUIDA
   ============================================================
   Le misure qui sotto interpolano da sole fra telefono e
   scrivania: clamp(minimo, formula, massimo). La formula e' una
   retta calcolata su due punti, 360 px (telefono piccolo) e
   1440 px (monitor), quindi il carattere cresce con la finestra
   senza gradini e senza una media query per ogni caso.

   Il massimo di ogni misura e' il valore che il sito ha gia'
   oggi su desktop: da 1440 px in su non cambia niente. Sotto,
   il carattere scende in proporzione invece di restare
   inchiodato a una misura pensata per lo schermo grande.

   La parte fissa e' in rem (non in px) perche' resti legata
   alla dimensione di carattere scelta dall'utente nel browser;
   la parte variabile e' in vw. Mescolarle e' necessario: un
   valore di solo vw ignorerebbe lo zoom da tastiera.

     --fs-fluid-lg    17 -> 20 px
     --fs-fluid-xl    17 -> 22 px
     --fs-fluid-2xl   20 -> 26 px
     --fs-fluid-3xl   24 -> 32 px
     --fs-fluid-4xl   22 -> 40 px                               */
:root {
  --fs-fluid-lg: clamp(1.0625rem, 1rem + 0.278vw, 1.25rem);
  --fs-fluid-xl: clamp(1.0625rem, 0.9583rem + 0.463vw, 1.375rem);
  --fs-fluid-2xl: clamp(1.25rem, 1.125rem + 0.556vw, 1.625rem);
  --fs-fluid-3xl: clamp(1.5rem, 1.3333rem + 0.741vw, 2rem);
  --fs-fluid-4xl: clamp(1.375rem, 1rem + 1.667vw, 2.5rem);
}

body {
  font-family: "Mulish", sans-serif !important;
  color: black !important;
  /* iOS ingrandisce da solo il testo quando il telefono viene
     ruotato in orizzontale, e lo fa in percentuale sul singolo
     blocco: righe della stessa pagina finiscono con corpi
     diversi. Qui l'ingrandimento automatico viene disattivato,
     lo zoom manuale a due dita resta. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Sotto i 992 px i campi di inserimento vanno a 16 px: e' la
   soglia sotto la quale Safari su iPhone ingrandisce la pagina
   appena si tocca un campo, e poi non la rimpicciolisce piu'.
   Il resto della grafica non e' toccato, cambia solo il testo
   digitato dentro i campi. */
@media (max-width: 991px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  select,
  textarea,
  .form-control {
    font-size: 16px;
  }
}

h1, h2, h3, h4, h5, h6,
p, a, li, div,
table, th, td, input, button {
  color: black;
}

.form-control {
  color: black;
  background-color: white;
}

#header .header-nav #_desktop_contact_link #contact-link,
.sitemap {
  margin: 0;
}
#header .header-nav .language-selector {
  margin: 0;
}
.carousel-inner {
  margin: 0;
}
#index #wrapper {
  padding: 0;
}

.block_newsletter {
  max-width: max-content;
}
.form-control-comment {
  color: black;
}

@media only screen and (min-width: 768px) {
  #search_widget {
    float: none !important;
    margin-bottom: 0;
  }
}
@media (max-width: 991px) {
  #header .header-nav .user-info {
    margin: 12px;
  }
  #header .header-top {
    padding: 0.5rem 0;
  }

}
@media (min-width: 992px) {
  #header .header-nav .user-info {
    margin: 0;
  }
}

/* --- NEW GLOBAL CSS */

.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-flex {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.product-description iframe {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.flex-1 {
  flex: 1 !important;
}

.gap-10 {
  gap: 10px !important;
}

.gap-20 {
  gap: 20px !important;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

.link {
  text-decoration: underline !important;
  color: inherit !important;
  cursor: pointer !important;
}

.link:hover {
  text-decoration: none !important;
}

.margin-auto {
  margin: auto !important;
}

.margin-0 {
  margin: 0 !important;
}

.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
  padding: 5px 10px;
}

.badge-success {
  background: #28a745 !important;
  color: white !important;
}

.badge-danger {
  background: #dc3545 !important;
  color: white !important;
}

.badge-warning {
  background: #ffc107 !important;
  color: black !important;
}

.badge-info {
  background: #17a2b8 !important;
  color: white !important;
}

.badge-primary {
  background: linear-gradient(-180deg, #ff7e31, #ff603c);
  color: white !important;
}

.badge-secondary {
  background: #00057b !important;
  color: white !important;
}

.badge-secondary:hover {
  background: #000098 !important;
  color: white !important;
}

.btn{
  font-weight: 800 !important;
  padding: 10px;
  /* 12 px: sotto questa misura un testo maiuscolo in grassetto
     diventa difficile da leggere su telefono. Da 992 px in su
     sale a 0.8rem, in fondo a questo blocco. */
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  border-radius: 5px !important;
  text-wrap: auto;
}

.btn-sm{
    padding: 0.25rem 0.5rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    border-radius: 0.2rem !important;
    width: 200px;
    word-wrap: break-word;
}

.btn-primary,
.btn-primary.active {
  background: linear-gradient(-180deg, #ff7e31, #ff603c) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary.active:hover {
  background: linear-gradient(-180deg, #ff603c, #ff7e31) !important;
  color: #fff !important;
}

.btn-view-container .btn-category,
.btn-secondary {
  background: #00057b !important;
  color: #fff !important;
}

.btn-view-container .btn-category:hover,
.btn-secondary:hover{
  color: #00057b !important;
  background-color: #fff !important;
  border: 1px solid #00057b !important;
}

.back-to-top-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #00057b;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.back-to-top-button span {
  font-size: 10px;
  line-height: 10px;
}

sup{
  color: red;
  font-weight: bold;
}

input[readonly]{
  background: #e9ecef !important;
  cursor: not-allowed !important;
}

#registration #content,
#rivenditore #content,
#contact #content {

  /* ------------------------------------------------------------------
     QUANDO MOSTRARE L'ERRORE - Nota Ezdirect, 8 settembre 2026

     Qui c'era:

         input:required:invalid,
         textarea:required:invalid,
         select:required:invalid { border: 2px solid red; }

     :invalid e' vero su un campo obbligatorio VUOTO gia' al caricamento
     della pagina, prima che l'utente tocchi qualsiasi cosa. Il form del
     rivenditore (account-creation_form_company) ha 18 campi obbligatori:
     si apriva con 18 bordi rossi addosso, come se l'utente avesse gia'
     sbagliato.

     Le regole di validazione NON sono state toccate: i campi restano
     required, il form non ha novalidate, il browser blocca l'invio
     esattamente come prima. E' cambiato solo il momento in cui l'errore
     si vede.

     Due regole separate, e la separazione e' voluta:

     1. :user-invalid diventa vero solo dopo che l'utente ha interagito
        col campo (o dopo un tentativo di invio). E' esattamente il
        comportamento richiesto, e lo da' il browser senza JavaScript.

     2. La regola con .ez-invio-tentato e' la rete di sicurezza per i
        browser che non conoscono :user-invalid. La classe la mette
        custom.js quando il browser blocca un invio.

     Perche' due blocchi e non un unico elenco separato da virgole: se un
     browser non riconosce :user-invalid, scarta l'INTERA regola in cui
     compare. Tenendoli separati, chi non lo sostiene perde solo il primo
     blocco e conserva il secondo.
     ------------------------------------------------------------------ */

  /* Campo non valido DOPO che l'utente lo ha toccato */
  input:user-invalid,
  textarea:user-invalid,
  select:user-invalid {
      border: 2px solid red;
  }

  /* Select2 */
  select:user-invalid + .select2-container .select2-selection {
      border: 2px solid red;
  }

  /* Stato valido, sempre dopo l'interazione */
  select:user-valid + .select2-container .select2-selection {
      border: 1px solid #ccc;
  }

  /* Rete di sicurezza: dopo un tentativo di invio, in ogni browser */
  form.ez-invio-tentato input:required:invalid,
  form.ez-invio-tentato textarea:required:invalid,
  form.ez-invio-tentato select:required:invalid {
      border: 2px solid red;
  }

  form.ez-invio-tentato select:required:invalid + .select2-container .select2-selection {
      border: 2px solid red;
  }
}


.back-to-top-button.show {
  opacity: 1;
}

@media (min-width: 992px) {
  .btn {
    font-size: 0.8rem !important;
  }
}

/* --- END NEW GLOBAL CSS --- */




/*--- HEADER ---*/

/* MOBILE */

#header {
  position: fixed;
  top: 0;
  width: 100vw;
}

#header,
#header .header-top,
#header .header-nav {
  background: #eff3fa;
}


.header-nav .nav_links a {
  text-transform: uppercase;
  padding: 0 5px;
}

#_desktop_contact_link {
  display: flex !important;
  justify-content: space-evenly;
  flex-direction: row;
  align-items: center;
  margin-left: 10px;
  gap: 20px;
  height: 43px;
}

#header-logos{
  display: flex;
  justify-content: space-between;
}

#header .logout:hover{
  text-decoration: underline;
}

#header .account:hover{
  text-decoration: underline;
}

.badgegruppo{
  text-decoration: none;
}

#main-header {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: nowrap;
}

#header .header-nav .cart-preview.active i {
  color: #000;
}

/* END MOBILE */

/* DESKTOP */

@media (min-width: 992px) {

  #header .header-top {
    background-color: white;
  }

  .header-top .container-fluid {
    position: relative;
  }

  #_desktop_cart,
  #_mobile_cart {
    min-width: 70px;
  }

}

/* --- END DESKTOP --- */

.header-top{
  padding: 0 !important;
}

#header .header-search-box {
  min-width: 50%;
  display: flex;
  justify-content: center;
}

#header .header-search-box #search_box {
  min-width: 70%;
}

#_desktop_user_info {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  height: 43px !important;
}

.cat .menu-category {
  display: none;
  opacity: 0;
  transition: opacity 0s ease;
}
.cat:hover .menu-category {
  display: block;
  opacity: 1;
  position: absolute;
  background-color: white;
  z-index: 1000;
}

#menu-blu {
  text-align: left;
  width: 90%;
  height: 58px;
  position: relative;
  margin: 0 auto;
}

#menu-blu-outer {
  display: flex;
  background-color: #000098;
  width: 100%;
  z-index: 2;
  top: 114px;
}

.menu-category {
  padding: 12px;
}

ul.menucategory {
  margin-left: 0px;
  list-style-type: none;
  z-index: 98;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

ul.menucategory li.cat {
  display: table-cell;
  text-align: center;
  font-variant: normal;
  text-transform: none !important;
  font-size: 13px !important;
  color: #ffffff;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 99;
  padding: 8px 0px;
  height: 58px;
  width: 100%;
}

ul.menucategory li.cat:hover {
  background-color: #f3f3f3 !important;
}

ul.menucategory li.cat:hover div {
  visibility: visible;
  z-index: 99;
}

ul.menucategory li.cat a {
  color: black;
  text-decoration: none;
  font-size: 13px !important;
}

@media (max-width: 1200px) {
  ul.menucategory li.cat a {
    color: black;
    text-decoration: none;
    font-size: 13px !important;
  }

  ul.menucategory > li.cat > a.menu-principale-link {
    /* La parte centrale e' il valore di prima: fra 992 e 1200 px
       la resa non cambia. I due estremi impediscono che il
       carattere sparisca su finestre strette o esploda su quelle
       larghe, cosa che il solo vw non poteva evitare. */
    font-size: clamp(0.625rem, 1.05vw, 0.8125rem) !important;
    display: block;
  }
}

ul.menucategory li.cat a :hover {
  color: black;
  text-decoration: none;
}

a.menu-principale-link :hover {
  background-color: #f3f3f3;
}

ul.menucategory li.cat:hover .menu-principale-link {
  background-color: #f3f3f3 !important;
  color: #000098 !important;
}

ul.menucategory li.cat .menu-principale-link {
  color: white !important;
  font-weight: 700;
  text-transform: uppercase;
}

ul.menucategory li.cat .menu-principale-link:hover {
  color: #000098;
}

#tutti-marchi a.menu-principale-link {
  color: white !important;
}

ul.menucategory li.cat#tutti-marchi {
  background-color: #000098 !important;
}

ul.menucategory li.cat#tutti-marchi:hover a.menu-principale-link {
  background-color: #000098 !important;
}

ul.menucategory li.cat .submenu .exh3-category a {
  color: #000098;
  font-weight: 700;
}

ul.menucategory li.cat .submenu .exh3-category a:hover {
  color: #000098;
  text-decoration: underline;
}

div.menu-category {
  position: absolute;
  color: #383838;
  text-align: left;
  top: 58px;
  left: 0px;
  font-size: 13px;
  z-index: 999;
  width: 1124px;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #f3f3f3;
  background-repeat: repeat-x;
  background-position: bottom;
  visibility: hidden;
}

div.menu-category .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

input.checkbox-menu-triangle:checked ~ div.menu-category {
  display: block;
  visibility: visible !important;
  z-index: 99;
}

h3.category {
  display: block;
  height: 27px;
  padding-left: 0px;
  padding-top: 7px;
  color: #282972;
  font-size: 15px;
  background-repeat: no-repeat;
  background-position: left;
}

span.exh3-category {
  display: block;
  padding-left: 0px;
  color: #000099;
  font-size: 13px !important;
  background-repeat: no-repeat;
  background-position: left;
  text-transform: uppercase;
  margin-top: 10px;
  height: 20px;
  font-weight: 700;
}

.exh3-category a:hover {
  color: #B34700 ;
}

div.submenu {
  z-index: 999;
  float: left;
  margin-top: -12px;
  padding-bottom: 5px !important;
}

div.submenu img {
  margin-bottom: 5px;
}

div.cat-separatore {
  margin-top: -12px;
  background-repeat: no-repeat;
  float: left;
}

#menu-blu .row {
  justify-content: center !important;
}

#menu-blu .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

/*--- END HEADER ---*/

/*--- CHECKOUT ---*/
.remove-from-cart:hover .material-icons {
  color: red !important;
}

.block-promo .promo-input {
  height: 36px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  margin-right: -3px;
}

.promo-code button {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.continue-shopping {
  display: flex;
  align-items: center;
  padding: 0;
  text-decoration: none !important;
}

.continue-shopping i {
  display: flex;
}

.continue-shopping span {
  flex: 1;
  text-align: center;
  transform: translateX(-10px);
}
/*--- END CHECKOUT ---*/

/*--- SEARCH ---*/
@media (min-width: 992px) {
  #search_query {
    width: 90%;
    height: 50px;
    font-size: 14px;
    padding-left: 15px;
  }

  .no_btn {
    background: none;
    border: none;
    border-right: 1px solid #e6e6e6;
    height: 50px;
    padding-top: 2.1px;
    margin-left: -140px;
    padding-right: 2px;
    text-align: right;
  }

  .no_btn img {
    width: 25%;
  }

  #search_query {
    border: none;
    border-top: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
  }
}

.header-top{
  background: #fff;
}

#search_widget{
  max-width: unset;
  width: 100%;
}

#search_widget form input{
  background: #fff;
  color: black;
  border: 1px solid black;
}

#vaicerca:hover{
  cursor: pointer;
}

/*--- END SEARCH ---*/


/* --- BREADCRUMB --- */
.breadcrumb li a {
  color: black;
  text-decoration: underline;
}

.breadcrumb li span {
  color: black;
  text-decoration: none;
}
/*--- END BREADCRUMB ---*/


/* --- PRODUCT ARTICLE */

.product-miniature {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #ccc;
  border-radius: 21px;
  margin: auto;
}

.product-miniature .thumbnail-container {
  min-height: unset;
  margin-bottom: 0;
}

.product-miniature .product-title a {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  display: block;
  text-align: left;
  text-decoration: none;
}
.product-miniature .product-title {
  text-align: center;
  text-transform: capitalize;
  min-height: 65px;
  margin: 0;
  overflow: hidden;
}

.product-miniature .product-description{
  padding: 0.5rem 0.5rem 0.7rem;
}

.sub_title {
  font-size: 14px;
  min-height: 40px;
  font-weight: 400;
  color: #000;
  display: block;
  text-align: left;
  margin: 0;
}

.product-reference{
  user-select: all;
  font-size: 14px;
  font-weight: 400;
}

.availability {
  text-wrap: nowrap;
}

.product-price-and-shipping {
  width: 100%;
  min-height: 30px;
}

.product_footer {
  padding: 0 10px;
  margin-bottom: 10px;
  margin-top: auto;
}

.more-details{
  display: none;
}

.offerta-fino-al {
  margin-bottom: 10px;
}

.product-add-to-cart-inlist{
  margin-top: auto;
  padding-top: 10px;
}

@media (min-width: 991px) {

  .product-miniature{
    min-height: 580px;
    max-width: 300px;
  }

  .product-miniature .thumbnail-container {
    min-height: 400px;
  }

  .product-miniature .product-title {
    min-height: 55px;
  }

  .product-miniature .sub_title {
    min-height: 20px;
  }

  .more-details {
    display: block;
    margin-bottom: 10px;
  }
  
}
/* --- END PRODUCT ARTICLE --- */

/* --- PRODUCT LEFT COLUMN --- */

#product .left-column-block,
#product .left-column-block-with-icon {
  padding: 5px;
  margin-bottom: 15px;
  border: 1px solid #d1d1d1;
  border-radius: 5px;
}

#product-left-column .left-column-block-with-icon img.icon {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

#product-left-column .left-column-block.special-offers img {
  display: block;
  padding: 10px;
  margin: auto;
}

#product-left-column .left-column-block.volantino-news img {
  display: block;
  padding: 10px;
  margin: auto;
  width: 100%;
}

#product-left-column .h3 {
  color: #00007b;
  margin: 0;
  font-weight: 800;
}

#product-left-column li{
  list-style-type: disc;
  margin: 10px 0 10px 15px;
}

/* --- VIEWED PRODUCTS MODULE */
#product-left-column .viewed-products .product{
  width: 100%;

  article {
    min-height: unset;
  }

  .btn-view-container{
    margin: 0;
  }

  .product-footer {
    height: auto;
  }
}


#ps_viewedproducts .featured-products {

  h2{
    min-height: unset;
  }

  .products .product-miniature{
    margin-top: 0;
    min-height: unset !important;

    .thumbnail-container{
      min-height: unset;
    }

    a.product-thumbnail{
      min-height: unset;
    }

    .product_footer{
      display: none;
    }

    .btn-category{
      width: 90%;
      white-space: break-spaces;
    }
  }

} 

@media(min-width: 992px) {

  #ps_viewedproducts .products .js-product {
    margin-bottom: 10px;
  }

  #ps_viewedproducts article.product-miniature {
    border: unset;

    .special_offer,
    .product-add-to-cart-inlist {
      display: none;
    }

    .thumbnail-container {
      min-height: unset;
    }

    .product_footer {
      padding: 0;
    }
  }

}
/* --- END VIEWED PRODUCTS */

/* --- END PRODUCT LEFT COLUMN */

/* --- PRODUCT RIGHT COLUMN --- */

#products .products, 
.featured-products .products, 
.product-accessories .products, 
.product-alternatives .products {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

/* --- PRODUCT ALTERNATIVES --- */

.product-alternatives {
  margin-top: 15px;
}

@media (min-width: 992px) {
  #products .products, 
  .featured-products .products, 
  .product-accessories .products,
  .product-alternatives .products {
    gap: 10px;
  }

  #product-modal .modal-dialog{
    max-width: 80%;
    margin: 30px auto;
  }

  #product-modal .modal-content .modal-body {
    margin-left: unset;
  }

  #product-modal #thumbnails .product-images{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
/* --- END PRODUCT RIGHT COLUMN --- */

/*--- FIXED BOTTOM ADD TO CART IN PRODUCT PAGE ---*/


/*--- FIXED BOTTOM ADD TO CART IN PRODUCT PAGE ---*/

#add-to-cart-or-refresh.fix-to-bottom {

  position: fixed;

  top: 165px;

  left: 0;

  z-index: 2;

  background-color: white;

  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);

  border: 1px solid #00057b;

  padding: 6px 10px;

  width: 100vw;

  box-sizing: border-box;

  display: flex;

  justify-content: flex-start;

  flex-direction: row;

  align-items: center;

  flex-wrap: nowrap;

  gap: 8px;


  /* Elementi non necessari nella barra */

  .product-variants,
  .product-discounts,
  .js-product-availability,
  .tax-shipping-delivery-label {
    display: none !important;
  }


  /* ======================================================
     PRODOTTO
     ====================================================== */

  .availability {

    flex: 1 1 auto;

    min-width: 180px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    #hidden_product_title {
      display: block !important;

      width: 100%;

      margin: 0;
      padding: 0;

      font-size: clamp(16px, 1.25vw, 22px);
      font-weight: 700;
      line-height: 1.05;

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }


  /* ======================================================
     PREZZO
     ====================================================== */

  .product-prices {

    flex: 0 0 auto;

    width: auto;
    min-width: 0;

    margin: 0;
    padding: 0;

    white-space: nowrap;

    .product-price {
      width: auto;
      margin: 0;
      padding: 0;
    }

    .current-price {

      display: flex;

      flex-direction: row;

      align-items: baseline;

      gap: 6px;

      margin: 0;
      padding: 0;

      white-space: nowrap;
    }

    .current-price-value {

      margin: 0;
      padding: 0;

      font-size: clamp(23px, 2vw, 30px);

      font-weight: 900;

      line-height: 1;

      white-space: nowrap;
    }

    .price_tax_incl {

      margin: 0;
      padding: 0;

      font-size: 11px;

      line-height: 1;

      white-space: nowrap;
    }
  }


  /* ======================================================
     OFFERTA
     ====================================================== */

  .offerta-fino-al {

    flex: 0 0 auto;

    margin: 0;
    padding: 0;

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

    white-space: nowrap;
  }


  /* ======================================================
     ACCEDI PER LO SCONTO
     ====================================================== */

  .login_for_offer {

    flex: 0 0 auto;

    width: 115px;

    min-width: 115px;

    max-width: 115px;

    height: 42px;

    min-height: 42px;

    margin: 0;
    padding: 0;

    display: flex;

    align-items: stretch;

    overflow: hidden;
  }


  .login_for_offer::before {

    display: none !important;

    content: none !important;
  }


  .login_for_offer .btn {

    width: 100%;

    height: 42px;

    min-height: 42px;

    margin: 0;

    padding: 0 6px;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    font-size: 10px;

    font-weight: 700;

    line-height: 1.05;

    text-align: center;

    white-space: normal;
  }


  /* ======================================================
     QUANTITÀ + CARRELLO
     ====================================================== */

  .product-add-to-cart {

    flex: 0 1 auto;

    min-width: 0;

    width: auto;

    margin: 0;
    padding: 0;


    .product-quantity {

      display: flex;

      flex-direction: row;

      flex-wrap: nowrap;

      align-items: center;

      width: auto;

      margin: 0 !important;

      padding: 0 !important;

      gap: 8px;
    }


    /* Quantità */

    .product-quantity .qty {

      flex: 0 0 92px;

      width: 92px;

      min-width: 92px;

      height: 42px;

      margin: 0;
    }


    /* Carrello */

    .product-quantity .add {

      flex: 0 1 auto;

      min-width: 220px;

      height: 42px;

      margin: 0;
    }


    .product-quantity .add .add-to-cart {

      width: 100%;

      height: 42px;

      min-height: 42px;

      margin: 0;

      padding: 0 16px;

      display: flex;

      align-items: center;

      justify-content: center;

      box-sizing: border-box;

      font-size: 12px;

      font-weight: 700;

      line-height: 1;

      white-space: nowrap;
    }
  }
}


/* ==========================================================
   DESKTOP PIÙ STRETTO
   ========================================================== */

@media (min-width: 992px) and (max-width: 1199px) {

  #add-to-cart-or-refresh.fix-to-bottom {

    padding: 4px 7px;

    gap: 5px;

    min-height: 50px;

    height: 50px;

    max-height: 50px;


    .availability {

      min-width: 210px;

      #hidden_product_title {
        font-size: 17px;
      }
    }


    .product-prices .current-price-value {
      font-size: 23px;
    }


    .login_for_offer {

      width: 105px;

      min-width: 105px;

      max-width: 105px;

      height: 42px;

      .btn {
        font-size: 9px;
      }
    }


    .product-add-to-cart {

      .product-quantity {
        gap: 5px;
      }

      .product-quantity .qty {
        flex-basis: 78px;

        width: 78px;

        min-width: 78px;
      }

      .product-quantity .add {
        min-width: 180px;
      }

      .product-quantity .add .add-to-cart {
        padding: 0 8px;

        font-size: 10px;
      }
    }
  }
}


/*--- END FIXED BOTTOM ADD TO CART IN PRODUCT PAGE ---*/

#add-to-cart-or-refresh.fix-to-bottom:hover{
  opacity: 1;
}

div.mobile-fix{
  scroll-padding-top: 200px;
}

/*--- END FIXED BOTTOM ADD TO CART IN PRODUCT PAGE ---*/

/* --- PRODUCT PAGE --- */

#product #description * {
  all: revert;
}

#product #description img {
  max-width: 100%;
  height: auto;
}

.product-description ul li{
  color: black !important;
}

#product h1 {
  font-weight: 900;
  /* 24 px su telefono, 32 px su desktop (la misura di prima). */
  font-size: var(--fs-fluid-3xl);
}

.prodottiSimili a{  
  padding-left: 0;
  padding-right: 0;
}

#product .product-price-and-shipping{
  text-align: left;
}

@media (max-width: 991px) {
  #product .product-additional-info,
  #product .blockreassurance_product {
    border: 0;
  }
}

#product .current-price {
  color: #000;
}


#product .current-price-value {
  font-size: var(--fs-fluid-3xl);
  font-weight: 900;
  margin-right: 0.3rem;
}

#product .product-prices .tax-shipping-delivery-label,
#product .price_tax p {
  margin-left: 15px;
  font-weight: 600;
  color: #000;
  font-size: 14px;
}

#product .product-quantity #quantity_wanted {
  border: none;
  width: 5rem;
}
#product .product-actions .add-to-cart.btn-primary {
  border-radius: 5px;
  background: #00057b !important;
  font-size: 0.9rem;
  flex: 1;
  height: 100% !important;
}

#product .wishlist-button-product {
  margin-top: 8px;
}
#product .tabs .nav-tabs .nav-link {
  color: black;
  margin: 0 2px;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 16px;
}

#product .tabs .nav-tabs .nav-link a {
  color: #000;
}
#product .tabs .nav-tabs .nav-link.active {
  color: #00007b;
}

@media(max-width: 991px){
  #product .tabs .nav-tabs .nav-link{
    width: fit-content;
    margin: 0 auto;
  }
}

#product .product-features > dl.data-sheet dt.name {
  background: #ebebeb;
  font-weight: 600;
}

#product .product-features .feature_container {
  -webkit-box-flex: 1;
  -ms-flex: 1 0 40%;
  flex: 1 0 40%;
  min-height: 2.5rem;
  padding: 0.625rem;
  margin-right: 0.625rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
  text-transform: capitalize;
  word-break: normal;
  width: 90%;
}
#product .product-features {
  border-top: 1px solid #d1d1d1;
  padding-top: 25px;
}
#product .product-features .h6 {
  /* 17 px su telefono, 20 px su desktop (la misura di prima). */
  font-size: var(--fs-fluid-lg);
  font-weight: 900;
}
#product .feature_group_title {
  background: #eff3fa;
  padding: 15px 0;
}
#product .feature_group_title_container h4 {
  padding-left: 10px;
  width: 90%;
}
.features_list .feature_container:not(:last-of-type) {
  border-bottom: 1px solid #d1d1d1;
}
#product .product-cover {
  border: 1px solid #ebebeb;
  margin: 0 20px;
  margin-bottom: 1.25rem;
}
use:nth-child(2) {
  transform: translate(20px);
}
use:nth-child(3) {
  transform: translate(40px);
}
use:nth-child(4) {
  transform: translate(60px);
}
use:nth-child(5) {
  transform: translate(80px);
}
use:nth-child(6) {
  transform: translate(100px);
}
#product .rating {
  display: block;
  height: 20px;
  width: 130px;
}
.tabs .nav-tabs li.nav-item.hint {
  padding-top: 13px;
  margin-right: 10px;
  font-weight: 900;
  font-size: 16px;
}
#product #product-comments-list-header h4 {
  font-weight: 900;
}

#manufacturer #main .brand-box {
  position: relative;
  width: 25%;
  padding: 10px;
  margin: 5px;
  text-align: center;
  background: #fff;
  -webkit-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
  border: 0.5px solid #d4d4d4;
}

#manufacturer #main ul .brand{
  width: 100%;
}

#manufacturer #main .brand-box:hover{
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
}

#manufacturer #main ul .brand:hover{
  box-shadow: none;
}

.brand-legend{
  padding: 0 20px;
}

ul.brand-legend-list{
  display: flex;
  flex-wrap: wrap;
  align-content: space-around !important;
  flex-direction: column !important;
  max-height: 1000px;
}

div.brand-legend-link{
  margin-top: 45px;
}

@media (max-width: 991px) {
  ul.brand-legend-list{
    flex-direction: row !important;
    max-height: unset !important;
    justify-content: flex-start !important;
  }

  div.brand-legend-link{
    width: 40%;
    margin: 25px auto 0 auto;
  }
}

#manufacturer #main .brand-box .brand .brand-products a {
  color: #000;
}

#manufacturer #main ul.brand-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#product .modal-body {
  background: #f9f9f9;
}

#product-modal .modal-content .modal-body .image-caption {
  background: none;
}

@media (max-width: 991px) {
  #product .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }

  #product .product-actions .add-to-cart.btn-primary {
    padding: none;
  }
  body#product {
    width: 100vw;
    overflow-x: hidden;
  }
  .tabs .nav-tabs li.nav-item {
    float: none;
    text-align: center;
    margin: 5px 0;
  }
  .tabs {
    padding: 0;
  }
  #product .product-actions.js-product-actions {
    text-align: center;
  }
  #product .bootstrap-touchspin {
    border: 1px solid #000;
  }
  #product #product-comments-list-header h4 {
    font-size: 20px;
  }

  #manufacturer #main .brand-box .brand .brand-img {
    min-height: 115px;
  }
  #manufacturer #main .brand-box .brand .brand-img img {
    max-width: 110px;
  }
  #manufacturer #main .brand-box {
    min-width: 190px;
  }

  #ps_newproducts, #ps_viewedproducts, #contatti {
    display: none !important;
  }
}

@media (min-width: 992px) {
  #product .input-group.bootstrap-touchspin {
    border: 1px solid #000;
    padding: 5px;
  }

  .input-group-btn-vertical button{
    float: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 25px !important;
  }

  .input-group-btn-vertical button i.material-icons{
    font-size: 24px !important;
    position: unset !important;
    top: 0 !important;
    left: 0 !important;
  }

  #product .product-actions .add-to-cart.btn-primary {
    /* DGNET - il line-height a 1px reggeva finche la scritta stava su una riga:
       nella colonna del prodotto, con il banner PayPal accanto, il pulsante si
       stringe, "Aggiungi al carrello" va a capo e le due righe finivano una
       sopra l altra. Ora l interlinea e normale e i fianchi sono piu stretti,
       cosi la scritta ci sta su una riga sola; l altezza continua a darla la
       riga (il pulsante si stira quanto il campo della quantita). */
    padding: 0 1.25rem;
    line-height: 1.25;
    background: #00057b !important;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 16px;
  }

  #product-availability {
    display: none;
  }

  .social-sharing {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    margin-top: 0;
  }

  a {
    color: #00057b;
  }
  #header a:hover {
    color: #0B1098;
    text-decoration: none;
  }

  #product #product-right-column {
    padding-right: 15px;
  }

  #product #product-left-column .top img {
    width: 10%;
  }
  #product #product-comments-list-header h4 {
    font-size: 26px;
  }
  #category .login_for_offer,
  #manufacturer .login_for_offer,
  #product .login_for_offer {
    text-align: center;
  }

  #manufacturer #main ul .brand-img img {
    width: 100%;
  }
  #manufacturer #main .brand-box .brand .brand-img {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
  }
  #manufacturer #main .brand-box {
    min-height: 300px;
    min-width: 210px;
  }
  #product .featured-products .products .js-product .product-miniature {
    min-height: 650px;
  }
}

.fuoriproduzione {
  background: red;
  color: #fff;
  font-weight: 900;
  text-transform: uppercase;
  border-radius: 5px;    
  display: inline-block;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  width: 100%;
}
@media (max-width: 991px) {
  .fuoriproduzione {
      /* Erano 8 px: una scritta maiuscola a quella misura non si
         legge. A 10 px "FUORI PRODUZIONE" sta comunque dentro la
         scheda larga il 45% dello schermo. */
      font-size: 0.625rem;
      padding: 0.5rem 0.2rem;
  }
}
@media (min-width: 992px) {
  .fuoriproduzione {
      font-size: 10px;
      padding: 0.5rem 1rem;
      letter-spacing: 1px;
  }
}

/*--- END PRODUCT ---*/

/*--- MOBILE_MENU ---*/
#header .nav-menu-mobile {
  display: none;
}
#header.is-open .nav-menu-mobile {
  display: block;
}
.nav-menu-mobile {
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
}
.nav-menu-mobile li {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  line-height: 100%;
  list-style: none;
}
.Cat .subCategories ul > li {
  padding-left: 25px;
  min-height: 45px;
}
.sub .subCategories ul > li {
  padding: 12px 0 12px 50px;
}
.nav-menu-mobile li:hover {
  background-color: #ebebeb;
}
.nav-menu-mobile .flex {
  position: relative;
  flex-wrap: nowrap;
}
.nav-menu-mobile .subCategories {
  visibility: hiddden;
  display: none;
  top: 100%;
  left: 0;
  background-color: white;
  transition: max-height 0.3s ease;
  max-height: 100%;
  list-style: none;
}
.nav-menu-mobile {
  display: none;
  width: 100%;
  background-color: #fff;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
#menu-icon {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  position: relative;
}

.nav-menu-mobile.active {
  display: block;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}
.flex span {
  color: #000;
}
.subCategories {
  display: none;
  margin-top: 12px;
}
.subCategories.active {
  display: block;
}
#mobile-menu a {
  color: black;
  text-decoration: none;
  display: block;
  /* 4vw da solo dava 14.4 px su un telefono da 360 px ma 30.7 px
     su un tablet da 767 px, dove le voci del menu andavano a
     capo. Il valore centrale e' quello di prima, quindi sul
     telefono non cambia nulla: si ferma a 18 px sui formati
     larghi. */
  font-size: clamp(0.875rem, 4vw, 1.125rem);
}
#mobile-menu .Cat {
  padding: 10px 0;
}
#mobile-menu .Cat.SpaziLavoro {
  padding: 17px 0;
}
#mobile-menu .Icons {
  padding: 15px 0;
}
#mobile-menu .Cat .flex .chevron-right:before,
#mobile-menu .Cat.open .subCategories .sub .flex .chevron-right:before {
  background-image: url("../img/chevron-right.svg");
  background-size: 25px 30px;
  display: inline-block;
  width: 25px;
  height: 30px;
  content: "";
}
#mobile-menu .Cat.open .flex .chevron-right:before,
#mobile-menu .Cat.open .subCategories .sub.open .flex .chevron-right:before {
  background-image: url("../img/chevron-down.svg");
  background-size: 25px 30px;
  display: inline-block;
  width: 25px;
  height: 30px;
  content: "";
}

#mobile-menu .Cat.open .sub-last {
  padding-left: 35px;
}

.nav-menu-mobile {
  overflow-y: auto;
}

.subCategories {
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: hidden;
}

#mobile-menu .Icons.Offerte img,
#mobile-menu .Icons.Contatti img {
  margin-left: 13px;
}

#mobile-menu #produttori .produttore a {
  padding-top: 15px;
}

#header #mobile-menu {
  position: fixed;
  top: 0;
  left: -350px;
  width: 350px;
  height: 100%;
  background-color: #eff3fa;
  transition: left 0.3s ease;
  overflow-y: scroll;
}

#header.is-open #mobile-menu {
  left: 0;
  border: 0.5px solid #000;
  width: 100%;
}

.logo-menu {
  max-width: 45%;
  height: auto;
  margin-left: 100px;
  margin-top: 2px;
}
/*---MOBILE_MENU---*/

/*--- FOOTER ---*/
#footer {
  background: #eff3fa;
}

#footer-bottom {
  text-align: center;
  padding-top: 20px;
}
#footer #block_contact_infos .link-list li {
  padding: 5px 0;
}

#footer #block_contact_infos .link-list li:nth-child(2) img,
#footer #block_contact_infos .link-list li:nth-child(3) img {
  margin-right: 10px;
}
#footer #block_contact_infos .link-list li > a {
  color: #000;
  font-weight: 900;
}
#footer .sub_footer {
  border-top: 1px solid #d1d1d1;
  align-items: center;
  justify-content: center;
}
@media (max-width: 991px) {
  #footer .sub_footer {
    border-top: none;
    border-bottom: 0.5px solid #000;
    margin-top: 10px;
  }
}
@media (min-width: 992px) {
  #footer .sub_footer {
    display: flex;
  }
}
#footer .sub_footer .legal_text {
  color: #000;
  font-size: 12px;
  margin: 10px 0;
}

.sub_footer .text-sm-center{
  margin: 0;
}

.fty a{
  color: black;
}

.footer-container {
  overflow: hidden;
}
#footer .block_newsletter .newsletter_intro {
  text-align: center;
  margin-bottom: 50px;
}
#footer .block_newsletter .newsletter_intro #block-newsletter-label {
  /* 20 px su telefono, 26 px su desktop (la misura di prima). */
  font-size: var(--fs-fluid-2xl);
  font-weight: 900;
}
#footer .block_newsletter .newsletter_intro span {
  font-weight: 500;
}
.block_newsletter form input[type="email"] {
  height: 60px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.block_newsletter form input {
  height: 60px;
}
.block_newsletter .btn-container .btn.btn-primary {
  width: 20%;
  font-size: 14px;
  background: #000;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}


@media (max-width: 991px) {
  
  #footer .footer-container {
    text-align: center;
  }

  .fisarmonica {
    background-color: #eff3fa;
    color: #000;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 16px;
  }

  .fisarmonica-content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
  }

  .link-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  .link-list li {
    margin: 8px 0;
  }

  .links.wrapper {
    border-bottom: 0.5px solid #000;
  }

  .links.wrapper:nth-child(1) {
    border-top: 0.5px solid #000;
  }

  .fisarmonica.active {
    border-bottom: 0.5px solid #000;
    margin-bottom: 10px;
  }

  #footer .block_newsletter #block-newsletter-label {
    text-align: center;
  }

  .block_newsletter form {
    width: 90%;
    margin: 0 auto;
  }

  #footer .block_newsletter .newsletter_intro {
    margin-bottom: 10px;
  }

  .fisarmonica:after {
    background-image: url("../img/chevron-down.svg");
    background-size: 25px 30px;
    display: inline-block;
    width: 25px;
    height: 20px;
    content: "";
    margin-left: 10px;
  }

  .fisarmonica.active:after {
    background-image: url("../img/chevron-up.svg");
    background-size: 25px 30px;
    display: inline-block;
    width: 25px;
    height: 20px;
  }
}

@media (min-width: 992px) {
  #footer .container-footer {
    width: 95%;
    max-width: 100%;
    margin: 0 auto;
  }
  #footer {
    margin-top: -25px;
  }
  #footer #block_contact_infos .link-list li:nth-child(1),
  #footer #block_contact_infos .link-list li:nth-child(2) {
    width: 80%;
  }
  .footer-container {
    padding-top: 2.5rem;
  }
  #footer .block_newsletter .newsletter_intro {
    margin-bottom: 20px;
  }
  #search .products-selection {
    display: none;
  }

  #search #category-description {
    display: none;
  }
}

.featured-products .price_tax {
  display: inline-block !important;
  font-weight: 400 !important;
  font-size: 14px !important;
}

/*--- END FOOTER ---*/

/*--- Featured Product ---*/
#product .featured-products {
  /* 17 px su telefono, 20 px su desktop (la misura di prima).
     E' la misura ereditata dagli elementi della scheda che non
     ne dichiarano una propria. */
  font-size: var(--fs-fluid-lg);
}

@media (min-width: 992px) {
  #product .featured-products {
    padding: 1.25rem 1.875rem;
  }
}

#product .featured-products .products .col-xl-3 {
  width: 24%;
}
#product .featured-products .products .col-xs-12 {
  width: 30%;
}
#product .featured-products .products {
  justify-content: space-around !important;
}

#product .featured-products .product-miniature{
  max-width: 100%;
}


#product .featured-products .product-miniature .product-title,
#product .featured-products .product-miniature .product-price-and-shipping,
#category #js-product-list .product-miniature .product-title,
#category #js-product-list .product-miniature .product-price-and-shipping,
#manufacturer #js-product-list .product-miniature .product-title,
#manufacturer #js-product-list .product-miniature .product-price-and-shipping {
  text-align: left;
}
#product .featured-products .product-miniature .product-title a,
#category #js-product-list .product-miniature .product-title a,
#manufacturer #js-product-list .product-miniature .product-title a {
  color: #000;
  font-weight: 900;
}

#product .featured-products .product-miniature .product-price-and-shipping,
#category #js-product-list .product-miniature .product-price-and-shipping,
#manufacturer #js-product-list .product-miniature .product-price-and-shipping {
  /* 17 px su telefono, 22 px su desktop (la misura di prima).
     Su telefono queste schede stanno due per riga, larghe il
     45% dello schermo: a 22 px il prezzo con l'IVA andava a
     capo. */
  font-size: var(--fs-fluid-xl);
}

/*--- CATEGORY / CATEGORIES ---*/
.block-category .block-category-inner .category-cover img {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.offerta-fino-al,
.discount {
  font-weight: 900;
  font-size: 14px;
  width: 100%;
  background: linear-gradient(-180deg, #ff7e31, #ff603c);
  -webkit-background-clip: text; /* Per Safari / Chrome */
  -webkit-text-fill-color: transparent; /* Rende il testo trasparente per mostrare il background */
  background-clip: text;
  color: transparent;
}

.block-category .block-category-inner #category-description {
  margin-bottom: 30px;
}
.block-category .block-category-inner #category-description p {
  color: #000;
  line-height: 24px;
}
.block-category .block-category-inner #category-description strong {
  color: #000;
  font-weight: 600;
}
.block-category .block-category-inner #category-description a {
  color: #000;
  font-weight: 900;
  text-decoration: underline;
}
#category .products-list-sort,
#manufacturer .products-list-sort {
  margin: 0 auto;
}
.products-selection p {
  color: #000;
}
@media (max-width: 991px) {
  #category .col-sm-6,
  #manufacturer .col-sm-6 {
    float: left;
    width: 45%;
  }

  #product .featured-products .product-miniature .product-title a,
  #category #js-product-list .product-miniature .product-title a,
  #manufacturer #js-product-list .product-miniature .product-title a {
    font-size: 14px;
  }
  #product .featured-products .js-product.product,
  #category #js-product-list .js-product,
  #manufacturer #js-product-list .js-product {
    margin: 5px 5px;
    width: 45%;
  }

  .product-miniature .thumbnail-top {
    padding: 0 10px;
  }
  #js-product-list-header .block-category {
    padding: 0 20px;
  }
  .block-category .block-category-inner #category-description p {
    text-align: justify;
  }
  .brands-sort .dropdown-menu,
  .products-sort-order .dropdown-menu,
  .suppliers-sort .dropdown-menu {
    width: 100%;
  }
  .products-selection .showing,
  .pagination > div:first-child {
    text-align: center;
  }
  .pagination .page-list {
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }
}

@media (min-width: 992px) {
  #js-product-list .col-xl-3 {
    min-width: 20%;
    flex: 1;
    /* display: flex; */
  }
}


.special_offer {
  background: linear-gradient(-180deg, #ff7e31, #ff603c);
  text-align: center;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  height: 20px;
}

.special_offer p{
  color: #fff !important;
}

.special_offer_no {
  /* background: #fff; */
  text-align: center;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  height: 20px;
}
.special_offer_no p {
  margin: 0;
  text-transform: uppercase;
  font-weight: 900;
  padding: 7px 0;
  color: #fff;
  min-height: 34px;
}

.special_offer p {
  margin: 0;
  text-transform: uppercase;
  font-weight: 900;
  padding: 0 2px 2px 2px;
  color: #fff;
  font-size: 12px;
}
.discount_container {
  display: inline-flex;
}
.discount_container p {
  margin-left: 10px;
  background: linear-gradient(-180deg, #ff7e31, #ff603c);
  border-radius: 20px;
  padding: 0 5px;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  height: fit-content;
  width: 40px;
}

.price_tax {
  color: #000;
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 5px;
  display: inline-block;
  margin-left: 5px;
}

.product-price-and-shipping .preventivo .btn.btn-primary,
#product .preventivo .btn.btn-primary {
  background: #ff6601;
  color: #fff;
  border-radius: 5px;
}

@media (max-width: 991px) {
  .price_tax {
    margin-top: 5px;
  }
  .price {
    font-size: 15px;
  }

  .product-price-and-shipping .preventivo .btn.btn-primary {
    font-size: 12px;
  }

}
@media (min-width: 992px) {
  .product-price-and-shipping .preventivo {
    height: 45px;
    height: 28px;
  }
  .product-price-and-shipping .preventivo .btn.btn-primary {
    padding: 10px 21px;
    font-size: 12px;
  }
}
/* La scala andava all'indietro: 15 px su telefono, 20 px fra 992
   e 1299 px, 18 px oltre i 1300. Il prezzo era quindi al massimo
   proprio dove le colonne della lista sono piu' strette, ed era
   li' che andava a capo. I due valori sono stati scambiati, cosi'
   la misura cresce insieme alla finestra. */
@media (min-width: 992px) and (max-width: 1299px) {
  .price {
    font-size: 18px;
  }
}
@media (min-width: 1300px) {
  .price {
    font-size: 20px;
  }
}
/*---CATEGORY---*/

/*---add_to_cart_btn---*/
#product .featured-products .btn-cart-container,
#category .btn-cart-container,
#manufacturer .btn-cart-container {
  background: #00057b;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  color: #fff;
  text-align: center;
  width: 100%;
}
#product .featured-products .btn-cart-container a,
#category .btn-cart-container a,
#manufacturer .btn-cart-container a {
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
}
#product .featured-products .btn-cart-container .btn-primary,
#category .btn-cart-container .btn-primary,
#manufacturer .btn-cart-container .btn-primary {
  background: transparent;
  width: 100%;
}
#product .featured-products .btn-cart-container img,
#category .btn-cart-container .btn-cart-container img,
#manufacturer .btn-cart-container .btn-cart-container img {
  width: 20px;
  height: 20px;
  margin-bottom: 5px;
}

.selectedFilters .clearAll a {
  text-align: left !important;
}

@media (max-width: 991px) {
  #product .featured-products .btn-cart-container a,
  #category .btn-cart-container a,
  #manufacturer .btn-cart-container a {
    /* Erano 9.6 px. A 11 px la scritta sta ancora su una riga
       sola dentro la scheda da telefono. */
    font-size: 0.6875rem;
  }
  #product .featured-products .btn-cart-container a,
  #category .btn-cart-container a,
  #manufacturer .btn-cart-container a {
    padding: 10px 0;
  }

  #amazzing_filter .btn-primary,
  #amazzing_filter .btn-primary:hover {
    background: #00007b;
  }
}
@media (min-width: 992px) {
  #product .featured-products .btn-cart-container a,
  #category .btn-cart-container a,
  #manufacturer .btn-cart-container a {
    /* Qui c'era "font-size: 1.5", senza unita' di misura: una
       dichiarazione non valida, che il browser scartava. Il
       bottone prendeva quindi gli 0.8rem di .btn. La misura resa
       e' la stessa di prima, ma ora la riga e' valida. */
    font-size: 0.8rem;
  }
  #product .featured-products .btn-cart-container a,
  #category .btn-cart-container a,
  #manufacturer .btn-cart-container a {
    padding: 25px 0;
  }
}
/*---add_to_cart_btn---*/

/*PRODUCTS_VISIBLE_QUANTITY-start*/
.tooltiptext {
  color: #000;
  font-size: 14px;
  margin-left: 1px;
  text-transform: uppercase;
  margin-right: 10px;
}
.tooltip-not {
  background-color: red;
}
.tooltip-limit {
  background-color: #eed202;
}
.tooltip-ok {
  background-color: #00ff00;
  background-color: green;
}

.discount_pre_container {
  /* min-height: 30px; */
  margin-top: 20px;
}
@media (max-width: 991px) {
  .tooltip-a {
    border-radius: 5px;
    width: 15px;
    height: 15px;
    display: inline-block;
    margin: -2px;
  }

}
@media (min-width: 992px) {
  .tooltip-a {
    border-radius: 5px;
    width: 12px;
    height: 12px;
    display: inline-block;
    /* margin: 4px 0px 0px 10px; */
  }
  .btn-view-container {
    margin-top: auto;
  }
}
/*PRODUCTS_VISIBLE_QUANTITY-end*/
/*---cart----*/
#cart .promo-code-button {
  color: #000;
}
#cart .promo-code .btn.btn-primary,
#cart .cart-grid .btn.btn-primary,
.block-promo .promo-input + button {
  background: #ff6601;
  border: 2px solid #ff6601;
  color: #fff;
  width: 100%;
  margin: 0;
  border-radius: 0 !important;
  margin-right: -3px;
}
#cart .cart-detailed-actions .btn.btn-primary {
  border-radius: 5px;
  margin-top: 3px;
  background: #ff6601;
  font-size: 0.9rem;
}
#cart .cart-grid-body {
  border: 1px solid rgba(0, 0, 0, 0.25);
}
#cart .product-line-grid-right .product-price {
  display: flex;
}
.btn.btn-primary:hover {
  text-decoration: underline;
}
#cart .cart-grid .btn.btn-primary:hover {
  text-decoration: underline;
  color: #fff;
}
#cart .delete_label {
  font-size: 12px;
}
.product-line-grid-right .cart-line-product-actions .remove-from-cart {
  line-height: 20px;
  margin-top: 0;
}

.product-line-info{
  padding: 0 10px;
}

.js-cart-line-product-quantity{
  width: 60% !important;
  text-align: right;
}

.product-line-grid-right .price{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

@media(min-width: 991px) and (max-width:1200px){
  #cart .product-line-grid-right .product-price p {
    margin-bottom: 0 !important;
}
}

@media (max-width: 991px) {
  #cart .product-line-grid-right .product-price p {
    margin-right: 10px;
    color: #000;
    font-weight: 500;
    /* Erano 10 px: e' un importo, va letto senza avvicinare lo
       schermo. Su desktop la stessa voce e' a 13 px. */
    font-size: 0.75rem;
  }
  .product-line-grid-body > .product-line-info > .label {
    color: #00057b;
    font-weight: 900;
  }
  #cart .cart-item {
    text-align: center;
  }
  #cart .product-line-grid-right.product-line-actions {
    width: 90%;
    margin: 0 auto;
    float: none;
  }
  #cart .product-line-grid-right.product-line-actions .qty p {
    text-align: left;
  }
  #cart .cart-item {
    border-bottom: 5px solid #f4f4f4;
  }
  .cart-grid-body .card-block {
    text-align: center;
  }
  .cart-detailed-totals.js-cart-detailed-totals,
  body#checkout .cart-grid-right .card {
    width: 90%;
    margin: 0 auto;
  }
  .card.cart-summary .checkout .text-sm-center {
    width: 90%;
    margin: 0 auto;
  }
  body#cart .cart-grid-right,
  body#checkout .cart-grid-right {
    padding: 0 10px;
  }
}
@media (min-width: 992px) {
  #cart .cart_container {
    width: 90%;
    margin: 0 auto;
  }
  #cart .cart_container .cart-grid {
    margin-top: 50px;
  }
  #cart .cart_container .cart-grid .cart-summary .cart-detailed-totals {
    background: #f4f4f4;
    margin-bottom: 50px;
  }
  #cart .cart-grid-right {
    padding-left: 30px;
  }
  .product-line-grid-body > .product-line-info > .label {
    font-size: 16px;
    color: #00057b;
    font-weight: 900;
  }
  #cart .product-line-grid-right .product-price p {
    margin-right: 10px;
    color: #000;
    font-weight: 500;
    font-size: 13px;
  }
  #cart .product-line-grid-right .product-price strong {
    font-size: 18px;
  }
  #cart .cart-item {
    border-bottom: 1px solid #f4f4f4;
  }
}

body#checkout section.checkout-step .radio-block {
  display: block;
}

/*---cart----*/


.badgegruppo {
  background: red;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 4px;
  border-radius: 15px;
}


@media (min-width: 992px) {
  .container {
    width: 1560px;
    /* max-width: 100%; */
  }
}
.mpm-featuredproducts-slider-head h4 {
  text-align: center;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 30px;
}


.products article .wishlist-button-add {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}
.wishlist-button-add i {
  color: #000;
  font-size: 17px;
}


.wishlist-button-add {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25px !important;
  width: 25px !important;
  min-width: 25px !important;
  padding-top: 0.1875rem;
  background-color: #fff;
  box-shadow: 0.125rem -0.125rem 0.25rem 0 rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  cursor: pointer;
  transition: 0.2s ease-out;
  border: none;
}


@media (min-width: 992px) {
  #wrapper .container-fluid {
    max-width: 1600px;
  }
}


.product-comment-list-item {
  padding: 26px 0;
  margin: 0 0 -1px;
  background-color: #ffffff;
  text-align: left;
  margin: 0px 70px;
  border-radius: 10px;
  border: 1px solid ccc !important;
}

@media (min-width: 960px) {
  #product-comments-list-footer .post-product-comment {
    margin: 0 auto;
    display: block;
    margin-bottom: 50px;
    margin-top: 10px;
  }
}


.out_of_stock {
  display: none;
}

#product-comments-list-header {
  text-align: center;
}

@media (min-width: 992px) {
  #product #product-comments-list-header h4 {
    font-size: 26px;
    display: block;
    text-align: center;
    margin: 0 auto;
  }
}



#carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.block-category {
  min-height: auto;
}

.menu-category {
  max-height: max-content;
  width: 100%;
  border: 1px solid #232323 !important;
  border-radius: 6px;
  border-top: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
}

#product .wishlist-button-add {
  display: none;
}

/* visualizza prodotti simili */
.fuorip {
  display: none;
}

.af_filter .count {
  color: #333;
  margin-left: auto;
  padding-left: 3px;
}

#category .breadcrumb {
  display: none;
}

#amazzing_filter {
  background: #fff;
}

#category-description {
  margin-bottom: 80px;
}

.user-info i,
.shopping-cart {
  font-size: 25px !important;
}

.user-info {
  float: left;
  display: flex;
  justify-content: flex-end;
}

#header .header-nav .blockcart {
  /*height: 10px;*/
  /* padding: 0.75rem; */
  margin-left: 0.9375rem;
  text-align: center;
  white-space: nowrap;
}

#header .header-nav .user-info {
  text-align: center;
}

.blockcart .header {
  position: absolute;
  top: 0px;
}

/*
.nav_links{
  text-align: right;
}
*/

#header .header-nav .blockcart .header {
  margin-top: 14px;
}



.col-cat {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 10px;
}

.categorie-select a {
  color: #00057b;
}

.categorie-select li{
  padding: 3px;
}

.bannersx p,
.bannerdx p {
  color: #000;
}

.block-img img {
  width: 200px;
  position: absolute;
  right: 20px;
  bottom: 10px;
}

.bannerMaxHub {
  background: url("/img/loghi/sfondo-maxhub.png");
  color: #fff;
  background-size: cover;
  height: 200px;
  vertical-align: middle;
}
.bannerMaxHub p {
  /* 22 px su telefono, 40 px su desktop (la misura di prima):
     il riquadro e' alto 200 px fissi e a 40 px il testo ne
     usciva sui formati stretti. */
  font-size: var(--fs-fluid-4xl);
  color: #fff;
  font-weight: 600;
}
.bannerMaxHub h2 {
  margin-top: 30px;
}

.btn-scopri {
  border-radius: 20px;
  background: #080098;
  color: #fff;
}
.btn-scopri-white {
  border-radius: 20px;
  background: #fff;
  color: #080098;
}

.contact-header {
  text-align: right;
  color: #000;
  margin-top: 10px;
  float: right;
}
/* Il numero di telefono era marcato <h4>: un'intestazione di livello 4 prima
   dell'H1 su ogni pagina del sito. Ora e' uno <span> semantico neutro; il
   selettore h4 resta per compatibilita' con eventuali template non aggiornati. */
.contact-header h4,
.contact-header .contact-header-phone {
  display: block;
  font-weight: 900;
  font-size: 15px;
  /* float:right; */
  margin: 2px;
}
.img-call-us {
  float: right;
  margin-right: 20px;
  margin-top: 11px;
  height: 35px;
}

.slide_sub_reassurance {
  /* height: 160px; */
  background: #eff3fa;
  margin-bottom: 20px;
  margin-top: -10px;
}
.slide_sub_reassurance a {
  color: #000;
}
.slide_sub_reassurance a:hover {
  color: #080098;
  text-decoration: underline;
}

.block-reass {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.block-reass h2 {
  color: #080098;
}
.block-reass img {
  margin-bottom: 10px;
}


.bannerTop20 {
  padding-top: 130px;
}

.footer-container li a {
  cursor: pointer;
  color: #000;
}
.footer-container li a:hover {
  text-decoration: underline;
  color: #333;
}
.page-content.page-cms ul,
p {
  font-size: 0.9375rem;
  font-weight: 400;
  color: #000;
}

.esplora-tutto {
  color: #B34700  !important;
  text-decoration: underline;
  font-size: 14px;
}

.esplora-tutto:hover{
  color: #ff6600 !important;
}

#authentication .breadcrumb,
#registration .breadcrumb,
#my-account .breadcrumb {
  display: none;
}
#authentication #wrapper h2,
#registration #wrapper h2 {
  color: #000;
  font-weight: normal;
  font-size: 15px;
}

#authentication #wrapper label,
#registration #wrapper label {
  color: #000;
  margin-right: 10px;
  cursor: pointer;
}

.btn-primary,
.btn-primary:hover {
  color: #fff;
  background-color: #000;
  border-color: transparent;
}

.section-chooseus {
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 5px;
  padding: 20px;
  /* width: 45%; */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  margin-top: 40px;
  color: #000;
}

.benefits li::before {
  content: "✓";
  color: #28a745;
  margin-right: 10px;
}

/* Qui c'erano le regole del menu dell'area cliente agganciate a
   #page-my-account .links. Non hanno mai avuto effetto sul menu:
   #page-my-account e' il div della sola pagina "Area cliente", il
   menu sta fuori. Le regole vere sono in fondo al file, nella
   sezione AREA CLIENTE. */

#contact #left-column {
  display: none;
}
#contact #content-wrapper {
  width: 100%;
}

#addresses .breadcrumb,
#address .breadcrumb,
#identity .breadcrumb,
#history .breadcrumb,
#order-slip .breadcrumb,
#addresses .breadcrumb,
#order-detail .breadcrumb,
#discount .breadcrumb,
#module-blockwishlist-lists .breadcrumb,
#view .breadcrumb,
#sitemap .breadcrumb {
  display: none;
}

body#checkout .container {
  /* min-height: 100%; */
  min-height: auto;
}

.page-authentication #content,
.page-registration #content {
  padding: 1rem;
  background: #fff;
  max-width: 820px;
  margin: 0 auto;
}

.forgot-password a {
  color: #000;
}
@media (max-width: 991px) {
  /* #category-description img */
  #category-description {
    display: none !important;
  }
  #category-description {
    padding: 0 15px;
  }
  #_mobile_user_info {
    margin-top: 52px;
    position: absolute;
    right: 100px;
  }
  #_mobile_cart {
    margin-top: 50px;
    position: absolute;
    right: 75px;
  }
}
@media (max-width: 991px) {
  .col-sm-1 {
    float: left;
    width: 8.33333%;
  }
  .col-sm-2,
  .col-sm-3 {
    float: left;
    width: 16.66667%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4,
  .col-sm-5 {
    float: left;
    width: 33.33333%;
  }
  .col-sm-5 {
    width: 41.66667%;
  }
  .col-sm-6,
  .col-sm-7 {
    float: left;
    width: 50%;
  }
  .col-sm-7 {
    width: 58.33333%;
  }
  .col-sm-8,
  .col-sm-9 {
    float: left;
    width: 66.66667%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-10 {
    float: left;
    width: 83.33333%;
  }
  .col-sm-11 {
    float: left;
    width: 91.66667%;
  }
  .col-sm-12 {
    float: left;
    width: 100%;
  }

  #carousel img {
    width: 100%;
    height: 100%;
  }

  .block-img img {
    /* width: 100px; */
    width: 75px;
  }
  .rassicurazioni .row div > img {
    height: 50px;
    /* DGNET - le icone della fascia hanno proporzioni diverse (70x44, 79x51...):
       con la sola altezza fissa la larghezza restava quella dell attributo e le
       immagini uscivano schiacciate. Altezza uniforme, larghezza proporzionata. */
    width: auto;
  }
  .rassicurazioni .row div > h3 {
    height: 30px;
  }
  .bannersx,
  .bannerdx {
    position: relative;
    margin: 10px 0;
  }
}
@media (min-width: 992px) {
  .bannersx,
  .bannerdx {
    position: relative;
    height: 181px;
    margin-top: 30px;
    width: 99%;
  }
}

.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover {
  border: 0;
  border-bottom: #00057b 2px solid;
}

.nav-item .nav-link,
.nav-item .nav-link.active {
  padding: 10px 2px;
}


#my-account .area_personale {
  background-color: #f4f4f4;
  padding: 10px 20px;
  width: 100%;
  margin-bottom: 25px;
}
#my-account .area_personale h1 {
  text-align: left;
  color: #000099;
  /* 20 px su telefono, 26 px su desktop: era 25 px fissi, quindi
     sul monitor cresce di un pixel per allinearsi agli altri
     titoli di sezione. */
  font-size: var(--fs-fluid-2xl);
  margin: 0;
  padding: 0;
}


/*---tabella_responsive---*/
.scroll_table {
  width: 100%;
}
.tabella_classifica table {
  width: 100%;
}
.tabella_classifica tr th {
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.tabella_classifica tr td {
  text-align: left;
  font-weight: 600;
  font-size: 18px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  line-height: 1.3em;
  width: auto;
  white-space: nowrap;
}
@media (max-width: 991px) {
  .scroll_table {
    overflow-x: auto;
  }
  .tabella_classifica {
    padding-left: 20px;
  }
  .tabella_classifica tr td {
    font-size: 14px;
    border: 1px solid #aaa;
  }
}
/*---tabella_responsive---*/

/* Dati anagrafici - area utente */
#customer-form label {
  text-align: left;
}
.area-riservata {
  margin-top: 20px;
}
.area-riservata .btn {
  display: block;
  margin: auto;
  margin-right: 0;
}

.richiesta_preventivo_row{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

@media (max-width: 991px) {
  #supplier .login_for_offer {
    text-align: center;
    min-height: 65px;
  }
  #supplier .login_for_offer .btn.btn-primary {
    background: #ff6601;
    color: #fff;
    font-size: 11px;
    border-radius: 5px;
    padding: 10px;
  }


  #supplier #main .brand-box .brand .brand-img img {
    max-width: 110px;
  }
  #supplier #main .brand-box {
    min-width: 190px;
  }
}
@media (min-width: 992px) {
  #supplier .login_for_offer {
    text-align: center;
  }
  #supplier .login_for_offer .btn.btn-primary {
    background: #ff6601;
    color: #fff;
    font-size: 14px;
    border-radius: 5px;
    padding: 10px;
  }
  #supplier #main ul .brand-img img {
    width: 100%;
  }

  #supplier #main .brand-box {
    min-width: 210px;
  }
}
#supplier #main .brand-box .brand .brand-img img {
  display: none;
}
#supplier #main .brand-box {
  position: relative;
  width: calc(20% - 10px);
  padding: 10px;
  margin: 5px;
  text-align: center;
  background: #fff;
  -webkit-transition: 0.4s ease-out;
  transition: 0.4s ease-out;
  border: 0.5px solid #000;
}
#supplier #main .brand-box .brand .brand-products a {
  color: #000;
}
#supplier #js-product-list .product-miniature .product-title {
  min-height: 60px;
}
#supplier #js-product-list .product-miniature {
  margin-top: 35px;
}
#supplier #js-product-list .product-miniature .product-title,
#supplier #js-product-list .product-miniature .product-price-and-shipping {
  text-align: left;
}
#supplier #js-product-list .product-miniature .product-title a {
  color: #000;
  font-weight: 900;
}

#supplier #js-product-list .product-miniature .product-price-and-shipping {
  /* 17 px su telefono, 22 px su desktop (la misura di prima). */
  font-size: var(--fs-fluid-xl);
}
#supplier .products-list-sort {
  margin: 0 auto;
}
@media (max-width: 991px) {
  #supplier .col-sm-6 {
    float: left;
    width: 45%;
  }
  #supplier #js-product-list .product-miniature .product-title {
    min-height: 100px;
  }
  #supplier #js-product-list .product-miniature .product-title a {
    font-size: 14px;
  }
  #supplier #js-product-list .js-product {
    margin: 5px 5px;
  }

}
@media (min-width: 991px) {
  #supplier #js-product-list .product-miniature .product-title a {
    font-size: 14px;
  }

}

#manufacturer #content-wrapper,
#supplier #content-wrapper {
  margin-bottom: 60px;
}

/*---HEADER_MOBILE---*/
@media (max-width: 991px) {
  .mobile_fix{
    overflow: hidden;
  }

  .top_header_container {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    padding: 10px;
  }
  .whatsapp-header, .call-header {
    border: 2px solid #f2632c;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px;
  }
  .whatsapp-header img, .call-header img {
    height: 25px;
  }
  .menu_logo_container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
  }

  #header .header-nav .material-icons {
    color: #000;
  }
  #search_query {
    width: 96%;
    height: 35px;
    /* Erano 12 px. Safari su iPhone ingrandisce la pagina appena
       si tocca un campo con il testo sotto i 16 px, e non la
       rimpicciolisce piu' quando il campo perde il fuoco: si
       resta con l'intestazione tagliata. Il campo e' alto 35 px,
       16 px ci stanno. */
    font-size: 16px;
    padding-left: 10px;
    border-radius: 5px;
    margin-bottom: 5px;
  }
  #mobile-menu {
    z-index: 300;
  }
  #mobile-menu .close-menu-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #000;
    border-radius: 5px;
    background-color: transparent;
  }
  #mobile-menu .close-menu-btn i {
    font-size: 24px;
  }
  .no_btn {
    width: 16%;
    background: none;
    border: none;
    padding-top: 2.1px;
    margin-left: -55px;
    padding-right: 2px;
  }
  .no_btn img {
    width: 50%;
  }
  #header .header-nav .blockcart .header {
    margin-top: 59px;
  }
  .mpm-featuredproducts-default-miniature-design .slick-slide {
    padding: 10px;
  }
}
.blockcart .header {
  position: absolute;
  top: 0px;
}
#index .product-price-and-shipping .login_for_offer {
  display: none;
}

/*---LOADER---*/
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.loader::after {
  content: "";
  width: 50px;
  height: 50px;
  border: 5px solid #ffffff;
  border-top-color: #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
/*---LOADER---*/

/*---ADD_TO_CART_LISTATO---*/
.product-add-to-cart-inlist .quantity-input {
  text-align: center;
  width: 4rem;
}

@media (min-width: 992px) {
  .product-add-to-cart-inlist .quantity-selector {
     display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
  }
}

.product-add-to-cart-inlist .quantity-selector .add-to-cart-btn {
        margin-left: 12px !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

     .product-add-to-cart-inlist .quantity-selector .shopping-cart {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

.product-add-to-cart-inlist .quantity-decrease,
.product-add-to-cart-inlist .quantity-increase {
  background: #fff !important;
  color: #00047b;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

.product-price-and-shipping .availability {
  display: block;
}

/*---ADD_TO_CART_LISTATO---*/


/*--- HOMEPAGE ---*/

.slide_sub_text {
  background: #000799;
  color: #fff;
  text-align: center;
}
.slide_sub_text h1 {
  padding: 10px 0;
  color: #fff !important;
  font-size:14px;
}

.mpm-featuredproducts-slider-title {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
}

.mpm-featuredproducts-default-miniature-design
  .product-miniature
  .product-price-and-shipping {
  font-weight: 700;
  color: #232323;
  text-align: left;
}

.mpm-featuredproducts-default-miniature-design .prodottiSimili .btn {
  width: 130% !important;
  margin-top: 30px;
  margin-left: -30px;
  display: none;
}

.success-addtocart-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s;
}

.success-addtocart-modal.fade-out {
  opacity: 0;
}

.success-addtocart-modal section {
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}


.header-mobile-menu{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.mobile-menu-content {
  overflow-y: scroll;
}

#navbar_desk_account {
  position: relative;
  cursor: pointer;
  display: inline-block; /* Aggiunto per garantire il corretto posizionamento */
  margin-top: 5px;
}

#navbar_desk_account_submenu {
  position: absolute;
  visibility: hidden;
  top: 100%;
  right: 0;
  min-width: 200px; /* Cambiato da width a min-width */
  padding: 5px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Aggiunto ombra per maggiore visibilità */
  opacity: 0;
  pointer-events: none; /* Aggiunto per evitare problemi di hover */
  transform: translateY(10px); /* Aggiunto per l'animazione */
  transition: all 0.3s ease-in-out;
  z-index: 9999;
  border: 1px solid #0B1098;
  display: flex;
  flex-direction: column;
  gap: 0px;
}

#navbar_desk_account:hover #navbar_desk_account_submenu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Stile per il contenuto del sottomenu */
#navbar_desk_account_submenu a {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  border-radius: 5px;
}

#navbar_desk_account_submenu .logout{
  border-top: 1px solid #0B1098;
  padding: 5px 0;
  border-radius: 0;
}

#navbar_desk_account_submenu span{
  color: black;
  padding: 5px;
}

#navbar_desk_account_submenu a i {
  font-size: 20px;
}

#navbar_desk_account_submenu a:hover {
  background-color: #f5f5f5;
}

/* HOMEPAGE CATEGORIE & BANNERS */

#product .selettore-categorie,
#product .banner-homepage,
#product .rassicurazioni {
  display: none;
}

.selettore-categorie {
  background: #eff3fa;
  padding: 20px;
  border-radius: 16px;
  margin: 0 auto;
}

.selettore-categorie h2 {
  text-align: center;
  /* 20 px su telefono, 26 px su desktop (la misura di prima). */
  font-size: var(--fs-fluid-2xl);
  margin-top: 20px;
  margin-bottom: 30px;
}

.selettore-categorie,
.rassicurazioni {
  width: 100%;
}

.banner-homepage,
.banner-homepage-bianco {
  margin: 0 auto;
  background: #fff;
  margin-bottom: 20px;
}

.banner-homepage.banner-ezdirect {
  padding: 15px;
}

.banner-homepage.banner-ezdirect ul{
  padding-left: 30px;
}

.rassicurazioni {
  padding: 20px;
  border-radius: 16px;
  margin: 0 auto;
}

.rassicurazioni .col-md-3 {
  text-align: center;
}

.banner6 {
  background: #eff3fa;
  padding: 20px;
  border-radius: 16px;
}

/* ------------------------------------------------------------------
   LE DUE SCHEDE IN FONDO ALLA HOME - Nota Ezdirect, 10 settembre 2026

   Qui c'era "height: 211px !important". L'elenco dei Punti di Forza ha
   8 voci: 160px di lista piu' 31px di titolo piu' 40px di padding fanno
   231px, cioe' 20px piu' del riquadro. L'ultima voce finiva mezzo pixel
   sotto il bordo dello sfondo, senza spazio sotto, e per starci dentro
   la lista era compressa a 20px di interlinea.

   Adesso 211px sono un minimo, non un tetto: il riquadro si allunga con
   il testo. Perche' le due schede restino uguali, come sono sempre
   state, la riga bannerCoppia diventa un flex container: qui .row non lo
   e' (e' un grid a float), quindi le due colonne non si allineavano da
   sole. Da flex le colonne prendono la stessa altezza e, essendo a loro
   volta flex, la passano alla scheda che contengono.

   Il flex vale solo da 992px in su, cioe' dove le schede stanno
   affiancate: sotto si impilano e allinearle non serve. La larghezza
   viene riscritta li' dentro perche' una scheda dentro una colonna flex
   non si allarga da sola; il 99% e' lo stesso di prima ed e' quello che
   crea lo stacco fra le due.
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .banner-homepage .row.bannerCoppia {
    display: flex;
    flex-wrap: wrap;
  }

  .banner-homepage .row.bannerCoppia > [class*="col-"] {
    display: flex;
  }

  .bannerBottom {
    width: 99%;
  }
}

.bannerBottom {
  height: auto !important;
  min-height: 211px;
}

/* Elenco dei Punti di Forza: pallini allineati al testo e voci respirate.
   .banner6 e' solo la scheda di sinistra, la lista non esiste altrove. */
.banner6 ul {
  list-style: disc;
  margin: 0;
  padding-left: 20px;
}

.banner6 ul li {
  line-height: 1.5;
  padding-left: 2px;
}

.bannerBlu {
  background: #00007b;
  padding: 30px 20px 30px 20px;
  border-radius: 12px;
  /* margin-top: 30px; */
  width: 99%;
  text-align: center;
  color: #fff;
}
.bannerBlu a {
  color: #fff;
  font-size: 14px;
}
.banner6blu {
  background: #00007b;
  color: #fff;
  padding: 20px;
  border-radius: 16px;
}
.banner6blu p {
  color: #fff !important;
}
.banner6blu h2 {
  color: #fff !important;
}
.banner12 {
  background: #eff3fa;
  padding: 20px;
  border-radius: 12px;
  margin-top: 30px;
  width: 99%;
}


@media (min-width: 992px) {
  .selettore-categorie .img-fluid{
    height: 150px;
    /* DGNET - le icone delle categorie non sono tutte quadrate (178x178, 157x169):
       con la sola altezza fissa restavano larghe quanto l attributo e uscivano
       schiacciate fino al 19%. Altezza uniforme, larghezza proporzionata. */
    width: auto;
  }

  .banner-homepage.banner-ezdirect {
    max-width: 60%;
  }

  .banner-homepage.banner-ezdirect ul{
    padding-left: 50px;
  }

  .ybc-mnf-block-a-img > img {
    max-height: 150px;
  }
}

/* --- END HOMEPAGE --- */

/*==== DESKTOP CART ====*/

#_desktop_cart {
  position: relative;
  cursor: pointer;
  display: inline-block; /* Aggiunto per garantire il corretto posizionamento */
}

#_desktop_cart a {
  color: #000 !important;
}

#hover_cart {
  position: absolute;
  visibility: hidden;
  top: 100%;
  right: 0;
  min-width: 400px; /* Cambiato da width a min-width */
  padding: 5px;
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Aggiunto ombra per maggiore visibilità */
  opacity: 0;
  pointer-events: none; /* Aggiunto per evitare problemi di hover */
  transform: translateY(10px); /* Aggiunto per l'animazione */
  transition: all 0.3s ease-in-out;
  z-index: 9999;
  border: 1px solid #0B1098;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 70vh;
  overflow-y: scroll;
}

#_desktop_cart:hover #hover_cart {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#hover_cart .hover-cart-item {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  margin: 5px;
  padding: 5px;
  gap: 10px;
  border: 1px solid transparent;
}

#hover_cart .hover-cart-item:hover {
  border: 1px solid #0B1098;
  border-radius: 5px;
}

#hover_cart .product-data {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
}

#hover_cart .product-data .product-name {
  font-weight: 900;
  font-family: inherit;
  color: #000;
}

#hover_cart .total-iva-excl,
#hover_cart .total-iva-incl,
#hover_cart .total-tax,
#hover_cart .total-shipping {
  font-weight: 600;
  font-family: inherit;
  color: #000;
  margin: 0 10px;
  text-align: right ;
}

#hover_cart .cart-products{
  flex: 1;
}

#hover_cart .btn-checkout{
  width: 100%;
}

/*
   Tendina del carrello su telefono.
   Nella testata mobile l'icona del carrello sta nella riga del logo, a qualche decina di
   pixel dal bordo destro. La tendina era ancorata all'icona (right: 0) e larga almeno
   400px, quindi cominciava FUORI dallo schermo a sinistra: da -15px su un telefono da
   412px, da -61px a 360px, da -96px a 320px. L'immagine del prodotto e il pulsante del
   carrello restavano tagliati, e nella scheda prodotto body#product { overflow-x: hidden }
   si limitava a nascondere la parte uscita.
   Sotto i 992px la tendina si ancora alla riga della testata, larga quanto lo schermo, e
   non ne supera la larghezza: resta di 400px dove ci sta, altrimenti occupa lo schermo
   meno 10px per lato. Vale su tutte le pagine, perche' la testata e' la stessa.
*/
@media (max-width: 991px) {
  .menu_logo_container {
    position: relative;
  }

  .menu_logo_container #_desktop_cart {
    position: static;
  }

  .menu_logo_container #hover_cart {
    right: 10px;
    width: calc(100% - 20px);
    max-width: 400px;
    min-width: 0;
  }
}

/* --CHECKOUT-- */
.card-block.cart-summary-totals .cart-summary-line span.sub {
	 float: right; 
	 font-size: unset; 
	 text-align: unset; 
}

.cart-summary-totals {
  padding: 0.5rem 1.25rem !important;
}

#total_iva_incl {
  padding-top: 1rem !important;
  font-weight: bold;
}

.cart-summary-line {
  padding: 0 !important;
  padding-bottom: 0.5rem !important;
  margin: 0 !important;
}

.card-block {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.promo-code {
  padding-top: 0;
}

.promo-code-button{
  padding: 0 !important;
  margin-top: 2rem;
}

.cart-summary-subtotals-container {
  border-bottom: 0 !important;
}

/* Checkout Bonifico bancario */
a[data-toggle="modal"][data-target="#bankwire-modal"] {
  color: #00057b !important;
  cursor: pointer;
}

a[data-toggle="modal"][data-target="#bankwire-modal"]:hover {
  color: #1a8196 !important;
}

#tabbler ul {
  list-style-type: none;
}

.riepilogo-carrello {
  padding: 30px;
  border: 1px solid #ccc;
  margin-bottom: 30px;
  /* background: #fcfcfc; */
}

#tabbler {
  padding: 30px;
  border: 1px solid #ccc;
  margin-bottom: 30px;
  background: #fcfcfc;
}

#tabbler li a {
  width: 100%;
  border-bottom: 1px solid #efefef;
  display: block;
  padding: 5px 20px 5px 0px;
  font-size: 14px;
  letter-spacing: -0.4px;
  font-weight: 400;
  color: #000;
}

#tabbler li a:hover {
  color: #999;
}

#tabbler .fa {
  float: right;
  font-size: 13px;
  font-weight: 200;
  margin-top: 10px;
  color: #000;
}

#tabbler .slideContent {
  display: none;
  padding-top: 10px;
  overflow: auto;
}

/*
   Premesse, esigenze, note e risorse del preventivo: HTML scritto con l'editor o incollato da
   Word, dal browser o da una mail, con larghezze assolute, nowrap, margini negativi e parole
   lunghe. Restano dentro il riquadro anche su mobile, agendo solo su quei vincoli. Stesse
   regole nel back office (amministrazione/themes/new-theme/css/overrides.css) e nell'editor.
   CartPresenter::fixHTML() toglie i doppi apici, quindi gli stili arrivano senza virgolette:
   i selettori coprono entrambe le scritture ("margin-left:-" e "margin-left: -").
*/
#tabbler .slideContent {
  /* word-wrap e' un alias di overflow-wrap: va prima, come ripiego, altrimenti vince break-word,
     che non accorcia la larghezza minima delle colonne e lascia sbordare le tabelle */
  word-wrap: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  min-width: 0;
}

#tabbler .slideContent * {
  max-width: 100% !important;
  box-sizing: border-box;
}

#tabbler .slideContent img {
  height: auto !important;
}

/* tabelle e colonne a larghezza assoluta (Word, mail): prendono la larghezza del contenuto;
   le larghezze in percentuale restano */
#tabbler .slideContent table[width]:not([width$="%"]), #tabbler .slideContent td[width]:not([width$="%"]),
#tabbler .slideContent th[width]:not([width$="%"]), #tabbler .slideContent col[width]:not([width$="%"]),
#tabbler .slideContent table[style*="px"], #tabbler .slideContent table[style*="pt"],
#tabbler .slideContent td[style*="px"], #tabbler .slideContent td[style*="pt"],
#tabbler .slideContent th[style*="px"], #tabbler .slideContent th[style*="pt"] {
  width: auto !important;
}

#tabbler .slideContent [style*="nowrap"] {
  white-space: normal !important;
}

#tabbler .slideContent [style*="min-width"] {
  min-width: 0 !important;
}

#tabbler .slideContent [style*="margin-left:-"], #tabbler .slideContent [style*="margin-left: -"],
#tabbler .slideContent [style*="margin-right:-"], #tabbler .slideContent [style*="margin-right: -"],
#tabbler .slideContent [style*="margin:-"], #tabbler .slideContent [style*="margin: -"],
#tabbler .slideContent [style*="margin: 0px -"], #tabbler .slideContent [style*="margin:0px -"],
#tabbler .slideContent [style*="margin: 0 -"], #tabbler .slideContent [style*="margin:0 -"] {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#tabbler .slideContent [style*="text-indent:-"], #tabbler .slideContent [style*="text-indent: -"] {
  text-indent: 0 !important;
}

#tabbler .slideContent [style*="position:absolute"], #tabbler .slideContent [style*="position: absolute"],
#tabbler .slideContent [style*="position:fixed"], #tabbler .slideContent [style*="position: fixed"] {
  position: static !important;
}

/* su telefono una tabella incollata con molte colonne (es. class="table" copiata da una pagina)
   non ci sta nemmeno vuota: i padding delle celle, sommati, superano la larghezza del riquadro */
@media (max-width: 575px) {
  #tabbler .slideContent td,
  #tabbler .slideContent th {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}


/* --- FORM FIELDS --- */

.form-control-label{
  text-align: left;
}

.form-control-label sup{
  font-weight: bold;
  color: red;
  font-size: 12px;
}

/*
   Etichetta e campo affiancati e centrati: e' la disposizione della griglia da tablet in su
   (etichetta col-md-3, campo col-md-6). La regola valeva a ogni larghezza, e sotto i 768px,
   dove le colonne col-md-* occupano l'intera riga, affiancava comunque etichetta e campo:
   E-mail e Password di larghezze diverse, "Password *" spezzata su due righe, MOSTRA
   sproporzionato, link e pulsante non allineati ai campi (form di accesso del checkout e
   pagina /accedi, che usano lo stesso login-form.tpl).
   Sotto i 768px torna il form impilato del tema: etichetta sopra, campo a tutta larghezza.
*/
@media (min-width: 768px) {
  #login-form .form-group{
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  /* CONTINUA (checkout) e ACCEDI (/accedi) larghi quanto i campi, allineati al form */
  #login-form .form-footer .btn {
    float: none !important;
    width: 100%;
  }

  /* il tema rientra il form del checkout di 5px (margin-left: .3125rem): con i campi impilati
     li spostava rispetto alle schede "Crea il tuo account cliente" / "Effettua l'accesso" */
  body#checkout section.checkout-step #login-form {
    margin-left: 0;
  }
}

@media (max-width: 575px) {
  /* "Crea il tuo account cliente | Effettua l'accesso" non sta su una riga: una scheda per
     riga, senza il separatore che restava appeso a fine riga, e la scheda attiva
     sottolineata come le altre schede del sito (.tabs .nav-link.active) */
  body#checkout .nav-inline .nav-item {
    display: block;
  }

  body#checkout .nav-inline .nav-item + .nav-item {
    margin-left: 0;
  }

  body#checkout .nav-inline .nav-separator {
    display: none;
  }

  body#checkout .nav-inline .nav-link.active {
    border-bottom: 2px solid #00057b;
  }
}

@media (max-width: 991px) {
  /* il riquadro nero attorno alla scheda toccata era l'outline di a:focus del tema:
     resta per chi naviga da tastiera, non dopo un tocco */
  body#checkout .nav-inline .nav-link:focus:not(:focus-visible) {
    outline: 0;
  }
}
#amazzing_filter .btn-primary {
  border-radius: 0!important;
}

/* --- PULSANTE TROVA FILTRI --- */

/* Desktop: nasconde il pulsante */
#amazzing_filter .viewFilteredProducts {
  display: none !important;
}

/* Mobile: mantiene visibile il pulsante */
@media (max-width: 991px) {
  #amazzing_filter .viewFilteredProducts {
    display: block !important;
  }
}

/*--- CUSTOMER ACCOUNT ---*/
.page-customer-account table{
    width: 100%;
    border-collapse: collapse;
}

.page-customer-account table thead{
    background-color: lightsteelblue;
}

.page-customer-account table tbody{
    border: 1px solid lightsteelblue;
}

.page-customer-account table th,
.page-customer-account table td{
    padding: 10px;
    text-align: left;
}

/*--- ADDRESSES CUSTOMER ---*/

/* Il margine di 10 px attorno a ogni scheda e' stato tolto: adesso
   la distanza fra le schede la decide la griglia .account-cards,
   e il margine si sommava al gap lasciando spazi disuguali. */
#addresses_container .address{
  border: 1px solid black;
  padding: 15px;
  border-radius: 6px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*--- END ADDRESSES CUSTOMER ---*/

/*--- TICKETS CUSTOMER ---*/

.support {
  background: #0b109912;
  border: 1px solid #0B1099;
  color: black;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  margin-right: 20%;
}

.customer-response {
  background: #ff681010;
  border: 1px solid #FF6610;
  color: #000;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  margin-left: 20%;
}

.messages-section {
  border: 1px dotted #000;
  background-color: #fcfcfc;
  margin-top: 50px;
  border-radius: 10px;
  padding: 20px;
}

/* --- ORDERS CUSTOMER --- */
.account-content .table-labeled .label{
  white-space: normal;
}

#order-items .image img {
  width: auto;
  height: auto;
  max-width: 100%;
}


/*--- END CUSTOMER ACCOUNT ---*/


/* --- CMS / GUIDE --- */

#cms .page-header h1 {
  text-align: center;
}

#cms #content > div {
  width: 100% !important;
}

@media (min-width: 991px) {
  
  #cms #content.page-cms {
    padding: 0 20px;
  }

}

/* ============================================================
   CORE WEB VITALS - riserva di spazio contro il layout shift
   ============================================================ */

/* Il logo di intestazione e' prodotto da {renderLogo}, che non
   emette gli attributi width/height: il browser non conosce
   l'ingombro finche' il file non arriva e l'intera intestazione
   scivola verso il basso, trascinando tutto il contenuto.
   Il file e' 219x64. Qui NON forziamo una dimensione (resta
   quella decisa dal resto del CSS): fissiamo solo la
   proporzione, cosi' lo spazio e' riservato da subito e
   l'aspetto non cambia. */
#_desktop_logo .logo,
#_mobile_logo .logo {
  aspect-ratio: 219 / 64;
}

/* Slider produttori: i loghi non possono ricevere width/height
   perche' hanno proporzioni native molto diverse fra loro
   (120x30, 150x49, perfino 2560x905), quindi attributi fissi li
   distorcerebbero.
   Il problema e' un altro: finche' Owl Carousel non aggiunge la
   classe .owl-loaded, i 26 <li> restano impilati in verticale e
   collassano poi in una riga sola. Qui la lista viene resa da
   subito come riga orizzontale con la stessa geometria finale,
   percio' dopo l'inizializzazione l'aspetto e' identico. */
#ybc-mnf-block-ul:not(.owl-loaded) {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}

#ybc-mnf-block-ul:not(.owl-loaded) > .ybc-mnf-block-li {
  flex: 0 0 auto;
  width: 16.6667%;
}

/* Banner in cima alla home: riserva dello spazio prima che l'immagine arrivi.

   PROBLEMA
   Il modulo di caricamento differito (ets_imagecompressor) mette nel
   src un segnaposto da 1x1 pixel e tiene l'indirizzo vero in data-src.
   Il CSS del tema impone #carousel img{width:100%;height:100%}, ma
   height:100% non si risolve perche' nessun antenato ha un'altezza
   dichiarata: vale quindi auto, cioe' la proporzione dell'immagine
   effettivamente caricata. All'inizio quella e' il segnaposto.

   Campionando l'altezza ogni 150 ms su una finestra da 1350 px:
       243 ms   altezza 1311 px   immagine naturale 0x0   (segnaposto)
       499 ms   altezza  281 px   immagine naturale 1970x422
   Il banner nasce QUADRATO e largo quanto il contenitore, poi si
   accorcia di 1030 px quando arriva l'immagine vera: tutto quello che
   sta sotto salta verso l'alto. E' lo spostamento piu' grande della home.

   PERCHE' NON BASTANO width e height sull'immagine
   Ci sono gia', ma il CSS del tema li scavalca con height:100%. E per
   giunta erano sbagliati: dichiaravano 1110x340 mentre i file reali
   sono 1970x422.

   CORREZIONE
   Il rapporto fra base e altezza viene dichiarato sul contenitore, che
   nel flusso ci sta sempre. Cosi' lo spazio e' riservato dal primo
   istante e l'arrivo dell'immagine non muove piu' niente.
   Il valore 1970/422 e' la proporzione reale dei file dello slider,
   verificata scaricandoli: l'altezza resa resta identica a prima
   (281 px su una finestra da 1350), quindi l'aspetto non cambia.

   DOVE VA MESSA LA PROPORZIONE
   Sulla singola slide, non sul contenitore. Misurando l'altezza resa a
   quattro larghezze diverse si vede che la slide vale sempre esattamente
   quanto l'immagine (105 px a 477, 159 a 729, 211 a 985, 281 a 1311),
   mentre il contenitore sotto i 768 px ne vale 40 di piu': c'e' una
   banda che ospita i puntini di navigazione, che sono in posizione
   assoluta. Riservando lo spazio sulla slide, quella banda resta dov'e'.

   LA BANDA DEI PUNTINI
   Va ridichiarata sotto i 768 px, perche' esisteva solo come effetto
   collaterale del contenitore ad altezza libera: una volta fissata la
   proporzione della slide sparirebbe, e i puntini finirebbero sopra
   l'immagine. I 40 px sono il valore misurato sulla pagina attuale.

   VERIFICATO
   A 477, 729, 985 e 1311 px di larghezza l'altezza resa del banner e'
   identica a prima della modifica (145, 199, 211, 281 px), e il CLS
   scende da 0,56 / 0,41 / 0,19 / 0,18 a 0,000 / 0,000 / 0,001 / 0,005. */
#carousel .carousel-item {
  aspect-ratio: 1970 / 422;
}

@media (max-width: 767px) {
  #carousel .carousel-inner {
    padding-bottom: 40px;
  }
}

/* La prima slide del banner non passa piu' dal caricamento differito:
   arriva gia' pronta dall'HTML (vedi slider.tpl). Di conseguenza non
   riceve mai la classe .lazyloaded, che e' quella su cui il modulo
   aggancia la sparizione del rotellino di attesa:
       img.lazyloaded + .ets_loading { opacity:0; visibility:hidden }
   Senza questa regola il rotellino resterebbe girare per sempre sopra
   il banner. Qui viene tolto proprio dove non serve piu'. */
#carousel img[fetchpriority="high"] + .ets_loading {
  display: none;
}

/* ============================================================
   AREA CLIENTE (FRONT OFFICE)
   ============================================================

   COSA COPRE
   L'impalcatura comune (customer/page.tpl), le voci del menu
   (customer/_partials/account-menu.tpl) nei suoi due contenitori --
   la colonna di sinistra (customer/menu-account.tpl) e il pannello a
   comparsa da destra (_partials/account-drawer.tpl) -- e i pezzi
   ricorrenti dentro le pagine: intestazione, riquadri, griglie di
   schede e tabelle.

   PERCHE' STA TUTTO QUI
   Prima le regole del menu erano sparse in tre punti del file e
   agganciate a #page-my-account, che e' un div della sola pagina
   "Area cliente": sul menu non hanno mai avuto effetto. Le altre
   pagine si arrangiavano con classi Bootstrap scritte a mano dentro
   i template.

   LA SOGLIA E' 992 PX
   Sopra: il menu e' la colonna di sinistra, accanto al contenuto.
   Sotto: la colonna scompare e il menu diventa il pannello che entra
   scorrendo da destra, aperto dall'icona utente dell'header o dal
   pulsante in cima alle pagine dell'area cliente.
   Le tabelle cambiano forma piu' avanti, a 768 px, perche' li' lo
   spazio finisce prima. */

/* --- Impalcatura ------------------------------------------- */

.account-page {
  padding: 0;
}

/* LA DISTANZA FRA LE DUE COLONNE
   Nel tema le grondaie di Bootstrap sono disattivate: in theme.css
   sono commentati sia i margini negativi di .row sia i 15 px di lato
   delle .col-*, che sono rimaste dei semplici float con una
   larghezza in percentuale. Le due colonne quindi si toccherebbero,
   e la distanza va messa a mano. Vale solo da 992 px in su, dove le
   colonne stanno davvero affiancate. */
@media (min-width: 992px) {
  .account-sidebar {
    padding-right: 15px;
  }

  .account-content {
    padding-left: 15px;
  }
}

/* Le notifiche arrivano dal partial comune, che le avvolge in un
   .container: dentro una colonna quel container aggiungerebbe la
   propria larghezza massima e i suoi 15 px di lato. */
.account-content #notifications .notifications-container {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* --- Menu laterale ----------------------------------------- */

.account-sidebar {
  margin-bottom: 25px;
}

/* Il riquadro con le voci, nella colonna. Sotto i 992 px non si vede:
   li' il menu e' il pannello a comparsa .account-drawer, e questo
   riquadro sarebbe un doppione a tutta larghezza sopra al contenuto. */
.account-menu-panel {
  background: #fff;
  border: 1px solid #dcdce3;
  border-radius: 6px;
  overflow: hidden;
}

@media (max-width: 991px) {
  .account-menu-panel {
    display: none;
  }
}

.account-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  background: #f4f4f4;
  border-bottom: 1px solid #dcdce3;
}

.account-menu-head .material-icons {
  width: 28px;
  height: 28px;
  font-size: 28px;
  color: #00057b;
}

.account-menu-head-text {
  min-width: 0;
}

.account-menu-head-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000;
}

.account-menu-head-name {
  display: block;
  font-size: 15px;
  line-height: 1.2;
  color: #000;
  overflow-wrap: anywhere;
}

.account-menu-group + .account-menu-group,
.account-menu-group + .account-menu-hook {
  border-top: 1px solid #dcdce3;
}

.account-menu-group-title {
  margin: 0;
  padding: 12px 14px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000;
}

.account-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.account-menu-item + .account-menu-item {
  border-top: 1px solid #ededf2;
}

.account-menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.25;
  color: #000;
  text-decoration: none;
  /* Il bordo sinistro c'e' sempre, trasparente: cosi' la voce attiva
     non si sposta di 3 px rispetto alle altre. */
  border-left: 3px solid transparent;
}

.account-menu-link .material-icons {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #000;
}

.account-menu-label {
  min-width: 0;
}

.account-menu-link:hover,
.account-menu-link:focus {
  background: #f4f4f4;
  color: #00057b;
  text-decoration: none;
}

.account-menu-link:hover .material-icons,
.account-menu-link:focus .material-icons {
  color: #00057b;
}

.account-menu-link.active {
  background: #eef0fa;
  border-left-color: #00057b;
  font-weight: 700;
  color: #00057b;
}

.account-menu-link.active .material-icons {
  color: #00057b;
}

/* Voci aggiunte dai moduli tramite displayCustomerAccount. Arrivano
   con la marcatura vecchia (un <a> con le classi di colonna e una
   .row dentro): qui viene appiattita sulla riga del menu, cosi' non
   stona accanto alle voci del tema. */
.account-menu-hook > a {
  display: block;
  padding: 10px 14px;
  color: #000;
  text-decoration: none;
  border-left: 3px solid transparent;
}

.account-menu-hook > a:hover {
  background: #f4f4f4;
  color: #00057b;
}

.account-menu-hook > a > .row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.account-menu-hook > a > .row > div {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  padding: 0;
}

.account-menu-hook > a .material-icons {
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: inherit;
}

.account-menu-hook > a .link-item {
  font-size: 14px;
  line-height: 1.25;
}

.account-menu-logout {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid #dcdce3;
  font-size: 14px;
  font-weight: 700;
  color: #000;
  text-decoration: none;
}

.account-menu-logout .material-icons {
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #000;
}

.account-menu-logout:hover {
  background: #f4f4f4;
  color: #b00020;
  text-decoration: none;
}

.account-menu-logout:hover .material-icons {
  color: #b00020;
}

/* --- Cliente sloggato -------------------------------------- */

/* Non c'e' niente da elencare: le pagine dell'area cliente non sono
   raggiungibili e ogni voce porterebbe alla pagina di accesso. Resta
   il solo pulsante "Accedi". */
.account-menu-guest {
  padding: 18px 16px 20px;
}

.account-menu-guest-text {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.45;
  color: #000;
}

.account-menu-guest-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.account-menu-guest-login .material-icons {
  width: 20px;
  height: 20px;
  font-size: 20px;
}

/* --- Pannello a comparsa da destra (sotto i 992 px) -------- */

/* Il pulsante in cima alla colonna dell'area cliente. Sul desktop non
   serve: li' il riquadro delle voci e' sempre in pagina. */
.account-drawer-toggle {
  display: none;
}

/* L'icona utente dell'header: era un <a> verso la pagina di accesso,
   adesso e' un <button> che apre il pannello, e come tale va spogliata
   dell'aspetto da pulsante di sistema. */
.user-info-drawer-toggle {
  padding: 0;
  background: none;
  border: 0;
  color: #000;
  line-height: 1;
}

.user-info-drawer-toggle .material-icons {
  color: #000;
}

/* Il velo e il pannello stanno nel documento su ogni pagina, ma da
   992 px in su sono spenti: a quella larghezza il menu e' la colonna
   di sinistra, e un pannello fisso sopra la pagina non servirebbe. */
.account-drawer-backdrop,
.account-drawer {
  display: none;
}

@media (max-width: 991px) {
  .account-drawer-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: #f4f4f4;
    border: 1px solid #dcdce3;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    color: #000;
    text-align: left;
  }

  .account-drawer-toggle .material-icons {
    width: 22px;
    height: 22px;
    font-size: 22px;
    color: #000;
  }

  .account-drawer-toggle-label {
    flex: 1 1 auto;
  }

  /* IL VELO
     Sotto al pannello e sopra a tutto il resto. Per sparire non usa
     visibility ma opacita' piu' pointer-events: cosi' la dissolvenza
     si vede sia entrando sia uscendo, e a pannello chiuso il velo non
     intercetta i tocchi. */
  .account-drawer-backdrop {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1090;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .account-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* IL PANNELLO
     Parte fuori dallo schermo a destra ed entra scorrendo. La
     larghezza si ferma a 340 px sui telefoni grandi e lascia sempre
     scoperta una fetta di pagina (88vw), su cui si torna indietro con
     un tocco. Lo z-index sta appena sopra al velo, e comunque sopra
     all'header, che e' position:fixed con z-index 999: e' anche il
     motivo per cui questa marcatura viene stampata fuori da #header. */
  .account-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1091;
    width: 88vw;
    max-width: 340px;
    height: 100%;
    background: #fff;
    border-left: 1px solid #dcdce3;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    /* La visibility serve a rendere il pannello inerte da chiuso: solo
       spostato fuori schermo, le sue voci restano raggiungibili col
       Tab, e chi naviga da tastiera si ritrova a passare per undici
       link invisibili. Il ritardo di 0,25 s la tiene "visible" per
       tutta l'uscita, altrimenti il pannello sparirebbe di colpo
       invece di scorrere via. */
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    /* Le voci scorrono dentro al pannello, non trascinano la pagina. */
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .account-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s linear 0s;
  }

  /* Titolo e crocetta restano fermi mentre le voci scorrono. */
  .account-drawer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 12px 8px 12px 16px;
    background: #f4f4f4;
    border-bottom: 1px solid #dcdce3;
  }

  .account-drawer-bar-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #000;
  }

  /* 44 px di lato: sotto questa misura un bersaglio da toccare diventa
     difficile da centrare col pollice. */
  .account-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: #000;
  }

  .account-drawer-close .material-icons {
    width: 24px;
    height: 24px;
    font-size: 24px;
    color: #000;
  }

  .account-drawer-body {
    flex: 1 1 auto;
  }

  /* Dentro al pannello il riquadro delle voci non porta bordi propri:
     il bordo e' quello del pannello. */
  .account-drawer .account-menu-head {
    background: #fff;
  }

  /* Voci piu' alte: qui si tocca col dito, non si punta col mouse. */
  .account-drawer .account-menu-link,
  .account-drawer .account-menu-hook > a {
    padding: 13px 16px;
    font-size: 15px;
  }

  .account-drawer .account-menu-group-title {
    padding: 14px 16px 4px;
  }

  .account-drawer .account-menu-logout {
    padding: 15px 16px;
    font-size: 15px;
  }

  .account-drawer .account-menu-guest {
    padding: 20px 16px;
  }

  /* A pannello aperto la pagina sotto non scorre: senza questo, finite
     le voci il dito continua a scorrere la pagina retrostante e si
     perde il punto in cui si era. La classe la mette e la toglie
     assets/js/custom.js, e la regola sta dentro la media query
     cosi' non puo' restare a bloccare una finestra larga. */
  html.has-account-drawer-open,
  html.has-account-drawer-open body {
    overflow: hidden;
  }
}

/* --- Intestazione di pagina -------------------------------- */

.account-page-head {
  margin-bottom: 20px;
}

.account-page-head h1 {
  margin: 0 0 6px;
  font-size: var(--fs-fluid-2xl);
  color: #000099;
}

.account-page-intro {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: #000;
}

/* Titolo a sinistra e pulsante a destra. Sotto i 576 px il pulsante
   va a capo e prende tutta la riga: prima restava affiancato al
   titolo e si riduceva a due parole per riga. */
.account-page-head--action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

@media (max-width: 575px) {
  .account-page-head--action > .btn {
    width: 100%;
  }
}

.account-page-head--action .btn .material-icons {
  width: 20px;
  height: 20px;
  font-size: 20px;
  vertical-align: text-bottom;
}

/* --- Riquadri e griglie di schede -------------------------- */

.account-panel {
  padding: 15px;
  background: #fff;
  border: 1px solid #dcdce3;
  border-radius: 6px;
}

.account-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  margin-bottom: 20px;
}

@media (min-width: 768px) {
  .account-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Un avviso dentro la griglia prende tutta la riga, altrimenti
   resterebbe largo mezza pagina con il vuoto accanto. */
.account-cards > .alert {
  grid-column: 1 / -1;
}

/* --- Pagina "Area cliente" --------------------------------- */

.area_personale-profilo,
.area_personale-benvenuto {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.45;
  color: #000;
}

/* I tre dati di registrazione: prima erano un paragrafo unico con
   delle barre verticali in mezzo, che sul telefono restavano
   appese a fine riga. */
.area_personale-dati {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  list-style: none;
  margin: 15px 0 0;
  padding: 0;
}

.area_personale-dati li {
  display: flex;
  flex-direction: column;
}

.area_personale-dati span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #000;
}

.area_personale-dati strong {
  font-size: 15px;
  color: #000;
  overflow-wrap: anywhere;
}

.area_personale-offerte {
  display: block;
  margin-bottom: 20px;
}

.area_personale-offerte img {
  max-width: 100%;
  height: auto;
}

.account-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .account-shortcuts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.account-shortcuts a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  padding: 16px 10px;
  background: #fff;
  border: 1px solid #dcdce3;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  color: #000;
  text-decoration: none;
}

.account-shortcuts a .material-icons {
  width: 28px;
  height: 28px;
  font-size: 28px;
  color: #00057b;
}

.account-shortcuts a:hover {
  border-color: #00057b;
  background: #f4f4f4;
  color: #00057b;
}

.account-logout-footer {
  margin-top: 25px;
  text-align: center;
}

/* --- Tabelle ----------------------------------------------- */

/* Sopra i 768 px la tabella resta una tabella; se le colonne non ci
   stanno il contenitore scorre in orizzontale invece di sfondare la
   pagina. */
.account-table-wrapper {
  width: 100%;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.account-table {
  width: 100%;
  margin-bottom: 0;
}

.account-table thead th {
  background: #eef0fa;
  color: #000;
  font-weight: 700;
  white-space: nowrap;
}

.account-table th,
.account-table td {
  vertical-align: middle;
}

.account-table-actions .btn {
  margin: 2px 4px 2px 0;
  white-space: nowrap;
}

.account-table-actions .btn .material-icons {
  width: 18px;
  height: 18px;
  font-size: 18px;
  vertical-align: text-bottom;
}

/* Sotto i 768 px la tabella diventa un elenco di schede: una riga
   per ogni cella, con l'intestazione della colonna a sinistra presa
   da data-label. Questo prende il posto delle marcature doppie
   (tabella per il desktop piu' elenco per il telefono) che stavano
   in history.tpl, discount.tpl, order-follow.tpl e order-detail.tpl,
   e da' finalmente un contenuto sul telefono a fatture, note di
   credito e buoni di lavoro, che li' non mostravano niente. */
@media (max-width: 767px) {
  .account-table-wrapper {
    overflow-x: visible;
  }

  .account-table,
  .account-table tbody,
  .account-table tr,
  .account-table th,
  .account-table td {
    display: block;
    width: 100%;
  }

  /* L'intestazione resta nel documento per i lettori di schermo ma
     non occupa spazio: i titoli di colonna si vedono comunque,
     ripetuti su ogni cella. */
  .account-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .account-table tbody tr,
  .account-table.table-striped tbody tr:nth-of-type(odd) {
    background: #fff;
  }

  .account-table tbody tr {
    margin-bottom: 12px;
    padding: 6px 12px;
    border: 1px solid #dcdce3;
    border-radius: 6px;
  }

  .account-table tbody th,
  .account-table tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border: 0;
    text-align: right;
  }

  .account-table tbody th + th,
  .account-table tbody th + td,
  .account-table tbody td + th,
  .account-table tbody td + td {
    border-top: 1px dotted #e6e6ec;
  }

  .account-table tbody th[data-label]::before,
  .account-table tbody td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 42%;
    font-weight: 700;
    text-align: left;
    color: #000;
  }

  /* Colonne di contorno: sul telefono non aggiungono niente e
     allungano la scheda. */
  .account-table .account-table-secondary {
    display: none;
  }

  /* I pulsanti prendono la riga per intero, cosi' l'area da toccare
     e' larga quanto la scheda. */
  .account-table tbody td.account-table-actions {
    display: block;
    padding-top: 10px;
    text-align: left;
  }

  .account-table tbody td.account-table-actions::before {
    content: none;
  }

  .account-table-actions .btn {
    display: inline-block;
    margin: 4px 6px 0 0;
  }
}

/* --- Dettaglio ordine -------------------------------------- */

.order-addresses .account-panel h4 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #000;
}

.order-addresses .account-panel address {
  margin: 0;
  font-style: normal;
  line-height: 1.5;
}

/* --- Coupon del carrello: campo e pulsante allineati -----------------------
   Il campo e il pulsante erano due inline-block, quindi si allineavano sulla
   linea di base: avendo altezze diverse restavano sfalsati in verticale, e il
   pulsante era per giunta tirato su di 4px (margin-top:-4px in theme.css).
   In orizzontale non tornavano con il resto del riquadro perche' entrambi
   avevano margin-right:-3px, che faceva sporgere il pulsante oltre il bordo
   destro, e larghezze fisse (200px sul campo, max-width:200px sul pulsante)
   scritte dentro il tag, che non si adattavano alla colonna del riepilogo.

   Ora la form e' una riga flessibile: le due altezze coincidono per
   costruzione grazie ad align-items:stretch, senza numeri da azzeccare; il
   campo occupa lo spazio che avanza e il pulsante si dimensiona sul proprio
   testo, restando dentro i bordi come le righe dei totali qui sopra. */
.promo-code form {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.promo-code form .promo-input {
  flex: 1 1 auto;
  min-width: 0; /* senza questo un elemento flessibile non scende sotto la sua larghezza naturale */
  width: auto;
  height: auto;
  margin: 0;
}

/* il selettore ripete #cart perche' la regola larga di questo foglio usa
   "#cart .promo-code .btn.btn-primary", che altrimenti vincerebbe con width:100% */
#cart .promo-code form .btn.btn-primary,
.promo-code form .btn.btn-primary {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
}

/* --- Blocco "politiche" (blockreassurance): testo incolonnato accanto all'icona ---
   L'icona e' float:left alta 35px, quindi il testo la scavalcava: le righe oltre
   quei 35px tornavano al margine sinistro, finendo sotto l'icona e fuori colonna.
   E' il caso di "Reso entro 14 giorni dall'acquisto. Clicca per maggiori dettagli",
   dove l'ultima parola cadeva su una riga a se', allineata piu' a sinistra del resto.

   Con una griglia a due colonne l'icona occupa la prima e tutto il testo la
   seconda: ogni riga resta incolonnata sotto la precedente, quante che siano.
   Il float viene annullato perche' in griglia non serve piu'. */
.blockreassurance_product > div:not(.clearfix) {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 5px;
  align-items: start;
}

.blockreassurance_product > div:not(.clearfix) > .item-product {
  float: none;
  grid-column: 1;
  grid-row: 1 / span 2; /* l'icona affianca sia il titolo sia la descrizione */
  margin-right: 0;
}

.blockreassurance_product > div:not(.clearfix) > .block-title,
.blockreassurance_product > div:not(.clearfix) > p {
  grid-column: 2;
  margin-top: 0; /* il margine sotto resta, e' quello che separa un blocco dall'altro */
}

/* --- Conferma "Prodotto aggiunto al carrello": non deve bloccare la pagina ---
   Il riquadro di conferma copre tutta la pagina (position:fixed, 100% x 100%,
   z-index 9999) e resta visibile circa 1,7 secondi dopo ogni aggiunta. Finche'
   e' li' intercetta i click: chi aggiunge un prodotto dopo l'altro dai
   risultati di ricerca clicca sul velo invece che sul pulsante, e sembra che
   dal secondo prodotto in poi l'aggiunta non funzioni.

   Con pointer-events:none il messaggio si vede ancora, con la stessa grafica e
   la stessa durata, ma i click lo attraversano e arrivano al pulsante sotto.
   Il velo di attesa (.loader) resta invece bloccante: dura quanto la richiesta
   ed e' giusto che impedisca un secondo invio a meta' strada. */
.success-addtocart-modal {
  pointer-events: none;
}

/* DGNET - "Accedi per lo sconto" allineato al pulsante del carrello.
   Il pulsante arancione stava su tutta la larghezza della colonna (520 px contro
   315 px) ed era piu' basso di 13 px: due pulsanti di misure diverse, uno sopra
   l'altro, con la cella piu' alta del necessario. Ora la riga ripete la stessa
   griglia di .product-quantity - una colonna vuota larga quanto il campo della
   quantita' e il pulsante nello spazio restante - cosi' i due pulsanti hanno
   larghezza, altezza e bordo sinistro identici. */
/* .product-actions: senza, le regole colpivano anche le card prodotto dentro la
   scheda (Prodotti visti, accessori) e il pulsante della card finiva spostato a destra */
/* ==========================================================
   ACCEDI PER LO SCONTO
   SOLO BARRA FISSA
   ========================================================== */

#add-to-cart-or-refresh.fix-to-bottom .login_for_offer {
  display: flex;
  align-items: center;

  margin: 0 !important;
  padding: 0 !important;
}

#add-to-cart-or-refresh.fix-to-bottom .login_for_offer::before {
  display: none !important;
  content: none !important;
}

#add-to-cart-or-refresh.fix-to-bottom .login_for_offer a,
#add-to-cart-or-refresh.fix-to-bottom .login_for_offer a.btn {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  height: 42px;
  min-height: 42px;

  margin: 0;
  padding: 0 6px;

  box-sizing: border-box;

  font-size: 10px;
  font-weight: 700;
  line-height: 1.05;

  text-align: center;
  white-space: normal;
}
#product .product-add-to-cart.js-product-add-to-cart .product-quantity {
  margin-bottom: 10px;
}
/* la colonna del pulsante occupa lo spazio che resta: prima il pulsante blu si
   fermava alla larghezza del testo e a destra restava un vuoto di un quinto della
   riga */
#add-to-cart-or-refresh.fix-to-bottom
.product-add-to-cart .product-quantity .add {
  flex: 1;
}

/* ==========================================================
   ACCEDI PER LO SCONTO - SCHEDA NORMALE (barra fissa non attiva)
   Le regole della barra fissa qui sopra valgono solo con .fix-to-bottom, che theme.js
   aggiunge dopo lo scorrimento. Senza queste, nella scheda com'e' all'apertura il
   pulsante arancione restava largo quanto il testo e centrato, e quello blu non
   occupava piu' la riga. La riga dello sconto ripete la griglia di .product-quantity:
   uno spazio largo quanto il riquadro della quantita' (5.75rem + .4rem, vedi la
   regola .qty) e il pulsante nello spazio restante, quindi i due pulsanti hanno
   bordo sinistro, larghezza e altezza identici.
   ========================================================== */
#add-to-cart-or-refresh:not(.fix-to-bottom) .login_for_offer {
  display: flex;
  align-items: stretch;
  margin: 0 0 6px;
  padding: 0;
  text-align: left;
}
#add-to-cart-or-refresh:not(.fix-to-bottom) .login_for_offer::before {
  content: "";
  flex: 0 0 calc(5.75rem + .4rem);
}
#add-to-cart-or-refresh:not(.fix-to-bottom) .login_for_offer a.btn {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 42px;
  min-height: 42px;
  margin: 0;
  padding: 0 12px;
  line-height: 1.1;
  box-sizing: border-box;
}
#add-to-cart-or-refresh:not(.fix-to-bottom) .product-add-to-cart .product-quantity .add {
  flex: 1 1 auto;
}
/* sotto i 992 px il campo della quantita' e' alto 44 px invece di 51: il pulsante
   arancione segue la stessa misura */
@media (max-width: 991px) {
  #product .product-actions .login_for_offer a.btn,
  #product #add-to-cart-or-refresh .login_for_offer a {
    min-height: 44px;
  }
}

/* DGNET - parte alta della lista piu' compatta.
   "Piu dettagli" non e' piu' un pulsante largo e centrato sotto la testata: sta in
   linea con la tendina dell'ordinamento, alto quanto lei. La riga diventa una flex
   row cosi' etichetta, tendina e pulsante restano affiancati senza andare a capo. */
.sort-by-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
}
.sort-by-row .sort-by {
  width: auto;
  flex: 0 0 auto;
  padding: 0;
  white-space: nowrap;
}
.sort-by-row .products-sort-order {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 320px;
  padding: 0;
}
.more-details-inline {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
}
.more-details-inline .btn {
  display: inline-flex;
  height: 100%;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  white-space: nowrap;
}
/* sotto i 992 px la riga ha gia' il pulsante Filtra: "Piu dettagli" resta nascosto
   come lo era prima nella testata */
@media (max-width: 991px) {
  .more-details-inline {
    display: none;
  }
}
/* la testata della categoria non deve piu' riservare spazio al pulsante tolto */
.block-category .block-category-inner .category-cover img {
  margin-bottom: 10px;
}
.block-category .block-category-inner #category-description {
  margin-bottom: 12px;
}

/* DGNET - il modulo PayPal infila il suo banner dentro .product-quantity, come
   terzo elemento della riga: si prendeva meta larghezza e schiacciava il pulsante
   del carrello. Va sulla riga sotto, come PayPal stesso fa con
   [installment-container], e il pulsante si riprende tutta la riga. */
#product .product-add-to-cart .product-quantity {
  /* serve perche il rigo qui sotto possa mandare a capo cio che non e
     ne il campo ne il pulsante: senza, il terzo elemento resta in riga e
     stringe il carrello (su telefono a 86 px) */
  flex-wrap: wrap;
}
#product .product-add-to-cart .product-quantity > *:not(.qty):not(.add) {
  flex-basis: 100%;
}

/* DGNET - quando al posto della foto si mostra il logo del costruttore (o il
   segnaposto), l immagine deve stare nel riquadro con le sue proporzioni: i loghi
   sono larghi e bassi (202x50, 386x60) e con gli attributi width/height a 250
   uscirebbero schiacciati. */
.product-miniature .product-thumbnail img.product-thumbnail-fallback {
  width: 100%;
  height: auto;
  max-height: 150px;
  object-fit: contain;
  padding: 10px 0;
}

/* DGNET - zona quantita + carrello piu compatta. Le due colonne della riga hanno
   la stessa altezza, dichiarata una volta sola qui: il campo era 51 px sul desktop
   e 44 sul telefono, il pulsante lo seguiva e la sezione risultava alta. */
#product .product-add-to-cart .product-quantity .qty,
#product .product-add-to-cart .product-quantity .add,
#product .product-actions .add-to-cart.btn-primary,
#product #add-to-cart-or-refresh .login_for_offer a,
#product .product-actions .login_for_offer a.btn {
  height: 42px;
  min-height: 42px;
}
#product .product-add-to-cart.js-product-add-to-cart .product-quantity {
  margin-bottom: 6px;
}

/* DGNET - dentro il riquadro della quantita il campo e le due frecce devono seguire
   l altezza della riga, non averne una propria: con il riquadro a 42 px il campo
   usciva di 6 px e la freccia in giu di 14, sotto il bordo. Il gruppo diventa una
   riga flessibile senza padding, il campo si stira e le frecce si dividono
   l altezza a meta invece di essere fissate a 25 px l una. */
#product .product-add-to-cart .product-quantity .qty > .input-group {
  display: flex;
  align-items: stretch;
  height: 100%;
  padding: 0;
}
#product .product-add-to-cart .product-quantity .qty input#quantity_wanted {
  flex: 1;
  height: auto;
  min-height: 0;
  align-self: stretch;
  padding-top: 0;
  padding-bottom: 0;
}
#product .product-add-to-cart .product-quantity .qty .input-group-btn-vertical {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#product .product-add-to-cart .product-quantity .qty .input-group-btn-vertical button {
  height: 50% !important;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#product .product-add-to-cart .product-quantity .qty .input-group-btn-vertical button i.material-icons {
  font-size: 18px !important;
  line-height: 1;
}

/* DGNET - riquadro contatti della scheda (FAQ | telefono | Live chat) su una riga.
   Senza regole propre, con icone e testo a misura piena, su telefono il terzo
   collegamento andava a capo da solo. Tre colonne uguali, testo che scala con la
   larghezza dello schermo, niente margini negativi della .row. */
.product-contact-box {
  flex-wrap: nowrap;
  margin-left: 0;
  margin-right: 0;
  gap: 4px;
}
.product-contact-box a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  font-size: clamp(12px, 3.6vw, 16px);
  line-height: 1.2;
}
.product-contact-box a .material-icons {
  font-size: 1.3em !important;
  line-height: 1;
  flex: 0 0 auto;
}

/* DGNET - carrello su telefono: la riga prodotto mette quantita e cestino sulla
   stessa linea e i prezzi sotto; del comando "Rimuovi" resta l icona, il testo
   rimane per i lettori di schermo (e nel title del collegamento). */
.cart-line-product-actions .remove-from-cart .delete_label {
  display: block;
}
@media (max-width: 991px) {
  /* le colonne sopra (immagine, nome) sono float larghi il 100%: una riga flex
     non si sovrappone ai float e finiva spinta a destra, fuori schermo */
  #cart .product-line-grid-right.product-line-actions {
    clear: both;
  }
  #cart .product-line-grid-right.product-line-actions > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
  }
  #cart .product-line-grid-right.product-line-actions > .row > .hidden-md-up {
    display: none;
  }
  /* i clearfix di Bootstrap (::before/::after) dentro una riga flessibile diventano
     elementi veri e spostano le colonne */
  #cart .product-line-grid-right.product-line-actions > .row::before,
  #cart .product-line-grid-right.product-line-actions > .row::after,
  #cart .product-line-grid-right.product-line-actions > .row > .col-md-12 > .row::before,
  #cart .product-line-grid-right.product-line-actions > .row > .col-md-12 > .row::after {
    display: none;
  }
  #cart .product-line-grid-right.product-line-actions > .row > .col-md-12 {
    flex: 1 1 100%;
    padding: 0;
  }
  #cart .product-line-grid-right.product-line-actions > .row > .col-md-12 > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
  }
  #cart .product-line-actions .row > .qty {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    order: 1;
  }
  #cart .product-line-actions .row > .text-xs-center {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    order: 2;
    padding: 0 0 0 8px;
  }
  #cart .product-line-actions .row > .price {
    flex: 1 1 100%;
    width: auto;
    max-width: none;
    order: 3;
  }
  #cart .cart-line-product-actions .remove-from-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  /* il nome del comando per i lettori di schermo lo danno aria-label e title del
     collegamento: l etichetta visibile su telefono non serve e non occupa spazio */
  #cart .cart-line-product-actions .remove-from-cart .delete_label {
    display: none;
  }
}

/* DGNET - riepilogo del carrello: tutte le righe sulla stessa griglia, voce a
   sinistra e importo a destra. Le righe "1 articolo" e "Spedizione" arrivavano ai
   bordi, le tre dei totali erano rientrate di 1.25rem dal padding del loro
   blocco, e l IVA aveva un float a parte: valori non incolonnati. */
.cart-detailed-totals .cart-summary-line,
.cart-summary-totals .cart-summary-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.cart-detailed-totals .cart-summary-line::before,
.cart-detailed-totals .cart-summary-line::after,
.cart-summary-totals .cart-summary-line::before,
.cart-summary-totals .cart-summary-line::after {
  display: none;
}
.cart-detailed-totals .cart-summary-line .value,
.cart-summary-totals .cart-summary-line .value {
  float: none !important;
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}
/* il blocco dei totali ha lo stesso rientro orizzontale del blocco sopra: sul
   desktop entrambi 1.25rem, sotto i 992 px il blocco sopra non ne ha e i totali
   restavano rientrati di 20 px */
@media (max-width: 991px) {
  .cart-summary-totals {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
.cart-summary-totals #total_iva_incl {
  border-top: 1px solid #d1d1d1;
  margin-top: 0.25rem !important;
  padding-top: 0.6rem !important;
  font-size: 1.1em;
}

/* DGNET - niente grigino nei comandi dei filtri: "Piu" e "Meno" dei gruppi
   (#AAB2BD), "Piu filtri / Meno filtri" (#55696F) e "Cancella filtri" (#666)
   diventano neri. Sono colori del foglio di amazzingfilter: si sovrascrivono qui,
   nel tema, perche un aggiornamento del modulo non li riporti indietro. */
/* body davanti: stessa specificita del foglio del modulo +1, cosi vince
   qualunque sia l ordine di caricamento dei due fogli */
body .af_filter .toggle-cut-off span,
body #amazzing_filter .toggleMoreFilters,
body #amazzing_filter .toggleMoreFilters:focus,
body .selectedFilters .clearAll a {
  color: #000;
}

/* DGNET - immagini dentro i contenuti scritti a mano (guide/CMS, descrizione in fondo
   alla categoria): restano nel loro contenitore. Il tema lo faceva solo per
   .cms-box e per la descrizione prodotto; nelle guide un'immagine da 750 px
   finiva larga 698 px su uno schermo da 390 e la descrizione della categoria
   allargava la pagina fino a 1367 px sul desktop. Stesso comportamento del tema:
   larghezza massima del contenitore, proporzioni mantenute. */
.page-content.page-cms img,
.category-additional-description img,
#category-description img {
  max-width: 100%;
  height: auto;
}

/* DGNET - frecce del carosello in home e nella pagina marchi: il contenitore
   .icon-next/.icon-prev era fissato a 30x30 px da una regola del tema, ma l'icona
   dentro e' larga 50 px; la freccia destra usciva di 3 px dal bordo e il desktop
   aveva lo scorrimento orizzontale. Il contenitore prende la misura dell'icona. */
.carousel .direction .carousel-control .icon-next,
.carousel .direction .carousel-control .icon-prev {
  width: auto;
  height: auto;
}

/* DGNET - tabelle dentro i contenuti scritti a mano (guide, descrizione categoria):
   su telefono una tabella con larghezza fissa (width="738") o con celle che non si
   restringono allargava tutta la pagina. Non supera il contenitore e, se il suo
   contenuto e' piu largo, scorre in orizzontale al suo interno invece di spingere
   fuori la pagina. */
.page-content.page-cms table,
.category-additional-description table,
#category-description table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* Area riservata della scheda prodotto (dipendenti loggati al BO): il tooltip
   Product::showProductTooltip() e' lo stesso HTML delle pagine admin, ma nel front
   mancava lo stile di amministrazione/themes/new-theme/css/overrides.css
   (#product_tooltip): tabelle alte, intestazioni senza sfondo, testo a sinistra.
   Qui si riproduce la stessa resa compatta delle tabelle del back office. */
#tooltip #product_tooltip {
  width: 100% !important;
  max-width: 650px;
  margin: 0 auto;
  font-size: .8125rem;
}
#tooltip #product_tooltip h4 {
  margin: 0 0 5px;
  padding: 0;
  font-size: .875rem;
  text-align: left;
}
#tooltip #product_tooltip table {
  width: 100%;
  margin: 0 0 15px;
  border-collapse: collapse;
  table-layout: auto;
}
#tooltip #product_tooltip th,
#tooltip #product_tooltip td {
  padding: 4px 6px;
  border: 1px solid #bbcdd2;
  text-align: center;
  vertical-align: middle;
  line-height: 1.3;
}
#tooltip #product_tooltip th {
  background-color: #f2f2f2;
  font-weight: 600;
}
#tooltip #product_tooltip thead th {
  background-color: #eaebec;
  border-top: 2px solid #25b9d7;
}
@media (max-width: 767px) {
  #tooltip #product_tooltip { overflow-x: auto; }
}

/* DGNET - lista prodotti: - quantita + e carrello su una sola riga, tutti alti
   quanto il campo. Prima l icona stava sotto, larga quanto la card e alta 20 px,
   e i segni - e + erano testo semplice difficile da colpire. */
/* il piede della card e la riga quantita devono poter essere piu stretti della
   somma delle larghezze dei riquadri: senza min-width 0 un elemento flex non scende
   sotto il suo contenuto e su telefono (card da 176 px) il carrello usciva di 7 px */
.product-miniature .product_footer,
.product-add-to-cart-inlist,
.product-add-to-cart-inlist > .col-md-12 {
  min-width: 0;
  max-width: 100%;
}
.product-add-to-cart-inlist .quantity-selector {
  max-width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  height: 36px;
  margin-left: 0;
}
/* - e + disegnati con due tratti centrati sul riquadro: come caratteri di Mulish
   l inchiostro stava 2-2,5 px sotto il centro (il trattino e' alla meta della
   x-height, non della riga). Il testo resta nel pulsante per i lettori di schermo. */
.product-add-to-cart-inlist .quantity-decrease,
.product-add-to-cart-inlist .quantity-increase {
  position: relative;
  /* larghezza vera e non flex-basis: con font-size 0 il pulsante non ha contenuto
     e il riquadro, largo quanto il suo contenuto, lo schiacciava a 18 px */
  flex: 0 1 auto;
  width: 36px;
  min-width: 24px;
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 0 !important;
  line-height: 0;
  color: transparent;
  border: 1px solid #00047b;
  border-radius: 4px;
}
.product-add-to-cart-inlist .quantity-decrease::before,
.product-add-to-cart-inlist .quantity-increase::before,
.product-add-to-cart-inlist .quantity-increase::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: #00047b;
  transform: translate(-50%, -50%);
}
.product-add-to-cart-inlist .quantity-increase::after {
  width: 2px;
  height: 12px;
}
.product-add-to-cart-inlist .quantity-input {
  flex: 0 1 auto;
  width: 3.25rem;
  min-width: 1.75rem;
  height: 100%;
  margin: 0;
  padding: 0 2px;
  font-size: 1rem;
  line-height: normal;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #7a7a7a;
  border-radius: 4px;
  -moz-appearance: textfield;
}
.product-add-to-cart-inlist .quantity-input::-webkit-inner-spin-button,
.product-add-to-cart-inlist .quantity-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.product-add-to-cart-inlist .add-to-cart-btn {
  flex: 0 1 auto;
  width: 36px;
  min-width: 28px;
  height: 100%;
  min-height: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #FF6600;
  border-radius: 4px;
}
/* .shopping-cart { font-size: 25px !important } e il margin-top: 10px di theme.css
   (.btn-primary .material-icons.shopping-cart) spostavano l icona di 5 px */
.product-add-to-cart-inlist .add-to-cart-btn .material-icons {
  display: block;
  width: 1em;
  height: 1em;
  margin: 0;
  font-size: 24px !important;
  line-height: 1;
}

/* DGNET - pulsanti della card prodotto (Maggiori dettagli, Accedi per lo sconto,
   Richiedi preventivo, Prodotti simili): stessa altezza minima e testo centrato
   anche quando va su due righe. */
.product-miniature .more-details .btn,
.product-miniature .login_for_offer .btn,
.product-miniature .richiedi-preventivo .btn,
.product-miniature .prodotti-simili .btn {
  min-height: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  line-height: 1.2;
}

/* DGNET - scheda prodotto: "Accedi per lo sconto" deve iniziare dove inizia
   "Aggiungi al carrello". Lo spazio a sinistra era 5rem + 6px, ma il riquadro della
   quantita (campo + frecce) non aveva una larghezza fissata e risultava piu largo:
   il pulsante arancione sporgeva di ~20 px. Una sola misura per entrambi. */
#product .product-add-to-cart .product-quantity .qty {
  flex: 0 0 5.75rem;
  width: 5.75rem;
  margin-right: .4rem;
}
#product .product-add-to-cart .product-quantity .qty > .input-group {
  width: 100%;
}
#product .product-add-to-cart .product-quantity .qty input#quantity_wanted {
  width: auto;
  min-width: 0;
}
/* il distanziale va tolto solo nella barra fissa: senza .fix-to-bottom questa regola
   con !important lo cancellava anche nella scheda normale e "Accedi per lo sconto"
   finiva stretto e centrato invece che allineato ad "Aggiungi al carrello" */
#add-to-cart-or-refresh.fix-to-bottom .login_for_offer::before {
  display: none !important;
}

/* DGNET - navigazione della scheda prodotto (Descrizione, Scheda tecnica, Documenti
   Allegati, Accessori e correlati). Un solo contenitore con bordo leggero; da 992 px
   le schede si dividono la riga in parti uguali, sotto diventano un elenco
   verticale con freccia. Stesso markup in product.tpl e product-mobile.tpl: la
   disposizione dipende dalla larghezza, non dal template scelto dal server.
   Selettori con #product .tabs per battere le regole storiche (.nav-item .nav-link
   padding 10px 2px, width fit-content sotto i 991 px, li float/margin 5px 0). */
#product .tabs .nav-tabs.ez-product-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  background: #f6f7f9;
  border: 1px solid #dde1e6;
  border-radius: 8px;
}
#product .tabs .nav-tabs.ez-product-tabs > .nav-item {
  flex: 1 1 0;
  min-width: 0;
  float: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
#product .tabs .nav-tabs.ez-product-tabs > .nav-item + .nav-item {
  border-left: 1px solid #dde1e6;
}
#product .tabs .nav-tabs.ez-product-tabs .nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 54px;
  margin: 0;
  padding: 8px 12px;
  color: #1f2328;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  background: transparent;
  border: 0;
  /* bordo sopra trasparente uguale alla sottolineatura: senza, icona e testo
     stavano 1,5 px sopra il centro della scheda */
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-radius: 0;
}
#product .tabs .nav-tabs.ez-product-tabs > .nav-item:first-child .nav-link {
  border-radius: 7px 0 0 7px;
}
#product .tabs .nav-tabs.ez-product-tabs > .nav-item:last-child .nav-link {
  border-radius: 0 7px 7px 0;
}
#product .tabs .nav-tabs.ez-product-tabs .nav-link:hover {
  color: #00057b;
  background: #fff;
  border-bottom-color: #c9cfe6;
}
#product .tabs .nav-tabs.ez-product-tabs .nav-link.active {
  color: #00057b;
  background: #fff;
  border-bottom-color: #00057b;
}
#product .tabs .nav-tabs.ez-product-tabs .ez-tab-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  font-size: 22px !important;
  line-height: 1;
}
#product .tabs .nav-tabs.ez-product-tabs .ez-tab-label {
  min-width: 0;
  overflow-wrap: break-word;
}
#product .tabs .nav-tabs.ez-product-tabs .ez-tab-arrow {
  display: none;
}

/* elenco verticale fino a 991 px: tra 768 e 991 (tablet verticale, telefono
   orizzontale) le quattro schede in riga sono larghe ~180 px e "Accessori e
   correlati (15)" andava su due righe */
@media (max-width: 991px) {
  #product .tabs .nav-tabs.ez-product-tabs {
    flex-direction: column;
    background: #fff;
  }
  #product .tabs .nav-tabs.ez-product-tabs > .nav-item {
    flex: 0 0 auto;
    width: 100%;
    text-align: left;
  }
  #product .tabs .nav-tabs.ez-product-tabs > .nav-item + .nav-item {
    border-left: 0;
    border-top: 1px solid #dde1e6;
  }
  #product .tabs .nav-tabs.ez-product-tabs .nav-link {
    justify-content: flex-start;
    gap: 12px;
    min-height: 52px;
    padding: 10px 14px;
    text-align: left;
    border-top: 0;
    border-bottom: 0;
    border-left: 3px solid transparent;
  }
  #product .tabs .nav-tabs.ez-product-tabs > .nav-item:first-child .nav-link {
    border-radius: 7px 7px 0 0;
  }
  #product .tabs .nav-tabs.ez-product-tabs > .nav-item:last-child .nav-link {
    border-radius: 0 0 7px 7px;
  }
  #product .tabs .nav-tabs.ez-product-tabs .nav-link:hover,
  #product .tabs .nav-tabs.ez-product-tabs .nav-link.active {
    border-left-color: #00057b;
    background: #f2f4fb;
  }
  #product .tabs .nav-tabs.ez-product-tabs .ez-tab-label {
    flex: 1 1 auto;
  }
  #product .tabs .nav-tabs.ez-product-tabs .ez-tab-arrow {
    display: block;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0;
    font-size: 24px !important;
    line-height: 1;
    color: #5a6270;
  }
}

/* DGNET - footer su telefono: Webcall, WhatsApp, telefono e pagamenti uno sotto
   l'altro e centrati. In riga (justify-content-between) non c'era spazio e i loghi
   finivano disallineati. Le immagini tengono le proporzioni e non superano la
   larghezza della colonna. */
@media (max-width: 767px) {
  #footer .footer-contatti {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-left: 0;
    margin-right: 0;
  }
  #footer .footer-contatti > [class*="col-"] {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }
  #footer .footer-contatti > [class*="col-"] > p {
    margin: 0;
    text-align: center;
  }
  #footer .footer-contatti img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
  }
  #footer .footer-contatti .fty a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  #footer .footer-contatti .contact-header-footer h3 {
    margin: 0;
    text-align: center;
  }
}

/* DGNET - card prodotto, regola generale (liste categoria, Prodotti visti, accessori,
   prodotti in evidenza). La parte alta (immagine, titolo, SKU, disponibilita, prezzo)
   ha altezza variabile; il piede con Maggiori dettagli, Accedi per lo sconto /
   Richiedi preventivo, quantita e carrello sta sempre in fondo alla card, cosi' i
   controlli di card vicine sono alla stessa altezza. Nessuna altezza fissa sui
   testi: le card di una riga si allungano tutte quanto la piu' alta. */
.viewed-products .products {
  display: flex;
  flex-wrap: wrap;
}
.product-miniature .thumbnail-container {
  flex: 0 0 auto;
}
.product-miniature .product_footer {
  flex: 1 1 auto;
  justify-content: flex-end;
  margin-top: 0;
}
/* stesso spazio per ogni immagine, qualunque sia la proporzione: l immagine si
   adatta dentro (contain), senza deformarsi e senza essere tagliata */
/* altezza dello spazio immagine esplicita: con aspect-ratio + max-height le immagini
   alte e strette (120x400) riducevano il riquadro a 50x50 */
.product-miniature .thumbnail-top .product-thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 180px;
}
.product-miniature .thumbnail-top .product-thumbnail picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.product-miniature .thumbnail-container .product-thumbnail img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.product-miniature .product-thumbnail img.product-thumbnail-fallback {
  max-height: 60%;
  padding: 0;
}
/* piede a slot fissi: la seconda azione (Accedi per lo sconto, Richiedi preventivo,
   Prodotti simili o la riga dell'offerta) e la riga quantita ci sono sempre, anche
   vuote, con altezza minima uguale in ogni card. Cosi' "Maggiori dettagli" parte alla
   stessa altezza anche tra una card con sconto e quantita e una senza. */
/* width 100% sugli slot: il piede della card centra i figli, quindi senza una
   larghezza propria lo slot si stringeva al testo del pulsante (178 px contro i
   300 di "Maggiori dettagli", che ha la classe w-100) */
.product-miniature .product-footer-cta,
.product-miniature .product-footer-qty {
  align-self: stretch;
  width: 100%;
}
.product-miniature .product-footer-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 38px;
  margin-bottom: 10px;
}
/* il pulsante dello slot e' largo quanto la card, come "Maggiori dettagli" */
.product-miniature .product-footer-cta > *,
.product-miniature .product-footer-cta .btn {
  width: 100%;
  margin-bottom: 0;
}
.product-miniature .product-footer-cta .offerta-fino-al {
  line-height: 1.2;
  text-align: center;
}
.product-miniature .product-footer-qty {
  min-height: 46px;
}
.product-miniature .product-footer-qty .product-add-to-cart-inlist {
  margin-top: 0;
}
.product-miniature .more-details {
  margin-bottom: 10px;
}
@media (min-width: 992px) {
  /* nei Prodotti visti la riga quantita e' nascosta (regola esistente): niente spazio vuoto */
  #ps_viewedproducts .product-miniature .product-footer-qty {
    display: none;
  }
  /* Prodotti visti: niente altezze minime pensate per la lista categoria (card 580 px,
     parte alta 400 px). Il loro contenuto e' piu basso e il piede in fondo restava a
     130-150 px dal prezzo. L'esenzione storica punta a .featured-products, che qui non
     c'e' (il modulo usa .viewed-products). Le card di una riga restano uguali perche'
     la riga e' flex e le allunga tutte quanto la piu alta: i pulsanti restano allineati. */
  #ps_viewedproducts .product-miniature,
  #ps_viewedproducts .product-miniature .thumbnail-container {
    min-height: 0;
  }
}
@media (max-width: 767px) {
  .product-miniature .thumbnail-top .product-thumbnail {
    height: 140px;
  }
}

/* ==========================================================
   BARRA FISSA PRODOTTO - Nota Ezdirect, 13 settembre 2026

   Sostituisce la versione "responsive definitiva" che stava qui, che:
   - bloccava l'altezza a 50-56 px con overflow nascosto: la riga
     "In offerta fino al" usciva tagliata sotto il bordo;
   - lasciava la larghezza a 100vw, cioe' piu' larga della pagina di
     tutta la barra di scorrimento verticale;
   - spingeva il prezzo con un margine sinistro di 80-150 px, che apriva un
     vuoto fra titolo e prezzo e toglieva spazio al titolo;
   - non aveva regole sotto i 992 px.

   Ora:
   - una sola riga quando c'e' spazio: titolo e disponibilita' (prendono lo
     spazio che resta e vanno a capo invece di essere tagliati), prezzo,
     quantita' e pulsante, tutti centrati in verticale;
   - l'altezza la decide il contenuto, con un minimo di 56 px;
   - il prezzo IVA inclusa non compare nella barra: resta nella scheda;
   - la barra si appoggia sotto l'header: theme.js ne misura il fondo e lo
     passa in --ez-barra-prodotto-top (165 px resta come ripiego);
   - sotto i 992 px titolo e disponibilita' salgono su una riga propria;
     sotto i 576 px il titolo lascia il posto a prezzo e carrello, uno sopra
     l'altro, come nella scheda per telefono (product-mobile.tpl), che il
     titolo nella barra non l'ha mai avuto.

   Gli !important servono a battere gli strati precedenti della barra (righe
   ~1151 e ~5567) e le utility Bootstrap del prezzo (.d-flex,
   .align-items-end), che li usano a loro volta.
   ========================================================== */

#add-to-cart-or-refresh.fix-to-bottom {
  top: var(--ez-barra-prodotto-top, 165px) !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;

  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px 16px !important;

  height: auto !important;
  min-height: 56px !important;
  max-height: none !important;
  padding: 6px 16px !important;

  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Nella barra servono solo titolo, disponibilita', prezzo, quantita' e pulsante.
   L'ultimo selettore e' il banner che PayPal infila nella riga del carrello. */
#add-to-cart-or-refresh.fix-to-bottom .product-variants,
#add-to-cart-or-refresh.fix-to-bottom .product-discounts,
#add-to-cart-or-refresh.fix-to-bottom .product-pack,
#add-to-cart-or-refresh.fix-to-bottom .js-product-availability,
#add-to-cart-or-refresh.fix-to-bottom .product-minimal-quantity,
#add-to-cart-or-refresh.fix-to-bottom .tax-shipping-delivery-label,
#add-to-cart-or-refresh.fix-to-bottom .product-without-taxes,
#add-to-cart-or-refresh.fix-to-bottom .product-pack-price,
#add-to-cart-or-refresh.fix-to-bottom .price-ecotax,
#add-to-cart-or-refresh.fix-to-bottom .price_tax_incl,
#add-to-cart-or-refresh.fix-to-bottom .product-add-to-cart .product-quantity > *:not(.qty):not(.add) {
  display: none !important;
}


/* ----- Titolo + disponibilita' ----- */

#add-to-cart-or-refresh.fix-to-bottom > .availability {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;

  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px 6px !important;

  margin: 0 !important;
  padding: 0 !important;

  /* .availability ha nowrap su tutto il sito */
  text-wrap: wrap;
  white-space: normal !important;
  overflow: visible !important;
}

#add-to-cart-or-refresh.fix-to-bottom > .availability #hidden_product_title {
  flex: 1 1 100% !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: clamp(15px, 1.25vw, 20px) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;

  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  /* sotto i 992 px la colonna del prodotto e' centrata e il titolo la seguiva */
  text-align: left !important;
}

#add-to-cart-or-refresh.fix-to-bottom > .availability .tooltip-a {
  flex: 0 0 auto;
  margin: 0 !important;
}

/* Il testo si restringe accanto al pallino invece di finire da solo sulla riga sotto. */
#add-to-cart-or-refresh.fix-to-bottom > .availability .tooltiptext {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  white-space: normal;
  text-align: left;
}

/* Con "Accedi per lo sconto" in riga, sotto i 1200 px al titolo restavano 150 px:
   sale su una riga propria, come sotto i 992 px. Chi non conosce :has() tiene la
   riga unica, che resta comunque dentro la barra. */
@media (max-width: 1199.98px) {
  #add-to-cart-or-refresh.fix-to-bottom:has(> .login_for_offer) {
    flex-wrap: wrap !important;
  }

  #add-to-cart-or-refresh.fix-to-bottom:has(> .login_for_offer) > .availability {
    flex: 1 1 100% !important;
  }

  #add-to-cart-or-refresh.fix-to-bottom:has(> .login_for_offer) > .product-prices {
    flex: 1 1 auto !important;
  }
}


/* ----- Prezzo: listino, prezzo e "Escl. IVA" su una riga, offerta sotto ----- */

#add-to-cart-or-refresh.fix-to-bottom > .product-prices {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

#add-to-cart-or-refresh.fix-to-bottom .product-prices .product-price {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#add-to-cart-or-refresh.fix-to-bottom .product-prices .current-price {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}

#add-to-cart-or-refresh.fix-to-bottom .product-prices .listino-price {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
}

#add-to-cart-or-refresh.fix-to-bottom .product-prices .current-price > .d-flex,
#add-to-cart-or-refresh.fix-to-bottom .product-prices .price_tax_excl {
  align-items: baseline !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#add-to-cart-or-refresh.fix-to-bottom .product-prices .price_tax_excl {
  font-size: 13px !important;
  line-height: 1.2 !important;
}

#add-to-cart-or-refresh.fix-to-bottom .product-prices .current-price-value {
  margin: 0 !important;
  font-size: clamp(22px, 1.9vw, 28px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

/* Nella barra la promozione e' nera: la regola generale di .offerta-fino-al
   colora il testo con un gradiente arancione (background-clip: text e
   riempimento trasparente), che va spento tutto, non solo il color. */
#add-to-cart-or-refresh.fix-to-bottom .product-prices .offerta-fino-al {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  text-align: right;
  white-space: nowrap !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #000 !important;
  color: #000 !important;
}


/* ----- Accedi per lo sconto, Richiedi preventivo, Fuori produzione ----- */

#add-to-cart-or-refresh.fix-to-bottom > .login_for_offer,
#add-to-cart-or-refresh.fix-to-bottom > .preventivo,
#add-to-cart-or-refresh.fix-to-bottom > .btn-view-container {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

#add-to-cart-or-refresh.fix-to-bottom > .login_for_offer::before {
  display: none !important;
  content: none !important;
}

#add-to-cart-or-refresh.fix-to-bottom > .login_for_offer .btn,
#add-to-cart-or-refresh.fix-to-bottom > .preventivo .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}


/* ----- Quantita' + carrello ----- */

#add-to-cart-or-refresh.fix-to-bottom > .product-add-to-cart {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#add-to-cart-or-refresh.fix-to-bottom .product-add-to-cart .product-quantity {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* .product-quantity ha anche la classe clearfix: in una riga flex il suo ::after
   diventa un elemento largo zero che si porta dietro un gap di 8 px, e il pulsante
   si fermava 8 px prima del bordo (sul telefono si vedeva il vuoto a destra). */
#add-to-cart-or-refresh.fix-to-bottom .product-add-to-cart .product-quantity::before,
#add-to-cart-or-refresh.fix-to-bottom .product-add-to-cart .product-quantity::after {
  content: none !important;
  display: none !important;
}

/* Cella quantita': larga quanto 5 cifre (5ch nel font del campo, piu' il padding),
   non una misura fissa; numero centrato come negli e-commerce, mentre i prezzi
   restano allineati a destra. TouchSpin sopra i 992 px aggiunge 5 px di padding
   al gruppo e frecce alte 25 px: qui il gruppo e' una riga flessibile senza
   padding, alta quanto la cella, e le due frecce se ne dividono l'altezza. */
#add-to-cart-or-refresh.fix-to-bottom .product-add-to-cart .product-quantity .qty {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 42px !important;
  margin: 0 !important;
}

#add-to-cart-or-refresh.fix-to-bottom .product-add-to-cart .product-quantity .qty > .input-group {
  display: flex !important;
  align-items: stretch !important;
  width: auto !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#add-to-cart-or-refresh.fix-to-bottom .product-add-to-cart .product-quantity .qty input#quantity_wanted {
  flex: 0 0 auto !important;
  /* 5 cifre + 2 px di respiro + 4 px di padding per lato */
  width: calc(5ch + 10px) !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 4px !important;
  border: 0 !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
  font-variant-numeric: tabular-nums;
  text-align: center !important;
}

#add-to-cart-or-refresh.fix-to-bottom .product-add-to-cart .product-quantity .qty .input-group-btn-vertical {
  flex: 0 0 20px !important;
  display: flex !important;
  flex-direction: column !important;
  width: 20px !important;
  height: 100% !important;
  margin: 0 !important;
  border-left: 1px solid #d0d0d0;
}

#add-to-cart-or-refresh.fix-to-bottom .product-add-to-cart .product-quantity .qty .input-group-btn-vertical .btn-touchspin {
  flex: 1 1 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

#add-to-cart-or-refresh.fix-to-bottom .product-add-to-cart .product-quantity .qty .input-group-btn-vertical .btn-touchspin i {
  position: static !important;
  top: auto !important;
  left: auto !important;
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 20px !important;
  text-align: center;
}

/* Pulsante del carrello (product-add-to-cart.tpl). Nella scheda e nel quick view e'
   "Aggiungi al carrello" scritto; nella barra fissa e' lo stesso pulsante - stesso
   submit del form, stesso data-button-action - ma mostra solo l'icona del carrello,
   in un quadrato alto quanto la cella della quantita'. La scritta resta dentro il
   pulsante per i lettori di schermo, nascosta alla vista. Icona e colore sono quelli
   del carrello delle liste prodotti: shopping_cart arancione su bianco. */
.add-to-cart .add-to-cart-glifo {
  display: none;
}

#add-to-cart-or-refresh.fix-to-bottom .product-add-to-cart .product-quantity .add {
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 0 !important;
  height: 42px !important;
  margin: 0 !important;
}

#add-to-cart-or-refresh.fix-to-bottom .product-add-to-cart .product-quantity .add .add-to-cart {
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  color: #FF6600 !important;
  background: #fff !important;
  border: 1px solid #FF6600 !important;
  border-radius: 4px !important;
  line-height: 1 !important;
  cursor: pointer;
}

#add-to-cart-or-refresh.fix-to-bottom .product-add-to-cart .product-quantity .add .add-to-cart:hover {
  color: #fff !important;
  background: #FF6600 !important;
}

#add-to-cart-or-refresh.fix-to-bottom .product-add-to-cart .product-quantity .add .add-to-cart:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

#add-to-cart-or-refresh.fix-to-bottom .product-add-to-cart .product-quantity .add .add-to-cart:disabled {
  opacity: .5;
  cursor: not-allowed;
}

#add-to-cart-or-refresh.fix-to-bottom .product-add-to-cart .product-quantity .add .add-to-cart .add-to-cart-glifo {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0;
  font-size: 28px !important;
  line-height: 28px !important;
  color: inherit;
}

#add-to-cart-or-refresh.fix-to-bottom .product-add-to-cart .product-quantity .add .add-to-cart .add-to-cart-testo {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ----- Tablet e desktop stretto: titolo su una riga propria ----- */

@media (max-width: 991.98px) {
  #add-to-cart-or-refresh.fix-to-bottom {
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
    padding: 6px 12px !important;
  }

  #add-to-cart-or-refresh.fix-to-bottom > .availability {
    flex: 1 1 100% !important;
  }

  /* prezzo a sinistra, carrello a destra */
  #add-to-cart-or-refresh.fix-to-bottom > .product-prices {
    flex: 1 1 auto !important;
  }

  #add-to-cart-or-refresh.fix-to-bottom .product-prices .product-price {
    align-items: flex-start !important;
  }

  #add-to-cart-or-refresh.fix-to-bottom .product-prices .offerta-fino-al {
    text-align: left;
  }
}


/* ----- Telefono: prezzo sopra, quantita' e pulsante sotto a tutta larghezza ----- */

@media (max-width: 575.98px) {
  #add-to-cart-or-refresh.fix-to-bottom {
    gap: 6px 8px !important;
    padding: 6px 10px !important;
  }

  #add-to-cart-or-refresh.fix-to-bottom > .availability {
    display: none !important;
  }

  #add-to-cart-or-refresh.fix-to-bottom > .login_for_offer,
  #add-to-cart-or-refresh.fix-to-bottom > .preventivo {
    flex: 1 1 100% !important;
  }

  /* prezzo e [quantita' + carrello] sulla stessa riga quando ci stanno; altrimenti il
     carrello va a capo. In entrambi i casi resta allineato a destra. */
  #add-to-cart-or-refresh.fix-to-bottom > .product-prices {
    flex: 1 1 auto !important;
  }

  #add-to-cart-or-refresh.fix-to-bottom > .product-add-to-cart {
    margin-left: auto !important;
  }

  /* listino e prezzo vanno a capo invece di uscire dallo schermo */
  #add-to-cart-or-refresh.fix-to-bottom .product-prices,
  #add-to-cart-or-refresh.fix-to-bottom .product-prices .current-price {
    white-space: normal !important;
  }

  #add-to-cart-or-refresh.fix-to-bottom .product-prices .current-price {
    flex-wrap: wrap !important;
    gap: 0 8px !important;
  }

  #add-to-cart-or-refresh.fix-to-bottom .product-prices .current-price-value {
    font-size: 22px !important;
  }

  #add-to-cart-or-refresh.fix-to-bottom > .login_for_offer .btn,
  #add-to-cart-or-refresh.fix-to-bottom > .preventivo .btn {
    width: 100% !important;
    padding: 0 10px !important;
  }
}


/* ------------------------------------------------------------------
   MESSAGGI DI ERRORE SOTTO I CAMPI - Nota Ezdirect, 13 settembre 2026

   Li crea custom.js (gestione degli errori dei form) quando il browser
   blocca un invio o quando il server rimanda il form con dei campi
   respinti. Stanno in fondo alla colonna del campo, quindi ne seguono la
   larghezza a ogni risoluzione; il testo va a capo invece di uscire.
   ------------------------------------------------------------------ */
.ez-field-error {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  margin: 6px 0 0;
  padding: 6px 10px;
  border-left: 3px solid #d0021b;
  background: #fdecee;
  color: #a00016;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ez-field-error-altri {
  display: block;
  margin-top: 4px;
  font-weight: 400;
}

form input.ez-campo-errato:not([type="radio"]):not([type="checkbox"]),
form select.ez-campo-errato,
form textarea.ez-campo-errato {
  border: 2px solid red;
}

form input[type="radio"].ez-campo-errato,
form input[type="checkbox"].ez-campo-errato {
  outline: 2px solid red;
  outline-offset: 2px;
}

.form-group.ez-gruppo-errato > .form-control-label {
  color: #a00016;
}