/** Shopify CDN: Minification failed

Line 458:0 Unexpected "<"
Line 525:0 Expected identifier but found "<"
Line 578:1 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;
    white-space: nowrap !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;
    white-space: nowrap !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;
}