@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');



body{
    background-color: #F7FBFF;
    color: #000000;
    font-family: 'Inter', sans-serif;
    margin: 0;

    /*quanto segue è stato fatto per avere lo sticky footer, cioè tenerlo in basso solo se la pagina ha poco contenuto*/
    display: flex;
    flex-direction: column;
    min-height: 100vh
}

main{
    flex: 1; /*anche questo per lo sticky footer*/
    margin-top: 3em;
}

header nav{
    position: fixed;
    top: 0;
    padding: 1.2em 2em;


    background-image: url(/images/general/img_tiedye.png);
    background-size: cover;
    

    width: 100%;
    
    z-index: 1;
    box-sizing: border-box;
    display: flex; 
    align-items: center; /* allineamento verticale del flex */
    justify-content: space-between; /*cosi l'ul sta a sinistra mentre le icone a destra*/
}

.logo-menu-flex{
    display: flex;
    flex-direction: row;
    gap: 2.5em;
}


header nav img{
    height: 45px;
    width: auto;
    display: block; /*altrimenti sballerebbe la centratura*/
}

header nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /*il flex ha portato gli ul inline, il gap gli darà spazio e alignitems il centra orizzontalmente*/
    align-items: center;
    gap: 2.5em;
}

header nav ul li{
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease;
}

header nav ul li:hover{
    border-color: #000000;
}

header nav ul li a{
    color: #000000;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
}

.icons{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2.5em;
}

header nav ul li a[aria-current="page"] {
    color: #7689F5;
    font-weight: 600;
}


/*parte header inserita per il responsive*/

.menu-icon{
    display: none;
    cursor: pointer;
}
#menu-toggle{
    display: none;
}

/* FINE HEADER */

/* da qua si sviluppa in base alla pagina about */

h2{ /* usato da OUR HISTORY */
    font-weight: 400;
    font-size: 3em;
    text-transform: uppercase;
    color: #4E4E4E;
    width: 90%; /* in generale, ci distanziamo cosi dai lati (a sx e a dx) */
    margin: 3em auto 0.5em;
}

#tie-dye-method h2{
    margin-top: 2em;
    text-align: right;
}

p{
    font-weight: 400;
    font-size: 1.3em;
    width: 90%;
    margin: auto;
    color: #4E4E4E;
    text-align: justify;
}

.steps-gallery{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    
    width: 90%;
    margin: 1em auto;
    gap: 2em;
}

.steps-gallery figure{ /*le figure hanno dei margini di default, predefiniti dal browser*/
    margin: 0;
    flex: 0 0 30%; /*decidiamo noi le dimensioni di ogni elemento*/
}

.steps-gallery figure img{
    width: 100%;
    height: auto;
    display: block;
}

figcaption{
    margin-top: 1em;
    font-weight: 400;
    color: #4E4E4E;
    text-align: center;
}


#stores{
    margin-top: 2em;
    text-align: left;
}

#stores-articles{
    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: row;
    gap: 2em;
}

.grid-container-store{
    flex: 1 1 0; /*i figli di stores-articles devono occupare tutto lo spazio disponibile, questa prop. si applica ai figli, vuole un numero intero*/
    min-width: 0;
    display: grid;
    grid-template-columns: 2fr 1fr;
    /*l'altezza della colonna verrà creata in automatico*/
    gap: 1em;
    margin-bottom: 3em;
}

h3{
    color: #4E4E4E;
    font-weight: 400;
    font-size: 2em;
    margin-top: 0;
    margin-bottom: 0.5em;
}

article div p{
    margin: 0;
    text-align: justify;
}

iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: none;
}

/* FINE SEZIONI SI ABOUT, ORA INIZIA IL FOOTER */

footer{
    margin-top: 4em;
    background-color: #F3F3F3;
}

footer nav{
    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 1em;
    padding-bottom: 0.5em;
}

footer nav div ul{
    list-style: none;
    padding-left: 0;
}

#logo-footer {
    align-self: center;
}

#logo-footer img {
    height: 7em;
}

footer nav div h3 {
    color: #4E4E4E;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 400;
    font-size: 1em;
    margin: 1.4em 0;;
}

footer nav div ul li a {
    color: #969696;
    text-decoration: none;
    font-weight: 400;
}

.footer-icone{
    margin-top: 0;
}

.footer-icone li {
    display: inline-block;
}

.footer-icone li a img{
    height: 2.5em;
}


/*qua ho finito di fare la pagina about, comprensiva di header e footer per la prima volta (quindi about contiene l'html di header e footer*/

/* INIZIO PAGINA CONTACTS*/

#form-contacts{
    width: 40%;
    margin: 7em auto 0;
    display: flex;
    flex-direction: column;
}

#form-contacts h3{
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1.5em;
}

#form-contacts input, 
#form-contacts textarea, 
#form-contacts button {
    padding: 1em;
    border: 1px solid #dedede;
    margin-bottom: 1.5em;
    font-family: inherit;
}

#form-contacts textarea {
    min-height: 8em;
    resize: vertical; /* l'allungamento della barra solo in verticale */
}

#form-contacts label {
    margin-bottom: 0.3em;
}

#form-contacts p {
    text-align: center;
    font-size: 0.8em;
    color: #666;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

#form-contacts button {
    text-transform: uppercase;
    transition: 0.5s;
}

#form-contacts button:hover{
    background-color: #7689F5;
    color: white;
    cursor: pointer;
}

#form-contacts label span{
    color: red;
}

/* INIZIO PAGINA SHOP, che include parti dinamiche, cioè i prodotti*/

#filters{
    width: 90%;
    margin: 5em auto 0.2em;
    display: flex;
    flex-direction: row;
    align-items: center;
}


/*gestione scomparsa form filtri e checkbox icona*/

#filter-icon[type="checkbox"]{
    display: none;
}

#label-filter-icon{
    cursor: pointer;
}

#prezzo-massimo-valore {
    color: #7689F5;
}

#filters form{
    display: none;
    flex-direction: row;
    align-items: center; /* centro verticalmente le parti del form*/
    gap: 1em; 
    flex-wrap: wrap; /* quando lo scherma si stringe, manda a capo */
}

#filter-icon:checked ~ form{ /* l'input checkbox viene checkato, modifichiamo il display del form che viene prendendolo con il selettore ~. Questo selettore prende i fratelli in generale, il + prende il primo fratello*/
    display: flex; /*cosi torna visibile, lo rimette a flex (questo sopra), modifiche al flex non supportano animazioni :( */
}

#filters form h3{
    margin: 0;
    font-size: 1.1em;
    margin-left: 2em;
    color: #000000;
}

#filters form label{
    cursor: pointer;
    font-size: 0.9em;
}


#filters form button{
    cursor: pointer;
    border: none;
    text-transform: uppercase;
    padding: 1em 1.5em 1em;
    margin-left: 3em;
    border: 1px solid #dedede;
    font-family: inherit;
    font-size: 0.9em;

    transition: 0.5s;
}

#filters form button:hover{
    background-color: #7689F5;
    color: white;
}

input[type="range"] {
  accent-color: #7689F5;
}

/*levo i quadratini del checkbox*/
#filters form input[type="checkbox"] {
    display: none;
}

#filters form label{
    cursor: pointer;
    color: #949494;
    font-size: 1em;
    transition: all 0.3s ease; /* qualsiasi cosa cambia si anima, ease è il tipo di animazione*/
}

#filters form label:hover{
    color: #7689F5;
}

/* + è un selettore, seleziona la prima label dopo il checked*/
#filters form input[type="checkbox"]:checked + label{
    color: #7689F5;
    font-weight: 500;
}

#prezzo-massimo-label span{
    margin-left: 1.5em;
    color: #000000;
    font-size: 1.1em;
    font-weight: 400;
}


/* parte dei prodotti */
#products-section{
    width: 90%;
    margin: auto;
    margin-top: 3em;

}

#grid-container{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3em;
    row-gap: 4em;
}


/* info sotto immagine prodotto shop*/
.product-info-shop{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1em;
    margin-top: 0.6em;
}

.product-info-shop p{
    width: auto;
    margin: 0;
    font-size: 1.1em;
}


.product-info-shop p:first-child {
    min-width: 0;
}

.product-info-shop p:nth-child(2){ /* seleziono il p del prezzo (ovvero il secondo child del div)*/
    text-align: right;
}


.product-image-container{
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

/*animazione sopra immagine*/
.product-image-container img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.4s ease;
}

#grid-container > .product-link {
    min-width: 0;
    color: inherit;
}

.product-image-container:hover img{
    transform: scale(1.1);
}

/* tag a che porta al prodotto*/
.product-link{
    text-decoration: none;
}


/*bottone in basso*/
#products-section button{
    width: 100%;
    margin: 5em auto 5em;
    padding: 1em;
    cursor: pointer;
    border: none;
    text-transform: uppercase;
    border: 1px solid #dedede;
    font-family: inherit;
    font-size: 0.9em;
    transition: 0.5s;
}


#products-section button:hover{
    background-color: #7689F5;
    color: white;
}

/* fine dello SHOP*/


/*inizio pagina UPCOMING DROPS*/
#drop-list-table{
    width: 90%;
    margin: 2em auto;
}

#drop-list-table tr th{
    font-weight: 500;
    font-size: 1.1em;
    text-align: left;
    color: white;
    background-color: #7689F5;
    padding: 0.5em;
}

#drop-list-table tr td{
    font-weight: 400;
    font-size: 1.1em;
    text-align: left;
    color: #969696;
    padding: 0.5em;
}

#drop-list-table tr td a{
    text-decoration: none;
    color: inherit; /* il tag a ha lo stile di default del browser e non erediterebbe in automatico*/
}

/* al passaggio, cambia colore e ha la sottolineatura*/
#drop-list-table tr td a:hover {
    color: #7689F5;
    text-decoration: underline;
}

/* fine di UPCOMING DROPS*/

/* inizio della HOME*/

#hero a img{
    margin-top: 2em;
    width: 100%;
    height: auto;
}

#latest-arrivals h2{
    margin-top: 2em;
    margin-bottom: 0.5em;
}

#latest-products-flex{
    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: row;
    gap: 2em;
    flex-wrap: nowrap;

    overflow-x: auto; /* utile per galleria scorrevole*/
    padding-bottom: 0.8em;

    scrollbar-width: thin;
    scrollbar-color: #7689F5 #e5e5e5;
}


#latest-products-flex::-webkit-scrollbar-thumb:hover {
    background-color: #5368df;
}

.latest-arrival-product {
    flex: 0 0 calc((100% - 4em) / 5);
    min-width: 0;
}

.latest-arrival-product .product-link {
    display: block;
    color: inherit;
}

.latest-arrivals-image > .product-link:first-child {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.latest-arrivals-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.latest-arrivals-image p{
    margin-top: 0.6em;
    font-size: 1.1em;
}

/* freccia (bottone) latest arrivals*/
#latest-arrivals button{
    border: none;
    cursor: pointer;
    transition: 0.5s;
}

#latest-arrivals button:hover{
    background-color: #7689F5;
}

#latest-arrivals button:hover img{
    filter: brightness(0) invert(1); /*l'icona era nera, basta invertire il colore per farla diventare bianca*/
}

/* sezione newsletter e immagine applicazione play store e app store*/
#news{
    width: 90%;
    margin: auto;
    margin-top: 6em;
    margin-bottom: 4em;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2em;
}

#newsletter{
    background-image: url(/images/general/newsletter.png);
    background-size: cover;
    background-position: center;

    /*centro il form*/
    display: flex;
    align-items: end;
    padding: 2em;
}

#newsletter,
#app {
    aspect-ratio: 2 / 1;
    overflow: hidden;
    box-sizing: border-box;
}

#newsletter form{
    padding: 2em;
    background-color: #dedede;
}

#newsletter form p{
    margin: 0;
    margin-bottom: 1em;
}

#newsletter form input, #newsletter form button{
    text-transform: uppercase;
    font-size: 1.2em;
    color: #000000;
    border: none;
    font-family: inherit;
    padding: 1em;
}


#newsletter form button{
    cursor: pointer;
    transition: 0.5s;
}


#newsletter button:hover{
    background-color: #7689F5;
    color: white;
}


#app{
    width: 100%;
    height: auto;
}

#app img{
    width: 100%;
    height: 100%;
    object-fit: cover; /*stessa cosa di cover ma per i tag img diretti nell'html*/
    display: block; /*piccolo spazio bianco extra che i browser mettono sotto le immagini*/
    object-position: center;
}

/* sezione editorial, statica*/

#editorial-h2{
    text-align: right;

}

.articles-flex{
    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: row;
    margin-bottom: 6em;
}

.articles-flex article{
    flex: 1 1 0;
    min-width: 0;
}

.articles-flex article img {
    width: 100%;
    aspect-ratio: 3 / 4;
    height: auto;
    object-fit: cover;
}


.articles-flex article h3 {
    width: 80%;
    position: relative;
    bottom: 3em;
    left: 0.6em;

    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    background-color: #7689F5;
    padding-left: 0.2em;

}

.articles-flex article a{
    text-decoration: none;
}



/* fine home*/

/* Inzio pagina di un prodotto*/

.product-page{
    width: 90%;
    margin: auto;
    margin-top: 10em;
    margin-bottom: 3em;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3em;
    
}


.product-page-img-flex{
    display: flex;
    flex-direction: column;
}

.product-page-img-flex img{
    max-width: 100%; /*PER LE IMMAGINI: non gli fa mai superare il 100% della larghezza del suo contenitore*/
    height: auto;
    display: block; /*rimuove spazio bianco*/


}

/*reset*/
.product-page-info h2,
.product-page-info p{
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.product-page-info h2 { 
    margin-top: 0; 
    margin-bottom: 0.2em; 
}

/*PID*/
.product-page-info p:nth-of-type(1){
    margin-top: 0;
    color: #949494;
    font-size: 1.1em;
}

/*prezzo*/
.product-page-info p:nth-of-type(2){
    margin-top: 1em;
    font-size: 1.5em;
    font-weight: 500;
    color: #000; 
}

/*descrizione*/
.product-page-info p:nth-of-type(3){
    margin-top: 1.5em;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 2em;
}

.product-page-info form{
    display: flex;
    align-items: center; /* Allinea gli elementi verticalmente al centro */
    flex-wrap: wrap; /* se lo schermo si restringe, manda a capo */
    gap: 1.5em;
    margin-top: 1em; 
}

.product-page-info label{
    font-size: 1.1em;
    font-weight: 500;
    color: #4E4E4E;
}

.product-page-info form select{
    padding: 1em;
    border: 1px solid #dedede;
    font-family: inherit;
    text-transform: uppercase;
}

.product-page-info form button{
    flex: 1; /*allarga il button con tutto lo spazio restante*/
}

.product-page-info form button{
    cursor: pointer;
    transition: 0.5s;
    padding: 1em;
    border: 1px solid #dedede;
    font-family: inherit;
    text-transform: uppercase;
}


.product-page-info form button:hover{
    background-color: #7689F5;
    color: white;
}

#atc-result {
    margin-top: 0.8em;
}

/* fine pagina prodotto*/

/* inizio cart*/

.cart-grid{
    width: 90%;
    margin: auto;
    margin-top: 3em;

    display: grid;
    grid-template-columns: 2fr 1fr;
}

.cart-product-flex{
    display: flex;
    flex-direction: column;
}

.cart-single-product-flex{
    display: flex;
    flex-direction: row;
    margin-top: 3em;
    margin-bottom: 6em;
}

.cart-product-info{
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    margin-left: 2em;
}

.cart-single-product-flex img{
    width: 30%;
    aspect-ratio: 1 / 1; /*tutte le immagini quadrate*/
    object-fit: cover; /*l'immagine riempie quel quadrato senza deformarsi, eventualmente ritagliandosi.*/
}



.cart-product-info > div:nth-child(1) h3{
    margin-bottom: 0.1em;
}


/*pid*/
.cart-product-info > div:nth-child(1) p{
    color: #949494;
    font-size: 1.1em;
    margin-bottom: 0.8em;
}

.cart-product-info > div:nth-child(2) form{
    margin-bottom: 1em;
}

.cart-product-info form input[type="number"]{
    transition: 0.5s;
    padding: 0.5em;
    border: 1px solid #dedede;
    font-family: inherit;
    text-transform: uppercase;
}

.cart-product-info form input[type="submit"]{
    transition: 0.5s;
    padding: 0.5em;
    border: 1px solid #dedede;
    font-family: inherit;
    text-transform: uppercase;
    cursor: pointer;
}

.cart-product-info form input[type="submit"]:hover{
    background-color: #7689F5;
    color: white;
}


.cart-product-info > div:nth-child(2) button{
    cursor: pointer;
    transition: 0.5s;
    padding: 0.5em;
    border: 1px solid #dedede;
    font-family: inherit;
    text-transform: uppercase;
    width: 100%;
}

.cart-product-info > div:nth-child(2) button:hover{
    background-color: #f4693b;
    color: white;
}


#riepilogo{
    align-self: start; /* non fa stirare vericalmente la colonna del riepilogo, che altrimenti varierebbe con il numero di prodotti*/
    background-color: #dedede;
}

#riepilogo h3, #riepilogo p, #riepilogo button{
    text-transform: uppercase;
    width: 90%;
    margin: 1em auto;
}

#riepilogo button{
    display: block; /* centra il bottone del form, che è un elemento inline-block e quindi non funzionerebbe solo il marg auto*/
    cursor: pointer;
    transition: 0.5s;
    padding: 1em;
    border: 1px solid #dedede;
    font-family: inherit;
    text-transform: uppercase;
    background-color: white;
    margin-bottom: 2em;
}

#riepilogo button:hover{
    background-color: #7689F5;
    color: white;
}
/*fine del cart*/


/* la parte admin è sull'altro css*/

/*
fix warnings
*/

.hidden-h1, .hidden-h2{
    display: none;
}



/* inizio parte RESPONSIVE */

@media screen and (max-width: 768px){
    /* parto dall'header*/

    header nav{
        justify-content: space-between;
    }

    header nav ul{
        display: none;

        position: absolute;
        top: 100%;
        width: 90%;
        padding: 2em 0;
    }

    .menu-icon{
        display: flex;
    }



    /*prendi l'ul che si trova dentro a .logo-menu-flex, ma solo quando il suo fratello #menu-toggle è spuntato*/
    #menu-toggle:checked ~ .logo-menu-flex ul{
        display: flex;
        flex-direction: column;
        gap: 1.5em;
        align-items: flex-end;
    }

    


    .logo-menu-flex ul li a{
        font-size: 1.5em;
        background-color: #7689F5;
        color: white;
        padding-left: 0.2em;
        padding-right: 0.2em;
    }


    .logo-menu-flex ul li a[aria-current="page"]{
        background-color: #4c15ff;
        color: white;
        font-weight: 400;

    }

    /* fine header */

    h2{ /* riduco in generale  */
        font-size: 2em;
    }


    /*latest arrivals, 2 prodotti alla volta */
    .latest-arrival-product {
        flex: 0 0 calc((100% - 2em) / 2);
    }

    

    /*news*/
    #news{
        grid-template-columns: 1fr;
    }

    #newsletter form{
        width: 90%;
    }

    #newsletter form p{
        font-size: 1em;
    }

    #newsletter form input, #newsletter form button{
        font-size: 0.8em;
    }

    #newsletter form input{
        padding-right: 2em;
    }

    /*editorial*/
    .articles-flex{
        flex-direction: column;
    }

    #logo-footer{
        display: none;

    }

    /*fine home*/

    /* inizio dello shop*/
    #grid-container{
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* min max impedisce al contenuto (es nome lungo) di allargare la colonna*/
    }

    /*filtri*/
    #filters{
        flex-direction: column;
        align-items: flex-start;
    }

    #filters form{
        flex-direction: row;
    }
    #filters form button{
        margin-left: 0;
    }

    #filters form h3{
        margin-left: 0;
    }

    /* inizio pagina about*/
    .steps-gallery{
        flex-direction: column;
    }

    #stores-articles{
        flex-direction: column;
    }

    .steps-gallery figure{
        flex: 0;
        width: 100%;
        margin-bottom: 2em;
    }

    .grid-container-store{
        grid-template-columns: 1fr;
        gap: 1.5em;
    }

    /* inizio pagina contacts*/

    #form-contacts{
        width: 90%;
        margin: 7em auto 0;
    }

    /* inizio pagina cart */

    .cart-grid{
        grid-template-columns: 1fr;
        gap: 3em;
    }

    /* pagina prodotto (solo un'immagine)*/
    .product-page{
        grid-template-columns: 1fr;
    }
}