.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    text-transform: uppercase;
}
.sp-simpleportfolio .sp-simpleportfolio-image {
    margin-bottom: 20px;
    max-height: 500px;
    overflow: hidden;
}
.btn-zoom {
  display: none !important;
}
/* ===== Sottotitolo slide homepage ===== */
.sottotitoloslide {
    font-family: 'Allura', sans-serif;
    text-decoration: none;
    font-size: 7em !important;
    margin-top: -60px;
    margin-bottom: -20px;
}
.maxmenu .avviso-oro {
  color: #999;
}
/* ===== Pulsanti slide / bottone blu ===== */
.sppb-sp-slider-button .sp-slider-btn-text {
    background: #0990e9;
    font-size: 16px;
    border-radius: 25px;
}
.blubtn {
    background: #0990e9;
    font-size: 16px;
    border-radius: 25px;
}

/* ===== Box prezzo oro: desktop ===== */
.oro-box { line-height: 1.25; margin-left: 40px;max-width: 200px; }
.oro-box .oro-data   { font-size: 14px; color: #555; }
.oro-box .oro-riga   { font-size: 14px; color: #222; }
.oro-box .oro-prezzo { font-size: 22px; font-weight: 500; color: #097fbb; margin-left: 6px; }
.oro-box .oro-um     { font-size: 12px; color: #222; }
.oro-box .oro-nota   { margin-top: 2px; font-size: 10px; color: #222; }
/* l'avviso del plugin ha una sua dimensione: qui la decide .oro-nota */
.oro-box .avviso-oro { font-size: inherit !important; opacity: 1 !important; }

@media (max-width: 1200px) {
  .oro-box {line-height: 1.25;margin-left: 10px;}
  /*.container, .container-lg, .container-md, .container-sm {max-width: 1060px;}*/
}


@media (max-width: 991.98px) {
  /* il template forza un'altezza fissa (50px) all'intestazione sotto i 991px:
     qui la rendiamo automatica, cosi' si allarga da sola per contenere anche
     il box del prezzo oro, qualunque sia la larghezza dello schermo */
  #sp-header {
    height: auto !important;
    min-height: 50px;
  }
}



/* ===== Mobile: box prezzo oro sotto il logo, come fascia separata ===== */
@media (max-width: 767.98px) {
  /* il template mette un margine di 10px solo a sinistra al modulo che
     contiene il nostro riquadro (pensato per quando sta accanto al menu
     su desktop): lo annulliamo qui, cosi' il riquadro torna simmetrico
     quando e' largo il 100% */
  .sp-module:has(.oro-box) {
    margin-left: 0 !important;
    width: 100%;
  }
  /* la colonna del menu allinea i suoi elementi a destra (per il desktop):
     qui non serve piu', dato che il modulo sotto ora occupa tutta la riga */
  .sp-column:has(.oro-box) {
    justify-content: center;
  }

  .oro-box {
    width: 100%;
    max-width: none;
    margin: 0;
    margin-top: 20px;
    padding: 10px 12px;
    text-align: center;
   /* background: #f7f7f7;
    border-top: 1px solid #e5e5e5;*/
  }
  .oro-box .oro-data,
  .oro-box .oro-riga   { font-size: 13px; }
  .oro-box .oro-prezzo { font-size: 22px; margin-left: 4px; }
  .oro-box .oro-um     { font-size: 12px; }
  .oro-box .oro-nota   { font-size: 10px; }
  
}

/* ===== Mobile stretto: intestazione, logo, nascondi controllo nav ===== */
@media (max-width: 575px) {
  /* l'altezza dell'intestazione qui sotto e' gia' gestita, automatica, dalla
     regola piu' in basso (@media max-width: 991.98px) */
  .sp-nav-control { display: none; }
}







/* ===== Dettaglio articolo ===== */
.article-details { text-align: center; }

/* ===== Mobile: logo centrato ===== */
@media (max-width: 767.98px) {
  /* il logo occupa lo spazio libero rimasto sulla riga (accanto all'icona del
     menu a sinistra) e viene centrato al suo interno, senza cambiare la sua
     dimensione ne' toccare l'altezza dell'intestazione */
  #sp-logo {
    flex: 1 1 auto;
    text-align: center;
    /* l'icona del menu a sinistra (75px) rende lo spazio libero asimmetrico:
       senza questa riga il logo si centra in quello spazio e risulta spostato
       verso destra rispetto alla pagina. Lo spostiamo indietro della meta'
       della larghezza dell'icona per centrarlo sul totale della pagina. */
    transform: translateX(-37.5px);
  }
}

/* ===== Desktop: menu centrato orizzontalmente ===== */
@media (min-width: 992px) {
  /* il menu e il box del prezzo oro condividono la stessa riga, allineata a
     destra dal template; qui il menu "assorbe" lo spazio libero in modo
     simmetrico (si centra), mentre il box del prezzo resta ancorato a destra
     com'era prima */
  #sp-menu .sp-megamenu-wrapper {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== Logo: non deve coprire la barra telefono/email sotto i 992px =====
   Il template riduce l'altezza del contenitore del logo (.logo) a 50px sotto
   i 992px, ma il file del logo e' naturalmente piu' alto: senza questi due
   blocchi l'immagine sborda sopra e sotto il suo contenitore, e sopra
   arriva a coprire la barra con telefono ed email. */

/* 768-991px: stesso spazio compatto di prima, ma l'immagine ora ci sta dentro */
@media (min-width: 768px) and (max-width: 991.98px) {
  .logo-image {
        height: 80px !important;
        margin-top: 0 !important;
        margin-bottom: -11px !important;
  }
    #sp-logo {
    flex: 1 1 auto;
    text-align: center;
  }
  
}

/* sotto i 768px: stessa correzione, e il logo resta piu' in basso (staccato
   dalla barra sopra), come richiesto */
@media (max-width: 767.98px) {
  .logo-image { height: 80px !important; margin-top: 40px; margin-bottom: -30px; }
}





.sp-page-title {
   background: linear-gradient(170deg, #055f8d 0%, #30a0d9 45%, #a8e7ff 100%);
     padding: 40px 0;
}

.sp-page-title .sp-page-title-heading {
    font-family: 'Roboto', sans-serif;
   /* font-size: 38px;
    font-weight: normal;
    color: #111111;*/
}

nav.mod-breadcrumbs__wrapper {margin-left: -16px;margin-top: -10px;}
/* ===== Sottomenu SERVIZI: sparisce prima di riuscire a raggiungerlo =====
   Il sottomenu si apre con un'animazione (spFadeInUp) che il template
   collega SOLO al vero passaggio del mouse sulla voce (:hover). Il menu
   pero' viene anche mostrato/nascosto via JavaScript in altri casi (tastiera,
   focus): quando l'animazione non parte, il sottomenu resta "congelato" al
   suo stato iniziale, 20px piu' in basso e trasparente. Quei 20px di spazio
   vuoto fanno perdere il passaggio del mouse (soprattutto su Firefox) prima
   di arrivare al sottomenu, che quindi si richiude. Qui disattiviamo
   l'animazione e mostriamo il sottomenu subito nella sua posizione finale,
   cosi' non c'e' mai spazio vuoto tra la voce di menu e il sottomenu. */
.sp-megamenu-parent.menu-animation-fade-up .sp-has-child:hover > .sp-dropdown {
  animation: none !important;
}
.sp-dropdown {
  opacity: 1 !important;
  transform: none !important;
}
/* ===== Fascia "punti di forza" (valutazione gratuita, serieta', ecc.) ===== */
.trust-badges .trust-badge-icon {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
}
.trust-badges .trust-badge-title {
  font-weight: 700;
  color: #173a5e;
  font-size: 16px;
}
.trust-badges .trust-badge-sub {
  color: #6f8ba6;
  font-size: 14px;
}
/* la lineetta verticale tra un blocco e l'altro: solo quando sono
   affiancati su una riga (da lg in su), altrimenti non avrebbe senso */
@media (min-width: 992px) {
  .trust-badges .trust-badge:not(:last-child) {
    border-right: 1px solid #dbe3ea;
    padding-right: 20px;
  }
}


/* ===== Fix menu utente "Profile/Logout": stesso problema del menu SERVIZI.
   L'animazione spFadeInDown parte da opacity:0 / translateY(-20px) ed e'
   legata al vero :hover CSS, mentre lo show()/hide() del JS lo forza
   indipendentemente: il riquadro puo' restare bloccato a meta' animazione
   (quasi invisibile e spostato) creando una zona non cliccabile/hoverabile
   proprio mentre ci si sposta da Profile a Logout. ===== */
.sp-profile-wrapper:hover .sp-profile-dropdown {
  animation: none !important;
}
.sp-profile-dropdown {
  opacity: 1 !important;
  transform: none !important;
}

/* ===== Menu utente: apre a destra dell'icona invece che sotto, per non
   sovrapporsi/confliggere con la voce di menu (es. Home) che sta subito
   sotto. ===== */
.sp-profile-wrapper .sp-profile-dropdown {
  top: 0 !important;
  bottom: auto !important;
  left: auto !important;
  right: 100% !important;
  margin-right: 5px;
}