/* Stili generali per dispositivi mobili e desktop */

/* Reset di base */
body {
    margin: 0;
    padding: 1rem;
    font-size: 1rem;
}

/* Titoli centrati e ridotti */
h1, h2, h3 {
    text-align: center;
    font-size: 1.5rem;
    margin: 1rem 0;
}

/* Immagini scalabili per evitare che escano dallo schermo */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
    border-radius: 8px;
}

/* Adatta il layout dei caroselli */
.carousel {
    max-width: 100%;
}

/* Pulsanti adattivi */
.discover-button {
    padding: 0.8rem;
    font-size: 1rem;
    display: block;
    width: 80%;
    margin: 1rem auto;
    text-align: center;
}

/* Banner per home e carrello */
.banner {
    display: block;
    text-align: center;
    padding: 1rem;
    background-color: #333;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    margin: 1rem 0;
}

/* Griglia dei prodotti */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Desktop: Tre colonne */
    gap: 1rem;
}

/* Sezione box (Felpe, T-shirt, Patch) */
.box-container {
    display: flex;
    flex-direction: row; /* Layout orizzontale per desktop */
    gap: 1rem;
}

.box img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Stile per l'icona del menu a tendina */
.hamburger {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}

/* Stile di base per il menu */
.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

/* Stili specifici per schermi più piccoli */
@media (max-width: 768px) {
    /* Menu a tendina per dispositivi mobili */
    .hamburger {
        display: block;
        margin: 0 auto; /* Centra l'hamburger */
    }

    /* Nasconde il menu di default */
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #000;
        padding: 1rem 0;
        z-index: 10;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        text-align: center;
        margin: 0.5rem 0;
    }

    .nav-links li a {
        font-size: 1.2rem;
    }

    /* Layout verticale per la barra di navigazione */
    header nav {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .search-container input[type="text"] {
        width: 90%; /* Riduce la larghezza della barra di ricerca */
    }

    .search-container button {
        width: 90%; /* Riduce la larghezza del pulsante */
        text-align: center;
    }

    /* Adatta sezione box */
    .box-container {
        flex-direction: column; /* Layout verticale per dispositivi mobili */
    }

    .box img {
        margin: 0 auto;
        max-width: 90%; /* Immagini ridimensionate per adattarsi */
    }

    .box p {
        text-align: center;
        font-size: 1rem;
    }

    /* Griglia dei prodotti per dispositivi mobili */
    .product-grid {
        grid-template-columns: 1fr; /* Una colonna per dispositivi mobili */
        gap: 1rem;
    }

    /* --- Stili per la pagina T-shirt --- */
    .tshirt-grid {
        display: flex; /* Cambia il layout da grid a flex per garantire la visualizzazione verticale */
        flex-direction: column; /* Forza la disposizione verticale */
        gap: 1rem; /* Spaziatura tra gli elementi */
    }

    .tshirt-item {
        width: 100%; /* Assicura che ogni elemento occupi tutta la larghezza */
    }
}

    /* --- Stili per il carrello --- */
    .carrello-item {
        flex-direction: column; /* Disposizione verticale */
        align-items: flex-start;
        gap: 1rem;
    }

    .carrello-item img {
        width: 100px; /* Dimensione immagine ridotta */
        height: auto;
    }

    .modal-content {
        width: 90%; /* Riduce la larghezza della modale sui dispositivi mobili */
        height: auto;
        max-height: 85vh;
    }

    #ordineTesto {
        max-height: 200px; /* Altezza ridotta per il riepilogo ordine */
        overflow-y: scroll; /* Scroll attivato per testi lunghi */
    }

    .checkout-button {
        width: 100%; /* Adatta pulsanti alla larghezza dello schermo */
    }

    /* Forza il layout verticale per tutti gli elementi lookbook */
    .lookbook-item {
        flex-direction: column; /* Layout verticale */
        text-align: center; /* Centra il contenuto */
        padding: 1rem; /* Spaziatura uniforme */
    }

    /* Specifico per gli elementi pari (2, 4, 6, ...) */
    .lookbook-item:nth-child(even) {
        flex-direction: column !important; /* Forza il layout verticale */
    }

    .lookbook-item img {
        max-width: 90%; /* Ridimensiona immagini */
        margin-bottom: 1rem; /* Spaziatura sotto l'immagine */
    }

    .lookbook-text {
        display: block !important; /* Assicura che il testo sia visibile */
        overflow: visible !important; /* Prevenzione del taglio */
        word-break: break-word; /* Assicura che il testo non venga tagliato */
        max-height: none !important; /* Permette dimensioni dinamiche */
        padding: 1rem !important; /* Garantisce margini interni */
    }

    .lookbook-text p {
        font-size: 1rem; /* Dimensione leggibile del font */
        line-height: 1.6; /* Migliora la leggibilità */
        margin: 0.5rem 0; /* Spaziatura uniforme */
        color: #333; /* Assicura che il colore sia visibile */
        display: block; /* Assicura che l'elemento sia visibile */
        color: black !important; /* Assicura che il testo sia visibile */
    }

    .lookbook-container {
        gap: 1.5rem; /* Spaziatura tra gli elementi */
    }

@media (max-width: 576px) {
    .hidden-on-small {
        display: none;
    }

    .carrello-item img {
        width: 80px; /* Ulteriore riduzione immagine */
    }

    .lookbook-item img {
        max-width: 100%; /* Immagine a piena larghezza */
    }
}