/*
 * Custom code goes here.
 */

/* hide firstname and lastname alerts in checkout form */  
#customer-form input[name="firstname"]+span.form-control-comment, #customer-form input[name="lastname"]+span.form-control-comment {
    display: none;
}
/* fix for Chrome image rendering */ 
img {
 image-rendering: -webkit-optimize-contrast;
} 

/* SKU prodotto (scheda e lista) */
.product-sku{font-size:13px;color:#777;margin:4px 0 10px}
.product-sku .product-sku-label{font-weight:600;color:#555;margin-right:4px}
.product-sku .product-sku-value{font-family:Consolas,Menlo,monospace;letter-spacing:.3px;color:#333}
.product-sku--list{font-size:12px;margin:2px 0 6px}

/* --- box punti di forza (wpblockicons) --- */
/* il modulo affianca icona e testo come due inline-block: con testi lunghi
   andavano a capo e l'icona finiva centrata sopra. Qui la cella diventa
   flex, cosi' icona e testo restano allineati e le celle hanno pari altezza. */
#main-wrap #wpblockiconsmodule{display:flex;flex-wrap:wrap;background:#fff;
  border:1px solid #e3e7ec;border-bottom:1px solid #e3e7ec;border-radius:8px;
  margin:18px 0 26px;overflow:hidden}
#wpblockiconsmodule > div{display:flex;align-items:center;gap:14px;
  padding:18px 20px;text-align:left;border-right:1px solid #eef1f4;
  transition:background .18s ease}
#wpblockiconsmodule > div:last-child{border-right:0}
#wpblockiconsmodule > div:hover{background:#f7f9fc}
#main-wrap #wpblockiconsmodule .wp-icon{flex:0 0 46px;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:#eaf2fb;color:#1f72ce;padding:0;margin:0}
#wpblockiconsmodule .wp-icon i{font-size:20px;line-height:1}
#wpblockiconsmodule .wp-text{display:block;flex:1 1 auto;min-width:0;margin:0;text-align:left}
#main-wrap #wpblockiconsmodule .wp-title{display:block;font-size:13px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;color:#0f2440;line-height:1.25;margin-bottom:3px}
#main-wrap #wpblockiconsmodule .wp-desc{display:block;font-size:12.5px;line-height:1.4;color:#6b7280}
#wpblockiconsmodule a.wp-text:hover .wp-title{color:#1f72ce}
#wpblockiconsmodule a.wp-text:hover .wp-desc{color:#6b7280}
@media (max-width:991px){
  #wpblockiconsmodule > div{border-right:0;border-bottom:1px solid #eef1f4}
  #wpblockiconsmodule > div:last-child{border-bottom:0}
}

/* --- social follow --- */
/* l'etichetta testuale resta per screen reader ma non a video */
.ps-social-follow{margin:0}
.ps-social-follow h4{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  margin:0 0 10px;color:#0f2440}
.ps-social-follow ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.ps-social-follow li{margin:0}
.ps-social-follow li a{width:40px;height:40px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;background:#fff;border:1px solid #dfe3e8;
  color:#55606e;transition:all .18s ease;text-decoration:none}
.ps-social-follow li a:hover{transform:translateY(-2px);border-color:transparent;color:#fff}
.ps-social-follow li a i{font-size:17px;line-height:1}
.ps-social-follow li a i:before{color:inherit}
.ps-social-follow li a:hover i:before{color:#fff}
.ps-social-follow li a svg{width:16px;height:16px;display:block}
.ps-social-follow li.facebook  a:hover{background:#1877F2}
.ps-social-follow li.instagram a:hover{background:#E1306C}
.ps-social-follow li.youtube   a:hover{background:#FF0000}
.ps-social-follow li.tiktok    a:hover{background:#000}
.ps-social-follow-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --- navigazione mobile --- */
/* il pannello e' aperto/chiuso da theme.js via slideToggle su #menu-icon */
#mobile_vertical_menu_wrapper{display:none;background:#fff;border-top:1px solid #e3e7ec;
  border-bottom:1px solid #e3e7ec;padding:6px 0 10px;max-height:75vh;overflow-y:auto}
#mobile_vertical_menu_wrapper .mobile-menu-block{padding:6px 16px}
#mobile_vertical_menu_wrapper .mobile-menu-heading{display:block;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;color:#8a94a0;margin:8px 0 4px}
#mobile_vertical_menu_wrapper ul{list-style:none;padding:0;margin:0}
#mobile_vertical_menu_wrapper ul ul{padding-left:14px}
#mobile_vertical_menu_wrapper li{border-bottom:1px solid #f0f2f5}
#mobile_vertical_menu_wrapper li:last-child{border-bottom:0}
#mobile_vertical_menu_wrapper a{display:block;padding:10px 2px;color:#0f2440;font-size:14px;text-decoration:none}
#mobile_vertical_menu_wrapper a:hover{color:#1f72ce}
#mobile_vertical_menu_wrapper .category-thumbnail,
#mobile_vertical_menu_wrapper img{display:none}
#menu-icon{cursor:pointer}
@media (min-width:1200px){#mobile_vertical_menu_wrapper{display:none !important}}

/* --- social follow: mobile ---
   Il blocco e" agganciato a displayFooterBefore, fuori dal .container del
   tema: senza padding proprio le icone restano incollate al bordo. */
@media (max-width:991px){
  .ps-social-follow{padding:26px 20px 28px;text-align:center;background:#f2f4f7}
  .ps-social-follow h4{margin:0 0 16px;font-size:14px}
  .ps-social-follow ul{justify-content:center;gap:16px}
  .ps-social-follow li a{width:46px;height:46px}
  .ps-social-follow li a i{font-size:19px}
  .ps-social-follow li a svg{width:18px;height:18px}
}

/* --- barra mobile fissa in alto ---
   Il cassetto del menu e" stato spostato dentro .header-nav proprio per questo:
   restando nello stesso elemento sticky si apre sempre sotto la barra. */
@media (max-width:1199px){
  #header .header-nav{
    position:-webkit-sticky;position:sticky;top:0;z-index:1001;
    background:#fff;box-shadow:0 2px 10px rgba(15,36,64,.12)
  }
  #header .header-nav #mobile_vertical_menu_wrapper{
    max-height:calc(100vh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch
  }
}

/* --- box garanzie in colonna sinistra --- */
.sidebar-garanzie{border:1px solid #e3e7ec;border-radius:6px;background:#fff;margin-bottom:1.5rem;overflow:hidden}
.sidebar-garanzie ul{list-style:none;margin:0;padding:0}
.sidebar-garanzie li{border-bottom:1px solid #f0f2f5}
.sidebar-garanzie li:last-child{border-bottom:0}
.sidebar-garanzie a{display:flex;align-items:center;gap:12px;padding:12px 14px;
  color:#0f2440;text-decoration:none;transition:background .15s ease}
.sidebar-garanzie a:hover{background:#f6f8fa;color:#1f72ce}
.sidebar-garanzie .material-icons{font-size:24px;color:#1f72ce;flex:0 0 auto}
.sidebar-garanzie .sg-testo{display:block;line-height:1.25}
.sidebar-garanzie strong{display:block;font-size:13px;font-weight:700}
.sidebar-garanzie em{display:block;font-style:normal;font-size:11.5px;color:#6b7684;margin-top:2px}

/* --- megamenu: sottomenu CATALOGO su piu" colonne ---
   Il tema disponeva il primo livello con float:left (colonne irregolari) e
   stilava i livelli successivi come flyout assoluti a fondo bianco: mostrati
   tutti insieme si sovrapponevano. Qui il primo livello va in multicolonna
   (impacchetta meglio della griglia, che lasciava buchi) e i figli tornano in
   flusso sotto la rispettiva voce.
   Gli !important servono dove il tema vince per specificita".
   Solo desktop: l"unica voce del menu con figli e" CATALOGO. */
@media (min-width:1200px){
  #_desktop_top_menu .top-menu .sub-menu > ul[data-depth="1"]{
    display:block;column-count:4;column-gap:30px;
    padding:24px 26px 20px;max-height:76vh;overflow-y:auto;overflow-x:hidden
  }
  #_desktop_top_menu .top-menu .sub-menu ul[data-depth="1"]>li{
    float:none;display:inline-block;width:100%;padding:0;margin:0 0 18px;
    break-inside:avoid;-webkit-column-break-inside:avoid
  }
  #_desktop_top_menu .top-menu .sub-menu ul[data-depth="1"]>li>a{
    display:block;font-size:13px;padding:4px 0 6px;margin-bottom:6px;
    border-bottom:1px solid #e6eaef;font-weight:700!important;color:#0f2440!important
  }
  #_desktop_top_menu .top-menu .sub-menu ul[data-depth="1"]>li>a:hover{color:#1f72ce!important}
  /* le frecce servono ai flyout, nel megamenu sono solo rumore */
  #_desktop_top_menu .top-menu .sub-menu a:after{content:none!important}
  #_desktop_top_menu .top-menu .sub-menu .collapse-icons{display:none}
  /* i figli: da flyout assoluto a elenco in flusso */
  #_desktop_top_menu .top-menu .sub-menu ul[data-depth="1"]>li>div.collapse{
    display:block;position:static;width:auto;min-width:0;
    background:none;border:0;box-shadow:none;margin:0;padding:0
  }
  #_desktop_top_menu .top-menu .sub-menu ul[data-depth="2"]{
    width:auto;min-width:0;background:none;border:0;box-shadow:none;margin:0;padding:0
  }
  #_desktop_top_menu .top-menu .sub-menu ul[data-depth="2"]>li{
    float:none;width:auto;border:0;margin:0;padding:0;position:static
  }
  #_desktop_top_menu .top-menu .sub-menu ul[data-depth="2"]>li>a{
    display:block;font-size:12px;padding:3px 0;border:0;
    font-weight:400!important;text-transform:none!important;color:#6b7684!important
  }
  #_desktop_top_menu .top-menu .sub-menu ul[data-depth="2"]>li>a:hover{color:#1f72ce!important}
  /* solo le prime 5: l"elenco completo sta sulla pagina della categoria */
  #_desktop_top_menu .top-menu .sub-menu ul[data-depth="2"]>li:nth-child(n+6){display:none}
  /* dal terzo livello in giu" il pannello diventerebbe ingestibile */
  #_desktop_top_menu .top-menu .sub-menu ul[data-depth="2"]>li>div.collapse{display:none}
}