@charset "UTF-8";

/* =====================================================
   ITNETCOM — style-fixes.css
   SOLO FIX mirati (no layout, no componenti)
   ===================================================== */

/* =====================================================
   FIX IFRAME / MAPPA
   ===================================================== */

/* evita che iframe sovrastino elementi fixed */
iframe{
  position: relative;
  z-index: 1;
}

/* mappa sempre cliccabile */
.itn-map,
.itn-map iframe{
  pointer-events: auto;
}

/* =====================================================
   FIX HEADER + ANCORE
   ===================================================== */

/* evita tagli su scroll con header fixed */
section[id]{
  scroll-margin-top: 96px;
}

/* =====================================================
   FIX FOOTER (sfalsamenti sporadici)
   ===================================================== */

.itn-footer{
  background:#fff;
}

.itn-footer .itn-wrap{
  align-items:flex-start;
  text-align:center;
}

.itn-footer strong{
  display:block;
  margin-bottom:8px;
}

.itn-hours{
  line-height:1.6;
}

/* allinea orari correttamente */
.itn-footer .itn-hours-row{
  display:inline-grid;
  grid-template-columns:auto auto;
  gap:6px 16px;
  margin:0 auto;
  text-align:center;
}

/* =====================================================
   FIX COPYRIGHT
   ===================================================== */

.itn-copyright{
  border-top:1px solid #eee;
  padding:16px 0;
  font-size:14px;
  color:#666;
}

.itn-copyright .itn-wrap{
  display:flex;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
  text-align:center;
}

.itn-copyright a{
  color:#e53935;
  text-decoration:none;
}

/* =====================================================
   FIX COOKIE FAB
   ===================================================== */

.cookie-fab{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

@media (max-width:768px){
  .cookie-fab{
    bottom:16px;
    left:16px;
    width:56px;
    height:56px;
  }
}

/* =====================================================
   FIX Z-INDEX FLOAT
   ===================================================== */

.wa-float,
.wa-chat,
.cookie-popup{
  z-index:9999;
}
/* =====================================================
   ACCESSIBILITÀ — SKIP LINK
   ===================================================== */

/* nascosta di default */
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

/* visibile SOLO con TAB (focus da tastiera) */
.skip-link:focus{
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:10px 14px;
  background:#ffffff;
  color:#000;
  border-radius:12px;
  box-shadow:0 20px 40px rgba(0,0,0,.2);
  z-index:10000;
  text-decoration:none;
  font-weight:700;
}
/* forza uniformità card nelle pagine servizio */
.itn-section .itn-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 48px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}
/* =====================================================
   FIX CLICK CARD PRODOTTI
   ===================================================== */

/* La card NON deve intercettare click */
.itn-product-card {
  pointer-events: none;
}

/* Il link prodotto DEVE ricevere il click */
.itn-product-link {
  pointer-events: auto;
  display: block;
  position: relative;
  z-index: 2;
}

/* L'area add-to-cart DEVE ricevere il click */
.itn-add-cart {
  pointer-events: auto;
  position: relative;
  z-index: 3;
}

/* Sicurezza: elementi interni */
.itn-product-link * {
  pointer-events: auto;
}
/* === FIX ALLINEAMENTO CARD PRODOTTI === */
.itn-product-card .itn-product-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.itn-product-card .itn-product-body .product-price {
  margin-top: auto !important;
}

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

.itn-product-single-price{
  margin: 12px 0 6px;
  font-size: 2rem;
  font-weight: 800;
  color: #e30613;
}

.itn-product-single-availability{
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.itn-product-single-availability.is-available{
  color: #0a8f2a;
}

.itn-product-single-availability.is-unavailable{
  color: #b00020;
}

/* BOTTONE CARRELLO */
.itn-product-single-cart{
  margin-bottom: 24px;
}

.itn-btn-cart{
  width: 100%;
  max-width: 320px;
  padding: 14px 18px;
  font-size: 1rem;
  font-weight: 700;
}

/* MOBILE */
@media (max-width: 768px){
  .itn-product-single-price{
    font-size: 1.6rem;
  }

  .itn-btn-cart{
    max-width: 100%;
  }
}
/* =========================
   CARD PRODOTTI: NO UNDERLINE
   ========================= */
.itn-product-card,
.itn-product-card a,
.itn-product-card a:hover,
.itn-product-card a:focus,
.itn-product-card a:active {
  text-decoration: none !important;
  color: inherit;
}

/* =========================
   BREADCRUMB PRODOTTO (SINGLE)
   ========================= */
.itn-breadcrumb--single {
  margin: 0 0 14px;
  font-size: 0.9rem;
  color: #000;
}

.itn-breadcrumb--single ol {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;      /* UNA SOLA RIGA */
  gap: 6px;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}

.itn-breadcrumb--single li {
  color: #000;
}

.itn-breadcrumb--single li::after {
  content: ">";
  margin-left: 6px;
  color: #000;
}

.itn-breadcrumb--single li:last-child::after {
  content: "";
}

.itn-breadcrumb--single a {
  color: #000;
  text-decoration: none;
}

.itn-breadcrumb--single a:hover {
  text-decoration: underline;
}
/* =========================
   BREADCRUMB PRODOTTO
========================= */
.itn-breadcrumb--single {
  margin-top: 50px;     /* distanza da header */
  margin-bottom: 0px;  /* respiro prima del contenuto */
  font-size: 14px;
  color: #000;
}

.itn-breadcrumb--single a {
  color: inherit;
  text-decoration: none;
}

.itn-breadcrumb--single a:hover {
  text-decoration: underline;
}

/* Mobile */
@media (max-width: 768px) {
  .itn-breadcrumb--single {
    margin-top: 16px;
    margin-bottom: 16px;
    font-size: 13px;
  }
}
/* =========================
   FIX BREADCRUMB MOBILE
========================= */
@media (max-width: 768px) {

  .itn-breadcrumb--single {
    margin-top: 50px;   /* spazio sotto header mobile */
    padding-top: 8px;
    margin-bottom : 0px;
  }

}
/* =========================
   PRODUCT CARD
========================= */

.itn-product-card {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

.itn-product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

.itn-product-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.itn-product-link img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  padding: 16px;
}

/* =========================
   BODY
========================= */

.itn-product-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.itn-product-body h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  }

/* =========================
   DISPONIBILITÀ
========================= */

.itn-product-availability {
  font-size: 13px;
  font-weight: 500;
}

.itn-product-availability.available {
  color: #0a8a2a;
}

.itn-product-availability.unavailable {
  color: #b00020;
}

/* =========================
   FOOTER (PREZZO + +)
========================= */

.itn-product-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
}

.itn-product-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--itn-red);
}

/* =========================
   QUICK ADD BUTTON
========================= */

.itn-quick-add {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--itn-red);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  transition: transform .1s ease, background .2s ease;
}

.itn-quick-add:hover {
  transform: scale(1.08);
  background: #c90012;
}

.itn-quick-add.added {
  background: #0a8a2a;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {
  .itn-product-body h3 {
    font-size: 14px;
  }

  .itn-product-price {
    font-size: 15px;
  }

  .itn-quick-add {
    width: 36px;
    height: 36px;
  }
}
/* ===============================
   ALLINEAMENTO CARD PRODOTTI
   =============================== */

/* Card base */
.itn-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* Corpo card */
.itn-product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 16px 18px;
}

/* Categoria */
.itn-product-category {
  font-size: 12px;
  color: #777;
  margin-bottom: 4px;
  min-height: 16px;
}

/* Titolo (2 righe fisse) */
.itn-product-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 6px;
  min-height: 42px;
}

/* Prezzo */
.itn-product-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--itn-red);
  min-height: 22px;
  margin-bottom: 4px;
}

/* Disponibilità */
.itn-product-stock {
  font-size: 13px;
  font-weight: 500;
  min-height: 18px;
}

.itn-product-stock.ok {
  color: #0a8a2a;
}

.itn-product-stock.ko {
  color: #b00020;
}

/* Footer card sempre allineato in basso */
.itn-product-footer {
  margin-top: auto;
}

/* Rimuove underline e colori link */
.itn-product-card,
.itn-product-card a,
.itn-product-card a:hover,
.itn-product-card a:focus,
.itn-product-card a:active {
  text-decoration: none !important;
  color: inherit;
}

/* Hover */
.itn-product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* ===============================
   MOBILE
   =============================== */
@media (max-width: 768px) {
  .itn-product-title {
    font-size: 14px;
    min-height: 38px;
  }

  .itn-product-price {
    font-size: 15px;
  }
}
/* =========================================
   FIX MENU MOBILE (DRAWER APP-STYLE)
   ========================================= */

/* 1. Il Cassetto (Drawer) - Stato CHIUSO */
#mobileMenu.itn-mobile-menu {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important; /* Nascosto a destra */
    width: 85% !important;
    max-width: 320px !important;
    height: 100vh !important;
    background: #ffffff !important;
    z-index: 999999 !important;
    transition: right 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: -5px 0 15px rgba(0,0,0,0.3) !important;
    visibility: visible !important;
}

/* 2. Il Cassetto - Stato APERTO (Nuova Classe) */
#mobileMenu.itn-mobile-menu.open {
    right: 0 !important; /* Scivola dentro */
}

/* 3. Overlay Scuro */
#itn-overlay.itn-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.6) !important;
    z-index: 999998 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#itn-overlay.itn-overlay.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* 4. Stili Interni (Intestazione, Link, Footer) */
.itn-drawer-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
}

.itn-close-btn {
    background: transparent;
    border: none;
    font-size: 28px;
    color: #e30613;
    cursor: pointer;
    padding: 5px;
}

.itn-drawer-links {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
}

.itn-drawer-links a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    font-weight: 600;
    padding: 15px 0;
    border-bottom: 1px solid #f9f9f9;
    display: block;
}

.itn-drawer-footer {
    padding: 20px;
    background: #fcfcfc;
    border-top: 1px solid #eee;
}

.itn-cta-mobile {
    display: block;
    background: #e30613;
    color: #fff !important;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 15px;
}

.itn-cart-mobile-link {
    display: block;
    text-align: center;
    color: #555;
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
}
/* =========================================
   FIX MENU MOBILE (UX 100% CORRECT)
   ========================================= */

/* 1. Il Cassetto (Drawer) - Stato CHIUSO */
#mobileMenu.itn-mobile-menu {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important; /* Parte nascosto FUORI a destra */
    left: auto !important;   /* Assicura che non si ancori a sinistra */
    
    width: 85% !important;
    max-width: 320px !important;
    
    /* FIX ALTEZZA: Usa dvh (dynamic height) per evitare che la barra del browser tagli il menu */
    height: 100vh !important; 
    height: 100dvh !important; 
    
    background: #ffffff !important;
    z-index: 999999 !important;
    
    /* Animazione fluida */
    transition: right 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
    
    display: flex !important;
    flex-direction: column !important;
    box-shadow: -5px 0 15px rgba(0,0,0,0.3) !important;
    visibility: visible !important;
}

/* 2. Il Cassetto - Stato APERTO */
#mobileMenu.itn-mobile-menu.open {
    right: 0 !important; /* Si attacca al bordo DESTRO */
}

/* 3. Overlay Scuro */
#itn-overlay.itn-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.6) !important;
    z-index: 999998 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px); /* Effetto sfocato moderno */
}

#itn-overlay.itn-overlay.visible {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* 4. Intestazione Menu */
.itn-drawer-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
    /* Evita che l'header si schiacci */
    flex-shrink: 0; 
}

.itn-close-btn {
    background: transparent;
    border: none;
    font-size: 28px;
    color: #e30613;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 5. Lista Link (Scrollabile) */
.itn-drawer-links {
    flex-grow: 1; /* Occupa tutto lo spazio disponibile */
    overflow-y: auto; /* Abilita lo scroll se i link sono tanti */
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
}

.itn-drawer-links a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    font-weight: 600;
    padding: 15px 0;
    border-bottom: 1px solid #f9f9f9;
    display: block;
}

/* 6. Footer del Menu (CTA + Carrello) */
.itn-drawer-footer {
    padding: 20px;
    background: #fcfcfc;
    border-top: 1px solid #eee;
    flex-shrink: 0; /* Non si schiaccia mai */
    
    /* FIX SAFE AREA: Aggiunge spazio sotto per iPhone X e successivi */
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
}

.itn-cta-mobile {
    display: block;
    background: #e30613;
    color: #fff !important;
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px rgba(227, 6, 19, 0.2);
}

.itn-cart-mobile-link {
    display: block;
    text-align: center;
    color: #555;
    font-weight: bold;
    text-decoration: none;
    font-size: 16px;
}
/* =========================================
   FIX SCROLL SICURO (Class-Based)
   ========================================= */

/* Questa classe viene aggiunta da JS solo quando il menu è aperto */
body.noscroll {
    overflow: hidden !important; /* Blocca lo scroll */
    height: 100vh !important;    /* Blocca l'altezza */
}

/* Assicuriamoci che di default lo scroll funzioni */
html, body {
    overflow-x: hidden; /* Nasconde solo la barra orizzontale */
    overflow-y: auto;   /* Abilita lo scroll verticale (rotella) */
}
}
//* ============================================================
   FIX TABLET & LANDSCAPE (Esteso fino a 1280px)
   Copre iPad, iPad Air e la maggior parte dei tablet Android
   sia in verticale che in orizzontale.
   ============================================================ */

@media screen and (max-width: 1280px) {
    
    /* 1. Nascondi il menu testuale desktop (che si rompeva) */
    #desktopMenu {
        display: none !important;
    }

    /* 2. Mostra il pulsante Hamburger */
    .itn-burger {
        display: block !important;
        font-size: 32px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        color: #333 !important;
        padding: 0 10px !important;
        margin-left: auto !important; /* Spinge l'icona tutta a destra */
    }

    /* 3. Allinea Header: Logo a sinistra, Burger a destra */
    .itn-nav {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 10px 15px !important; /* Un po' di aria ai lati */
    }

    /* 4. Opzionale: aggiustamenti Logo per tablet */
    .itn-logo img {
        height: 35px !important; /* Dimensione sicura */
        width: auto !important;
    }
}
/* =========================================
   FIX CATALOGO PRODOTTI (Versione Potenziata)
   Obiettivo: Massimizzare grandezza foto e centratura
   ========================================= */

/* 1. Il Contenitore Esterno (Scatola) */
.itn-product-img {
    width: 100% !important;
    /* Altezza fissa: le scatole saranno tutte identiche */
    height: 240px !important; 
    background-color: #ffffff !important;
    position: relative !important;
    overflow: hidden !important;
    
    /* Ridotto il padding a 0 per dare massimo spazio alla foto */
    padding: 0 !important; 
}

/* 2. Il Link (<a>) che avvolge la foto */
/* FONDAMENTALE: Spesso è lui che blocca l'altezza! */
.itn-product-img a {
    display: flex !important;       /* Usa Flexbox per centrare */
    width: 100% !important;
    height: 100% !important;        /* Forza l'altezza al 100% del contenitore */
    align-items: center !important; /* Centra verticalmente */
    justify-content: center !important; /* Centra orizzontalmente */
}

/* 3. L'Immagine (<img>) */
.itn-product-img img {
    /* Le dimensioni massime sono il 100% dello spazio disponibile */
    max-width: 95% !important;  
    max-height: 95% !important;
    
    width: auto !important;   /* Lascia che la larghezza si adatti */
    height: auto !important;  /* Lascia che l'altezza si adatti */
    
    /* Object-fit contain assicura che la foto non venga mai tagliata */
    object-fit: contain !important;
    
    margin: auto !important;  /* Centratura extra sicurezza */
    display: block !important;
}

/* 4. Effetto Zoom al passaggio del mouse (Opzionale ma carino) */
.itn-product-img:hover img {
    transform: scale(1.08); /* Zoom leggero dell'8% */
    transition: transform 0.3s ease;
}

/* 5. FIX MOBILE (Smartphone) */
@media screen and (max-width: 767px) {
    .itn-product-img {
        height: 180px !important; /* Altezza ridotta su mobile */
    }
}
/* =========================================
   FIX CLICCABILITÀ BOTTONI FLOAT
   ========================================= */

/* I bottoni devono stare SOPRA l'overlay del menu quando è chiuso */
.cookie-fab, 
.wa-float,
.wa-chat {
    z-index: 999990 !important; 
    cursor: pointer !important;
}

/* L'overlay del menu non deve bloccare i click quando è invisibile */
#itn-overlay:not(.visible) {
    pointer-events: none !important;
    display: none !important;
}

/* Assicurati che il body con noscroll non rompa la visualizzazione */
body.noscroll {
    overflow: hidden !important;
    height: 100vh;
}
<style>

/* FIX PER PULSANTE APPLICA FILTRI MOBILE */
  @media (max-width: 768px) {
    .itn-filters {
      padding-bottom: 80px !important; /* Spazio extra per evitare l'icona cookie */
    }
    .itn-filters-apply {
      margin-top: 20px;
      padding-bottom: 20px;
    }
  }