/* CUSTOM CSS */

h1 {color: #0b69c7 !important;}

/* h2 e h3 */
h2 {font-size: 25px !important;} h3 {font-size: 22px !important;}

/* Stile h1 h2 e h3 Mobile*/
@media (max-width: 768px) {
  h1 {    font-size: 22px !important; color: #0b69c7 !important; }
  h2 {    font-size: 20px !important;  }
  h3 {    font-size: 18px !important;  }
}

/* ----- Menu  ----- */
/* Nasconde bug menu hamburger desktop */
.menu-link:before { visibility:hidden;}

/* Menù Icone Top Bar 1600px+ */

@media (min-width:1600px) {
  :root{--bar:#e8f0ff;--divider:#cfe0ff;--text:#0e3b88;--text-hover:#082554}
  .menubar,.megamenu,.megamenu .navbar-nav{background:var(--bar)!important}
  .menubar{border-bottom:1px solid #c9dafc;overflow:visible!important}
  .megamenu .navbar-nav{display:flex;flex-wrap:wrap;margin:0;padding:0;width:100%}
  .megamenu .navbar-nav>li,.megamenu .navbar-nav>li>*{background:transparent!important;border:0}
  .megamenu .navbar-nav>li{list-style:none;flex:1 1 120px;min-width:120px;max-width:200px;text-align:center;box-shadow:-1px 0 0 0 var(--divider)}
  .megamenu .navbar-nav>li:first-child{box-shadow:none}
  .megamenu .navbar-nav>li>a{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 8px 10px;font:500 14px/1.2 inherit;color:var(--text);text-decoration:none!important;transition:background .15s,color .15s}
  .megamenu .navbar-nav>li>a:hover{background:#dbe7ff;color:var(--text-hover)}
  .megamenu .navbar-nav>li>a::before{content:"";display:block;width:26px;height:26px;margin-bottom:6px;background:no-repeat center/contain;opacity:1}
  .megamenu .navbar-nav>li:nth-child(1)>a::before{display:none}
  .megamenu .navbar-nav>li:nth-child(2)>a::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 4l-2 2-3 1v3h3v10h10V10h3V7l-3-1-2-2H9z' fill='none' stroke='%230e3b88' stroke-width='1.4' stroke-linejoin='round'></path></svg>")}
  .megamenu .navbar-nav>li:nth-child(3)>a::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='5' y='3' width='14' height='18' rx='2' ry='2' fill='none' stroke='%230e3b88' stroke-width='1.4'></rect><path d='M5 7h14M8 11h6' fill='none' stroke='%230e3b88' stroke-width='1.8'></path></svg>")}
  .megamenu .navbar-nav>li:nth-child(4)>a::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 6h4l1 2v12a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2V8l1-2zM10 4h4' fill='none' stroke='%230e3b88' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'></path></svg>")}
  .megamenu .navbar-nav>li:nth-child(5)>a::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='5' y='8' width='14' height='12' rx='2' ry='2' fill='none' stroke='%230e3b88' stroke-width='1.4'></rect><path d='M9 8V7a3 3 0 0 1 6 0v1' fill='none' stroke='%230e3b88' stroke-width='1.8'></path></svg>")}
  .megamenu .navbar-nav>li:nth-child(6)>a::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='3' y='5' width='18' height='16' rx='2' ry='2' fill='none' stroke='%230e3b88' stroke-width='1.4'></rect><path d='M7 3v4M17 3v4M3 9h18' fill='none' stroke='%230e3b88' stroke-width='1.8' stroke-linecap='round'></path></svg>")}
  .megamenu .navbar-nav>li:nth-child(7)>a::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 11l8-8h6l4 4v6l-8 8L3 11z' fill='none' stroke='%230e3b88' stroke-width='1.4' stroke-linejoin='round'></path><circle cx='17' cy='7' r='1.6' fill='none' stroke='%230e3b88' stroke-width='1.8'></circle></svg>")}
  .megamenu .navbar-nav>li:nth-child(8)>a::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3a9 9 0 0 0-9 8h18a9 9 0 0 0-9-8zm1 8v7a2 2 0 1 1-4 0' fill='none' stroke='%230e3b88' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'></path></svg>")}
  .megamenu .navbar-nav>li:nth-child(9)>a::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 17.2L14.1 6.1l3.8 3.8L6.8 21H3v-3.8zM18.5 5.1l2.4 2.4' fill='none' stroke='%230e3b88' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'></path></svg>")}
  .megamenu .navbar-nav>li:nth-child(10)>a::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='6' y='8' width='12' height='12' rx='2' ry='2' fill='none' stroke='%230e3b88' stroke-width='1.4'></rect><path d='M9 8V7a3 3 0 0 1 6 0v1' fill='none' stroke='%230e3b88' stroke-width='1.8'></path></svg>")}
  .megamenu .navbar-nav>li:nth-child(11)>a::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='5' y='7' width='14' height='14' rx='3' ry='3' fill='none' stroke='%230e3b88' stroke-width='1.4'></rect><path d='M9 7a3 3 0 0 1 6 0M8 13h8' fill='none' stroke='%230e3b88' stroke-width='1.8' stroke-linecap='round'></path></svg>")}
  .megamenu .navbar-nav>li:nth-child(1)>a{padding-top:22px}
  .megamenu .navbar-nav>li:nth-child(7)>a{display:inline-flex;max-width:108px;white-space:normal;margin:0 auto}
  .megamenu{position:relative;z-index:60}
  .megamenu .dropdown-menu{display:none;position:absolute;left:0;right:0;background:#fff;border-top:1px solid var(--divider)}
}


/* Grassetto voci menu II livello */
.megamenu .col-lg-9 .dropdown-menu .hidelv1 > li.lv1 > a.child {
  font-weight: 450 !important;
  font-size: 1.05em !important;
}

/* Modifica colore hover voci menù */
.megamenu a:hover {
  color: #006BC4 !important;
}


/* ----- All Site ----- */


/* ----- Pagine Categoria ----- */

/* Tabella Categoria */

#tabella-categoria {  border-collapse: collapse;  width: 100%; }

#tabella-categoria th,
#tabella-categoria td {   border: 1px solid #ddd;  padding: 8px;  text-align: left; }

#tabella-categoria thead tr {  background-color: #f5f5f5; }

#tabella-categoria td.strong {  font-weight: bold;}

/* Color Switch Prodotti */
img.color{border-radius:50%;border:1px solid #ddd;transition:all .25s ease-in-out;cursor:pointer}img.color:hover{transform:scale(1.25);border-color:#4f46e5;box-shadow:0 0 8px rgba(174,183,246,.4)}img.color.active{border:1px solid #000!important;transform:scale(1.1);box-shadow:0 0 4px rgba(0,0,0,.3)}


/* Pill buttons Categorie  */
div.top-elenco {    background-color: #a3a1a117; }

li.liv0.sel0 {color: #0b69c7 !important;}

.navcats ul { display:flex; flex-wrap:wrap; gap:16px; }
.navcats ul li { list-style:none; line-height:0; }    

.navcats ul li a{   display:inline-flex; align-items:center;
  color:#fff; text-decoration:none;
  background-image:linear-gradient(180deg,#0b69c7,#065490);
  background-size:200% 100%;
  background-position:0% 0%;   
  vertical-align:middle;                               
  transition:
    background-position .25s ease,
    box-shadow .18s ease,
    transform .18s ease,
    filter .18s ease;
  will-change: background-position, box-shadow, transform;
  -webkit-tap-highlight-color: transparent;}

.navcats ul li a:hover{
  background-position:100% 0%;
  transform: translateY(-1px);                       
  filter: brightness(1.12);}

.navcats ul li a:active{
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,.20);}
.navcats ul li a:focus-visible{
  outline:2px solid rgb(233, 14, 36);
  outline-offset:2px;}

/* MOBILE override - pulsanti nav scrollabili in riga */
@media (max-width: 768px) {
  .navcats ul {
    flex-wrap: nowrap !important; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; /* per scroll fluido su iOS */
  }
  
  .navcats ul li {
    flex: 0 0 auto; /* evita che si comprimano */
  }
}

/* Prezzo prodotti + spedizione gratuita */
a.cat {     color: #6a6969d9 !important;      font-size: 14px !important;font-weight: 400 !important}

a.cat:hover {    color: #3d86d6e3 !important;      font-size: 14px !important; font-weight: 400 !important}

span.prezzo {  color: #1651a3;   letter-spacing: -0.5px !important;}

.shipping-badge {   display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eaf7ef;
  color: #218838;
  font-weight: 500;
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 18px;
  border: 1px solid #c6e6d1;
  position: relative;
    margin: 4px 0px 4px 0px;
   cursor: default; }

.shipping-badge::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-size: contain;
background-repeat: no-repeat;
  background-position: center;
  margin-right: 6px;

background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23218838' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4a2 2 0 0 0 1-1.73z'></path><path d='M3.27 6.96L12 12l8.73-5.04'></path><path d='M12 22V12'></path></svg>");
}



/* ----- Pagine Prodotto----- */

/* Tabella Prezzi Prodotto */
table.table-r{width:100%;border-collapse:separate;border-spacing:0;color:#1f2937;background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;cursor:default}
table.table-r thead th{position:sticky;top:0;background:#f8fafc;color:#111827;font-weight:600;padding:12px 14px;text-align:center;white-space:nowrap;border-bottom:1px solid #e5e7eb}
table.table-r tbody td{padding:12px 14px;text-align:center;border-top:1px solid #f3f4f6;font-variant-numeric:tabular-nums}
table.table-r thead th:first-child{text-align:left;font-weight:600;background:#fcfdff}
table.table-r tbody td:first-child{text-align:left;background:#fcfdff}
table.table-r tbody tr:nth-child(even) td{background:#fafbff}
table.table-r tbody tr:hover td{background:#f1f5ff;transition:background .15s ease-in-out}
table.table-r thead th:last-child{font-weight:600;color:#0f994c}
table.table-r tbody td:last-child{color:#0f994c}
@media (max-width:768px){table.table-r{font-size:13px}table.table-r thead th,table.table-r tbody td{padding:9px 10px}}


/* Colori stelle recensioni pagine categoria */
:root{   --star-on:  #FFC107; }
.voto .fa.fa-star.on {   color: var(--star-on) !important; }


/* Breadcrumb */

.breadcrumb a {
   text-transform: capitalize !important;
}

.breadcrumb a:hover {
   color: #006BC4 !important ;
}

/* Hover color articoli blog homepage */
.blog .wrapper-art h3 a:hover { 
    
    color: #006BC4 !important }

/* Hover categoria blog */
.blog .wrapper-art .cat a:hover {
    color: #1490f6;
}

/* Hover color "continua" blog homepage */
.blog .wrapper-art .go span a:hover { color: #45abff !important } 

.blog .wrapper-art {
  overflow: hidden;
  position: relative;
}

.blog .wrapper-art .img-responsive {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.blog .wrapper-art .img-responsive:hover {
  transform: scale(1.05);
}

/* Versione alternativa con effetto più sofisticato */
.blog .wrapper-art .img-responsive {
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  filter: brightness(1);
  will-change: transform, filter;
}

.blog .wrapper-art .img-responsive:hover {
  transform: scale(1.08);
  filter: brightness(1.1);
}

/* Stile sottotitolo sezione blog */
.p-title p {
    font-size: 18px;
    margin-top: 5px;
}



/* ===== TABELLE BLOG ===== */

.tabella-blog {
  width: 100%;
  font-size: 0.95em;
  margin: 25px 0 25px;
  border: 1.2px solid #b5bec8 !important;
      border-spacing: 0 !important;
  overflow: hidden;
}

.tabella-blog th {
     border-right: 1px solid #b5bec8;
      border-bottom: 1px solid #b5bec8;

  padding: 16px 12px;
  font-weight: 600;
  text-align: left;

}

.tabella-blog th:nth-child(1) { background: #fef3e2; color: #c2410c; }
.tabella-blog th:nth-child(2) { background: #e0f2fe; color: #0369a1; }
.tabella-blog th:nth-child(3) { background: #ecfdf5; color: #15803d; }

.tabella-blog td {
     border-right: 1px solid #b5bec8;
  padding: 14px 12px;
  line-height: 1.6;
  color: #2d3748;
}

.tabella-blog tr:nth-child(even) td {
  background: #fafcff;
}

@media (max-width: 700px) {
  .tabella-blog, .tabella-blog * { display: block; width: 100%; }
  .tabella-blog thead { display: none; }
  .tabella-blog td {
    padding: 12px 12px 12px 40%;
    position: relative;
    border: none;
    border-bottom: 1px solid #e2e8f0;
  }
  .tabella-blog td::before {
    content: attr(data-label);
    position: absolute;
    left: 12px;
    top: 12px;
    font-weight: 600;
    color: #4a5568;
    font-size: 1em;
  }
}

/* Sezione fonti Blog */
.fonti-blog {
    background-color: #f8f9fa;
    border-left: 4px solid #007bff;
    padding: 20px;
    margin: 30px 0;
    border-radius: 0 8px 8px 0;
    font-size: 0.95em;
}

.fonti-blog p {
    margin-bottom: 15px;
    color: #495057;
    line-height: 1.6;
}

.fonti-blog ul {
    list-style: none;
    padding-left: 0;
    margin: 20px 0;
}

.fonti-blog li {
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
    line-height: 1.5;
}


.fonti-blog strong {
    color: #212529;
    font-weight: 600;
}

.fonti-blog em {
    color: #6c757d;
    font-style: italic;
}

/* Stile per il disclaimer finale */
.fonti-blog p:last-child {
    font-size: 0.85em;
    color: #6c757d;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #dee2e6;
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .fonti-blog {
        padding: 15px;
        margin: 20px 0;
    }
}


/* Box Approfondimento Blog */

#box-approfondimento {
   border: 1px solid #e8b92347;
   padding: 1.2em;
   border-radius: 8px;
   background: linear-gradient(135deg, #fff9e6 0%, #f5f0d6 100%);
   margin: 1.5em 0;
   box-shadow: 0 2px 8px rgba(232, 185, 35, 0.15);
   position: relative;
}


#box-approfondimento strong {
   color: #b8860b;
   font-weight: 500;
   display: inline-block;
   margin-bottom: 8px;
}

/* Box Curiosità Blog */
#box-curiosita {
   border: 1px solid #2196f347;
   padding: 1.2em;  /* ← AGGIUNGI QUESTA RIGA */
   border-radius: 8px;
   background: linear-gradient(135deg, #e6f7ff 0%, #d6eef5 100%);
   margin: 1.5em 0;
   box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
   position: relative;
}

#box-curiosita strong {
   color: #1565c0;
   font-weight: 500;
   display: inline-block;
   margin-bottom: 8px;
}

/* ===== BASE STYLES (CONDIVISI) ===== */
.table-of-content, 
details.table-of-content {
  background: linear-gradient(135deg, #f8fafb 0%, #f1f5f7 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin: 20px 0;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

/* ===== TABLE OF CONTENT NORMALE (SEMPRE VISIBILE) ===== */
.table-of-content:not(details) {
  padding: 20px;
  max-width: 620px;
}

.table-of-content:not(details)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0ea5e9, #06b6d4, #0891b2);
}

/* ===== TABLE OF CONTENT COLLASSABILE (DETAILS) ===== */
details.table-of-content {
  width: fit-content;
  min-width: 280px;
}

details.table-of-content[open] {
  width: auto;
  max-width: 620px;
}

/* Intestazione clickable - supporta sia summary diretto che con strong */
details.table-of-content > summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  color: #0f172a;
  font-size: 1rem;
  list-style: none;
  user-select: none;
  position: relative;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  margin: 0;
}

/* Se c'è un strong dentro summary, mantiene lo stesso stile */
details.table-of-content > summary strong {
  font-weight: inherit;
}

/* Icona freccia */
details.table-of-content > summary::after {
  content: '▼';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: #64748b;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

details.table-of-content[open] > summary::after {
  content: '▲';
}

/* Hover effects per summary */
details.table-of-content > summary:hover {
  background: rgba(14, 165, 233, 0.05);
  transform: translateY(-1px);
}

details.table-of-content > summary:hover::after {
  color: #0ea5e9;
  transform: translateY(-50%) scale(1.1);
}

/* Rimuove triangolino nativo del browser */
details.table-of-content > summary::-webkit-details-marker {
  display: none;
}

/* Contenuto quando aperto - gestisce sia nav diretto che wrappato */
details.table-of-content > nav,
details.table-of-content > .toc-content,
details.table-of-content .table-of-content {
  padding: 0 18px 18px 18px;
}

/* Se c'è un nav.table-of-content dentro details, rimuove padding duplicato */
details.table-of-content nav.table-of-content {
  padding: 0 0 18px 0;
  margin: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

details.table-of-content nav.table-of-content::before {
  display: none;
}

/* ===== STILI LISTE (CONDIVISI) ===== */
.table-of-content ul,
details.table-of-content ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.table-of-content li,
details.table-of-content li {
  margin: 0 0 4px 0;
  line-height: 1.3;
  position: relative;
}

.table-of-content li a,
details.table-of-content li a {
  text-decoration: none;
  color: #475569;
  font-size: 0.9rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  word-break: break-word;
}

/* Pallini prima dei link */
.table-of-content li a::before,
details.table-of-content li a::before {
  content: '';
  width: 5px;
  height: 5px;
  background: #cbd5e1;
  border-radius: 50%;
  margin-right: 10px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

/* Hover effects per i link */
.table-of-content li a:hover,
details.table-of-content li a:hover {
  background: rgba(14, 165, 233, 0.08);
  transform: translateX(2px);
}

.table-of-content li a:hover::before,
details.table-of-content li a:hover::before {
  background: #0ea5e9;
  transform: scale(1.2);
}

/* ===== SOTTOLISTE ===== */
.table-of-content ul ul,
details.table-of-content ul ul {
  margin-top: 2px;
  margin-bottom: 4px;
  padding-left: 14px;
  position: relative;
}

.table-of-content ul ul li a,
details.table-of-content ul ul li a {
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 400;
  padding: 4px 10px;
}

.table-of-content ul ul li a::before,
details.table-of-content ul ul li a::before {
  width: 3px;
  height: 3px;
  background: #cbd5e1;
}

.table-of-content ul ul li a:hover,
details.table-of-content ul ul li a:hover {
  color: #334155;
}

/* ===== STILI SPECIFICI PER TITOLI PRINCIPALI ===== */
.table-of-content > ul > li > a,
details.table-of-content nav > ul > li > a,
details.table-of-content .toc-content > ul > li > a,
details.table-of-content .table-of-content > ul > li > a {
  color: #0073aa !important;
  font-size: 0.95rem !important;
  letter-spacing: -0.01em;
}

/* STILI SPECIFICI PER SOTTOTITOLI */
.table-of-content > ul > li > ul > li > a,
details.table-of-content nav > ul > li > ul > li > a,
details.table-of-content .toc-content > ul > li > ul > li > a,
details.table-of-content .table-of-content > ul > li > ul > li > a {
  color: #4a6f85 !important;
  font-size: 0.95rem !important;
  line-height: 1.3;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .table-of-content:not(details),
  details.table-of-content[open] {
    max-width: 100%;
    margin: 16px 0;
  }
  
  .table-of-content:not(details) {
    padding: 16px;
  }
  
  details.table-of-content {
    min-width: 200px;
  }
  
  details.table-of-content > nav,
  details.table-of-content > .toc-content,
  details.table-of-content .table-of-content {
    padding: 0 16px 16px 16px;
  }
  
  details.table-of-content nav.table-of-content {
    padding: 0 0 16px 0;
  }
  
  .table-of-content li a,
  details.table-of-content li a {
    font-size: 0.85rem;
    padding: 5px 8px;
  }
  
  .table-of-content ul ul,
  details.table-of-content ul ul {
    padding-left: 10px;
  }
  
  .table-of-content li a::before,
  details.table-of-content li a::before {
    margin-right: 8px;
  }
}