/*
Theme Name: 	Dibase
Description: 	Responsive Starter WordPress Theme (WooCommerce Ready) with: Minimal Style, 4 Header Style, 2 Menus, 11 Amazing Block Patterns, Trasparent Header Template, WhatsApp Chat, Cool animations, Light and fast, Full Site Editing Template! Inspired by Awards Winning Web Sites. Correct setup and installation in theme folder readme file ;)
Version:     	2.0.0
Author:     	Daniele Iobbi
Site:         http://danieleiobbi.it
Text Domain: 	dibase
Requires at least: 6.1
Tested up to: 7.0
Requires PHP: 8.0
Domain Path: 	/languages
Tags:        	blog, custom-colors, custom-logo, custom-menu, e-commerce, theme-options, translation-ready, block-editor-patterns, block-editor-styles, custom-background, featured-images, footer-widgets, photography, portfolio, wide-blocks
License:    	GNU General Public License v3.0
License URI:	http://www.gnu.org/licenses/gpl-3.0.html

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* ! Reset */
body,
html {
  font-size: 16px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue",
    Arial, sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  margin: 0;
  padding: 0;
}
ol,
ul {
  padding-left: 20px;
}
img {
  height: auto;
  max-width: 100%;
}
a {
  text-decoration: none;
}
hr {
  border: none;
  border-bottom: 1px solid #000;
}
strong {
  font-weight: bold;
}
html body {
  overflow-x: hidden;
}
body.admin-bar .header {
  position: fixed;
  top: 32px;
  z-index: 1000;
}

/* ------------------------------------------------------------------------- *
/* 1 Base */
/* ------------------------------------------------------------------------- */

:root {
  --site-bg: #ffffff;
  --site-text-color: #000;
  --link-color: #d23629;
  --link-color-hover: #a92820;
  /* Altezza dell'header, che e' in position:fixed. Vale per il segnaposto che
     ne riserva lo spazio e per lo scorrimento alle ancore. Sotto i 1190px
     l'header si abbassa e il valore viene ridefinito nella media query. */
  --dibase-header-h: 94px;
  /* Passaggio di stato dei bottoni (hover/focus). Entrata e uscita hanno due
     token distinti: restano separati anche quando il valore coincide, cosi' si
     puo' rendere l'entrata piu' pronta dell'uscita senza toccare le regole.
     La curva e' la stessa decelerazione lunga delle animazioni di ingresso. */
  --dibase-hover-in: 1s;
  --dibase-hover-out: 1s;
  --dibase-hover-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Le ancore (#content del "Top" nel footer, skip link, menu di pagina) devono
   fermarsi sotto l'header fisso, altrimenti il bersaglio ci finisce sotto. */
html {
  scroll-padding-top: var(--dibase-header-h);
}

/* Typography */
body {
  font-size: 16px;
  background-color: var(--site-bg);
  color: var(--site-text-color);
  font-family: "Barlow";
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
body.custom-background.dark {
  background-color: var(--site-bg);
}

body.menu-open {
  overflow: hidden;
} /*block scrolling when menu is open*/

/* ! Title System */
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
  margin-bottom: 1rem;
  line-height: 130%;
}

h1,
h2 {
  line-height: 110%;
}

p,
ul,
li {
  font-size: 1.05rem;
}

@media (max-width: 768px) {
  p,
  ul,
  li {
    font-size: 0.95rem;
  }
}

/* Typography helpers */
.text-0 {
  font-size: 5rem;
  line-height: 100%;
}
.text-1 {
  font-size: 3.4rem;
}
.text-2 {
  font-size: 2.2rem;
}
.text-3 {
  font-size: 1.5rem;
}
.text-4 {
  font-size: 1.3rem;
}

.menu li.evi > a {
  color: #fff !important;
  background-color: #d23629;
  border-radius: 100px;
  opacity: 1;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
/* La voce in evidenza dell'header ("Richiedi informazioni") e' a tutti gli
   effetti un bottone e finora era l'unica senza riscontro al puntatore. Segue
   gli altri: stesso viraggio al colore di hover, testo che resta bianco.
   NOTA: qui c'e' solo il fondo. Il testo bianco non va ridichiarato: la regola
   base lo impone con !important e batte gia' il color di a:hover. */
.menu li.evi > a:hover,
.menu li.evi > a:focus {
  background-color: #a92820;
}

/* Al tocco WebKit dipinge da solo un velo azzurrino sugli elementi cliccabili,
   fuori palette e non configurabile se non da qui. Lo togliamo e diamo un
   riscontro nostro (vedi :active nel menu mobile). */
.menu a,
.icon-hamburger,
.evi a,
.wp-block-button__link {
  -webkit-tap-highlight-color: transparent;
}

/* Link color */
a {
  color: var(--link-color);
}
a:focus,
a:hover {
  color: var(--link-color-hover);
  text-decoration: none;
}

/* Button Link */
.wp-block-button__link {
  text-decoration: none !important;
  color: #fff;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus {
  text-decoration: none !important;
  color: #fff;
}

/* Ammorbidisce il passaggio di stato di tutto cio' che e' un bottone.
   NOTA: i colori di hover arrivano dallo <style> inline del customizer
   (dibase_customize_css in functions.php), che dichiara solo i valori: la
   transizione sta qui perche' non dipende dalle impostazioni.
   Le proprieta' sono elencate una per una e non con `all`: cosi' l'eventuale
   transform o box-shadow di un singolo bottone resta libero di avere i suoi
   tempi. */
.wp-block-button__link,
.evi a,
input[type="submit"],
button[type="submit"],
.dibase-contact .dibase-contact__submit,
.dibase-consent__btn {
  transition:
    background-color var(--dibase-hover-out) var(--dibase-hover-ease),
    border-color var(--dibase-hover-out) var(--dibase-hover-ease),
    color var(--dibase-hover-out) var(--dibase-hover-ease);
}
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.evi a:hover,
.evi a:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
button[type="submit"]:hover,
button[type="submit"]:focus,
.dibase-contact .dibase-contact__submit:hover,
.dibase-contact .dibase-contact__submit:focus,
.dibase-consent__btn:hover,
.dibase-consent__btn:focus {
  transition-duration: var(--dibase-hover-in);
}

/* ------------------------------------------------------------------------- *
/* 2 Layout */
/* ------------------------------------------------------------------------- */

.wrapper {
  width: 100%;
  padding: 0 3%; /* overflow: hidden; */
  position: relative;
}

/* ------------------------------------------------------------------------- *
/* 2.1 Menu */
/* ------------------------------------------------------------------------- */

.spacer {
  height: 140px;
}

.header__topbar {
  background-color: #333;
  width: 100%;
  padding: 10px 4px;
  color: #fff;
  text-align: center;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  width: auto;
}
@media (max-width: 794px) {
  .header__topbar {
    font-size: 13px;
  }
  .spacer {
    height: 110px;
  }
}
.header {
  background-color: var(--site-bg);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  padding: 0px 3%;
}
.header__content {
  width: 100%;
  margin: 0 auto;
  display: flex;
  /* NOTA: senza align-items il default e' stretch e il <nav> viene stirato a
     tutta altezza, con la ul.menu appoggiata in cima: le voci risultano piu'
     alte del logo e del bottone, che sono centrati da un proprio flex. */
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #222;
  position: relative;
}

.header__logo,
.header__quick {
  display: flex;
  align-items: center;
  color: var(--site-text-color);
  font-weight: bold;
}
.header__quick a {
  color: var(--site-text-color);
}

.header__logo-img {
  width: 180px;
  height: auto;
}

.header__quick ul {
  list-style-type: none;
  margin-bottom: 0;
}
.header__quick ul li {
  display: inline-block;
}
.header__quick ul li a {
  padding: 10px 5px;
}

.menu,
.menu ul {
  margin: 0;
  position: relative;
}
.menu li {
  display: inline-block;
  position: relative;
}
.menu li a {
  color: var(--site-text-color);
  opacity: 0.8;
  display: block;
  padding: 16px;
  font-size: 15px;
  font-weight: bold;
}

/* Voce corrente evidenziata nel rosso del tema (var(--link-color)). Vale sia
   per la voce esatta sia per l'antenato quando si e' in una sottopagina (es.
   "Aviation Training" mentre si sfoglia una delle sue pagine). Limitata al
   desktop: sotto i 1190px il pannello mobile ha gia' il suo marcatore a barra
   (vedi @media max-width 1190px), che qui non va toccato. */
@media (min-width: 1191px) {
  .menu li.current-menu-item > a,
  .menu li.current-menu-parent > a,
  .menu li.current-menu-ancestor > a,
  .menu li.current_page_item > a,
  .menu li.current_page_ancestor > a {
    color: var(--link-color);
    opacity: 1;
  }
}

.icon-hamburger {
  display: none;
}

/* Quick search */

.quick-search {
  width: 140px;
  height: 38px;
  background: #fff;
  border-radius: 30px;
  opacity: 0.8;
  margin: 2px 0 0 0;
  transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.quick-search form {
  display: flex;
  justify-content: center;
  align-items: center;
}
.quick-search__icon {
  border: none;
  background: none;
  padding: 0;
  padding: 13px 2px;
}
input.quick-search__input[type="search"] {
  padding: 10px 3px;
  font-size: 13px;
  margin: 0;
  border: none;
  background: none;
}
/* input.quick-search__input[type=search]:focus{ outline: none;} */
.quick-search:hover {
  opacity: 1;
  transform: scale(1.1);
}

@media (max-width: 1290px) {
  .quick-search {
    width: 40px;
    position: relative;
    background-color: transparent;
    margin-right: 10px;
  }
  .quick-search form {
    width: 38px;
    height: 38px;
    position: absolute;
    right: 0;
    top: 0;
    background: #fff;
    border-radius: 40px;
    transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .quick-search:hover form {
    width: 138px;
  }
}

@media (max-width: 1190px) {
  .header__logo-img {
    width: 140px;
    height: auto;
  }

  /* Pannello di navigazione a tutta altezza. Il fondo nero e' lo stesso dei
     pannelli scuri del sito: la navigazione diventa una superficie, non un
     elenco su bianco. */
  /* position:fixed, non absolute: il pannello si aggancia al viewport e resta
     a tutta larghezza senza dover compensare i padding dell'header. */
  .menu {
    position: fixed;
    top: var(--dibase-header-h);
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    min-width: 0;
    height: auto;
    background-color: #fff;
    margin: 0;
    padding: 4px 0 48px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(-100%);
    visibility: hidden;
    transition:
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.28s;
  }
  .menu-open .menu {
    transform: translateX(0);
    visibility: visible;
    transition:
      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s;
  }
  .menu li {
    display: block;
    width: auto;
    margin: 0;
    border-bottom: 1px solid #e6e6e6;
  }
  .menu > li:last-child {
    border-bottom: 0;
  }

  /* Ingresso scaglionato delle voci: la sequenza dura quanto l'apertura del
     pannello, non di piu'. */
  .menu > li {
    opacity: 0;
    transform: translateY(6px);
    transition:
      opacity 0.24s ease,
      transform 0.24s ease;
  }
  .menu-open .menu > li {
    opacity: 1;
    transform: none;
  }
  .menu-open .menu > li:nth-child(1) {
    transition-delay: 0.1s;
  }
  .menu-open .menu > li:nth-child(2) {
    transition-delay: 0.14s;
  }
  .menu-open .menu > li:nth-child(3) {
    transition-delay: 0.18s;
  }
  .menu-open .menu > li:nth-child(4) {
    transition-delay: 0.22s;
  }
  .menu-open .menu > li:nth-child(5) {
    transition-delay: 0.26s;
  }
  .menu-open .menu > li:nth-child(6) {
    transition-delay: 0.3s;
  }

  .menu > li > a {
    position: relative;
    display: block;
    padding: 17px 24px;
    color: var(--site-text-color);
    opacity: 1;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
  }

  /* La CTA resta distinta dalle voci di navigazione senza diventare una
     fascia a tutta larghezza. Il padding sul li la riallinea al testo. */
  .menu > li.evi {
    padding: 14px 24px;
    border-bottom: 0;
  }
  .menu > li.evi > a {
    display: inline-flex;
    width: auto;
    padding: 13px 24px !important;
    font-size: 18px;
    line-height: 1.2;
  }

  /* Riscontro al tocco: sostituisce il velo azzurrino del browser. */
  .menu > li > a:active,
  .menu li ul > li > a:active {
    background-color: #f2f2f2;
  }

  /* Marcatore di soglia: segnala la pagina corrente. Unico uso del rosso
     nel pannello, insieme al chevron della sezione aperta. */
  .menu > li.current-menu-item > a::before,
  .menu > li.current-menu-parent > a::before,
  .menu > li.current-menu-ancestor > a::before,
  .menu > li.current_page_item > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 22px;
    margin-top: -11px;
    background: #d23629;
  }

  /* Ancorato al centro verticale dell'header, non a un offset fisso: cosi'
     resta allineato a logo e bottone anche se l'altezza cambia. */
  .icon-hamburger {
    height: 44px;
    width: 44px;
    margin-left: 20px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    background: transparent;
    z-index: 9999;
  }
  /* Etichetta per screen reader: fuori dal flusso, altrimenti il suo pixel
     piu' il gap del flex spostano in basso il centro visivo delle barre. */
  .icon-hamburger strong {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .icon-hamburger span {
    height: 2px;
    width: 24px;
    background: var(--site-text-color);
    display: block;
    margin: 0;
    border-radius: 2px;
    transition:
      transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.16s ease;
  }

  /* Le tre barre collassano in una X: distanza fra i centri 8px. */
  .menu-open .icon-hamburger span:nth-child(2) {
    transform: translateY(8px) rotate(45deg);
  }
  .menu-open .icon-hamburger span:nth-child(3) {
    opacity: 0;
  }
  .menu-open .icon-hamburger span:nth-child(4) {
    transform: translateY(-8px) rotate(-45deg);
  }
  /* Sotto i 1190px l'header e' piu' basso. Il valore sta qui e basta: lo usano
     header, segnaposto, pannello del menu e scroll delle ancore, quindi non
     possono piu' divergere (il segnaposto era rimasto a 44px mentre l'header
     era gia' 60px, e il contenuto finiva sotto). */
  :root {
    --dibase-header-h: 60px;
  }

  .header__content {
    /* Riferimento per l'hamburger in position:absolute. */
    position: relative;
    padding-right: 50px;
    height: var(--dibase-header-h);
  }
  .header__quick {
    display: flex;
    justify-content: flex-end;
  }
  .header__quick ul {
    padding-left: 0;
  }
}

/* La CTA "in evidenza" si compatta insieme all'header: sotto i 1190px calano
   altezza della barra e logo, e il bottone li segue in un passo solo. Il corpo
   e' dichiarato qui apposta, altrimenti sotto i 768px il bottone rimpicciolirebbe
   una seconda volta ereditando il font-size generico di li. Da qui in giu' la
   misura non cambia piu': sotto i 400px la CTA sparisce del tutto (vedi sotto),
   perche' a larghezza piena spingerebbe fuori dall'header il pulsante del menu. */
@media (max-width: 1190px) {
  .header__quick .evi a {
    font-size: 13px;
    padding: 7px 14px !important;
  }
}

@media (max-width: 400px) {
  .header__quick .menu-item-type-custom {
    display: none;
  }
  .header__quick button {
    pointer-events: none;
  }
}

/* Chi ha chiesto meno animazioni vede il menu comparire, non scorrere. */
@media (prefers-reduced-motion: reduce) {
  .menu,
  .menu > li,
  .menu li ul,
  .icon-hamburger span,
  .menu > li.menu-item-has-children > a::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Menu transparent */
@media (min-width: 1190px) {
  .page-template-menu-trasparent .spacer,
  .page-template-align-wide-fix-trasparent .spacer {
    display: none;
  }

  .page-template-menu-trasparent .header,
  .page-template-align-wide-fix-trasparent .header {
    background: transparent;
    transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .page-template-menu-trasparent .header__content,
  .page-template-align-wide-fix-trasparent .header__content {
    border: none;
  }

  /* NOTA: ripiego per i marchi di cui non esiste una variante chiara. Il filtro
     non ricolora, appiattisce: porta ogni pixel a nero e poi inverte, quindi un
     logo policromo diventa una silhouette bianca piena. Va bene per le icone,
     che sono monocromatiche. Se il tema ha l'artwork chiaro ufficiale
     (assets/img/logo-white.svg) header.php lo serve e la regola sotto lo
     esclude dal filtro. */
  .page-template-menu-trasparent .header__logo-img,
  .page-template-menu-trasparent .header [class^="icon-"],
  .page-template-align-wide-fix-trasparent .header__logo-img,
  .page-template-align-wide-fix-trasparent .header [class^="icon-"] {
    filter: brightness(0) invert(1);
  }

  .page-template-menu-trasparent .header__logo-img--white,
  .page-template-align-wide-fix-trasparent .header__logo-img--white {
    filter: none;
  }

  .page-template-menu-trasparent .header__logo,
  .page-template-align-wide-fix-trasparent .header__logo {
    color: #fff;
  }

  .page-template-menu-trasparent .menu li a,
  .page-template-menu-trasparent .header__quick ul li a,
  .page-template-align-wide-fix-trasparent .menu li a,
  .page-template-align-wide-fix-trasparent .header__quick ul li a {
    color: #fff;
  }

  .page-template-menu-trasparent.scroll-down .header,
  .page-template-align-wide-fix-trasparent.scroll-down .header {
    background: #222;
  }
}

@media (max-width: 1190px) {
  .page-template-menu-trasparent .spacer,
  .page-template-align-wide-fix-trasparent .spacer {
    height: var(--dibase-header-h);
  }

  .page-template-menu-trasparent .header__content,
  .page-template-align-wide-fix-trasparent .header__content {
    border: none;
  }
}

/* Menu black, Blank e Contained Templates */
@media (min-width: 1190px) {
  .page-template-menu-black .spacer {
    display: none;
  }
  .page-template-menu-black .header {
    background: transparent;
    transition: all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .page-template-menu-black .header__content {
    border: none;
  }
  .page-template-menu-black.scroll-down .header {
    background-color: var(--site-bg);
  }
}

.page-template-align-wide-fix .spacer,
.page-template-blank .spacer,
.page-template-contained-no-title .spacer {
  height: 75px;
}

@media (max-width: 1190px) {
  .page-template-align-wide-fix .spacer,
  .page-template-menu-black .spacer,
  .page-template-blank .spacer,
  .page-template-contained-no-title .spacer {
    height: 60px;
  }
  .page-template-menu-black .header__content {
    border: none;
  }
}

/* Menu Dropdown (desktop)
   Il sottomenu e' un cassetto agganciato alla riga di fondo dell'header: bordo
   sottile e fondo bianco come le card, angoli superiori squadrati (di li' il
   pannello nasce) e inferiori arrotondati come i pannelli del sito. Niente
   ombra: a staccarlo dal contenuto basta il bordo, come nel resto del design
   system. Tutto lo stile sta nella media query perche' sotto i 1190px il
   sottomenu e' un'altra cosa: sta nel flusso dentro il pannello mobile. */
@media (min-width: 1191px) {
  /* Le voci occupano tutta l'altezza dell'header invece di stare centrate in
     una riga di testo: il loro fondo coincide cosi' con il bordo interno
     dell'header e il pannello, spostato del solo padding, cade esatto sulla
     riga. In piu' sparisce la zona morta fra voce e sottomenu. */
  .header__content > nav {
    align-self: stretch;
    display: flex;
  }
  .menu {
    display: flex;
    align-items: stretch;
  }
  .menu > li {
    display: flex;
    align-items: center;
  }

  .menu > li > ul {
    position: absolute;
    left: 0;
    /* +10px = il padding verticale di .header__content: cosi' il pannello
       attacca esattamente sulla riga di fondo dell'header. */
    top: calc(100% + 10px);
    min-width: 250px;
    margin: 0;
    padding: 10px 0 12px;
    background: #fff;
    border: 1px solid #707070;
    border-top: 0;
    border-radius: 0 0 20px 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
      opacity 0.18s ease,
      transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s linear 0.18s;
  }

  /* Ponte invisibile sullo stacco fra la voce e il pannello: senza, il
     puntatore che scende perde l'hover e il sottomenu si richiude. */
  .menu > li > ul::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
  }

  /* Sui template a header trasparente la riga di fondo non c'e' (vedi
     "Menu transparent"): li' il pannello si chiude da solo, bordo e raggio
     anche in cima. */
  .page-template-menu-trasparent .menu > li > ul,
  .page-template-align-wide-fix-trasparent .menu > li > ul,
  .page-template-menu-black .menu > li > ul {
    border-top: 1px solid #707070;
    border-radius: 20px;
  }

  /* Le voci figlie ripartono dallo stesso padding orizzontale della voce
     padre: la colonna del sottomenu prosegue quella del menu. */
  .menu li ul > li > a,
  .page-template-menu-trasparent .menu li ul > li > a,
  .page-template-align-wide-fix-trasparent .menu li ul > li > a {
    position: relative;
    display: block;
    padding: 10px 16px;
    color: #707070;
    opacity: 1;
    /* Un filo piu' grande della voce padre ma di peso normale: la gerarchia la
       fa il grassetto del menu, non il corpo. */
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    border-radius: 0;
    transition: color 0.16s ease;
  }

  /* Niente riquadro grigio al passaggio: si accende il testo, come ovunque
     nel sito. */
  .menu li ul > li > a:hover,
  .menu li ul > li > a:focus {
    background: none;
    color: var(--link-color);
  }

  /* Pagina corrente: oltre al rosso, la barretta a sinistra. E' lo stesso
     marcatore di soglia del pannello mobile. */
  .menu li ul > li.current-menu-item > a,
  .menu li ul > li.current_page_item > a {
    color: var(--link-color);
  }
  .menu li ul > li.current-menu-item > a::before,
  .menu li ul > li.current_page_item > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 18px;
    margin-top: -9px;
    background: var(--link-color);
  }
}

/* Mega Menu */
.menu > li.mega-menu > .sub-menu a {
  padding: 12px;
}
.menu > li.mega-menu > .sub-menu .sub-menu {
  padding-left: 0;
  width: 180px;
}
.menu > li.mega-menu > .sub-menu .sub-menu li a {
  padding-top: 7px;
  padding-bottom: 8px;
  font-weight: normal;
  font-size: 14px;
}

/* Open Menus
   Il pannello si apre con opacity/visibility, non con display: cosi' la
   comparsa e' animabile. Il sottomenu chiuso resta fuori dal tab order perche'
   visibility:hidden lo toglie anche all'albero di accessibilita'.
   NOTA: :focus-within vale solo da desktop. Su mobile il sottomenu si apre a
   click con la classe .open-dropdown; se :focus-within valesse anche li', il
   link appena cliccato resterebbe a fuoco e terrebbe aperto il sottomenu. */
@media (min-width: 1191px) {
  .menu > li:hover > ul,
  .menu > li > ul:hover,
  .menu li:focus-within > ul,
  .menu li.open-dropdown > ul {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity 0.18s ease,
      transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
      visibility 0s;
  }

  /* Il mega menu e' a colonne: la disposizione e' nello stato base, l'apertura
     tocca solo opacita' e visibilita' come per gli altri sottomenu. */
  .menu > li.mega-menu > ul {
    display: flex;
    flex-wrap: wrap;
    width: 600px;
  }
  .menu > li.mega-menu > ul > li {
    width: 193px;
  }
}

.menu li ul li {
  clear: both;
  width: 100%;
}
.menu > li.menu-item-has-children > a {
  position: relative;
  padding-right: 30px;
}

/* Chevron disegnato con i bordi invece che con un'icona: eredita currentColor,
   quindi segue da solo il colore della voce - rosso sulla sezione corrente,
   bianco sui template a header trasparente - senza il filtro di inversione che
   serviva a ricolorare l'SVG. Stessa forma del chevron del menu mobile. */
.menu > li.menu-item-has-children > a::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  position: absolute;
  top: 50%;
  right: 14px;
  margin-top: -6px;
  transform: rotate(45deg);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Aperto il sottomenu, il chevron si gira in su: e' il verso da cui il
   pannello e' appena sceso. */
@media (min-width: 1191px) {
  .menu > li.menu-item-has-children:hover > a::after,
  .menu > li.menu-item-has-children:focus-within > a::after {
    margin-top: -2px;
    transform: rotate(225deg);
  }
}

@media (max-width: 1190px) {
  /* Sottomenu: sempre nel flusso, aperto/chiuso con max-height cosi' il
     movimento e' animabile (display:none non lo sarebbe). Il filo verticale a
     sinistra lega le voci figlie alla loro sezione. */
  .menu > li > ul,
  .menu li ul {
    position: relative;
    display: block;
    visibility: visible;
    opacity: 1;
    background: none;
    min-width: 0;
    padding: 0;
    margin: 0 0 0 24px;
    border-radius: 0;
    border-left: 1px solid #e6e6e6;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* ATTENZIONE: tetto generoso, non altezza reale. Con piu' di ~10 voci per
     sezione va rialzato, altrimenti il sottomenu risulta tagliato. */
  .menu li.open-dropdown > ul {
    max-height: 460px;
  }
  .menu li ul li {
    border: none;
    width: auto;
    margin: 0;
  }
  .menu li ul > li > a,
  .page-template-menu-trasparent .menu li ul > li > a,
  .page-template-align-wide-fix-trasparent .menu li ul > li > a {
    display: block;
    padding: 11px 24px;
    color: #707070;
    opacity: 1;
    font-size: 17px;
    font-weight: 400;
    border-radius: 0;
  }
  .menu li ul > li > a:hover {
    background: none;
    color: var(--site-text-color);
  }

  /* Chevron della sezione: ruota e si accende quando la sezione e' aperta. */
  .menu > li.menu-item-has-children > a {
    padding-right: 56px;
  }
  .menu > li.menu-item-has-children > a::after {
    content: "";
    width: 9px;
    height: 9px;
    background: none;
    border-right: 2px solid #707070;
    border-bottom: 2px solid #707070;
    position: absolute;
    top: 50%;
    right: 26px;
    margin-top: -7px;
    transform: rotate(45deg);
    transition:
      transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.2s ease;
  }
  .menu > li.menu-item-has-children.open-dropdown > a::after {
    margin-top: -3px;
    transform: rotate(225deg);
    border-color: #ed1c24;
  }

  .menu > li.mega-menu > .sub-menu {
    margin-left: 5vw;
  }
  .menu > li.mega-menu > .sub-menu li {
    margin: 0;
  }
  .menu > li.mega-menu > .sub-menu > li {
    width: 40vw;
    margin-bottom: 20px;
  }
}

/* ------------------------------------------------------------------------- *
/* 2.2 Home */
/* ------------------------------------------------------------------------- */

.home-title {
  position: absolute;
  top: -9999px;
  color: #fff;
  font-size: 12px;
}

/* ------------------------------------------------------------------------- *
/* 2.3 Index */
/* ------------------------------------------------------------------------- */

.img-16-9 {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Single, Post & Page */
@media (max-width: 768px) {
  h1 span {
    display: block;
  }
}

/* ------------------------------------------------------------------------- *
/* 2.4 Sections */
/* ------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------- *
/* 2.6 Footer */
/* ------------------------------------------------------------------------- */

.footer-content {
  /* margin-top: 50px; */
  padding: 0px 4%;
  width: auto;
  max-width: 1000%;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}

/* Nel footer i link non usano il colore accento: il rosso su fondo chiaro fa
   concorrenza ai CTA della pagina. Restano leggibili come il testo attorno e
   segnalano l'interazione con la sottolineatura. */
.footer-content a {
  color: inherit;
}
.footer-content a:focus,
.footer-content a:hover {
  color: inherit;
  text-decoration: underline;
}

/* Fili di separazione: uno stacca il footer dal corpo della pagina, l'altro la
   riga di chiusura (copyright e pagine legali) dai widget. Cadono su .grid,
   quindi hanno la stessa larghezza e lo stesso tratto del bordo sotto
   l'header, che sta su .header__content.
   NOTA: il colore e' un ripiego. Quello vero lo scrive il customizer
   (dibase_border_color) anche su questi due selettori, vedi functions.php. */
.footer-widgets,
.footer__bottom {
  border-top: 1px solid #dcdcdc;
}
.footer-widgets {
  padding-top: 40px;
}
.footer__bottom {
  padding-top: 24px;
}

/* Il marchio ha larghezza propria e le colonne dei widget si spartiscono lo
   spazio restante: cosi' la riga regge un numero qualsiasi di widget, mentre
   la classe col-33 imposta da register_sidebar() ne presuppone tre. */
.footer-widgets > .footer__brand {
  display: flex;
  align-items: flex-start;
}
.footer-widgets > [class*="col-"]:not(.footer__brand) {
  flex: 1 1 0;
  width: auto;
}

/* Il footer e' informazione di servizio: titoli e recapiti devono restare
   subordinati ai contenuti della pagina, non usare la scala dei titoli H2. */
.footer-widgets .widget_block h2 {
  margin-bottom: 18px;
  font-size: 1.25rem;
  line-height: 1.2;
  font-weight: 700;
}
.footer-widgets .widget_block p,
.footer-widgets .widget_block a {
  font-size: 0.95rem;
  line-height: 1.5;
}

.footer__logo-img {
  width: 220px;
  max-width: 100%;
  height: auto;
}

/* Riga di chiusura: copyright e pagine legali (privacy, cookie policy) sulla
   stessa riga, divisi dallo stesso separatore che divide le voci del menu. */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
}
.footer__legal p {
  margin: 0;
}
.footer__bottom p,
.footer__bottom li,
.footer__bottom a {
  font-size: 0.78rem;
  line-height: 1.4;
}
.footer__legal-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer__legal-menu li::before {
  content: "\00b7";
  margin-right: 10px;
}

@media (max-width: 768px) {
  .footer-widgets > .footer__brand {
    justify-content: center;
  }
  .footer__legal {
    justify-content: center;
  }
}

/* ------------------------------------------------------------------------- *
/* 3 Modules */
/* ------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------- *
/* 4 WordPress Default Element */
/* ------------------------------------------------------------------------- */

/* Pagination */
.pagination {
  float: left;
  margin: 40px 0 40px 0;
  padding: 0;
  width: 100%;
}
.pagination span,
.pagination a {
  float: left;
  margin: 0 10px 10px 0;
  padding: 14px 19px;
  border: 1px solid #222;
}

/* Image */
.alignleft {
  float: left;
  margin-right: 20px;
  margin-bottom: 10px;
  max-width: 97%;
  height: auto;
}
.alignright {
  float: right;
  margin-bottom: 10px;
  margin-left: 20px;
  max-width: 97%;
  height: auto;
}
.aligncenter {
  display: block;
  margin: 0 auto;
  max-width: 97%;
  height: auto;
}
.alignnone {
  max-width: 97%;
  height: auto;
}

.text-center {
  text-align: center;
}
@media (max-width: 768px) {
  .sma-text-center {
    float: none;
    text-align: center;
  }
}

/* Allineamenti dei blocchi -------------------------------------------------

   Un contenitore di contenuto (.dibase-content) e' una griglia a cinque
   colonne: due margini esterni elastici, due binari laterali e la colonna di
   lettura al centro. I blocchi di primo livello si agganciano a un binario a
   seconda del loro allineamento:

     full  |<------------------ larghezza intera ------------------->|
     wide      |<-------------- --dibase-wide-width -------------->|
     main            |<------ --dibase-content-width ------>|

   Il contenitore deve stare a tutta larghezza nel template: e' la griglia a
   rientrare il contenuto, quindi ai blocchi non serve nessun margine negativo
   per "evadere" da una colonna stretta. E' lo stesso schema che WordPress usa
   per i layout `constrained`, quindi frontend ed editor coincidono e i blocchi
   annidati restano governati dal `contentSize` del gruppo che li contiene:
   qui si selezionano solo i figli diretti, mai i discendenti.

   NOTA: i valori replicano `settings.layout` di theme.json. Un template che
   vuole misure diverse (per esempio l'articolo singolo) ridefinisce le due
   custom property sul proprio contenitore, senza riscrivere la griglia. */
.dibase-content {
  --dibase-content-width: 850px;
  --dibase-wide-width: 1280px;
  --dibase-gutter: 24px;

  /* Il contenitore vive dentro .wrapper, che ha un padding orizzontale del 3%.
     Qui lo annulliamo una volta sola, sul contenitore, perche' `alignfull`
     possa arrivare davvero ai bordi della finestra. E' l'unico punto del tema
     in cui serve questo scarto: prima lo ripeteva ogni singolo blocco allineato
     con margini negativi calcolati sul viewport. */
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);

  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--dibase-gutter), 1fr)
    [wide-start] minmax(
      0,
      calc((var(--dibase-wide-width) - var(--dibase-content-width)) / 2)
    )
    [main-start] min(
      var(--dibase-content-width),
      100% - var(--dibase-gutter) * 2
    )
    [main-end] minmax(
      0,
      calc((var(--dibase-wide-width) - var(--dibase-content-width)) / 2)
    )
    [wide-end] minmax(var(--dibase-gutter), 1fr) [full-end];
}

.dibase-content > * {
  grid-column: main;
  min-width: 0;
}

/* page.php avvolge il contenuto in .text-content, quindi i blocchi sono nipoti
   e non figli della griglia. Invece di appiattire il wrapper, gli diamo tutta
   la larghezza e gli facciamo ospitare una griglia identica: i binari tornano
   a valere per i blocchi, e titolo e immagine in evidenza restano nella colonna
   di lettura del contenitore esterno. */
.dibase-content > .text-content {
  grid-column: full;
}
.dibase-content > .alignwide {
  grid-column: wide;
}
.dibase-content > .alignfull {
  grid-column: full;
}

/* Un elemento in griglia non puo' galleggiare: alignleft/alignright tornano a
   essere elementi di flusso dentro la colonna di lettura. */
.dibase-content > .alignleft,
.dibase-content > .alignright {
  grid-column: main;
  display: flow-root;
}
.dibase-content > .alignleft > *,
.dibase-content > .alignright > * {
  max-width: 50%;
}
.dibase-content > .alignleft > * {
  float: left;
  margin-inline: 0 2em;
}
.dibase-content > .alignright > * {
  float: right;
  margin-inline: 2em 0;
}

/* Card degli articoli ------------------------------------------------------
   Una card sola per tutto il sito: articoli in evidenza in home page
   (shortcode dibase_home_featured) e correlati in fondo all'articolo. Il
   markup lo genera dibase_post_card(), quindi ogni ritocco vale per entrambi. */
.dibase-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.dibase-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #707070;
  border-radius: 20px;
  overflow: hidden;
}
.dibase-card__media {
  display: block;
  overflow: hidden;
  background: #e9e9e9;
}
.dibase-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1400 / 800;
  object-fit: cover;
}
.dibase-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
}
.dibase-card__eyebrow {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--link-color);
}
.dibase-card__title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #707070;
}
.dibase-card__title a {
  color: inherit;
}
.dibase-card__excerpt {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: #818386;
}
.dibase-card__more {
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 600;
}
.dibase-card__more a {
  color: var(--link-color);
}
@media (max-width: 1100px) and (min-width: 782px) {
  .dibase-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 781px) {
  .dibase-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Pagine di elenco (index.php: News, categorie, tag, ricerca) --------------
   Intestazione chiara nello stile delle sezioni della home (occhiello rosso ->
   titolo grigio -> sottotitolo), poi corpo a due colonne: griglia di card a
   sinistra, sidebar a destra. La griglia qui e' a 2 colonne perche' divide lo
   spazio con la sidebar. */
.dibase-listing__hero {
  margin: 0 calc(50% - 50vw) clamp(32px, 5vw, 56px);
  padding: clamp(8px, 2vw, 24px) 3% clamp(28px, 4vw, 44px);
  border-bottom: 1px solid #d5d5d5;
}
.dibase-listing__hero-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.dibase-listing__eyebrow {
  margin: 0 0 10px;
  color: var(--link-color);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.dibase-listing__title {
  margin: 0;
  color: #707070;
  font-size: clamp(2rem, 4.2vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  overflow-wrap: break-word;
}
.dibase-listing__subtitle {
  margin: 14px 0 0;
  max-width: 62ch;
  color: #818386;
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height: 1.5;
}

.dibase-listing__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(28px, 4vw, 56px);
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: clamp(32px, 5vw, 64px);
}
.dibase-listing__main {
  min-width: 0;
}
/* A fianco della sidebar le card stanno strette: due per riga al massimo. */
.dibase-card-grid--listing {
  grid-template-columns: repeat(2, 1fr);
}

.dibase-listing__empty {
  padding: 40px 0;
  color: #707070;
}
.dibase-listing__empty p {
  font-size: 1.15rem;
}

/* Paginazione: pillole, il numero corrente pieno di rosso. */
.dibase-listing__pagination {
  margin-top: clamp(32px, 4vw, 48px);
}
.dibase-listing__pagination .page-numbers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.dibase-listing__pagination a.page-numbers,
.dibase-listing__pagination span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #d5d5d5;
  border-radius: 46px;
  color: #707070;
  font-weight: 600;
  line-height: 1;
}
.dibase-listing__pagination a.page-numbers:hover,
.dibase-listing__pagination a.page-numbers:focus {
  border-color: var(--link-color);
  color: var(--link-color);
}
.dibase-listing__pagination .page-numbers.current {
  background: var(--link-color);
  border-color: var(--link-color);
  color: #fff;
}
.dibase-listing__pagination .page-numbers.dots {
  border-color: transparent;
}

/* Sidebar: pannelli a filo, senza riquadri pesanti. */
.dibase-listing__sidebar {
  align-self: start;
  position: sticky;
  top: calc(var(--dibase-header-h) + 20px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 40px);
}
.dibase-sidebar__title {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #d5d5d5;
  color: #707070;
  font-size: 1.25rem;
  font-weight: 600;
}
.dibase-sidebar__cats {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dibase-sidebar__cat a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0 9px 16px;
  /* Filo a sinistra: trasparente di norma, rosso sulla voce corrente. Lo stesso
     segno usato dal menu per l'elemento attivo. */
  border-left: 3px solid transparent;
  color: #707070;
  font-size: 1.05rem;
  font-weight: 500;
}
.dibase-sidebar__cat + .dibase-sidebar__cat a {
  border-top: 1px solid #ececec;
}
.dibase-sidebar__cat a:hover,
.dibase-sidebar__cat a:focus {
  color: var(--link-color);
}
.dibase-sidebar__cat.is-current a {
  border-left-color: var(--link-color);
  color: var(--link-color);
}
.dibase-sidebar__cat-count {
  flex: 0 0 auto;
  color: #b3b5b8;
  font-size: 0.85rem;
  font-weight: 600;
}
.dibase-sidebar__cat a:hover .dibase-sidebar__cat-count,
.dibase-sidebar__cat.is-current .dibase-sidebar__cat-count {
  color: var(--link-color);
}

.dibase-sidebar__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Badge tag: pillola outline rossa del design system. */
.dibase-tag {
  display: inline-block;
  padding: 7px 16px 6px;
  border: 1px solid var(--link-color);
  border-radius: 46px;
  background: #fff;
  color: var(--link-color);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
}
.dibase-tag:hover,
.dibase-tag:focus,
.dibase-tag.is-current {
  background: var(--link-color);
  color: #fff;
}

@media (max-width: 1024px) {
  .dibase-listing__body {
    grid-template-columns: 1fr;
  }
  /* Senza la sidebar a fianco, le card tornano a tre per riga. */
  .dibase-card-grid--listing {
    grid-template-columns: repeat(3, 1fr);
  }
  .dibase-listing__sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px;
    padding-top: 8px;
    border-top: 1px solid #d5d5d5;
  }
  .dibase-listing__sidebar .dibase-sidebar__block {
    flex: 1 1 260px;
  }
}
@media (max-width: 781px) {
  .dibase-card-grid--listing {
    grid-template-columns: 1fr;
  }
}

/* Articolo singolo (single.php) --------------------------------------------
   Tre fasce: testata a tutta larghezza con l'immagine in evidenza sotto un
   velo navy, corpo su misura di lettura, chiusura con correlati. La testata
   esce dal padding del .wrapper con il solito calc(50% - 50vw). */

.dibase-article__hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: clamp(220px, 26vw, 320px);
  padding: clamp(40px, 6vw, 72px) 3% clamp(28px, 4vw, 48px);
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  background-color: #031e48;
  /* Sul singolo articolo l'hero va a filo dell'header. Lo .spacer riserva 140px
     (110 sotto i 794px) ma l'header ne occupa --dibase-header-h: la differenza
     e' aria bianca voluta sulle pagine normali, qui la si recupera tirando su
     l'hero. La var gestisce da sola il cambio di altezza dell'header a 1190px. */
  margin-top: calc(var(--dibase-header-h) - 140px);
}
@media (max-width: 794px) {
  .dibase-article__hero {
    margin-top: calc(var(--dibase-header-h) - 110px);
  }
}
.dibase-article__hero--media {
  min-height: clamp(320px, 42vw, 480px);
}
.dibase-article__hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.dibase-article__hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Il velo navy fa da fondo al testo: senza, il bianco su foto chiara sparisce. */
.dibase-article__hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(3, 30, 72, 0.45) 0%,
    rgba(3, 30, 72, 0.8) 55%,
    rgba(3, 30, 72, 0.94) 100%
  );
}
.dibase-article__hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
}
.dibase-article__hero-text {
  min-width: 0;
}
.dibase-article__eyebrow {
  margin: 0 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* La categoria e' una pillola rossa e non testo rosso: sul navy il rosso pieno
   su fondo scuro non avrebbe contrasto sufficiente. */
.dibase-article__eyebrow a {
  display: inline-block;
  padding: 5px 16px 4px;
  border-radius: 46px;
  background: var(--link-color);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.dibase-article__eyebrow a:hover,
.dibase-article__eyebrow a:focus {
  background: var(--link-color-hover);
  color: #fff;
}
.dibase-article__title {
  margin: 0;
  max-width: 20ch;
  color: #fff;
  font-size: clamp(2rem, 4.4vw, 3.125rem);
  font-weight: 600;
  line-height: 1.05;
}
.dibase-article__meta {
  margin: 16px 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
}
.dibase-article__meta-sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--link-color);
}

/* Corpo: stessa griglia a binari di .dibase-content (vedi "Allineamenti dei
   blocchi"), con la sola misura di lettura piu' stretta dell'articolo. */
.dibase-article__content {
  --dibase-content-width: 760px;
  --dibase-wide-width: 1160px;
  /* Il 3% replica il margine che l'articolo ereditava da .wrapper prima che il
     contenitore si prendesse tutta la larghezza della finestra. */
  --dibase-gutter: 3%;

  padding-top: clamp(40px, 6vw, 72px);
}
.dibase-article__content p,
.dibase-article__content ul,
.dibase-article__content ol {
  margin-bottom: 1.4rem;
  color: #707070;
  font-size: 1.0625rem;
  line-height: 1.75;
}
.dibase-article__content h2 {
  margin: 2.6rem 0 0.8rem;
  color: #707070;
  font-size: clamp(1.7rem, 3.2vw, 2.25rem);
  font-weight: 600;
}
.dibase-article__content h3 {
  margin: 2.1rem 0 0.6rem;
  color: #707070;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  font-weight: 600;
}
.dibase-article__content li::marker {
  color: var(--link-color);
}
.dibase-article__content a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.dibase-article__content blockquote {
  margin: 2.4rem 0;
  padding: 2px 0 2px 28px;
  border-left: 3px solid var(--link-color);
}
.dibase-article__content blockquote p {
  color: #5f6266;
  font-size: clamp(1.2rem, 2.4vw, 1.4rem);
  line-height: 1.5;
}
.dibase-article__content figure {
  margin: 2.4rem 0;
}
.dibase-article__content img {
  display: block;
  border-radius: 20px;
}
.dibase-article__content > .alignfull img {
  border-radius: 0;
}
.dibase-article__content figcaption {
  margin-top: 10px;
  color: #818386;
  font-size: 0.9rem;
  text-align: center;
}

/* Chiusura: tag e rientro all'archivio. */
.dibase-article__footer {
  max-width: 760px;
  margin: clamp(40px, 6vw, 64px) auto 0;
  padding-top: 24px;
  border-top: 1px solid #d5d5d5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.dibase-article__tags {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dibase-article__tags a {
  display: inline-block;
  padding: 6px 16px 5px;
  border: 1px solid var(--link-color);
  border-radius: 46px;
  background: #fff;
  color: var(--link-color);
  font-size: 0.85rem;
  font-weight: 600;
}
.dibase-article__tags a:hover,
.dibase-article__tags a:focus {
  background: var(--link-color);
  color: #fff;
}
.dibase-article__back {
  margin: 0 0 0 auto;
  font-weight: 600;
}
.dibase-article__back a::before {
  content: "\2190";
  margin-right: 8px;
}
.dibase-article__comments {
  max-width: 760px;
  margin: clamp(32px, 5vw, 56px) auto 0;
}

/* Correlati: fascia a tutta larghezza, chiusa in alto da un filo. Resta bianca
   perche' il footer e' gia' grigio: due grigi di fila perderebbero lo stacco. */
.dibase-article__related {
  display: block;
  margin: clamp(56px, 8vw, 96px) calc(50% - 50vw) 0;
  padding: clamp(48px, 7vw, 80px) 3%;
  border-top: 1px solid #d5d5d5;
}
.dibase-article__related-inner {
  max-width: 1280px;
  margin: 0 auto;
}
.dibase-article__related-eyebrow {
  margin: 0 0 6px;
  color: var(--link-color);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-align: center;
}
/* Con meno di tre correlati le card restano centrate invece di appoggiarsi a
   sinistra lasciando un buco nella griglia. */
.dibase-article__related .dibase-card-grid {
  grid-template-columns: repeat(auto-fit, minmax(0, 400px));
  justify-content: center;
}
.dibase-article__related-title {
  margin: 0 0 clamp(28px, 4vw, 40px);
  color: #707070;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 600;
  text-align: center;
}

@media (max-width: 900px) {
  .dibase-article__hero-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .dibase-article__title {
    max-width: none;
  }
}

/* Image Caption */
.wp-caption {
  margin-bottom: 20px;
  padding: 10px;
  max-width: 97%;
  border: 1px solid #eee;
  text-align: center;
}
.wp-caption img {
  margin: 0;
  padding: 0;
  width: 100% !important;
  height: auto;
  border: 0 none;
}
.wp-caption p.wp-caption-text {
  margin: 0;
  padding: 8px;
  font-size: 1em;
  line-height: 17px;
}

.gallery-caption {
  font-size: 20px;
}

/* Stiky */
.sticky {
  border-right: 3px solid #eee;
  border-bottom: 3px solid #eee;
}

/* Blockquote */
blockquote {
  font-weight: 200;
  font-style: italic;
  margin: 0.25em 0;
  padding: 0px 30px;
  line-height: 1.45;
  position: relative;
  border-left: 5px solid #222;
}

/* Search */
.form-search {
  width: 100%;
  border-radius: 100px;
  border: 1px solid #e4e4e4;
  padding-left: 15px;
  position: relative;
  background: #fff;
  margin-bottom: 30px;
  padding: 5px;
}
.form-search input[type="search"] {
  width: 100%;
  border: none;
  background: transparent !important;
  font-size: 18px;
}
.form-search button[type="submit"] {
  padding: 0;
  border: none;
  background: transparent;
  color: #000;
  padding: 0px;
  border-radius: 20px;
  position: absolute;
  top: 8px;
  right: 20px;
}
.form-search button[type="submit"] svg {
  width: 30px;
  height: 30px;
}

/* Comments */
.comment-form-author,
.comment-form-email,
.comment-form-url {
  float: left;
  margin-top: 20px;
  margin-right: 3%;
  width: 30.3333333%;
}
.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
  width: 100%;
}

ol.commentlist {
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
  text-indent: 0;
}
ol.commentlist li.comment {
  padding: 1em;
}
ol.commentlist li.comment div.vcard cite.fn {
  text-transform: uppercase;
  font-size: 14px;
}
ol.commentlist li.comment div.vcard img.avatar {
  float: left;
  margin: 6px 1em 1em 0;
  border-radius: 50px;
}
ol.commentlist li.comment div.comment-meta {
  font-size: 12px;
}
ol.commentlist li.comment ul {
  margin: 0 0 1em 2em;
}
ol.commentlist li.comment div.reply {
  margin-left: 80px;
  font-size: 11px;
}
ol.commentlist li.comment div.reply a {
  font-weight: bold;
}
ol.commentlist li.comment ul.children {
  margin: 1em 0 0;
  list-style: none;
  text-indent: 0;
}
ol.commentlist li.comment ul.children li.depth-2 {
  margin: 0 0 0.25em 0.25em;
  border-left: 1px solid #eee;
}
ol.commentlist li.comment ul.children li.depth-3 {
  margin: 0 0 0.25em 0.25em;
  border-left: 1px solid #eee;
}
ol.commentlist li.comment ul.children li.depth-4 {
  margin: 0 0 0.25em 0.25em;
  border-left: 1px solid #eee;
}
ol.commentlist li.bypostauthor .fn {
  font-weight: bold;
}
ol.commentlist li img {
  max-width: 97%;
}

input[type="text"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="password"],
input[type="email"],
input[type="url"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #949494;
  background: #fff;
  -webkit-appearance: none;
  border-radius: 0;
  margin-top: 5px;
}
textarea {
  padding: 10px;
  width: 100%;
  border: 1px solid #949494;
  background: #fff;
  -webkit-appearance: none;
  border-radius: 0;
  margin-top: 5px;
}
input[type="submit"],
button[type="submit"] {
  margin-top: 10px;
  padding: 15px 20px;
  color: #fff;
  text-transform: uppercase;
  background: #222;
  border: none;
  margin-top: 5px;
  display: block;
  font-weight: bold;
  width: auto;
  font-size: 16px;
  border-radius: 5px;
  font-family: inherit;
}
#comments {
  width: 100%;
}

/* ------------------------------------------------------------------------- *
/* 5 Helpers  */
/* ------------------------------------------------------------------------- */
.m-0 {
  margin: 0 !important;
}
.mt-0 {
  margin-top: 0;
}
.mt-1 {
  margin-top: 10px;
}
.mt-2 {
  margin-top: 20px;
}
.mt-3 {
  margin-top: 40px;
}
.mt-4 {
  margin-top: 100px;
}

.mb-0 {
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: 10px;
}
.mb-2 {
  margin-bottom: 20px;
}
.mb-3 {
  margin-bottom: 40px;
}
.mb-4 {
  margin-bottom: 100px;
}

.p-0 {
  padding: 0;
}
.p-1 {
  padding: 10px;
}
.p-2 {
  padding: 20px;
}
.p-3 {
  padding: 40px;
}
.p-4 {
  padding: 100px;
}

.pt-1 {
  padding-top: 10px;
}
.pt-3 {
  padding-top: 20px;
}
.pt-3 {
  padding-top: 40px;
}
.pt-4 {
  padding-top: 15vh;
}

.pb-1 {
  padding-bottom: 10px;
}
.pb-2 {
  padding-bottom: 20px;
}
.pb-3 {
  padding-bottom: 40px;
}
.pb-4 {
  padding-bottom: 15vh;
}

.img-res {
  width: 100%;
}

/* ! Grid System */
.grid {
  margin: 0 auto;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1400px;
}
.grid--center {
  justify-content: center;
}
.col {
  flex: 1;
}

[class*="col-"] {
  position: relative;
  padding: 0 1%;
}
.grid .grid [class*="col-"] {
  padding: 0px;
}

.col-10 {
  width: 10%;
}
.col-20 {
  width: 20%;
}
.col-25 {
  width: 25%;
}
.col-30 {
  width: 30%;
}
.col-33 {
  width: 33.33%;
}
.col-40 {
  width: 40%;
}
.col-50 {
  width: 50%;
}
.col-60 {
  width: 60%;
}
.col-70 {
  width: 70%;
}
.col-80 {
  width: 80%;
}
.col-90 {
  width: 90%;
}
.col-100 {
  width: 100%;
}

@media (max-width: 991px) {
  .tab-20 {
    width: 20%;
  }
  .tab-25 {
    width: 25%;
  }
  .tab-33 {
    width: 33.33%;
  }
  .tab-50 {
    width: 50%;
  }
  .tab-80 {
    width: 80%;
  }
  .tab-90 {
    width: 90%;
  }
  .tab-100 {
    width: 100%;
  }
}

@media (max-width: 768px) {
  [class*="col-"] {
    width: 100%;
  }
  .sma-20 {
    width: 20%;
  }
  .sma-25 {
    width: 25%;
  }
  .sma-33 {
    width: 33.33%;
  }
  .sma-50 {
    width: 50%;
  }
  .sma-100 {
    width: 100%;
  }
}

/* Simple Utilities Class */
@media (min-width: 1190px) {
  .hide-desktop,
  .desk-hide {
    display: none !important;
  }
}
@media (max-width: 1190px) {
  .hide-mobile,
  .sma-hide {
    display: none !important;
  }
}
.hide-all,
.all-hide {
  display: none !important;
}

@media (max-width: 781px) {
  .sma-column-reverse {
    flex-direction: column-reverse;
  }
}

/* Accessibility */

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  right: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}

/* underline for accesibility */
.text-content a,
.comment-content a {
  text-decoration: underline;
}

/* focus elements */
/* :focus {
  outline: 2px solid #2ba801;
  outline-offset: 2px;
} */

/* hide elements for accessibility */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ! Icon System - https://ionicframework.com/docs/v3/ionicons/ */

.icon-arrow {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -3px 5px;
  width: 18px;
  height: 18px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EArrow Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M268 112l144 144-144 144M392 256H100'/%3E%3C/svg%3E");
}

.icon-fb {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -3px 5px;
  width: 18px;
  height: 18px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Facebook%3C/title%3E%3Cpath d='M480 257.35c0-123.7-100.3-224-224-224s-224 100.3-224 224c0 111.8 81.9 204.47 189 221.29V322.12h-56.89v-64.77H221V208c0-56.13 33.45-87.16 84.61-87.16 24.51 0 50.15 4.38 50.15 4.38v55.13H327.5c-27.81 0-36.51 17.26-36.51 35v42h62.12l-9.92 64.77H291v156.54c107.1-16.81 189-109.48 189-221.31z' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.icon-ig {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -3px 5px;
  width: 18px;
  height: 18px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Instagram%3C/title%3E%3Cpath d='M349.33 69.33a93.62 93.62 0 0193.34 93.34v186.66a93.62 93.62 0 01-93.34 93.34H162.67a93.62 93.62 0 01-93.34-93.34V162.67a93.62 93.62 0 0193.34-93.34h186.66m0-37.33H162.67C90.8 32 32 90.8 32 162.67v186.66C32 421.2 90.8 480 162.67 480h186.66C421.2 480 480 421.2 480 349.33V162.67C480 90.8 421.2 32 349.33 32z'/%3E%3Cpath d='M377.33 162.67a28 28 0 1128-28 27.94 27.94 0 01-28 28zM256 181.33A74.67 74.67 0 11181.33 256 74.75 74.75 0 01256 181.33m0-37.33a112 112 0 10112 112 112 112 0 00-112-112z'/%3E%3C/svg%3E");
}
.icon-tw {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -3px 5px;
  width: 18px;
  height: 18px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Twitter%3C/title%3E%3Cpath d='M496 109.5a201.8 201.8 0 01-56.55 15.3 97.51 97.51 0 0043.33-53.6 197.74 197.74 0 01-62.56 23.5A99.14 99.14 0 00348.31 64c-54.42 0-98.46 43.4-98.46 96.9a93.21 93.21 0 002.54 22.1 280.7 280.7 0 01-203-101.3A95.69 95.69 0 0036 130.4c0 33.6 17.53 63.3 44 80.7A97.5 97.5 0 0135.22 199v1.2c0 47 34 86.1 79 95a100.76 100.76 0 01-25.94 3.4 94.38 94.38 0 01-18.51-1.8c12.51 38.5 48.92 66.5 92.05 67.3A199.59 199.59 0 0139.5 405.6a203 203 0 01-23.5-1.4A278.68 278.68 0 00166.74 448c181.36 0 280.44-147.7 280.44-275.8 0-4.2-.11-8.4-.31-12.5A198.48 198.48 0 00496 109.5z'/%3E%3C/svg%3E");
}
.icon-yt {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -3px 5px;
  width: 18px;
  height: 18px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Youtube%3C/title%3E%3Cpath d='M508.64 148.79c0-45-33.1-81.2-74-81.2C379.24 65 322.74 64 265 64h-18c-57.6 0-114.2 1-169.6 3.6C36.6 67.6 3.5 104 3.5 149 1 184.59-.06 220.19 0 255.79q-.15 53.4 3.4 106.9c0 45 33.1 81.5 73.9 81.5 58.2 2.7 117.9 3.9 178.6 3.8q91.2.3 178.6-3.8c40.9 0 74-36.5 74-81.5 2.4-35.7 3.5-71.3 3.4-107q.34-53.4-3.26-106.9zM207 353.89v-196.5l145 98.2z'/%3E%3C/svg%3E");
}
.icon-in {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -3px 5px;
  width: 18px;
  height: 18px;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Cpath d='M444.17 32H70.28C49.85 32 32 46.7 32 66.89v374.72C32 461.91 49.85 480 70.28 480h373.78c20.54 0 35.94-18.21 35.94-38.39V66.89C480.12 46.7 464.6 32 444.17 32zm-273.3 373.43h-64.18V205.88h64.18zM141 175.54h-.46c-20.54 0-33.84-15.29-33.84-34.43 0-19.49 13.65-34.42 34.65-34.42s33.85 14.82 34.31 34.42c-.01 19.14-13.31 34.43-34.66 34.43zm264.43 229.89h-64.18V296.32c0-26.14-9.34-44-32.56-44-17.74 0-28.24 12-32.91 23.69-1.75 4.2-2.22 9.92-2.22 15.76v113.66h-64.18V205.88h64.18v27.77c9.34-13.3 23.93-32.44 57.88-32.44 42.13 0 74 27.77 74 87.64z'/%3E%3C/svg%3E");
}
.icon-tk {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -3px 5px;
  width: 18px;
  height: 18px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Tiktok%3C/title%3E%3Cpath d='M412.19 118.66a109.27 109.27 0 01-9.45-5.5 132.87 132.87 0 01-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14 23.9 350 16 350.13 16h-82.44v318.78c0 4.28 0 8.51-.18 12.69 0 .52-.05 1-.08 1.56 0 .23 0 .47-.05.71v.18a70 70 0 01-35.22 55.56 68.8 68.8 0 01-34.11 9c-38.41 0-69.54-31.32-69.54-70s31.13-70 69.54-70a68.9 68.9 0 0121.41 3.39l.1-83.94a153.14 153.14 0 00-118 34.52 161.79 161.79 0 00-35.3 43.53c-3.48 6-16.61 30.11-18.2 69.24-1 22.21 5.67 45.22 8.85 54.73v.2c2 5.6 9.75 24.71 22.38 40.82A167.53 167.53 0 00115 470.66v-.2l.2.2c39.91 27.12 84.16 25.34 84.16 25.34 7.66-.31 33.32 0 62.46-13.81 32.32-15.31 50.72-38.12 50.72-38.12a158.46 158.46 0 0027.64-45.93c7.46-19.61 9.95-43.13 9.95-52.53V176.49c1 .6 14.32 9.41 14.32 9.41s19.19 12.3 49.13 20.31c21.48 5.7 50.42 6.9 50.42 6.9v-81.84c-10.14 1.1-30.73-2.1-51.81-12.61z'/%3E%3C/svg%3E");
}
.icon-wa {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -3px 5px;
  width: 18px;
  height: 18px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ELogo Whatsapp%3C/title%3E%3Cpath d='M414.73 97.1A222.14 222.14 0 00256.94 32C134 32 33.92 131.58 33.87 254a220.61 220.61 0 0029.78 111L32 480l118.25-30.87a223.63 223.63 0 00106.6 27h.09c122.93 0 223-99.59 223.06-222A220.18 220.18 0 00414.73 97.1zM256.94 438.66h-.08a185.75 185.75 0 01-94.36-25.72l-6.77-4-70.17 18.32 18.73-68.09-4.41-7A183.46 183.46 0 0171.53 254c0-101.73 83.21-184.5 185.48-184.5a185 185 0 01185.33 184.64c-.04 101.74-83.21 184.52-185.4 184.52zm101.69-138.19c-5.57-2.78-33-16.2-38.08-18.05s-8.83-2.78-12.54 2.78-14.4 18-17.65 21.75-6.5 4.16-12.07 1.38-23.54-8.63-44.83-27.53c-16.57-14.71-27.75-32.87-31-38.42s-.35-8.56 2.44-11.32c2.51-2.49 5.57-6.48 8.36-9.72s3.72-5.56 5.57-9.26.93-6.94-.46-9.71-12.54-30.08-17.18-41.19c-4.53-10.82-9.12-9.35-12.54-9.52-3.25-.16-7-.2-10.69-.2a20.53 20.53 0 00-14.86 6.94c-5.11 5.56-19.51 19-19.51 46.28s20 53.68 22.76 57.38 39.3 59.73 95.21 83.76a323.11 323.11 0 0031.78 11.68c13.35 4.22 25.5 3.63 35.1 2.2 10.71-1.59 33-13.42 37.63-26.38s4.64-24.06 3.25-26.37-5.11-3.71-10.69-6.48z' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.icon-search {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -3px 5px;
  width: 20px;
  height: 20px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3ESearch%3C/title%3E%3Cpath d='M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z'/%3E%3C/svg%3E");
}
.icon-angle {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -3px 5px;
  width: 20px;
  height: 20px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Down%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E");
}

.icon-nav {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -6px 3px;
  width: 26px;
  height: 26px;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M11.762 3.25c.46.006.99.223 1.276.734l.174.312a82.518 82.518 0 0 1 6.474 14.753c.218.67-.14 1.237-.589 1.5a1.484 1.484 0 0 1-1.552-.037l-4.728-3.04c-.522-.336-1.231-.337-1.72-.028L6.464 20.37a1.483 1.483 0 0 1-1.553.01c-.427-.255-.809-.808-.61-1.482A77.671 77.671 0 0 1 10.307 4.29l.164-.308c.284-.531.832-.737 1.29-.73Zm-.007 1.513-.125.233A76.203 76.203 0 0 0 5.84 18.99l4.455-2.813c1-.63 2.337-.607 3.334.034l4.496 2.892a81.088 81.088 0 0 0-6.222-14.074l-.148-.265Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.icon-mail {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -6px 3px;
  width: 26px;
  height: 26px;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M2.804 8.353c-.28 2.603-.268 5.605.122 8.197a3.138 3.138 0 0 0 2.831 2.66l1.51.131c3.15.274 6.317.274 9.466 0l1.51-.13a3.138 3.138 0 0 0 2.831-2.66c.39-2.593.402-5.595.122-8.198a30.68 30.68 0 0 0-.122-.904 3.138 3.138 0 0 0-2.831-2.66l-1.51-.13a54.647 54.647 0 0 0-9.465 0l-1.51.13a3.138 3.138 0 0 0-2.832 2.66 31.1 31.1 0 0 0-.122.904Zm4.593-2.2a53.146 53.146 0 0 1 9.206 0l1.51.131a1.64 1.64 0 0 1 1.478 1.389l.034.233-5.561 3.09a4.25 4.25 0 0 1-4.128 0l-5.56-3.09c.01-.078.022-.156.033-.233a1.638 1.638 0 0 1 1.478-1.389l1.51-.131ZM19.81 9.52a29.099 29.099 0 0 1-.218 6.807 1.638 1.638 0 0 1-1.478 1.389l-1.51.131a53.152 53.152 0 0 1-9.206 0l-1.51-.131a1.638 1.638 0 0 1-1.478-1.389 29.101 29.101 0 0 1-.217-6.807l5.016 2.787a5.75 5.75 0 0 0 5.585 0l5.015-2.787Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.icon-call {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -6px 3px;
  width: 26px;
  height: 26px;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.84 9.856a17.216 17.216 0 0 0 8.922 8.663l.012.005.764.34a2.25 2.25 0 0 0 2.74-.737l1.274-1.763a.25.25 0 0 0-.046-.341l-2.224-1.795a.25.25 0 0 0-.358.046l-.866 1.168a.75.75 0 0 1-.912.237 13.387 13.387 0 0 1-6.67-6.67.75.75 0 0 1 .237-.912L9.88 7.23a.25.25 0 0 0 .046-.358L8.132 4.648a.25.25 0 0 0-.341-.046l-1.773 1.28a2.25 2.25 0 0 0-.732 2.756l.554 1.217v.001Zm8.33 10.041a18.716 18.716 0 0 1-9.694-9.416v-.002l-.555-1.22A3.75 3.75 0 0 1 5.14 4.666l1.773-1.28a1.75 1.75 0 0 1 2.386.32l1.795 2.225a1.75 1.75 0 0 1-.32 2.505l-.67.496a11.891 11.891 0 0 0 5.118 5.118l.497-.67a1.75 1.75 0 0 1 2.504-.32l2.225 1.795a1.75 1.75 0 0 1 .32 2.387l-1.275 1.764a3.75 3.75 0 0 1-4.565 1.229l-.758-.338Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.icon-plus {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -6px 3px;
  width: 26px;
  height: 26px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M12.75 7a.75.75 0 0 0-1.5 0v4.25H7a.75.75 0 0 0 0 1.5h4.25V17a.75.75 0 0 0 1.5 0v-4.25H17a.75.75 0 0 0 0-1.5h-4.25V7Z'/%3E%3C/svg%3E");
}
.icon-check {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -6px 3px;
  width: 26px;
  height: 26px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M18.03 7.97a.75.75 0 0 1 0 1.06l-7 7a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 1 1 1.06-1.06l3.47 3.47 6.47-6.47a.75.75 0 0 1 1.06 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
}
.icon-cart {
  overflow: hidden;
  font-size: 1px;
  text-indent: -9999px;
  display: inline-block;
  margin: -6px 3px;
  width: 23px;
  height: 23px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='currentColor'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M15.55 13c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.37-.66-.11-1.48-.87-1.48H5.21l-.94-2H1v2h2l3.6 7.59-1.35 2.44C4.52 15.37 5.48 17 7 17h12v-2H7l1.1-2h7.45zM6.16 6h12.15l-2.76 5H8.53L6.16 6zM7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z'/%3E%3C/svg%3E");
}

.icon-1 {
  width: 40px;
  height: 40px;
}
.icon-2 {
  width: 70px;
  padding: 8px;
}
.icon-3 {
  width: 100px;
  padding: 8px;
}

.icon-invert {
  filter: invert(1);
}

/* Blocks */

/* Accordion */
.accordion h3 {
  position: relative;
  padding-right: 30px;
  margin-bottom: 15px;
  cursor: pointer;
}
.accordion h3:after {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  right: 0;
  content: " ";
  background-image: url('data:image/svg+xml;utf8,<svg width="80px" height="80px" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M22.7 34.7l-1.4-1.4 8.3-8.3-8.3-8.3 1.4-1.4 9.7 9.7z"/></svg>');
  transform: rotate(90deg);
  background-size: 100%;
}
.accordion .wp-block-column .wp-block-group {
  padding: 0;
  max-height: 0;
  overflow: hidden;
  border-bottom: 2px solid #ddd;
  transition: all 0.2s ease-in-out;
  margin-bottom: 20px;
}
.accordion .wp-block-column .wp-block-group.open-accordion {
  max-height: 500px;
  padding-bottom: 15px;
  overflow: auto;
}
/* Media Text */

/* Core applica `padding: 0 8%` a .wp-block-media-text__content: e' una
   percentuale della sola colonna testo, quindi il testo rientra di una
   cinquantina di pixel mentre l'immagine resta a filo del bordo del blocco.
   Risultato: dentro lo stesso media-text le due colonne non partono allineate,
   e il testo non si allinea nemmeno alle sezioni sopra e sotto.
   Azzeriamo la percentuale di core e rimettiamo lo stacco dall'immagine come
   column-gap della griglia: la colonna media resta larga il 50% e a filo del
   contenitore, a stringersi e' la colonna 1fr del testo, cosi' entrambi i bordi
   esterni del blocco restano allineati al resto della pagina.
   NOTA: il selettore parte da `body` solo per specificita': senza, pareggia con
   quello di core e a decidere resterebbe l'ordine di stampa dei fogli. */
.wp-block-media-text {
  column-gap: 48px;
}
body .wp-block-media-text > .wp-block-media-text__content {
  padding-left: 0;
  padding-right: 0;
}

/* 1328px = --dibase-wide-width piu' i due gutter: e' la soglia sotto la quale
   la griglia dei contenuti esaurisce i margini laterali e un media-text dentro
   una sezione a tutta larghezza arriva ai bordi dello schermo. Li' il testo
   deve rientrare come il contenuto di ogni altra sezione; sopra, il bordo del
   blocco coincide gia' con quel contenuto e il rientro va a zero. */
@media (max-width: 1327px) {
  body .wp-block-media-text > .wp-block-media-text__content {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 768px) {
  /* NOTA: solo margine inferiore, per staccare l'immagine dal testo quando il
     blocco si impila. Un margine superiore staccherebbe l'immagine dalla
     sezione precedente, rompendo gli accostamenti a tutta larghezza. */
  .wp-block-media-text__media img {
    margin-bottom: 20px;
  }

  /* Gutenberg non ha spaziature responsive: lo stile inline del blocco, pensato
     per il desktop affiancato, si puo' battere solo con !important. Il rientro
     orizzontale lo da' gia' __content: qui lo azzeriamo, altrimenti i due
     padding si sommerebbero sui blocchi che hanno un gruppo interno. */
  .wp-block-media-text__content > .wp-block-group {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

/* Animation on scroll */
.fade {
  opacity: 0;
  transform: translateY(40px);
  transition: 0.6s ease-in-out;
  will-change: transform, opacity;
}
.fadeIn {
  opacity: 1;
  transform: translateY(0px);
}

/* Animation System on scroll v2 
--------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease-out,
    transform 0.8s cubic-bezier(0.2, 0.7, 0.25, 1),
    filter 0.8s cubic-bezier(0.2, 0.7, 0.25, 1);
  will-change: opacity, transform, filter;
}

/* Directional variants */
.reveal.reveal-up {
  transform: translateY(30px);
}
.reveal.reveal-down {
  transform: translateY(-30px);
}
.reveal.reveal-left {
  transform: translateX(30px);
}
.reveal.reveal-right {
  transform: translateX(-30px);
}
.reveal.reveal-zoom {
  transform: scale(0.95);
}
.reveal.reveal-skew {
  transform: translateY(20px) skewY(5deg);
}
.reveal.reveal-blur {
  filter: blur(6px);
}

/* Active state on scroll */
.reveal.is-inview {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Clip-path effect */
.reveal.reveal-clip {
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  will-change: clip-path;
}

@keyframes revealClip {
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Clip-path active state */
.reveal.reveal-clip.is-inview {
  animation: revealClip 1s cubic-bezier(0.77, 0, 0.175, 1) 0s forwards;
  will-change: clip-path;
}

/* Ingresso scaglionato
--------------------------------------------------------- */
/* Si applica "reveal reveal-stagger" al CONTENITORE (es. il gruppo con
   occhiello, titolo e testo introduttivo): i figli diretti entrano in
   sequenza invece che tutti insieme. Evita di dover mettere .delay-0N a mano
   su ogni elemento, e i ritardi restano coerenti se se ne aggiunge uno.
   NOTA: il contenitore resta visibile, altrimenti sfumerebbe in blocco e la
   sequenza non si vedrebbe. */
.reveal.reveal-stagger {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}

.reveal.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  /* Decelerazione lunga: il movimento si posa invece di fermarsi di colpo. */
  transition:
    opacity 0.7s ease-out,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.reveal-stagger.is-inview > * {
  opacity: 1;
  transform: none;
}

/* 90ms fra un elemento e il successivo: si percepisce la sequenza senza che
   l'ultimo arrivi in ritardo. */
.reveal.reveal-stagger.is-inview > *:nth-child(2) {
  transition-delay: 0.09s;
}
.reveal.reveal-stagger.is-inview > *:nth-child(3) {
  transition-delay: 0.18s;
}
.reveal.reveal-stagger.is-inview > *:nth-child(4) {
  transition-delay: 0.27s;
}
.reveal.reveal-stagger.is-inview > *:nth-child(5) {
  transition-delay: 0.36s;
}
.reveal.reveal-stagger.is-inview > *:nth-child(6) {
  transition-delay: 0.45s;
}

/* Variante piu' marcata, per sezioni che devono avere una loro entrata. */
.reveal.reveal-stagger.reveal-stagger-wide > * {
  transform: translateY(34px);
}

/* Accessibility: disable animations */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  /* Anche i figli scaglionati: altrimenti resterebbero invisibili, perche'
     sono loro ad avere opacity 0, non il contenitore. */
  .reveal.reveal-stagger > * {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}

/* Delay utilities */
.delay-01 {
  transition-delay: 0.1s !important;
}
.delay-02 {
  transition-delay: 0.2s !important;
}
.delay-03 {
  transition-delay: 0.3s !important;
}
.delay-04 {
  transition-delay: 0.4s !important;
}
.delay-05 {
  transition-delay: 0.5s !important;
}
.delay-06 {
  transition-delay: 0.6s !important;
}
.delay-07 {
  transition-delay: 0.7s !important;
}
.delay-08 {
  transition-delay: 0.8s !important;
}
.delay-09 {
  transition-delay: 0.9s !important;
}
.delay-10 {
  transition-delay: 1s !important;
}
.delay-11 {
  transition-delay: 1.1s !important;
}
.delay-12 {
  transition-delay: 1.2s !important;
}
.delay-13 {
  transition-delay: 1.3s !important;
}
.delay-14 {
  transition-delay: 1.4s !important;
}
.delay-15 {
  transition-delay: 1.5s !important;
}

/* Duration utilities */
.duration-01 {
  transition-duration: 0.1s !important;
  animation-duration: 0.1s !important;
}
.duration-02 {
  transition-duration: 0.2s !important;
  animation-duration: 0.2s !important;
}
.duration-03 {
  transition-duration: 0.3s !important;
  animation-duration: 0.3s !important;
}
.duration-04 {
  transition-duration: 0.4s !important;
  animation-duration: 0.4s !important;
}
.duration-05 {
  transition-duration: 0.5s !important;
  animation-duration: 0.5s !important;
}
.duration-06 {
  transition-duration: 0.6s !important;
  animation-duration: 0.6s !important;
}
.duration-07 {
  transition-duration: 0.7s !important;
  animation-duration: 0.7s !important;
}
.duration-08 {
  transition-duration: 0.8s !important;
  animation-duration: 0.8s !important;
}
.duration-09 {
  transition-duration: 0.9s !important;
  animation-duration: 0.9s !important;
}
.duration-10 {
  transition-duration: 1s !important;
  animation-duration: 1s !important;
}
.duration-11 {
  transition-duration: 1.1s !important;
  animation-duration: 1.1s !important;
}
.duration-12 {
  transition-duration: 1.2s !important;
  animation-duration: 1.2s !important;
}
.duration-13 {
  transition-duration: 1.3s !important;
  animation-duration: 1.3s !important;
}
.duration-14 {
  transition-duration: 1.4s !important;
  animation-duration: 1.4s !important;
}
.duration-15 {
  transition-duration: 1.5s !important;
  animation-duration: 1.5s !important;
}
.duration-16 {
  transition-duration: 1.6s !important;
  animation-duration: 1.6s !important;
}
.duration-17 {
  transition-duration: 1.7s !important;
  animation-duration: 1.7s !important;
}
.duration-18 {
  transition-duration: 1.8s !important;
  animation-duration: 1.8s !important;
}
.duration-19 {
  transition-duration: 1.9s !important;
  animation-duration: 1.9s !important;
}
.duration-20 {
  transition-duration: 2s !important;
  animation-duration: 2s !important;
}
.duration-25 {
  transition-duration: 2.5s !important;
  animation-duration: 2.5s !important;
}
.duration-30 {
  transition-duration: 3s !important;
  animation-duration: 3s !important;
}

/* Animation System Accessibility */

@media (prefers-reduced-motion: reduce) {
  [class*="parallax-"] {
    transform: none !important;
  }
}

/* Animation on load 
--------------------------------------------------------- */

/* ATTENZIONE: qui si anima solo l'opacita'. La versione precedente animava
   anche "top" da 20px a 0 e, siccome .wrapper e' position:relative, spostava
   l'intera pagina per mezzo secondo a ogni caricamento. Il browser ripristina
   lo scorrimento mentre il contenuto e' ancora spostato, l'animazione poi lo
   risale di 20px e la posizione finale risulta sfalsata; rileggendola al
   refresh successivo l'errore si accumulava. Costava anche CLS (0,027). */
@keyframes fade-load {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.load {
  opacity: 0;
  animation: fade-load cubic-bezier(0.385, 0.135, 0.15, 0.86) 0.5s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .load {
    animation-duration: 0.01ms;
  }
}

/* Whats App */
.logo-whats-app {
  display: block;
  width: 38px;
  height: 38px;
  position: fixed;
  bottom: 43px;
  right: 43px;
  z-index: 999;
  border-radius: 100%;
  background: var(--link-color);
  border: 0px solid var(--link-color);
}

.logo-whats-app .icon-wa {
  width: 44px;
  height: 44px;
  margin: -3px 0 0 -3px;
  padding: 0;
  filter: invert(1);
}

/* Woo Commerce
------------------------------------------------------------------------ */
.menu-item-type-woocommerce-cart {
  position: relative;
  width: 30px;
  height: 18px;
}
.menu-cart-total {
  position: relative;
  position: absolute;
  top: -10px;
  left: 0;
}
.menu-cart-total svg {
  height: 24px;
  width: 24px;
}
.menu-cart-total span {
  position: absolute;
  bottom: 10px;
  right: -2pxpx;
  font-size: 11px;
}

/* button */
.woocommerce .button {
  background: #222 !important;
  color: #fff !important;
  text-transform: uppercase;
  font-family: inherit !important;
  margin-top: 0;
  margin-right: 10px;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  #respond
  input#submit,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  a.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  button.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  input.button,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  button.button.alt.disabled,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  #respond
  input#submit,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  a.button,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  button.button,
:where(body:not(.woocommerce-block-theme-has-button-styles))
  .woocommerce
  input.button {
  border-radius: 3px;
  padding: 15px 25px;
}

.woocommerce .woocommerce-message .button {
  padding: 10px 15px;
}

/* columns fix */
.checkout.woocommerce-content [class*="col-"],
.checkout.woocommerce-checkout [class*="col-"] {
  padding: 0;
}

/* select */
.select2-container .select2-selection--single,
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 36px;
}
.woocommerce-input-wrapper input {
  border-radius: 4px;
}

/* Cart */
.woocommerce-cart .variation {
  font-size: 12px;
  margin-top: 0;
}
.woocommerce-cart .variation p {
  font-size: 12px;
  padding: 4px 0 0 0;
}
.woocommerce-cart .variation dt,
.woocommerce-cart .variation dd {
  height: 20px;
}

.woocommerce #coupon_code,
.woocommerce .actions .button {
  height: 36px;
  border-radius: 3px;
  padding: 5px 15px;
  line-height: 17px !important;
}
.woocommerce #coupon_code {
  width: 120px !important;
}

@media (max-width: 768px) {
  .woocommerce-page #content table.cart td.actions .coupon .button {
    width: calc(100vw - 210px);
    margin-right: 0;
  }
}

/* table */
#add_payment_method .cart-collaterals .cart_totals tr td,
#add_payment_method .cart-collaterals .cart_totals tr th,
.woocommerce-cart .cart-collaterals .cart_totals tr td,
.woocommerce-cart .cart-collaterals .cart_totals tr th,
.woocommerce-checkout .cart-collaterals .cart_totals tr td,
.woocommerce-checkout .cart-collaterals .cart_totals tr th {
  border-top: 1px solid #ccc;
}

/* quantity single products */
.woocommerce .quantity input {
  margin-top: 0;
  border-radius: 3px;
  height: 46px;
}
.woocommerce .quantity .qty {
  width: 60px;
}

/* price */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce ul.products li.product .price {
  color: #000;
}

/* variations */
.woocommerce div.product form.cart .variations {
  padding: 10px;
  border-bottom: 1px solid #222;
}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
  padding-bottom: 10px;
}

.woocommerce select {
  /* Reset */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #666;
  outline: 0;
  font: inherit;
  /* Personalize */
  width: 20em;
  height: 40px;
  padding: 0 4em 0 1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Down%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M112 184l144 144 144-144'/%3E%3C/svg%3E")
    no-repeat right 0.8em center/1.4em;
  color: #222;
  border-radius: 0.25em;
  cursor: pointer;
}
.woocommerce select option {
  color: inherit;
  background-color: #320a28;
}
.woocommerce select:focus {
  outline: none;
}
.woocommerce select::-ms-expand {
  display: none;
}

.woocommerce .woocommerce-ordering select {
  border: none;
  width: 200px;
}

@media (max-width: 768px) {
  .woocommerce-result-count {
    font-size: 12px;
  }
  .woocommerce .woocommerce-ordering select {
    font-size: 12px;
    margin-top: -10px;
    width: 140px;
  }
}

/* tabs */
.woocommerce div.product .woocommerce-tabs h2 {
  display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border-radius: 0;
  margin-bottom: 0px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: transparent;
  color: #222;
  border-bottom: 4px solid #222;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-color: #222;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
}

.woocommerce table.shop_attributes tr:nth-child(even) td,
.woocommerce table.shop_attributes tr:nth-child(even) th {
  background: none;
}

/* review */
.woocommerce #review_form #respond p {
  margin: 10px 10px 10px 0px;
}
.woocommerce #review_form #respond p.comment-form-cookies-consent,
.woocommerce #review_form #respond p.form-submit {
  width: 100%;
  float: left;
}

/* messages */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  padding: 1em 2em 1em 3.5em;
  margin: 0 0 2em;
  border-radius: 4px;
  position: relative;
  background-color: #f7f6f7;
  color: #111;
  border-top: none;
  list-style: none outside;
  line-height: 32px;
  width: auto;
  word-wrap: break-word;
}
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-error a.button,
.woocommerce .woocommerce-info a.button {
  color: #fff !important;
}

.woocommerce .woocommerce-message a.button {
  background: #4caf50 !important;
}
.woocommerce-message::before {
  color: #4caf50;
}
.woocommerce .woocommerce-message {
  background: #e5fce5;
}

.woocommerce .woocommerce-error a.button {
  background: #f44336 !important;
}
.woocommerce-error::before {
  color: #f44336;
}
.woocommerce .woocommerce-error {
  background: #feeceb;
  color: #d91811;
}

.woocommerce .woocommerce-info a.button {
  background: #2296f2 !important;
}
.woocommerce .woocommerce-info a {
  color: #1478c8;
}
.woocommerce-info::before {
  color: #2296f2;
}
.woocommerce .woocommerce-info {
  background: #e9f5fe;
}

/* general fix */
.woocommerce a.added_to_cart {
  padding-left: 10px;
}
.woocommerce-page #content .text-content a {
  text-decoration: none;
}

.woocommerce span.onsale {
  background-color: #444;
}
.woocommerce div.product .product_meta {
  font-size: 14px;
}

.woocommerce .woocommerce-billing-fields {
  margin-bottom: 20px;
}
.woocommerce .woocommerce-variation-price {
  margin-bottom: 10px;
}

/* hide title and button in shop list */
.woocommerce ul.products li.product .button {
  display: none;
}
.woocommerce-shop h1 {
  display: none;
}

/* Woo Pagination */
.woocommerce nav.woocommerce-pagination ul {
  text-align: left;
  width: 100%;
  border: none;
}
.woocommerce nav.woocommerce-pagination ul li {
  border: 1px solid #222;
  margin-right: 10px;
}
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce nav.woocommerce-pagination ul li a {
  float: left;
  padding: 14px 19px;
  display: inline-block;
}

/* Cart & Checkout */

.woocommerce-page.woocommerce-cart .cart-collaterals .cart_totals table,
#order_review table.shop_table {
  background: #d4d4d4;
  border: none;
  padding: 10px;
}

.woocommerce-page.woocommerce-cart .cart-collaterals .cart_totals table td,
.woocommerce-page.woocommerce-cart .cart-collaterals .cart_totals table th,
#order_review table.shop_table td,
#order_review table.shop_table th {
  border-color: #acacac !important;
}

@media screen and (min-width: 900px) {
  .woocommerce-page .woocommerce-cart-form {
    width: 62%;
    float: left;
  }
  .woocommerce-page .cart-collaterals {
    width: 36%;
    float: right;
  }
  .woocommerce-page .cart-collaterals .cart_totals {
    width: 100%;
    float: right;
    margin-top: -55px;
    padding-bottom: 20vh;
  }
}

/* Checkout */
.checkout.woocommerce-checkout
  .select2-container--default
  .select2-selection--single {
  border: 2px solid #ddd;
  height: 40px;
}
.checkout.woocommerce-checkout
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 34px;
}

.checkout.woocommerce-checkout input[type="text"],
.checkout.woocommerce-checkout input[type="number"],
.checkout.woocommerce-checkout input[type="tel"],
.checkout.woocommerce-checkout input[type="password"],
.checkout.woocommerce-checkout input[type="email"],
.checkout.woocommerce-checkout input[type="url"],
.checkout.woocommerce-checkout .woocommerce-additional-fields textarea,
.woocommerce form .form-row .input-text {
  border: 2px solid #ddd;
}

.woocommerce .checkout-button,
.woocommerce .place-order .button {
  font-size: 18px;
  font-weight: bold;
}

/* Checkout input */
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
  padding: 10px;
}
.checkout.woocommerce-checkout
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 20px;
}

.woocommerce-checkout #payment {
  background: #ddd;
}

@media (min-width: 998px) {
  .woocommerce-checkout .checkout.woocommerce-checkout.col2-set,
  .woocommerce-checkout .col2-set {
    width: 50%;
    float: left;
  }
  .woocommerce-checkout .checkout.woocommerce-checkout #order_review_heading,
  .woocommerce-checkout .checkout.woocommerce-checkout #order_review {
    width: 45%;
    float: right;
  }

  /* Sticky Cart */
  /* .woocommerce-page .checkout.woocommerce-checkout #order_review_heading{position: sticky;top:160px}  */
  .woocommerce-page .checkout.woocommerce-checkout #order_review {
    position: sticky;
    top: 150px;
  }
  .woocommerce-page .checkout.woocommerce-checkout {
    float: left;
    width: 100%;
    position: relative;
  }

  .woocommerce-cart .woocommerce .col2-set .col-1,
  .woocommerce-cart .woocommerce-page .col2-set .col-1,
  .woocommerce-cart .woocommerce .col2-set .col-2,
  .woocommerce-cart .woocommerce-page .col2-set .col-2,
  .woocommerce-checkout .woocommerce .col2-set .col-1,
  .woocommerce-checkout .woocommerce-page .col2-set .col-1,
  .woocommerce-checkout .woocommerce .col2-set .col-2,
  .woocommerce-checkout .woocommerce-page .col2-set .col-2 {
    width: 100%;
  }

  .woocommerce #payment #place_order,
  .woocommerce-page #payment #place_order {
    width: 100%;
    display: block;
    padding: 20px;
  }
}

/* End Woo Commerce
------------------------------------------------------------------------ */

/* Full Site Editing
------------------------------------------------------------------------ */
@media (max-width: 768px) {
  .wp-block-navigation__responsive-container {
    padding: 20px !important;
  }
}

/* End Full Site Editing
------------------------------------------------------------------------ */

/* clearfix for post float images */
.clearfix:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0;
}
* html .clearfix {
  zoom: 1;
} /* IE6 */
*:first-child + html .clearfix {
  zoom: 1;
} /* IE7 */

/* ------------------------------------------------------------------------- *
 * Lightbox delle gallery (js/gallery-lightbox.js, functions/gallery-lightbox.php)
 * Modal minimale in tinta col brand: fondo navy profondo invece del solito
 * nero, controlli essenziali che virano al rosso su hover/focus, contatore in
 * Khand tracciato. Piatto, senza ombre, come il resto del sistema.
 * ------------------------------------------------------------------------- */

/* Miniature della gallery: segnalano che si possono aprire. */
.wp-block-gallery .wp-block-image {
  overflow: hidden;
}
.dibase-gallery-zoom {
  cursor: zoom-in;
  transition:
    transform 0.45s ease,
    filter 0.45s ease;
}
.wp-block-gallery .wp-block-image:hover .dibase-gallery-zoom {
  transform: scale(1.04);
  filter: brightness(0.9);
}
.dibase-gallery-zoom:focus-visible {
  outline: 3px solid var(--link-color);
  outline-offset: -3px;
}

/* Blocca lo scroll del documento a modal aperto. */
html.dibase-lightbox-open,
html.dibase-lightbox-open body {
  overflow: hidden;
}

.dibase-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(30, 30, 32, 0.96); /* grigio scuro neutro */
  animation: dibase-lightbox-fade 0.28s ease;
}
.dibase-lightbox[hidden] {
  display: none;
}
@keyframes dibase-lightbox-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.dibase-lightbox__stage {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 92vw;
}
.dibase-lightbox__img {
  max-width: 92vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  animation: dibase-lightbox-zoom 0.28s ease;
}
@keyframes dibase-lightbox-zoom {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.dibase-lightbox__caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 62ch;
  margin: 0;
  text-align: center;
}
.dibase-lightbox__caption[hidden] {
  display: none;
}
.dibase-lightbox__caption-title {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 500;
}
.dibase-lightbox__caption-text {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.9rem;
  line-height: 1.5;
}
.dibase-lightbox__caption-title[hidden],
.dibase-lightbox__caption-text[hidden] {
  display: none;
}

/* Controlli: essenziali, virano al rosso di brand su hover/focus. */
.dibase-lightbox__close,
.dibase-lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fff;
  line-height: 1;
  cursor: pointer;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}
.dibase-lightbox__close {
  top: clamp(10px, 3vw, 24px);
  right: clamp(10px, 3vw, 24px);
  width: 48px;
  height: 48px;
}
.dibase-lightbox__nav {
  top: 50%;
  width: 56px;
  height: 56px;
  transform: translateY(-50%);
}
.dibase-lightbox__prev {
  left: clamp(2px, 2vw, 24px);
}
.dibase-lightbox__next {
  right: clamp(2px, 2vw, 24px);
}
.dibase-lightbox__nav[hidden] {
  display: none;
}

.dibase-lightbox__close:hover,
.dibase-lightbox__close:focus-visible,
.dibase-lightbox__nav:hover,
.dibase-lightbox__nav:focus-visible {
  color: var(--link-color);
}
.dibase-lightbox__nav:hover,
.dibase-lightbox__nav:focus-visible {
  transform: translateY(-50%) scale(1.12);
}
.dibase-lightbox__close:focus-visible,
.dibase-lightbox__nav:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 4px;
}

.dibase-lightbox__counter {
  position: absolute;
  bottom: clamp(12px, 3vw, 26px);
  left: 50%;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 2px;
  transform: translateX(-50%);
}
.dibase-lightbox__counter[hidden] {
  display: none;
}

@media (max-width: 600px) {
  .dibase-lightbox__nav {
    width: 44px;
    height: 44px;
  }
  .dibase-lightbox__nav svg {
    width: 28px;
    height: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dibase-lightbox,
  .dibase-lightbox__img,
  .dibase-gallery-zoom {
    animation: none;
    transition: none;
  }
}

/* ------------------------------------------------------------------------- *
 * Form contatti (functions/contact-form.php)
 * Minimal, in tinta col brand. Le regole dei campi sono scoped sotto
 * .dibase-contact per vincere i selettori input[type=...] / button[type=submit]
 * del tema base (a specificita' piu' alta), che altrimenti azzerano raggi,
 * padding e colori. Piatto, senza ombre.
 * ------------------------------------------------------------------------- */

/* Honeypot e label per screen reader: fuori vista, ma nel DOM. */
.dibase-contact__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.dibase-contact__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.dibase-contact__field {
  margin: 0 0 16px;
}
.dibase-contact .dibase-contact__input {
  width: 100%;
  margin: 0;
  padding: 15px 18px;
  border: 1px solid #d6d6d6;
  border-radius: 10px;
  background: #fff;
  color: #303030;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.2s ease;
}
.dibase-contact .dibase-contact__input::placeholder {
  color: #9a9a9a;
}
.dibase-contact .dibase-contact__input:focus {
  outline: none;
  border-color: var(--link-color);
}
.dibase-contact .dibase-contact__textarea {
  min-height: 150px;
  resize: vertical;
}
.dibase-contact .dibase-contact__select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23707070' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.dibase-contact .dibase-contact__input--error {
  border-color: var(--link-color);
}
.dibase-contact__error {
  display: block;
  margin-top: 6px;
  color: var(--link-color);
  font-size: 0.85rem;
}

.dibase-contact__consent {
  margin: 8px 0 24px;
}
.dibase-contact__checkbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #606060;
  font-size: 0.95rem;
  line-height: 1.5;
  cursor: pointer;
}
.dibase-contact__checkbox input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--link-color);
}
.dibase-contact__checkbox a {
  color: var(--link-color);
  text-decoration: underline;
}

.dibase-contact .dibase-contact__submit {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 15px 46px;
  border: 0;
  border-radius: 46px;
  background: var(--link-color);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  cursor: pointer;
}
.dibase-contact .dibase-contact__submit:hover,
.dibase-contact .dibase-contact__submit:focus {
  background: var(--link-color-hover);
}

.dibase-contact__status {
  margin: 0 0 22px;
  padding: 14px 18px;
  border-left: 3px solid;
  border-radius: 10px;
  font-size: 0.95rem;
}
.dibase-contact__status--ok {
  border-left-color: #111111;
  background: #ffffff;
  color: #111111;
}
.dibase-contact__status--error {
  border-left-color: var(--link-color);
  background: #fdecec;
  color: #b3121b;
}

/* Banner di consenso ai cookie (functions/consent.php + js/consent.js).
   Barra in fondo alla finestra, non un muro che copre la pagina: l'unica
   categoria in gioco e' la statistica e il sito funziona identico senza
   scelta, quindi non c'e' ragione di impedire la lettura. I due bottoni hanno
   la stessa forma e la stessa dimensione: rifiutare deve costare quanto
   accettare. */
.dibase-consent {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9000;
  padding: 20px 4%;
  border-top: 1px solid #707070;
  background: #fff;
}
.dibase-consent[hidden] {
  display: none;
}
.dibase-consent:focus {
  outline: none;
}

.dibase-consent__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 30px;
  max-width: 1400px;
  margin: 0 auto;
}

.dibase-consent__body {
  flex: 1 1 420px;
}
.dibase-consent__title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.dibase-consent__text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.dibase-consent__text a {
  color: var(--link-color);
  text-decoration: underline;
}

.dibase-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.dibase-consent__btn {
  min-width: 150px;
  margin: 0;
  padding: 13px 34px;
  border: 1px solid transparent;
  border-radius: 46px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
.dibase-consent__btn--allow {
  background: var(--link-color);
  color: #fff;
}
.dibase-consent__btn--allow:hover,
.dibase-consent__btn--allow:focus {
  background: var(--link-color-hover);
}
.dibase-consent__btn--deny {
  border-color: #111111;
  background: #fff;
  color: #111111;
}
.dibase-consent__btn--deny:hover,
.dibase-consent__btn--deny:focus {
  background: #111111;
  color: #fff;
}

@media (max-width: 768px) {
  .dibase-consent__actions {
    width: 100%;
  }
  .dibase-consent__btn {
    flex: 1 1 auto;
    padding: 13px 20px;
  }
}

/* ------------------------------------------------------------------------- *
 * ! Personalizzazioni del sito
 * Tutto cio' che segue e' aggiunto per questo sito e non fa parte della base
 * del tema: tenerlo confinato qui per semplificare gli aggiornamenti.
 * ------------------------------------------------------------------------- */

/* Utility per l'andata a capo del testo.
   Si applicano dall'editor a blocchi, campo "Classi CSS aggiuntive". */

/* Evita le righe orfane (ultima parola da sola). Per i paragrafi. */
.text-pretty {
  text-wrap: pretty;
}

/* Distribuisce le righe in modo uniforme. Per titoli e testi brevi:
   NOTA: il browser la ignora oltre poche righe, non usarla sui paragrafi. */
.text-balance {
  text-wrap: balance;
}

/* End Personalizzazioni del sito
------------------------------------------------------------------------ */