@font-face {
    font-family: 'Bimbo';
    src: url('../fonts/Bimbo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body, p, h1, h2, h3, h4, h5, h6, a, span {
    font-family: 'Bimbo', sans-serif !important;
}

/* Ingrandisce il testo dei paragrafi, articoli e scritte normali */
body, p, span, a {
    font-size: 14px !important;
}



/* Ingrandisce i titoli principali (H1) */
h1 {
    font-size: 30px !important;
}

/* Ingrandisce i titoli secondari (H2) come i nomi dei prodotti nelle liste */
h2 {
    font-size: 24px !important;
}

/* Ingrandisce i titoli di terzo livello (H3) */
h3 {
    font-size: 20px !important;
}




/* Nasconde completamente l'intero blocco del footer */
#footer, footer {
    display: none !important;
}




/* --- REGOLA PER COMPUTER (Schermi grandi) --- */
@media (min-width: 768px) {
    #header .logo {
        width: 339px !important;       /* La larghezza che desideri su PC */
        max-width: none !important;    /* Sblocca i limiti della colonna */
        height: auto !important;       /* Mantiene le proporzioni */
    }
}

/* --- REGOLA PER SMARTPHONE E TABLET (Schermi piccoli) --- */
@media (max-width: 767px) {
    #header .logo {
        width: 100% !important;        /* Il logo si adatta alla larghezza dello schermo mobile */
        max-width: 180px !important;   /* Cambia questo valore (es. 150px, 200px) per decidere la grandezza massima del logo su smartphone */
        height: auto !important;       /* Mantiene le proporzioni corrette ed evita l'effetto allungato */
        display: block;
        margin: 0 auto;                /* Centra il logo nello spazio mobile, se necessario */
    }
}


/* Ingrandisce il prezzo principale nella pagina del prodotto */
.product-prices .current-price span[content] {
    font-size: 30px !important;    /* Di default è circa 20px. Puoi portarlo a 30px o 32px se lo vuoi ancora più grande */
    font-weight: 700 !important;   /* Rende il prezzo più marcato/in grassetto */
    display: inline-block;
    margin-bottom: 5px;
}



/* Trasforma i quadratini dei colori in pallini (cerchi) */
#wrapper .product-variants .color {
    border-radius: 50% !important; /* Arrotonda completamente i bordi facendoli diventare cerchi */
    width: 24px !important;         /* Opzionale: rende i pallini leggermente più grandi e facili da cliccare */
    height: 24px !important;        /* Mantiene la forma perfettamente sferica */
    margin: 4px !important;         /* Aumenta leggermente lo spazio tra un pallino e l'altro */
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); /* Aggiunge un'ombra interna leggerissima per definire meglio i colori chiari come il bianco */
    transition: transform 0.2s ease; /* Rende fluido l'effetto quando si passa sopra con il mouse */
}

/* Effetto zoom quando si passa il mouse sopra i pallini */
#wrapper .product-variants .color:hover {
    transform: scale(1.15);
}

/* Evidenzia il pallino del colore attualmente selezionato */
#wrapper .product-variants .id_attribute_group input:checked + span.color,
#wrapper .product-variants .color.input-color:checked,
#wrapper .product-variants .id_attribute_group input:checked + label .color {
    outline: 2px solid #2fb5d2 !important; /* Usa l'azzurro del tuo sito per il cerchio di selezione */
    outline-offset: 3px;                   /* Distanzia il cerchio di selezione dal pallino del colore */
    border: none !important;
}


/* --- COLORI PERSONALIZZATI PER I BOTTONI DEL "COLORE TOPPA" --- */

/* Esempio per il bottone Grigio Melange (ipotizziamo sia il value 22) */
.product-variants .id_attribute_group input[value="22"] + span {
    color: #8c8c8c !important;       /* Colore del testo Grigio */
    border-color: #8c8c8c !important; /* Opzionale: colora anche il bordino del bottone */
}

/* Esempio per il bottone Blu Navy (ipotizziamo sia il value 24) */
.product-variants .id_attribute_group input[value="24"] + span {
    color: #002060 !important;       /* Colore del testo Blu Navy */
    border-color: #002060 !important; /* Colore del bordino */
}

/* Esempio per il bottone Bianco (ipotizziamo sia il value 25) */
.product-variants .id_attribute_group input[value="25"] + span {
    color: #000000 !important;       /* Il bianco lo lasciamo nero o grigio scuro per farlo leggere */
    background-color: #fcfcfc !important;
}



/* Trasforma i quadratini dei colori in pallini anche nelle anteprime dei prodotti (Home e Categorie) */
.product-miniature .variant-links .color {
    border-radius: 50% !important; /* Rende i quadratini dei cerchi perfetti */
    width: 14px !important;         /* Regola la larghezza (puoi metterli a 16px se li vuoi un pelino più grandi) */
    height: 14px !important;        /* Regola l'altezza per mantenerli sferici */
    margin: 0 2px !important;       /* Distanzia leggermente i pallini tra loro */
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15) !important; /* Un'ombra invisibile per far risaltare i colori chiari come il bianco */
    display: inline-block;
    vertical-align: middle;
}

/* Allinea correttamente il testo del "+21" o "+X" vicino ai pallini */
.product-miniature .variant-links .js-count {
    font-size: 12px !important;
    vertical-align: middle;
    margin-left: 4px;
}

/* Nasconde nell'anteprima della Home e delle Categorie solo i pallini che usano una texture (le toppe) */
.product-miniature .variant-links a[style*="background-image"] {
    display: none !important;
}

/* Nasconde completamente il contatore dei colori (+23, +21, ecc.) nell'anteprima dei prodotti */
.product-miniature .variant-links .js-count {
    display: none !important;
}

/* Permette ai pallini dell'anteprima di andare a capo se sono tanti, rimanendo centrati */
.product-miniature .variant-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    max-width: 90% !important;
    margin: 5px auto !important;
    gap: 4px !important; /* Spazio uniforme tra i pallini */
}

/* Rimuove eventuali margini fissi che potrebbero disallinearli */
.product-miniature .variant-links .color {
    margin: 0 !important;
}
/* Impedisce al JavaScript di nascondere i pallini quando si passa il mouse sopra il prodotto */
.product-miniature:hover .variant-links a,
.product-miniature.hover .variant-links a,
.product-miniature .variant-links a {
    display: inline-block !important; /* Forza i pallini a rimanere visibili sempre */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Continua a nascondere tassativamente i pallini della toppa (quelli con l'immagine) anche durante l'hover */
.product-miniature:hover .variant-links a[style*="background-image"],
.product-miniature .variant-links a[style*="background-image"] {
    display: none !important;
}

/* Continua a nascondere il contatore di testo in ogni stato */
.product-miniature:hover .variant-links .js-count,
.product-miniature .variant-links .js-count {
    display: none !important;
}
/* Risolve il taglio in basso dando più spazio verticale al blocco dei pallini */
.product-miniature .variant-links {
    margin-top: 10px !important;    /* Distanzia i pallini dal testo o dall'icona "Anteprima" soprastante */
    margin-bottom: 15px !important; /* Spinge in basso il testo del nome prodotto, evitando sovrapposizioni */
    padding-bottom: 5px !important; /* Crea una micro-intercapedine interna per evitare tagli della seconda fila */
}

/* Regola l'altezza complessiva della scheda se noti che il nome del prodotto si sovrappone */
.product-description {
    margin-top: 20px !important;
}
.product-miniature .variant-links {
    row-gap: 6px !important; /* Aumenta lo spazio verticale specifico tra la prima e la seconda riga di pallini */
}

/* Aumenta lo spazio sotto l'intero blocco delle varianti per evitare che tocchino la riga grigia */
.product-miniature .variant-links {
    margin-bottom: 25px !important; /* Aumentiamo il margine da 15px a 25px */
    padding-bottom: 8px !important;  /* Crea un po' di spazio interno di sicurezza sotto la seconda fila */
}

/* Nel caso in cui il titolo "Tshirt Bambino Personalizzata" sia troppo vicino, distanziamo la descrizione */
.product-miniature .product-description {
    margin-top: 15px !important;
}


/* --- CONFIGURAZIONE COMPATTA E FLUIDA PER I PALLINI DELL'ANTEPRIMA --- */

.product-miniature .variant-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* Spazio ridotto tra i pallini per farli stare su una riga */
    gap: 3px !important;
    row-gap: 4px !important;
    
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    padding: 0 5px !important;
    
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
}

/* Rimpiccioliamo leggermente il diametro dei pallini (da 14px a 11px) */
.product-miniature .variant-links .color {
    width: 11px !important;
    height: 11px !important;
    border-radius: 50% !important;
    margin: 0 !important;
    display: inline-block;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15) !important;
}

/* Impediamo al JavaScript di reimpostare dimensioni o mostrare elementi nascosti */
.product-miniature:hover .variant-links a,
.product-miniature.hover .variant-links a,
.product-miniature .variant-links a {
    display: inline-block !important;
}

/* Nascondiamo tassativamente le toppe (immagini) e il contatore di testo */
.product-miniature .variant-links a[style*="background-image"],
.product-miniature .variant-links .js-count {
    display: none !important;
}

/* Diamo un micro-spazio alla descrizione per allontanarla dalla linea grigia */
.product-miniature .product-description {
    margin-top: 5px !important;
}

/* --- BANNER CATEGORIA CON IMMAGINE ORIGINALE AD ALTA RISOLUZIONE --- */

#js-product-list-header .block-category {
    position: relative !important;
    min-height: 220px !important; /* Altezza ottimale del rettangolo */
    
    /* Puntiamo direttamente all'immagine originale non compressa da PrestaShop */
    background-image: url("https://www.ilporcospillo.com/img/c/10.jpg") !important;
    
    /* Impostazioni di posizionamento per non deformare i soggetti */
    background-size: cover !important; 
    background-position: center !important; /* Centra l'inquadratura sui bimbi */
    background-repeat: no-repeat !important;
    
    padding: 40px !important;
    overflow: hidden !important;
}

/* FIX CHIRURGICO: Nasconde le miniature SOLO nella testata della categoria, senza toccare il carrello */
#js-product-list-header .block-category img,
#js-product-list-header .block-category .category-cover {
    display: none !important;
}

/* Ottimizzazione del titolo per la massima leggibilità sopra la foto */
#js-product-list-header .block-category h1,
#js-product-list-header .block-category h1.h1 {
    position: relative !important;
    z-index: 3 !important;
    color: #000000 !important; 
    font-weight: bold !important;
    text-shadow: 2px 2px 6px rgba(255, 255, 255, 0.95) !important; 
}


/* --- RIPRISTINO TOTALE DI TUTTI I TASTI "CONTINUA" DEL CHECKOUT --- */

/* 1. Forza la comparsa dei footer in qualsiasi step del carrello (Dati, Indirizzi, Spedizione) */
.checkout-step footer,
.checkout-step form footer,
#checkout-addresses-step footer,
#checkout-delivery-step footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
    clear: both !important;
    margin-top: 20px !important;
    padding: 20px 0 !important;
}

/* 2. Forza la comparsa dei bottoni di invio dentro i passaggi */
.checkout-step footer button,
.checkout-step footer button[type="submit"],
.checkout-step button[name="confirmAddresses"],
.checkout-step button[name="confirmDelivery"],
.checkout-step .continue {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 160px !important;
    min-height: 44px !important;
    background-color: #2fb5d2 !important; /* Colore azzurro standard del tema Classic */
    color: #ffffff !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}

/* --- OTTIMIZZAZIONE E SMUSSAMENTO LOGO --- */
.header .logo,
#checkout #header .logo,
img.logo {
    /* Disattiva l'effetto pixelato e forza lo smussamento bilineare di alta qualità */
    image-rendering: auto !important;
    -ms-interpolation-mode: bicubic !important; /* Per vecchi browser Windows */
    
    /* Mantiene le proporzioni corrette senza stirare i pixel */
    object-fit: contain !important;
    
    /* Blocchiamo l'altezza massima per evitare che sforzi l'ingrandimento */
    max-height: 70px !important; 
    width: auto !important;
}

/* --- FORZATURA VISUALIZZAZIONE IBAN NEL CHECKOUT --- */
#checkout-payment-step .payment-options .js-payment-option-form:first-of-type .js-payment-binary-form p::after {
    content: "\A\A Estremi per il pagamento:\A • Intestatario: Valentina Dall'Oro\A • Banca: Banco Posta\A • IBAN: IT74O3608105138278455578575";
    white-space: pre-wrap;
    display: block;
    margin-top: 15px;
    padding: 12px;
    background-color: #f8f9fa;
    border: 1px dashed #24b9d7; /* Usa lo stesso azzurro dei tuoi bottoni */
    color: #333;
    font-weight: bold;
    border-radius: 4px;
}

/* --- RIMOZIONE SCHEDA DETTAGLI DEL PRODOTTO --- */
/* Nasconde la linguetta/tab cliccabile */
.nav-tabs .nav-item .nav-link[data-target="#product-details"],
.nav-tabs .nav-item a[href="#product-details"] {
    display: none !important;
}

/* Nasconde l'intero blocco dei contenuti interni dei dettagli */
#product-details {
    display: none !important;
}

/* Nasconde il bollino NUOVO automatico di PrestaShop da tutti i prodotti */
.product-flags .product-flag.new {
    display: none !important;
}

/* --- REGOLAZIONE FINE POSIZIONE BOLLINO --- */
.product-flags .product-flag.on-sale {
    background-color: #7499a6 !important; 
    color: #ffffff !important;            
    
    transform: none !important;
    position: absolute !important;
    
    /* Regolazioni millimetriche spostate a sinistra e in alto */
    top: 10px !important;                 /* Era 50px, diminuendo è salito più in alto */
    left: 0px !important;                 /* Era 15px, diminuendo si è spostato più a sinistra */
    
    padding: 5px 10px !important;
    height: auto !important;
    width: auto !important;
}


/* --- FORZATURA DEFINITIVA A CAPO PER LA PERSONALIZZAZIONE --- */
.product-customization .form-fields label {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
}


/* --- FORZA LA VISUALIZZAZIONE DEL TASTO INVIA NEL MODULO CONTATTI --- */
.contact-form form footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.contact-form form footer .btn {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}