/** Shopify CDN: Minification failed

Line 458:0 Unexpected "<"
Line 525:0 Expected identifier but found "<"
Line 1678:0 Expected "}" to go with "{"

**/
/* ===== DESKTOP E TABLET GRANDE (Sopra 750px) ===== */
/* Ridotto di un altro "pochino" per non sovrastare il layout */
@media screen and (min-width: 750px) {
  .h1 {
    font-size: clamp(28px, 3vw, 40px) !important;
    
  }
}

/* ===== FASCIA MEDIA MOBILE (631px - 749px) ===== */
/* Rimane bello evidente come richiesto */
@media screen and (max-width: 749px) and (min-width: 631px) {
  .h1 {
    font-size: 4.2rem !important;
    
  }
}
/* RESET E PULIZIA SOTTOTITOLO */
.card__information .card-subtitle, 
 
.card-information__text .caption,
.card__content .sub-heading {
    /* 1. DISPLAY INLINE: Torna inline così l'evidenziatore si stringe intorno al testo */
    display: inline !important; 
    box-decoration-break: clone !important;
    -webkit-box-decoration-break: clone !important;
    
    /* 2. DIMENSIONE */
    font-size: 1.8rem !important;
   
    
    /* 3. PESO */
    font-weight: 700 !important;
    
    /* 4. COLORE TESTO */
    color: #1a1a1a !important; 

    
    /* 6. SPAZIATURA */
    /* Nota: con display inline, i margini verticali si controllano meglio tramite il contenitore o line-height */
    line-height: 1.6 !important; 
    letter-spacing: 0.02rem !important;
    text-transform: none !important; 
    white-space: normal !important;
    text-align: center !important;
}

/* 7. TITOLO CON MARGINE: Abbassiamo il sottotitolo agendo da qui */
.card__heading {
    margin-bottom: 15px !important;
    line-height: 1.1 !important;
}

/* 8. CONTENITORE (Aggiunto per dare respiro al sottotitolo inline) */
.card__information, .card-information__text {
    margin-top: 8px !important;
}
/* ===== FASCIA CRITICA (470px - 630px) ===== */
/* Mantenuto grande per risolvere il problema del "troppo piccolo" */
@media screen and (max-width: 630px) and (min-width: 470px) {
  .h1 {
    font-size: 3.5rem !important;
    white-space: nowrap !important;
  }
}

/* ===== MOBILE PICCOLO (Sotto 470px) ===== */
@media screen and (max-width: 469px) {
  .h1 {
    font-size: 2.6rem !important;
    white-space: nowrap !important;
  }
}

/* Allineamento specifico per card molto strette */
@media screen and (max-width: 458px) {
  .card-wrapper .card__information .h1 {
    margin-left: 4px;
    white-space: nowrap !important;
  }
}
/* Aumenta altezza slideshow del 15% */
@media screen and (min-width: 749px) {
.slideshow .slideshow__slide {
  height: 100vh !important;
}
}


.card {
  /* Variabili potenziate per massimo impatto visivo */
  --main-color: rgb(44, 109, 194);
  --bg-color: #ffffff;
  --accent-color: #ffde03;
  --shadow-distance: 6px;
  
  /* SFONDO con gradiente luminoso - azzurro bilanciato */
  background: 
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(25, 83, 158, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, 
      rgba(255, 255, 255, 1) 0%,
      rgba(238, 245, 252, 1) 25%,
      rgba(225, 238, 250, 1) 60%,
      rgba(210, 230, 246, 1) 100%
    );
  
  /* OMBRA INTERNA per profondità */
  box-shadow: 
    var(--shadow-distance) var(--shadow-distance) 0px var(--main-color),
    calc(var(--shadow-distance) * 0.5) calc(var(--shadow-distance) * 0.5) 0px rgba(0, 0, 0, 0.1),
    inset -2px -2px 8px rgba(255, 255, 255, 0.9),
    inset 2px 2px 8px rgba(25, 83, 158, 0.13);
  
  /* BORDO BOLD per definizione netta */
  border: 3px solid var(--main-color);
  
  /* ANIMAZIONE potenziata */
  transition: 
    transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), 
    box-shadow 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s ease,
    border-color 0.2s ease;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.4) 0%, transparent 30%),
    radial-gradient(circle at 90% 90%, rgba(25, 83, 158, 0.17) 0%, transparent 40%);
  pointer-events: none;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.card:hover {
  transform: translate(-2px, -2px);
  
  /* Gradiente più intenso all'hover */
  background: 
    radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 1) 0%, transparent 50%),
    radial-gradient(circle at 85% 85%, rgba(25, 83, 158, 0.22) 0%, transparent 50%),
    linear-gradient(135deg, 
      rgba(255, 255, 255, 1) 0%,
      rgba(230, 240, 252, 1) 25%,
      rgba(210, 230, 248, 1) 60%,
      rgba(190, 220, 243, 1) 100%
    );
  
  box-shadow: 
    calc(var(--shadow-distance) + 2px) calc(var(--shadow-distance) + 2px) 0px var(--main-color),
    calc(var(--shadow-distance) * 0.5 + 1px) calc(var(--shadow-distance) * 0.5 + 1px) 0px rgba(0, 0, 0, 0.15),
    inset -3px -3px 12px rgba(255, 255, 255, 1),
    inset 3px 3px 12px rgba(25, 83, 158, 0.2);
}

.card:hover::before {
  opacity: 0.9;
}

.card:active {
  transform: translate(2px, 2px);
  
  /* Luce invertita quando premi */
  background: 
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 1) 0%, transparent 50%),
    linear-gradient(315deg, 
      rgba(210, 230, 246, 1) 0%,
      rgba(225, 238, 250, 1) 50%,
      rgba(238, 245, 252, 1) 100%
    );
  
  box-shadow: 
    2px 2px 0px var(--main-color),
    inset 2px 2px 6px rgba(25, 83, 158, 0.25);
}

.card:active::before {
  opacity: 0.4;
}






/* Banner con contenuto sovrapposto all'immagine - mobile */
@media screen and (max-width: 749px) {

  /* 1. CORREZIONE STRUTTURALE (Il "Motore" che fa funzionare tutto) */
  .slideshow__slide {
    position: relative !important;
    display: block !important;
    min-height: 610px !important;
    overflow: hidden !important;
    visibility: visible !important;
  }

  .slideshow__media {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
  }

  /* Wrapper del testo: Lo forziamo in ALTO (Flex-start) */
  .slideshow__text-wrapper, 
  .banner__content {
    position: absolute !important;
    top: 0 !important;
    left: 20% !important;
    width: 60% !important;
    height: 30% !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: flex-start !important; /* Questo spinge tutto IN ALTO */
    justify-content: center !important; 
    background: transparent !important;
    pointer-events: none !important;
    
  }

  /* 2. IL TUO BOX (Stile + Colore Blu + Posizione) */
  .slideshow__text.banner__box {
    /* Proprietà essenziali per la visibilità */
    position: relative !important;
    z-index: 3 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    pointer-events: auto !important;

    /* POSIZIONE: Quasi in cima */
    margin-top: 2rem !important; 
    bottom: auto !important; /* Sovrascrive il tuo vecchio 'bottom: 1rem' */
    
    /* SFONDO BLU (INVT Blue con leggera trasparenza) */
    background-color: rgb(0, 35, 83) !important;
    
    /* I TUOI VALORI ESATTI DI SPAZIATURA */
    border-radius: 2rem !important;
    padding: 2rem !important;
    width: 90% !important;
  }

  /* 3. I TUOI FONT ORIGINALI */
  /* Titolo */
  .slideshow__text.banner__box h2,
  .slideshow__text.banner__box .slideshow__heading {
    font-size: 2.7rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
    color: white !important;
    word-wrap: break-word !important;
  }

  /* Testo */
  .slideshow__text.banner__box p {
    font-size: 0.9rem !important;
    margin-bottom: 1.2rem !important;
    color: white !important;
    
  }

  /* Bottone */
  .slideshow__text.banner__box .button {
    padding: 0.8rem 2rem !important;
    font-size: 1.5rem !important;
    /* Opzionale: Rendi il bottone bianco su sfondo blu per contrasto */
    background-color: white !important;
    color:rgb(0, 54, 129) !important;
    border: none !important;
  }

  /* Reset sezione (dal tuo codice originale) */
  @media screen and (max-width: 767px) {
    .shopify-section { margin: 0 !important; padding: 0 !important; }
    .slideshow { margin: 0 !important; padding: 0 !important; height: auto !important; min-height: unset !important; }
    .slideshow__slide { margin: 0 !important; padding: 0 !important; display: block !important; }
    .slideshow__slide::after, .slideshow__slide::before { display: none !important; }
  }
}
/* ===== TUO CSS BASE (mobile) ===== */
@media screen and (max-width: 749px) {
.product__title {
  font-size: 2.4em;
  white-space: nowrap;
}

.product-subtitle,
.product-card-subtitle {
  font-weight: 700;
  font-size: 1.9em;
  color: #0e1b4d;
}

.card-subtitle {
  font-size: 1.8rem;
}

.card__heading,
.card__heading a,
.card-information__text h3 {
  font-size: 2.7rem !important;
  white-space: nowrap;
}

.collection .page-width,
.collection-product-grid-wrapper,
#MainContent .page-width {
  max-width: 50%;
}
}
/* ===== RESPONSIVE TABLET (768px - 989px) ===== */
@media screen and (min-width: 768px) and (max-width: 989px) {
  /* Larghezza contenitore */
  .collection .page-width,
  .collection-product-grid-wrapper,
  #MainContent .page-width {
    max-width: 85% !important;
  }
  
  /* Griglia prodotti - 2 colonne */
  .product-grid .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    column-gap: 1.5rem !important;
    row-gap: 2rem !important;
  }
  
  /* Titoli ridotti */
  .card__heading,
  .card__heading a,
  .card-information__text h3 {
    font-size: 1.7rem !important;
    white-space: normal !important;
  }
  
  .product-subtitle,
  .product-card-subtitle {
    font-size: 1.5em !important;
  }
  
  .card-subtitle {
    font-size: 1.4rem !important;
  }
  
  .product__title {
    font-size: 1.2em !important;
    white-space: normal !important;
  }
}

/* ===== RESPONSIVE MOBILE (max 767px) ===== */
@media screen and (max-width: 767px) {
  /* Larghezza contenitore - full width */
  .collection .page-width,
  .collection-product-grid-wrapper,
  #MainContent .page-width {
    max-width: 100% !important;
    padding: 0 1.5rem !important;
  }
  
  /* Griglia prodotti - 1 colonna */
  .product-grid .grid--2-col-tablet-down,
  .product-grid .grid,
  ul.grid.product-grid {
    grid-template-columns: 1fr !important;
    column-gap: 1rem !important;
    row-gap: 2rem !important;
  }
  
  /* Titoli mobile - dimensioni ridotte e wrap */
  .card__heading,
  .card__heading a,
  .card-information__text h3 {
    font-size: 2.2rem !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }
  
  .product-subtitle,
  .product-card-subtitle {
    font-size: 1.2em !important;
    white-space: normal !important;
  }
  
  .card-subtitle {
    font-size: 1.1rem !important;
  }
  
  .product__title {
    font-size: 1.1em !important;
    white-space: normal !important;
  }
  
  /* Card prodotto */
  .card-wrapper {
    width: 100% !important;
  }
  
  .card__inner {
    padding: 1rem !important;
  }
  
  /* Immagini prodotto */
  .card__media,
  .media {
    margin-bottom: 1rem !important;
  }
}

/* ===== MOBILE PICCOLO (max 650px) ===== */
@media screen and (max-width: 637px) {
  .collection .page-width,
  .collection-product-grid-wrapper,
  #MainContent .page-width {
    padding: 0 1rem !important;
  }
  
  .card__heading,
  .card__heading a,
  .card-information__text h3 {
    font-size: 1.3rem !important;
  }
  
  .product-subtitle,
  .product-card-subtitle {
    font-size: 1em !important;
  }
  
  .card-subtitle {
    font-size: 1rem !important;
  }
}

/* ===== LANDSCAPE MOBILE ===== */
@media screen and (max-width: 767px) and (orientation: landscape) {
  .product-grid .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

<style>
  .card__media, .product-card__image, .media {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
   
    padding-right: 0 !important;
  }
  
  .card__media img, .product-card__image img, .media img {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    transform: translateX(2px);
  }
  
  .card-information, .product-card__info, .card__content {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  .price, .product-card__price, .card__price {
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
  }
    
  @media screen and (max-width: 458px) {
  /* Sposta i titoli delle card leggermente a destra */
  
  .card-wrapper .card__information .card__heading {
    margin-left: 4px;
  }

  /* Sposta le immagini delle card leggermente a sinistra */
  .card__media,
  .card-wrapper .card__inner .media {
    margin-left: -13px;
    
  }
   
  .card__heading,
  .product-card__heading,
  [class*="card"] h2,
  [class*="card"] h3 {
    font-size: 0.875rem !important;
    line-height: 1.2;
  }
}

   
  /* Desktop: dimensione grande */
@media (min-width: 989px) {
  .card__heading,
  .product-card__title,
  .card-information__text h3 {
    font-size: clamp(18px, 1.5vw, 24px) !important;







    
</style>




} /* Chiude eventuali errori sopra */

/* 1. ELIMINA IL TITOLO DUPLICATO SOPRA LA FOTO */
/* Cerchiamo il titolo che "galleggia" nell'area immagine e lo spegniamo */
.card__inner .card__heading, 
.card__media .card__heading,
.card__inner h3 {
    display: none !important;
}



/* 3. ALLINEAMENTO CARD E FONDO */
.card, .card__content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.card__information {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    padding-bottom: 15px !important;
}

/* 4. LA CALAMITA PER IL PREZZO E BOTTONE */
.price, 
.card-information, 
.quick-add {
    margin-top: auto !important; /* Spinge tutto sul fondo */
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.quick-add {
    margin-top: 10px !important;
}

/* 5. FIX SPAZIATURA TITOLO */
.card__heading {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    display: block !important;
}
/* ===== HERO SEARCH STYLE APPLIED TO HEADER ===== */
header .search-modal__form .field,
details-modal .search-modal__form .field,
.header__search .search-modal__form .field {
  background: #E1E7FB !important;
  border: 2px solid #323232 !important;
  border-radius: 14px !important;
  box-shadow: 5px 5px 0 #323232 !important;
  overflow: hidden !important;
  transition: box-shadow 0.18s, transform 0.18s !important;
}
header .search-modal__form .field::before,
header .search-modal__form .field::after {
  display: none !important; /* Remove dawn borders */
}
header .search-modal__form .field:focus-within {
  box-shadow: 6px 6px 0 #3E47C7 !important;
  transform: translate(-1px, -1px) !important;
}
header .search-modal__form .field__input {
  background: transparent !important;
  font-family: 'Barlow', sans-serif !important;
  font-weight: 600 !important;
  color: #000 !important;
  padding-left: 20px !important;
}
header .search-modal__form .field__input::placeholder {
  color: #000 !important;
  opacity: 0.55 !important;
}
header .search-modal__form .field__label {
  display: none !important;
}
header .search-modal__form .search__button {
  background: #3E47C7 !important;
  color: #fff !important;
  border: none !important;
  border-left: 2px solid #323232 !important;
  padding: 0 20px !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  width: auto !important;
  min-width: 80px !important;
  cursor: pointer !important;
  right: 0 !important;
  position: relative !important;
  height: 100% !important;
}
header .search-modal__form .search__button:hover {
  background: #2d35a8 !important;
}
header .search-modal__form .search__button svg {
  display: none !important;
}
header .search-modal__form .search__button::after {
  content: "CERCA";
}
header .search-modal__form .reset__button {
  right: 80px !important; /* move close button to left of search button */
}


/* ==================================================================
   GLOBAL BULLETPROOF RESETS FOR HORIZONTAL SCROLL / WHITE GAP
   ================================================================== */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ultra-responsive-product * {
  box-sizing: border-box !important;
}

.ultra-responsive-product img, 
.ultra-responsive-product table, 
.ultra-responsive-product iframe, 
.ultra-responsive-product video {
  max-width: 100% !important;
  height: auto !important;
}

/* =====================================================================
   ULTRA-RESPONSIVE OVERHAUL FOR CUSTOM MEGA-HERO (GD28 & VFAS3)
   RIPROGETTAZIONE COMPLETA — TUTTI I BREAKPOINT
   ===================================================================== */

/* ==================================================================
   BASE DESKTOP (>1200px) — Fix principale: tutto troppo grande
   ================================================================== */
/* GLOBALE: previene lo scroll orizzontale (spazio bianco) causato da 100% su Windows/Mobile */
html, body {
  overflow-x: hidden !important;
}


.ultra-responsive-product .ld-mega-hero-wrapper {
  width: 100% !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  margin-top: -65px !important;
}

/* Rimuove min-height: 850px che gonfia tutto */
.ultra-responsive-product .ld-mega-hero {
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(30px, 4vh, 55px) 0 clamp(10px, 2vh, 30px) 0 !important;
  overflow: visible !important;
}

/* Container principale */
.ultra-responsive-product .ld-mega-container {
  padding: 0 clamp(20px, 3vw, 50px) !important;
  gap: clamp(20px, 3vw, 45px) !important;
  align-items: center !important;
  max-width: 1400px !important;
}

/* Colonna sinistra (immagine) */
.ultra-responsive-product .ld-mega-left {
  gap: clamp(10px, 2vw, 20px) !important;
}

/* Immagine principale — rimuove scale(1.15) e limita altezza */
.ultra-responsive-product .ld-mega-main-img {
  transform: scale(1) !important;
  transform-origin: center !important;
  max-height: clamp(280px, 55vh, 520px) !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

/* Thumbnails laterali */
.ultra-responsive-product .ld-mega-thumb {
  width: clamp(48px, 5.5vh, 68px) !important;
  height: clamp(48px, 5.5vh, 68px) !important;
  padding: 6px !important;
}

/* Colonna destra (testo + prezzo) */
.ultra-responsive-product .ld-mega-right {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Logo brand (INVT) — fix sovrapposizione col titolo */
.ultra-responsive-product .ld-mega-right > img:first-child {
  height: clamp(28px, 3.5vh, 40px) !important;
  max-height: clamp(28px, 3.5vh, 40px) !important;
  margin-bottom: 8px !important;
  margin-top: 0 !important;
}

/* Titolo prodotto — da 70px max a 40px max */
.ultra-responsive-product .ld-mega-title {
  font-size: clamp(22px, 2.8vw, 40px) !important;
  margin-bottom: clamp(8px, 1.5vh, 16px) !important;
  line-height: 1.08 !important;
}

/* Badge specifiche (es. 5.5kW) */
.ultra-responsive-product .ld-mega-spec-badge {
  font-size: clamp(10px, 1.2vw, 12px) !important;
  padding: 4px 10px !important;
}

/* Descrizione breve */
.ultra-responsive-product .ld-mega-desc {
  font-size: clamp(12px, 1.3vw, 14px) !important;
  margin-bottom: clamp(10px, 2vh, 20px) !important;
  line-height: 1.5 !important;
}

/* Titolo sezione "Incluso col prodotto" */
.ultra-responsive-product .ld-mega-benefits-wrap {
  margin-bottom: clamp(10px, 2vh, 20px) !important;
}

.ultra-responsive-product .ld-mb-title {
  font-size: clamp(12px, 1.3vw, 14px) !important;
  padding: 4px 18px !important;
}

/* Griglia 4 box servizi */
.ultra-responsive-product .ld-inc-dash {
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(8px, 1.5vh, 14px) !important;
  margin-bottom: clamp(10px, 2vh, 18px) !important;
}

.ultra-responsive-product .ld-inc-item {
  padding: clamp(10px, 1.5vh, 16px) clamp(10px, 1.5vw, 16px) !important;
  gap: clamp(8px, 1.2vw, 12px) !important;
  border-radius: 14px !important;
}

.ultra-responsive-product .ld-inc-icon {
  width: clamp(28px, 3.5vh, 40px) !important;
  height: clamp(28px, 3.5vh, 40px) !important;
  flex-shrink: 0 !important;
}

.ultra-responsive-product .ld-inc-icon svg {
  width: clamp(14px, 2vh, 20px) !important;
  height: clamp(14px, 2vh, 20px) !important;
}

.ultra-responsive-product .ld-inc-title {
  font-size: clamp(11px, 1.3vw, 13px) !important;
  line-height: 1.2 !important;
}

.ultra-responsive-product .ld-inc-desc {
  font-size: clamp(10px, 1.1vw, 12px) !important;
  line-height: 1.4 !important;
}

/* Banner Transizione 5.0 */
.ultra-responsive-product .ld-iper-banner {
  padding: clamp(8px, 1.2vh, 14px) clamp(12px, 1.5vw, 20px) !important;
  min-height: auto !important;
  margin-bottom: clamp(8px, 1.5vh, 14px) !important;
  border-radius: 14px !important;
}

.ultra-responsive-product .ld-iper-badge {
  font-size: clamp(8px, 0.9vw, 10px) !important;
  padding: 2px 8px !important;
}

.ultra-responsive-product .ld-iper-hook {
  font-size: clamp(11px, 1.2vw, 13px) !important;
}

.ultra-responsive-product .ld-iper-link {
  font-size: clamp(10px, 1.1vw, 12px) !important;
  padding: 6px 12px !important;
  white-space: nowrap !important;
}

/* Box prezzo + ATC */
.ultra-responsive-product .ld-mega-purchase-row {
  margin-top: 0 !important;
  margin-bottom: clamp(8px, 1.5vh, 16px) !important;
}

.ultra-responsive-product .ld-mega-price-box {
  padding: clamp(12px, 1.8vh, 20px) clamp(14px, 2vw, 22px) !important;
}

.ultra-responsive-product .ld-mega-price {
  font-size: clamp(26px, 3vw, 36px) !important; /* da 46px fisso */
  margin-bottom: clamp(6px, 1vh, 12px) !important;
  flex-wrap: wrap !important;
}

.ultra-responsive-product .ld-mega-price .currency {
  font-size: clamp(20px, 2.5vw, 28px) !important;
}

.ultra-responsive-product .ld-mega-price .cents {
  font-size: clamp(16px, 2vw, 22px) !important;
}

.ultra-responsive-product .ld-mega-price .vat {
  font-size: clamp(9px, 1vw, 11px) !important;
  margin-left: 6px !important;
}

.ultra-responsive-product .ld-qty-selector {
  height: clamp(28px, 3.5vh, 34px) !important;
}

.ultra-responsive-product .ld-qty-selector button {
  width: clamp(26px, 3vw, 32px) !important;
  font-size: clamp(14px, 1.8vh, 17px) !important;
}

.ultra-responsive-product .ld-qty-selector input {
  width: clamp(32px, 3.5vw, 40px) !important;
  font-size: clamp(12px, 1.5vh, 14px) !important;
}

.ultra-responsive-product .ld-mega-stock {
  font-size: clamp(11px, 1.2vw, 13px) !important;
  margin-bottom: 8px !important;
}

.ultra-responsive-product #ld5-ship-wrap {
  font-size: clamp(11px, 1.2vw, 13px) !important;
  padding: 8px 14px !important;
  border-radius: 16px !important;
}

.ultra-responsive-product .ld-mega-actions {
  padding: clamp(12px, 1.8vh, 20px) clamp(14px, 2vw, 22px) !important;
  gap: clamp(8px, 1.2vh, 14px) !important;
}

.ultra-responsive-product .product-form__submit,
.ultra-responsive-product button[name="add"],
.ultra-responsive-product .ld-mega-btn-quote {
  height: clamp(40px, 5vh, 50px) !important;
  min-height: clamp(40px, 5vh, 50px) !important;
  font-size: clamp(12px, 1.4vw, 14px) !important;
}

.ultra-responsive-product .ld-mega-links {
  margin-top: clamp(10px, 1.5vh, 16px) !important;
  padding-top: clamp(10px, 1.5vh, 16px) !important;
  gap: clamp(14px, 2vw, 24px) !important;
}

.ultra-responsive-product .ld-mega-link {
  font-size: clamp(11px, 1.1vw, 13px) !important;
}

/* Bottom row (feature banner + old content) */
.ultra-responsive-product .ld-mega-bottom-row {
  margin: clamp(30px, 5vh, 60px) auto clamp(20px, 4vh, 40px) !important;
  padding: 0 clamp(20px, 3vw, 40px) !important;
  gap: clamp(20px, 3vw, 30px) !important;
}

.ultra-responsive-product .ld-feature-banner {
  padding: clamp(24px, 3vw, 36px) !important;
  gap: clamp(15px, 2vh, 22px) !important;
}

.ultra-responsive-product .ld-fb-headline {
  font-size: clamp(20px, 2.5vw, 28px) !important;
}

.ultra-responsive-product .ld-fb-item-title {
  font-size: clamp(12px, 1.3vw, 14px) !important;
}

.ultra-responsive-product .ld-fb-item-desc {
  font-size: clamp(11px, 1.1vw, 12px) !important;
}

/* Mega Tabs */
.ultra-responsive-product .ld-mega-tab {
  padding: clamp(12px, 1.5vh, 18px) clamp(14px, 1.5vw, 20px) !important;
  font-size: clamp(12px, 1.2vw, 14px) !important;
}

.ultra-responsive-product .ld-mega-tabs-body {
  padding: clamp(18px, 2.5vh, 28px) !important;
}


/* ==================================================================
   TABLET LANDSCAPE (989px – 1200px)
   ================================================================== */
@media screen and (min-width: 989px) and (max-width: 1200px) {
  .ultra-responsive-product .ld-mega-container {
    gap: 20px !important;
    padding: 0 20px !important;
  }

  .ultra-responsive-product .ld-mega-title {
    font-size: clamp(20px, 2.5vw, 32px) !important;
  }

  .ultra-responsive-product .ld-mega-main-img {
    max-height: clamp(240px, 50vh, 420px) !important;
  }

  .ultra-responsive-product .ld-mega-price {
    font-size: clamp(22px, 2.8vw, 30px) !important;
  }

  .ultra-responsive-product .ld-inc-title {
    font-size: 11px !important;
  }

  .ultra-responsive-product .ld-inc-desc {
    font-size: 10px !important;
  }
}


/* ==================================================================
   TABLET PORTRAIT / TRANSIZIONE (769px – 988px)
   ================================================================== */
@media screen and (max-width: 988px) {
  .ultra-responsive-product .ld-mega-hero {
    padding: 20px 0 !important;
  }

  .ultra-responsive-product .ld-mega-container {
    flex-direction: column !important;
    padding: 0 20px !important;
    gap: 20px !important;
  }

  .ultra-responsive-product .ld-mega-left {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-height: none !important;
  }

  .ultra-responsive-product .ld-mega-thumbs {
    flex-direction: row !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    order: 2 !important;
  }

  .ultra-responsive-product .ld-mega-main-img-wrap {
    order: 1 !important;
    width: 100% !important;
  }

  .ultra-responsive-product .ld-mega-main-img {
    max-height: 40vh !important;
    -webkit-box-reflect: none !important;
  }

  .ultra-responsive-product .ld-mega-right {
    width: 100% !important;
  }

  .ultra-responsive-product .ld-mega-title {
    font-size: clamp(22px, 4vw, 32px) !important;
  }

  .ultra-responsive-product .ld-mega-bg-blueprint {
    width: 100% !important;
    opacity: 0.06 !important;
  }

  .ultra-responsive-product .ld-mega-bg-fade {
    left: 0 !important;
    background: linear-gradient(to top, #d8e0ea 0%, transparent 20%) !important;
  }

  .ultra-responsive-product .ld-mega-bottom-row {
    grid-template-columns: 1fr !important;
    margin: 20px auto !important;
    padding: 0 20px !important;
  }
}


/* ==================================================================
   MOBILE LANDSCAPE (657px – 768px)
   ================================================================== */
@media screen and (max-width: 768px) {
  .ultra-responsive-product .ld-mega-title {
    font-size: clamp(20px, 4vw, 26px) !important;
  }

  .ultra-responsive-product .ld-mega-main-img {
    max-height: 35vh !important;
  }

  .ultra-responsive-product .ld-mega-thumb {
    width: 40px !important;
    height: 40px !important;
  }

  .ultra-responsive-product .ld-mega-price {
    font-size: clamp(22px, 5vw, 28px) !important;
  }
}


/* ==================================================================
   MOBILE PORTRAIT (517px – 656px)
   ================================================================== */
@media screen and (max-width: 656px) {
  .ultra-responsive-product .ld-mega-container {
    padding: 0 14px !important;
    gap: 14px !important;
  }

  /* FIX ORDINE: mostra titolo/info PRIMA dell'immagine */
  .ultra-responsive-product .ld-mega-left {
    order: 2 !important;
  }

  .ultra-responsive-product .ld-mega-right {
    order: 1 !important;
  }

  .ultra-responsive-product .ld-mega-title {
    font-size: clamp(18px, 5vw, 24px) !important;
  }

  /* Fix logo INVT che si sovrappone */
  .ultra-responsive-product .ld-mega-right > img:first-child {
    height: 24px !important;
    max-height: 24px !important;
    margin-bottom: 6px !important;
  }

  .ultra-responsive-product .ld-mega-main-img {
    max-height: 38vh !important;
  }

  .ultra-responsive-product .ld-mega-thumb {
    width: 36px !important;
    height: 36px !important;
    padding: 4px !important;
  }

  /* Box servizi: 1 colonna su mobile portrait */
  .ultra-responsive-product .ld-inc-dash {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .ultra-responsive-product .ld-inc-item {
    flex-direction: row !important;
    padding: 10px 12px !important;
  }

  .ultra-responsive-product .ld-inc-title {
    font-size: 13px !important;
  }

  .ultra-responsive-product .ld-inc-desc {
    font-size: 12px !important;
  }

  .ultra-responsive-product .ld-mega-price {
    font-size: clamp(24px, 6vw, 30px) !important;
  }

  .ultra-responsive-product .ld-iper-banner {
    flex-direction: column !important;
    text-align: center !important;
    gap: 8px !important;
  }

  .ultra-responsive-product .ld-iper-content {
    flex-direction: column !important;
    gap: 4px !important;
  }

  .ultra-responsive-product .ld-mega-purchase-row {
    flex-direction: column !important;
  }

  .ultra-responsive-product .ld-mega-price-box {
    border-right: none !important;
    border-bottom: 1px solid rgba(203,213,225,0.8) !important;
  }

  .ultra-responsive-product .ld-mega-links {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
}


/* ==================================================================
   SMALL MOBILE (<516px)
   ================================================================== */
@media screen and (max-width: 516px) {
  /* Disabilita 100% su mobile per evitare overflow, usa calc */
  .ultra-responsive-product .ld-mega-hero-wrapper {
    width: calc(100% + 30px) !important;
    left: auto !important;
    right: auto !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
  }

  .ultra-responsive-product .ld-mega-container {
    padding: 0 12px !important;
    gap: 12px !important;
  }

  .ultra-responsive-product .ld-mega-title {
    font-size: clamp(17px, 5.5vw, 21px) !important;
    letter-spacing: -0.5px !important;
  }

  .ultra-responsive-product .ld-mega-main-img {
    max-height: 32vh !important;
  }

  /* Breadcrumb fix — evita overflow orizzontale */
  .breadcrumb {
    font-size: 11px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow: hidden !important;
  }

  .breadcrumb__list {
    flex-wrap: wrap !important;
  }

  /* WhatsApp/chat button: più piccolo e meno invasivo */
  #smartsupp-widget-container,
  .shopify-chat-button,
  [data-testid="chat-widget"] {
    transform: scale(0.8) !important;
    transform-origin: bottom right !important;
  }

  /* Riduce dimensioni del widget WhatsApp fluttuante */
  .wh-widget-open-button,
  .wh-widget-send-btn {
    transform: scale(0.8) !important;
    transform-origin: bottom right !important;
  }

  .ultra-responsive-product .ld-mega-price {
    font-size: clamp(22px, 7vw, 28px) !important;
  }

  .ultra-responsive-product .ld-mega-thumb {
    width: 30px !important;
    height: 30px !important;
    padding: 3px !important;
  }

  .ultra-responsive-product .ld-inc-icon {
    width: 24px !important;
    height: 24px !important;
  }

  .ultra-responsive-product .ld-inc-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  .ultra-responsive-product .ld-mega-bottom-row {
    padding: 0 12px !important;
  }

  .ultra-responsive-product .ld-feature-banner {
    padding: 18px !important;
  }

  .ultra-responsive-product .ld-fb-items {
    grid-template-columns: 1fr !important;
  }
}


/* ==================================================================
   FIX CAROSELLO HEADER (Evita spazio bianco orizzontale)
   ================================================================== */
.ldns-bar {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.ldns-track {
  width: max-content !important;
}


/* ==================================================================
   FIX OVERFLOW MENU/DRAWER (Evita spazio bianco orizzontale)
   ================================================================== */
@media screen and (max-width: 989px) {
  .header__inline-menu,
  .ld-search-row,
  .ld-search-wrap {
    /* Sovrascrive left: -509px che causava ricalcolo scrollWidth a sinistra */
    left: 0 !important;
    transform: translateX(-100%) !important;
  }
  
  /* Se il tema usa una classe per aprirlo (es. menu-open, active) */
  .header__inline-menu[open],
  .header__inline-menu.is-open,
  .header__inline-menu.active,
  .ld-search-row.active,
  .ld-search-wrap.active {
    transform: translateX(0) !important;
  }
}


/* ==================================================================
   FIX OVERFLOW GRIGLIA ACCESSORI (.ld-acc-grid)
   ================================================================== */
@media screen and (max-width: 749px) {
  .ld-acc-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

@media screen and (max-width: 480px) {
  .ld-acc-grid {
    grid-template-columns: 1fr !important;
  }
}

.ld5-acc {
  min-width: 0 !important;
  width: auto !important;
}


/* ==================================================================
   REDUCE SIZES ON TABLET & MOBILE (Immagine, Container Blu, Tabs)
   ================================================================== */
@media screen and (max-width: 988px) {
  /* 1. Immagine del prodotto molto più piccola e centrata */
  .ultra-responsive-product .ld-mega-main-img {
    max-height: 25vh !important;
    max-width: 60% !important;
    margin: 0 auto !important;
  }
  
  /* 2. Container blu (Perché scegliere GD28) più compatto */
  .ultra-responsive-product .ld-feature-banner {
    padding: 16px 20px !important;
    gap: 12px !important;
  }
  .ultra-responsive-product .ld-fb-headline {
    font-size: clamp(16px, 4vw, 20px) !important;
    margin-bottom: 8px !important;
  }
  .ultra-responsive-product .ld-fb-item-title {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }
  .ultra-responsive-product .ld-fb-item-desc {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
  
  /* 3. Container adiacente (Tabs Accessori / Specifiche) più compatto */
  .ultra-responsive-product .ld-mega-tabs-body {
    padding: 12px 16px !important;
  }
  .ultra-responsive-product .ld-mega-tab {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
}

@media screen and (max-width: 516px) {
  /* Riduzioni estreme per cellulari piccoli */
  .ultra-responsive-product .ld-mega-main-img {
    max-height: 20vh !important;
    max-width: 70% !important;
  }
  
  .ultra-responsive-product .ld-feature-banner {
    padding: 12px 16px !important;
  }
  
  .ultra-responsive-product .ld-mega-tabs-body {
    padding: 10px 12px !important;
  }
}


/* ==================================================================
   BRUTE FORCE REDUCE SIZES - ld-feature-banner & ld-mega-tabs-container
   ================================================================== */
@media screen and (max-width: 988px) {
  /* 1. Immagine del prodotto drastica riduzione */
  .ld-mega-main-img-wrap,
  .ultra-responsive-product .ld-mega-main-img-wrap {
    max-height: 25vh !important;
    max-width: 50% !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
  }
  .ld-mega-main-img-wrap img {
    max-height: 25vh !important;
    width: auto !important;
    object-fit: contain !important;
  }
  
  /* 2. Container blu (Perché scegliere GD28) */
  .ld-feature-banner,
  .ultra-responsive-product .ld-feature-banner {
    padding: 12px !important;
    gap: 8px !important;
  }
  .ld-feature-banner h2,
  .ld-feature-banner .ld-fb-headline,
  .ld-fb-headline {
    font-size: 16px !important;
    margin-bottom: 6px !important;
  }
  .ld-feature-banner .ld-fb-item-title {
    font-size: 12px !important;
    margin-bottom: 2px !important;
  }
  .ld-feature-banner .ld-fb-item-desc {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
  .ld-feature-banner svg,
  .ld-feature-banner img {
    width: 24px !important;
    height: 24px !important;
  }
  
  /* 3. Container adiacente (Tabs Accessori / Specifiche) */
  .ld-mega-tabs-container,
  .ultra-responsive-product .ld-mega-tabs-container {
    padding: 8px !important;
    margin-top: 10px !important;
  }
  .ld-mega-tabs-container .ld-mega-tab {
    padding: 8px 10px !important;
    font-size: 11px !important;
  }
  .ld-mega-tabs-container .ld-mega-tabs-body {
    padding: 10px !important;
  }
}

@media screen and (max-width: 516px) {
  .ld-mega-main-img-wrap,
  .ultra-responsive-product .ld-mega-main-img-wrap {
    max-height: 20vh !important;
    max-width: 60% !important;
  }
  .ld-mega-main-img-wrap img {
    max-height: 20vh !important;
  }
  
  .ld-feature-banner,
  .ultra-responsive-product .ld-feature-banner {
    padding: 10px !important;
  }
  .ld-feature-banner h2,
  .ld-feature-banner .ld-fb-headline {
    font-size: 14px !important;
  }
  
  .ld-mega-tabs-container,
  .ultra-responsive-product .ld-mega-tabs-container {
    padding: 6px !important;
  }
}


/* ==================================================================
   TARGETED FIX FOR HORIZONTAL OVERFLOW (DIAGNOSIS SCRIPT)
   ================================================================== */
/* 1. Lottie SVG con larghezza 1000px fissa */
.ld-atc-inner svg, .ld-atc-outer svg {
  max-width: 100% !important;
  height: auto !important;
}

/* 2. ldns-bar senza overflow hidden funzionante */
.ldns-bar, .announcement-bar-section {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 3. ld-feature-banner che non va a capo (flex-wrap: nowrap default) */
@media screen and (max-width: 768px) {
  .ultra-responsive-product .ld-feature-banner,
  .ld-feature-banner {
    flex-direction: column !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .ultra-responsive-product .ld-fb-items,
  .ld-fb-items {
    grid-template-columns: 1fr !important;
    display: grid !important;
    max-width: 100% !important;
  }

  .ultra-responsive-product .ld-mega-bottom-row,
  .ultra-responsive-product .ld-old-content,
  .ultra-responsive-product .ld-mega-tabs-container {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
}

/* 4. ld-acc-grid overflow per larghezza figli */
.ld-acc-grid {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
.ld5-acc {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}


/* ==================================================================
   FINAL ROOT CAUSE MOBILE OVERFLOW FIXES
   ================================================================== */
@media screen and (max-width: 749px) {
  /* 1. ldns-bar and track (Marquee) */
  html body .ldns-bar, html body .announcement-bar-section {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  
  /* 2. Lottie SVG */
  html body .ld-atc-inner svg, html body .ld-atc-outer svg {
    max-width: 100% !important;
    height: auto !important;
  }
  html body .ld-atc-inner, html body .ld-atc-outer {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* 3. Feature banner and content wrappers */
  html body .ultra-responsive-product .ld-feature-banner {
    min-width: 0 !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  html body .ultra-responsive-product .ld-fb-left, 
  html body .ultra-responsive-product .ld-fb-items, 
  html body .ultra-responsive-product .ld-fb-headline {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 4. Tabs and Headers */
  html body .ultra-responsive-product .ld-mega-tabs-header {
    display: flex !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  html body .ultra-responsive-product .ld-mega-tabs-container, 
  html body .ultra-responsive-product .ld-mega-tabs-body, 
  html body .ultra-responsive-product .ld-old-content,
  html body .ultra-responsive-product .ld-mega-bottom-row {
    min-width: 0 !important;
  }
  html body .ultra-responsive-product .ld-mega-tabs-container, 
  html body .ultra-responsive-product .ld-mega-tabs-body, 
  html body .ultra-responsive-product .ld-old-content,
  html body .ultra-responsive-product .ld-mega-bottom-row,
  html body .product__description,
  html body .product__info-wrapper,
  html body .product.product--medium {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* 5. Accessories Grid */
  html body .ultra-responsive-product .ld-acc-grid {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  html body .ultra-responsive-product .ld5-acc {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}


/* ==================================================================
   ULTIMATE IOS/MOBILE OVERFLOW KILLER (DO NOT REMOVE)
   ================================================================== */
@media screen and (max-width: 768px) {
  /* 1. Force the Main container to NEVER overflow (fixes iOS Safari bug) */
  html, body, main, #MainContent, .shopify-section {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  /* 2. Feature Banner: Force 1 column for everything */
  html body .ultra-responsive-product .ld-feature-banner {
    min-width: 0 !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 20px 15px !important; /* ensure padding doesn't push it out */
    overflow: hidden !important;
  }
  
  html body .ultra-responsive-product .ld-fb-items {
    display: flex !important;
    flex-direction: column !important; /* Force items to stack vertically */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 15px !important;
  }
  
  html body .ultra-responsive-product .ld-fb-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body .ultra-responsive-product .ld-fb-left, 
  html body .ultra-responsive-product .ld-fb-headline {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* 3. Lottie SVG */
  html body .ld-atc-inner svg, html body .ld-atc-outer svg {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  html body .ld-atc-inner, html body .ld-atc-outer {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* 4. Tabs */
  html body .ultra-responsive-product .ld-mega-tabs-header {
    display: flex !important;
    flex-wrap: wrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* 5. Accessories Grid */
  html body .ultra-responsive-product .ld-acc-grid {
    display: flex !important;
    flex-direction: column !important; /* Force 1 column on mobile */
    max-width: 100% !important;
    overflow: hidden !important;
    gap: 15px !important;
  }
  
  html body .ultra-responsive-product .ld5-acc {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* 6. Marquee Ticker */
  html body .ldns-bar, html body .announcement-bar-section {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
  }
}


/* KILL HERO WRAPPER OVERFLOW ON MOBILE */
@media screen and (max-width: 768px) {
  html body .ld-mega-hero-wrapper,
  html body .ultra-responsive-product .ld-mega-hero-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
  }
}