:root {

            --bg-body: #f4f7f9;       /* Azzurrino chiarissimo, quasi bianco */
            --bg-card: #ffffff;       /* Card bianche per pulizia totale */
            --text-main: #2c3e50;     /* Grigio bluastro scuro per i testi */
            --text-dim: #5a6c7d;      /* Grigio medio per descrizioni */
            --accent-blue: #007bff;   /* Azzurro vivace */
            --accent-dark-blue: #004085; /* Blu scuro per i titoli */
            --accent-orange: #ff9900; /* Il tocco arancione "King" */
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Ombra morbida */

        }



        body {

            font-family: 'Poppins', sans-serif;

            margin: 0;

            padding: 0;

            background-color: var(--bg-body) !important;
    		color: var(--text-main) !important;

            scroll-behavior: smooth;

        }

        #backToTop {/*Pulsante torna su. Legato a un codice javascript*/

            display: none; /* Nascosto di default, appare appena l'utente comincia ascrollare */

            position: fixed;/*rimane fisso in un punto anche se l'utente scrolla*/

            bottom: 20px; /*posizionamento in basso a distanza di */

            right: 20px; /*posizionamento a destra di */

            z-index: 99; /*garantisce che il pulsante stia sopra tutti gli elementi*/

            border: none;

            outline: none;

            background-color: #2196f3; /* Il tuo blu accent */

            color: white;

            cursor: pointer; /*fa apparire la manina sul pulsante*/

            padding: 10px;

            border-radius: 50%;

            width: 45px;

            height: 45px;

            box-shadow: 0 4px 10px rgba(0,0,0,0.3);

            transition: 0.3s; /*legata a :hover, tempo di animazione*/

          }



          #backToTop:hover {

            background-color: #e91e63; /* Diventa rosa al passaggio */

            transform: translateY(-5px);/*sposta l'elemento lungo l'asse Y*/

          }



          #backToTop svg {/*Questo selettore dice al browser: "Applica questi stili solo all'elemento <svg> che si trova dentro l'elemento con ID #backToTop*/

            fill: white;

            width: 24px;

            height: 24px;

          }

        /* --- CARD PRODOTTO --- */

        /* Questo serve per affiancarle e non farle diventare giganti */

        .vetrina-prodotti {

            display: grid;/*Attiva il sistema "CSS Grid"*/

            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));/*definisce il numero di colonne almeno da 300px*/

            gap: 20px;/*distanza tra un prodotto e l'altro*/

            padding: 20px;

            max-width: 1200px; /* Evita che la griglia si allarghi troppo su PC */

            margin: 0 auto;/*Centra l'intero blocco della vetrina orizzontalmente nella pagina.*/

        }



        /* Regola la card per non farla esplodere */

        .prodotto-card {
            width: 100%;
            max-width: 320px; /* Larghezza simile a quella del tuo esempio */
            background: var(--bg-card) !important;
            border: none; /* Rimuoviamo il bordo scuro */
            box-shadow: var(--shadow);
            border-radius: 15px;
            margin: 0 auto; /* Centra la card se ce n'è solo una */

        }



        .prodotto-card:hover {

            transform: translateY(-5px);

        }



        /* Testata Card */

        .card-header {
            background: #2c2c2e;
            padding: 10px 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;

        }

        /* Colore Standard (già esistente per TECH o altri) */

        .badge-tech {

            background: #e91e63; /* Il tuo rosa/fuxia attuale */
            color: white;/*colore del testo*/
            padding: 4px 10px;
            border-radius: 4px;/*arrotondamento degli angoli*/
            font-size: 12px;
            font-weight: bold;
            text-transform: uppercase;

        }



  /* Colore specifico per CASA (Arancio) */

       .badge-tech.badge-casa {

    background: #ff9800 !important;/*"important" Dice al browser di ignorare qualsiasi altra regola di priorità (specificità) e di applicare questo colore a tutti i costi.*/

}



        /* Colore specifico per ALIMENTARI (Blu chiaro) - Forza il colore se abbinato a badge-tech */

        .badge-tech.badge-alimentari {

            background: #03a9f4 !important;

        }

        /* ERRORE DI PREZZO (Rosso Intenso) */

        .badge-tech.badge-errore-prezzo {

            background: #E63946 !important;
            animation: pulse 1.5s infinite; /* Effetto lampeggiante opzionale */

        }



        /* BLACK FRIDAY (Nero e Oro) */

        .badge-tech.badge-black-friday {

            background: #000000 !important;
            color: #f3ce72 !important;
            border: 1px solid #f3ce72;

        }



        /* PRIME DAY (Amazon Blue) */

        .badge-tech.badge-prime-day {

            background: #00a8e1 !important;

        }



        /* Animazione per l'errore di prezzo */

        @keyframes pulse {

            0% { transform: scale(1); }

            50% { transform: scale(1.05); }

            100% { transform: scale(1); }

        }



        .form-container, .preview-container {

            background: var(--bg-card);

            padding: 30px;

            border-radius: 20px;

            box-shadow: 0 10px 30px rgba(0,0,0,0.5);

        }
        
        .data-post {

            color: #a0a0a0;                
            font-size: 12px;

        }



        /* Immagine */

        .prodotto-img-container {
            width: 100%;
            max-width: 100%;       /* ...ma assolutamente non un pixel di più */
    		box-sizing: border-box;
            height: 250px; /* Altezza fissa dell'area bianca bk200*/
            background: white;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 15px; /* Crea un cuscinetto per evitare che l'immagine tocchi i bordi */
    		/*border-top-left-radius: 12px; /* Opzionale: smussa gli angoli dell'area bianca */
    		/*border-top-right-radius: 12px;*/
            border-radius: 8px;
        }



        .img-prod {

            max-width: 100%;

            max-height: 100%;

            object-fit: cover; /* Se le immagini sono quadrate, riempiono meglio il box */

            width: auto;

            height: 90%; /* Occupa quasi tutta l'altezza del box bianco */            

            object-fit: contain !important;

            margin: auto;
            overflow: hidden; 
    		display: flex;
    		flex-direction: column;

        }



        /* Dettagli */

        .card-dettagli {

            padding: 8px 12px; /* Molto più stretto */

        }



        .titolo-prodotto {

            font-size: 15px; /* Leggermente più piccolo per stare su meno righe */
            margin-bottom: 4px; /* Quasi attaccato al prezzo */
            line-height: 1.2;
            height: auto; /* Rimuoviamo l'altezza fissa per evitare spazi vuoti */
            color: var(--text-main) !important;
            font-weight: 600;
            /*height: 42px;*/
            overflow: hidden;

        }



        .prezzo-attuale {

            font-size: 24px;
            margin: 0; 
    		line-height: 1;
            color: var(--accent-blue) !important; /* Prezzi azzurro vivace */
            font-weight: bold;

        }



        .prezzo-cent {

            font-size: 18px;

            vertical-align: super;

        }



        /* Sconti e Icone */

       .prezzo-sconto-box {

            display: flex;

            align-items: center;

            gap: 8px;

            margin-top: 5px;

            min-height: 25px; /* Mantiene l'altezza costante anche se lo sconto sparisce */

        }



        .badge-migliore {

            background: #ff5722;

            color: white;

            padding: 5px 12px;

            border-radius: 6px;

            font-size: 12px;

            font-weight: bold;

            display: inline-flex;

            align-items: center;

        }



        .badge-migliore svg {

            width: 16px;

            height: 16px;

            margin-right: 6px;

            fill: white;

        }



        .testo-risparmio {

            color: #ff9800;

            font-weight: bold;

            font-size: 14px;

        }



        .prezzo-precedente {

            color: #a0a0a0;

            text-decoration: line-through;

            font-size: 13px;

            margin-left: 5px;

        }



        /* Pulsante Amazon */

        .cta-container {

            padding: 4px 12px 12px; /* Avvicina il tasto al prezzo */

        }



        .btn-amazon {

            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            background: var(--accent-orange) !important;
            color: white !important;
            text-decoration: none;
            padding: 10px;
            border-radius: 30px;
            font-weight: bold;
            font-size: 14px;
            border: none;
            box-shadow: 0 4px 10px rgba(255, 153, 0, 0.3);

        }



        .btn-amazon:hover {

            background: #37475a;

        }

        

        .paragrafo {

        font-family: 'verdana'; 

            font-size: 5px; 

            font-weight: normal; 

            align:left; 

            margin-left:3; 

            margin-right:3; 

            margin-top:0

        }

        /* --- HEADER --- */

        body > header {

           /* position: sticky; /*Fissa l'header in alto appena raggiunto top: 0*/

            /*top: 10;*/

            z-index: 1000;/*garantisce la posizione superiore a tutti gli elementi che passano sopra*/
            background: #ffffff !important;
            padding: 10px 15px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.5);
			border-bottom: 2px solid #e1e8ed;
            display: flex;/*uno accanto all'altro*/           
            justify-content: center; 
    		align-items: center;
            gap: 100px;

	        }



        .brand-link {/*contenitore principale cliccabile per home*/

            text-decoration: none;

            color: inherit;

            display: flex;

            align-items: center;

        }



        .brand-wrapper {/*contenitore interno a .brand-link che contiene logo, titolo e sottotitolo*/

            display: flex;

            align-items: center;

            cursor: pointer;

        }



        .logo-area img { height: 100px; margin-right: 15px; transition: height 0.3s; }



        .header-titles h1 { 
        font-size: 1.5rem; 
        margin: 0; 
        color: var(--accent-dark-blue) !important; /* Blu invece di arancione */
        text-transform: uppercase; 
        letter-spacing: 1px; }

        .header-titles span { font-size: 0.85rem; color: var(--text-dim); font-weight: 300; display: block; }

        nav a {

            text-decoration: none;

            color: var(--text-dim) !important;

            margin-left: 20px;

            font-size: 0.9rem;

            font-weight: 600;

            transition: color 0.3s;

        }
        
        nav a:hover { color: var(--accent-blue) !important; }
		
        .a-info {

            text-decoration: none;
            color: var(--text-main);
            margin-left: 20px;
            font-size: 0.9rem;		
            font-weight: 600;
            transition: color 0.3s;

        }
        .a-info:hover { color: var(--accent-blue); }


        /* --- SEZIONE HERO --- */

        .hero {
            padding: 50px 5%;
            text-align: center;
            max-width: 900px;
            margin: auto;

        }



        .hero h2 { font-size: 2.2rem; margin-bottom: 10px; color: var(--accent-orange); text-transform: uppercase; }

        .hero p.intro { font-size: 1.1rem; color: var(--accent-blue); margin-bottom: 40px; font-weight: 600; }



        .highlight-box {

            background: var(--bg-card);
            padding: 40px;
            border-radius: 20px;
            border: 1px solid #333;
            text-align: left;
            line-height: 1.8;

        }



        .highlight-box h3 { color: var(--accent-orange); margin-top: 0; }

        .btn-cta {

            display: inline-block;
            background: var(--accent-blue);
            color: white;
            padding: 20px 40px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            margin-top: 40px;
            transition: all 0.3s ease;

        }
        .btn-inv {
    /* Cambiamo in inline-flex per allineare icona e testo */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    
    background: var(--accent-blue);
    color: white;
    padding: 10px 20px; /* Aumentato leggermente il padding laterale */
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 40px;
    transition: all 0.3s ease;
}

/* Stile per l'icona PNG */

.btn-inv:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3) !important;
    background: var(--accent-dark-blue) !important;
}
        .btn-cta:hover { transform: scale(1.05); }
.btn-inv img {
    height: 24px;      /* Blocca l'altezza dell'icona */
    width: auto;       /* Mantiene le proporzioni */
    display: block;
    margin-right: 10px/* Evita spazi vuoti sotto l'immagine */
}
.btn-inv img:hover {
		transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
        background: var(--accent-dark-blue);
    }

        /* --- SEZIONE OFFERTE --- */

        #offerte {

            scroll-margin-top: 0px; 

            padding: 0 5%;

        }



        .section-title { text-align: center; margin-top: 60px; margin-bottom: 40px; }

        .section-title h2 { 

            font-size: 1.8rem; 

            color: var(--accent-orange); 

            text-transform: uppercase; 

            margin: 0;

        }

        

        .category-header {

            margin: 50px 0 20px 0;

            padding-left: 15px;

            border-left: 4px solid var(--accent-orange);

            font-size: 1.5rem;

        }



        .product-grid {

            display: grid;

            grid-template-columns: repeat(6, 1fr);

            gap: 15px;

            margin-bottom: 60px;

        }



        .product-card {

            background: var(--bg-card);

            border-radius: 12px;

            padding: 15px;

            text-align: center;

        }



        /* --- SEZIONE INFO (FIX DEFINITIVO) --- */

        #info {

            scroll-margin-top: 0px;

            padding: 80px 5% 80px 5%; /* Aumentato padding inferiore */

            /*min-height: 80vh; /* Forza la sezione a essere alta quasi quanto tutta la finestra */

            display: flex;

            flex-direction: column;

            justify-content: flex-start;

        }



        .info-section {

            background: var(--bg-card) !important;
            padding: 30px;
            border-radius: 12px;
            text-align: center;
            border: 1px solid #333;
            box-shadow: var(--shadow);

        }



        .info-section h2 {

            color: var(--accent-orange);
            text-transform: uppercase;
            margin-top: 0;
            margin-bottom: 20px;

        }

        

         .img-prod {

            width: 100%; 
            max-width: 200px; 
            height: auto;

    }
      /* Stile specifico per i testi della sezione Info */
      .info-block p {
          color: var(--text-dim);
          margin-bottom: 15px;
          text-align: left;
          font-size: 0.95rem;
      }

      .intro-text {
          color: var(--text-main) !important;
          font-size: 1.1rem !important;
      }

      /* Griglia per il disclaimer (2 colonne su PC, 1 su Mobile) */
      .disclaimer-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 20px;
          margin-top: 20px;
      }

      .disclaimer-item {
          background: #eef2f7 !important; /* Azzurrino pastello per i box */
          padding: 20px;
          border-radius: 12px;
          border-left: 4px solid var(--accent-blue);
          color: var(--text-main);
          text-align: left;
      }

      .disclaimer-item h4 {
          color: var(--accent-orange);
          margin-bottom: 10px;
          font-size: 1rem;
      }

      .disclaimer-item p {
          font-size: 0.85rem;
          margin-bottom: 0;
      }
/* Rende l'intera area un blocco cliccabile unico */
.brand-link {
    display: flex;         /* Allinea logo e testo */
    align-items: center;   /* Centra verticalmente */
    text-decoration: none; /* Rimuove sottolineature blu */
    color: inherit;        /* Mantiene i colori originali del testo */
    padding: 5px 10px;     /* Aumenta l'area di "contatto" del click */
    border-radius: 8px;    /* Opzionale: arrotonda i bordi dell'area click */
    transition: background 0.2s ease; /* Feedback fluido al passaggio */
}

/* Effetto al passaggio del mouse (feedback visivo) */
.brand-link:hover {
    background: rgba(255, 255, 255, 0.05); /* Schiarisce leggermente l'area al passaggio */
    cursor: pointer;
}

/* Assicura che il titolo mantenga il suo colore arancione */
.brand-link h1 {
    color: var(--accent-orange);
    margin: 0;
}

/* Stile per il motto sotto il titolo */
.motto {
    display: block;
    font-size: 0.85rem;
    color: var(--text-dim);
}
#internal-links {
    /*background: #161618;*/
    background: white;
    padding: 30px 5%;
    /*border-top: 1px solid #333;
    border-bottom: 1px solid #333;*/
}

.links-container {
    max-width: 1200px;
    margin: 0 auto;
}

.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.link-item {
    display: block; /* Occupa tutto lo spazio della cella */
    background: #ffffff;
    color: var(--accent-blue);
    text-decoration: none;
    padding: 15px;
    border-radius: 6px;
    border: 1px solid #d1d9e0;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.25s ease;
    text-align: center; /* Opzionale: centra il testo nel box */
}

.link-item:hover {
    border-color: var(--accent-blue);
    color: #ffffff;
    background: var(--accent-blue);
    transform: translateY(-3px); /* Leggera elevazione invece dello scivolamento */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
/* ---------------------CSS PANORAMICA ----    */
/* --- CATEGORIE IN HOME (Stile Azzurro King) --- */
/* Contenitore principale delle categorie */
.categorie-container-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Forza esattamente 2 colonne affiancate */
    gap: 25px;                            /* Spazio tra i box sia in verticale che in orizzontale */
    max-width: 1000px;                    /* Evita che i box diventino troppo larghi su schermi giganti */
    margin: 0 auto;                       /* Centra l'intera griglia nella pagina */
    padding: 20px;
}

.categoria-box-azzurro {
    height: 180px;
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); /* Sfumatura azzurra rilassante */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px 12px 0 0;
    transition: background 0.3s ease;
}

.categoria-card:hover .categoria-box-azzurro {
    background: linear-gradient(135deg, #bae6fd 0%, #7dd3fc 100%);
}

.categoria-titolo-box {
    background: var(--bg-card);
    color: var(--accent-dark-blue);
    padding: 18px;
    font-weight: 600;
    text-align: center;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 12px 12px;
    transition: all 0.3s ease;
}

.categoria-card:hover .categoria-titolo-box {
    color: var(--accent-blue);
    box-shadow: var(--shadow);
}

/* --- ARTICOLO INTERNO (Stile Guida Pulita) --- */
.titolo-centrale-king {
    text-align: center;
    color: var(--accent-dark-blue);
    font-size: 2.2rem;
    margin-bottom: 40px;
}

.item-prodotto-king {
    display: flex;
    background: var(--bg-card);
    margin-bottom: 40px;
    padding: 25px;
    border-radius: 16px;
    gap: 30px;
    border: 1px solid #f0f4f8;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03); /* Ombra quasi invisibile, molto elegante */
}

.item-img-king {
    flex: 0 0 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-img-king img {
    max-width: 100%;
    border-radius: 8px;
}

.item-info-king h3 a {
    color: var(--accent-dark-blue);
    text-decoration: none;
    font-size: 1.4rem;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s;
}

.item-info-king h3 a:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.prezzo-guida {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent-blue);
    margin: 15px 0;
}

/* PULSANTE AZZURRO */
.btn-king-azzurro {
    background-color: var(--accent-blue);
    color: white !important;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: transform 0.2s, background-color 0.2s;
}

.btn-king-azzurro:hover {
    background-color: var(--accent-dark-blue);
    transform: translateY(-2px);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .item-prodotto-king {
        flex-direction: column;
        padding: 20px;
    }
    .item-img-king {
        flex: 0 0 auto;
        width: 100%;
    }
}

        @media (max-width: 1200px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }

   	    @media (max-width: 768px) {/*è una Media Query, queste regole si attivano solo*/ 
       /*quando la larghezza dello schermo è pari o inferiore a 768 pixel.*/

    /* 1. Spazio per il body: essenziale per non far sparire le card sotto l'header */

    body { 

        padding-top: 0px !important; 

    }

    /* 2. Header Fisso: lo mettiamo in colonna per avere Logo sopra e Nav sotto */

   header { 

        /*position: sticky !important;*/

        /*top: 0 !important;*/

        flex-direction: column; /*impilazione verticale degli elementi*/

        padding: 10px 0 !important;/*rimozione del padding laterale*/

       	height: auto !important;/*Dice all'header di non avere un'altezza fissa,*/ 
        /*ma di adattarsi automaticamente al contenuto che ora è disposto verticalmente.*/

        /*z-index: 1000 !important;*/

         background: #121212 !important;
         gap: 0px !important;
         

    }
    
    .category-header > h1{
    	font-size: 2.0rem !important; 
    }

    /* 3. Logo e Titoli: compatti e centrati */

    .brand-wrapper {

        flex-direction: column !important;

        justify-content: center !important;

        text-align: center !important;

        width: 100% !important;

    }

    .logo-area img { 

        height: 70px !important; /* Più piccolo per risparmiare spazio verticale */

        margin-bottom: 5px;

    }

    .header-titles h1 { 

        font-size: 1.1rem !important; 

        margin: 0 !important;

    }

    .header-titles span { 

        display: none !important; /* Nascondiamo il motto su mobile */

    }

    /* 4. Navigazione: Sotto al logo, centrata e con riga di separazione */

    nav { 

        margin-top: 8px !important; 

        width: 100% !important; 

        display: flex !important; 

        justify-content: center !important;

        border-top: 1px solid #333 !important; 

        padding-top: 8px !important;

    }

    nav a { 

        margin: 0 12px !important; 

        font-size: 13px !important;

        text-transform: uppercase;

    }

    /* 5. Correzione scorrimento link: evita che l'header copra i titoli delle sezioni */

   #offerte, #info {

        scroll-margin-top: 0px !important;

    }

    /* 6. Layout Card: una per riga, grande e d'impatto */

    .vetrina-prodotti {

        grid-template-columns: 1fr !important;

        padding: 10px !important;

        gap: 15px !important;

    }

    .prodotto-card {

        max-width: 100% !important;

        margin: 0 auto !important;

    }
   .card-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    
    /* REGOLE SALVA-LAYOUT */
    width: 100% !important;        /* Forza la larghezza alla card */
    max-width: 100% !important;    /* Impedisce di uscire */
    box-sizing: border-box !important; /* Include padding nel calcolo della larghezza */
    padding: 10px 15px !important;
    overflow: hidden;              /* Taglia eventuali sporgenze */
}

/* Fix per la scritta specifica */
.data-post {
    font-size: 11px !important;
    white-space: nowrap !important; /* Impedisce alla scritta di andare a capo */
    margin-left: auto;              /* Spinge ulteriormente a destra */
}
.links-grid {
        grid-template-columns: 1fr; /* Una colonna intera su mobile */
    }

}

        /* Layout Mobile (Smartphone) */

        @media (max-width: 480px) {

            .vetrina-prodotti {

                grid-template-columns: 1fr; /* Una sola colonna */

                padding: 8px; /* Margini minimi ai lati del telefono */

                gap: 12px; /* Spazio ridotto tra le card verticali */

            }

            .prodotto-card {

                max-width: 100%; /* La card prende tutto lo spazio */

                border-radius: 8px; /* Angoli leggermente più netti come nell'esempio */

            }
        

        }