/* Manteniamo i tuoi stili */
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Poppins', sans-serif;
      background-color: #f5f5f5;
      color: #333;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px 20px;
      min-height: 100vh;
      position: relative;
    }

	.info-section { padding: 40px 20px; background: white; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
	.info-section h1 { margin: 0; color: #333; }
	.info-section h2 { font-size: 1.1rem; color: #666; font-weight: normal; margin-top: 10px; }

    .home-button {
      position: absolute;
      top: 20px;
      left: 20px;
      transition: transform 0.2s ease;
      z-index: 100;
    }

    .home-button img {
      width: 50px;
      height: auto;
      border-radius: 8px;
    }

    .home-button:hover { transform: scale(1.1); }

    h1 { font-size: 2rem; margin-bottom: 30px; color: #222; text-align: center; margin-top: 20px; }
    
    .gallery { 
      display: grid; 
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 
      gap: 20px; 
      width: 100%; 
      max-width: 1200px; 
      margin-bottom: 30px; 
    }

    .gallery img { 
      width: 100%; 
      height: 250px; 
      object-fit: cover; 
      border-radius: 15px; 
      transition: transform 0.3s ease, box-shadow 0.3s ease; 
      cursor: pointer; 
      background-color: #ddd; /* Placeholder mentre carica */
    }

    .gallery img:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); }

    .pagination { display: flex; justify-content: center; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
    .pagination button { background-color: #222; color: #fff; border: none; padding: 10px 16px; border-radius: 8px; font-size: 1rem; cursor: pointer; }
    .pagination button:disabled { background-color: #aaa; cursor: not-allowed; }
    
    .page-counter { font-size: 1rem; color: #444; margin-bottom: 20px; }
    footer { margin-top: 40px; font-size: 0.9rem; color: #666; }

    /* Stile Overlay per immagine grande */
    .overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.9);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      cursor: zoom-out;
      animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    .overlay img {
      max-width: 90%;
      max-height: 90%;
      border-radius: 10px;
      box-shadow: 0 0 30px rgba(0,0,0,0.5);
    }
	
        /* Reset e Stili Generali */
        body { font-family: Verdana, sans-serif; text-align: center; background: #f4f4f4; margin: 0; padding: 0; }
        
        .info-section { padding: 40px 20px; background: white; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
        .info-section h1 { margin: 0; color: #333; }
        .info-section h2 { font-size: 1.1rem; color: #666; font-weight: normal; margin-top: 10px; }

        .container { 
            display: flex; 
            flex-wrap: wrap; 
            justify-content: center; 
            gap: 25px; 
            padding: 20px; 
            max-width: 1200px; 
            margin: 0 auto; 
        }

        /* Stile Card */
        .card { 
            width: 280px; 
            background: white; 
            border-radius: 12px; 
            overflow: hidden; 
            box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
            transition: all 0.3s ease; 
            text-decoration: none; 
            color: black; 
            display: flex; 
            flex-direction: column; 
            align-items: center;
            padding: 20px 0;
        }

        .card:hover { 
            transform: translateY(-10px); 
            box-shadow: 0 12px 20px rgba(0,0,0,0.15);
            background: #fff;
        }

        /* Gestione Immagine Scudetto */
        .card img { 
            width: 50px; /* Dimensione fissa ideale per gli scudetti */
            height: auto; 
            object-fit: contain; 
            transition: 0.3s;
        }

        .card h3 { 
            padding: 15px 0 0; 
            margin: 0; 
            font-size: 1.4rem;
            color: #222;
        }

        footer { padding: 40px; color: #888; font-size: 0.9rem; }

        /* Media Query per Tablet e Cellulari */
        @media screen and (max-width: 768px) {
            .container { padding: 15px; gap: 15px; }
            .card { 
                width: 100%; /* Una card per fila su mobile */
                flex: 0 0 100%; 
                flex-direction: row; /* Opzionale: scudetto a sinistra e testo a destra su mobile */
                justify-content: flex-start;
                padding: 15px;
            }
            .card img { width: 60px; height: 60px; margin-left: 20px; }
            .card h3 { padding: 0 0 0 20px; }
        }
		
		footer { 
		padding: 40px; 
		color: #888; 
		font-size: 0.9rem; 
		}

		.footer-link {
			color: #555; /* Un grigio più scuro del resto del testo */
			text-decoration: none; /* Rimuove la sottolineatura */
			font-weight: bold;
			transition: 0.3s;
		}

		.footer-link:hover {
			color: #007bff; /* Cambia colore quando ci passi sopra col mouse */
			text-decoration: underline;
		}

		.footer-note {
			max-width: 800px;
			margin: 40px auto 20px;
			padding: 20px;
			border-top: 1px solid #ddd;
			font-size: 0.85rem;
			color: #777;
			line-height: 1.5;
			text-align: justify;
		}

		.footer-note b {
			color: #444;
		}
	
		
		/* Impedisce la comparsa del menu di salvataggio su molti browser mobile */
		img {
			-webkit-touch-callout: none; 
			-webkit-user-select: none;
			user-select: none;
			pointer-events: auto; /* Permette comunque il click per il lightbox */
		}

		/* Impedisce il trascinamento globale delle immagini */
		img {
			-webkit-user-drag: none;
		}

		.btn-paypal {
		display: flex;
		align-items: center;
		background-color: #0070ba;
		color: white;
		padding: 10px 24px;
		border: none;
		border-radius: 6px;
		font-weight: bold;
		font-size: 16px;
		cursor: pointer;
		transition: transform 0.2s, background 0.3s;
		}

		.btn-paypal:hover {
			background-color: #005ea6;
			transform: scale(1.03); /* Un leggero ingrandimento al passaggio del mouse */
		}

		.btn-paypal svg {
			flex-shrink: 0; /* Impedisce all'icona di restringersi */
		}
	
		/* Overlay di sfondo */
		.overlay {
		  position: fixed;
		  top: 0; left: 0; width: 100%; height: 100%;
		  background: rgba(0,0,0,0.9);
		  display: flex; align-items: center; justify-content: center;
		  z-index: 1000;
		}

		.lightbox-container {
		  position: relative;
		  max-width: 90%;
		  max-height: 90%;
		}

		.lightbox-container img {
		  max-width: 100%;
		  max-height: 90vh;
		  border: 3px solid white;
		}

		/* Pulsanti di navigazione */
		.lightbox-nav {
		  position: absolute;
		  top: 50%;
		  transform: translateY(-50%);
		  background: rgba(255,255,255,0.2);
		  color: white;
		  padding: 20px 15px;
		  cursor: pointer;
		  font-size: 2rem;
		  user-select: none;
		  transition: 0.3s;
		}

		.lightbox-nav:hover { background: rgba(255,255,255,0.5); }
		.prev { left: -60px; }
		.next { right: -60px; }

		.lightbox-close {
		  position: absolute;
		  top: -40px;
		  right: 0;
		  color: white;
		  font-size: 1.5rem;
		  cursor: pointer;
		}

		/* Adattamento per mobile */
		@media (max-width: 768px) {
		  .prev { left: 10px; }
		  .next { right: 10px; }
		  .lightbox-nav { background: rgba(0,0,0,0.4); }
		}
		.lightbox-download {
		  position: absolute;
		  bottom: -45px; /* Lo posiziona sotto l'immagine */
		  left: 50%;
		  transform: translateX(-50%);
		  background-color: #28a745; /* Verde per il download */
		  color: white;
		  padding: 10px 20px;
		  text-decoration: none;
		  border-radius: 5px;
		  font-family: sans-serif;
		  font-weight: bold;
		  font-size: 0.9rem;
		  transition: background 0.3s;
		  white-space: nowrap;
		}

		.lightbox-download:hover {
		  background-color: #218838;
		  color: #fff;
		}

		/* Regola extra per dare spazio al pulsante in fondo */
		.lightbox-container {
		  margin-bottom: 50px; 
		}