section#grid-productes{
    display: grid;
    /*column-gap: 20px;*/
}

nav#nav_categories{
    margin: 10px 0px;
    text-align: center;
}

#nav_categories h2{
    color: white;
    font-size: 1.8em;
}

#categories{
    display: inline-block;
    margin: 5px 0px;
}

#categories button{
    font-weight: bold;
    margin: 0px 10px 0px 0px;
    font-size: 1.2em;
    border-radius: 10px;
    /*border: 1px solid #ffbd59;
    background-color: #ffbd59;*/
    border: 1px solid #ffbd59;
    background-color: #ffbd59; 
    padding: 5px 20px 5px 20px;
    color: white;
}

#categories button:hover{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: all 200ms ease-out;
}

#categories button:focus{
    border: 1px solid #00bf63;
    background-color: #00bf63;
    transition: all 200ms ease-out;
}

.ambfiltre{
    grid-template-columns: 20% 80%;
    grid-template-areas: "accions-botiga accions-botiga""filtre productes";
}

.sensefiltre{
    grid-template-columns: 100%;
    grid-template-areas: "accions-botiga""productes";
}

nav#accions-botiga{
    grid-area: accions-botiga;
    margin-bottom: 20px;
}

.pagines{
    float: right;
}

#lupa{
    border-radius: 20px !important;
    border: 1px solid #7ed957 !important;
    background-color: white !important;
    padding: 5px 10px 5px 10px !important;
}

#cercador{
    display: contents;
}

nav#accions-botiga input{
    margin: 0px 10px 0px 0px;
    font-size: 1.2em;
    border-radius: 20px;
    border: 1px solid #7ed957;
    background-color: white;
    padding: 5px 20px 5px 20px;
    width: 320px;
    color: black;
}

nav#accions-botiga button{
    font-weight: bold;
    font-size: 1.2em;
    border-radius: 20px;
    border: 1px solid #7ed957;
    background-color: #7ed957;
    padding: 5px 20px 5px 20px;
    color: white;
}

nav#accions-botiga button:hover{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: all 200ms ease-out;
}

nav#accions-botiga button:focus{
    border: 1px solid #00bf63;
    background-color: #00bf63;
    transition: all 200ms ease-out;
}

nav#accions-botiga span{
    font-weight: bold;
    margin: 0px 10px 0px 10px;
    font-size: 1.2em;
    color: white;
}


div#productes{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /*grid-template-areas: "filtre productes";*/
    /*margin: 0px 10px;*/
    margin-left: 20px;
    grid-gap: 20px;
    grid-area: productes;
}

nav#filter{
    grid-area: filtre;
    text-align: left;
    margin-top: 0;
}
nav#filter form {
    padding: 10px;
    border-radius: 40px;
    background-color: white;
}

nav.sensefiltre{
    display: none !important;
}

.tipus h4{
    font-weight: bold;
    margin: 0px;
    font-size: 1.4em;
    border-radius: 40px;
    background-color: #7ed957;
    padding:5px 0px 5px 10px;
    color: white;
}

.tipus{
    padding: 15px;
}
.scroll{
    max-height: 130px;
    overflow: auto; /* Adds a scroll bar if content overflows */
}

.tipus div.selector{
    margin-top: 10px;
    padding-left: 20px;
}

.tipus div.selector > input{
    /* Elimino els estils del navegador
    appearance: none;*/
    padding: 10px !important;
    margin-right: 10px !important;
    border-radius: 30% !important;
    border: 1px solid !important;
}

/*.tipus div.selector > input:checked {
    background:linear-gradient(315deg, white 45%, black 45%, black 55%, white 55%, white 100%);
}*/

.tipus div.selector > label{
    font-size: 1.2em;
}

nav#filter form div.aplicar > input{
    padding: 5px 25px;
    border-radius: 20px;
    border: 1px solid;
    border-color:#ffbd59;
    background-color: #ffbd59;
    font-weight: bold;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 1.05em;
    /*color: white;*/
}

nav#filter form {
    display: grid;
    grid-template-columns: 1fr;
}

form div.aplicar{
    text-align: right;
}

/*
PRODUCTE.CSS
*/

.quantitatProducte{
    margin-right: 10px;
}

section.producte-css{
    padding: 20px;
    background-color: white;
    border: 2px solid white;
    border-radius: 40px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-areas: "imatge-lateral informacio";
}

.imatge-lateral{
    grid-area: imatge-lateral;
    text-align: center;
    margin: auto;
}

.imatge-lateral img{
   width: 80%;
   border-radius: 20px;
}

.informacio{
    grid-area: informacio;
    width: 100%;
}

.info-extra{
    border-radius: 20px;
    background-color: #ffbd5994;
    padding: 20px;
    margin-bottom: 15px;
}
.info-extra p{
    padding: 0px;
    margin: 0px;
    font-size: 0.90em;
}

.opcions{
    display: grid;
    grid-template-columns: 50% 50%;
}

.opcio{
    appearance: none;
    padding: 10px;
    border-radius: 20px;
    background-color: white;
    border: 1px solid grey;
    margin: 5px;
    display: grid;
    grid-template-columns: 20% 80%;
}

.opcio:hover{
    background-color: #67ed2ec0;
}

.opcio:hover p{
    color: white;
}

.opcio:focus{
    background-color: #67ed2ec0;
}

.opcio:focus p{
    color: white;
}

.opcio p{
    font-weight: bold;
    font-size: 1.3em;
    color: black;
    margin: 10px 0px;
}

.opcio p.preu{
    font-size: 1em;
    color: lightslategrey;
}

/*.info-button{

}*/

.cercle{
    border-radius: 10px;
    padding: 8px;
    border:1px solid black;
    margin: 5px;
}

.opcio:focus > div.colors > .cercle{
    border-radius: 15px;
    padding: 10px;
    border:1px solid black;
    margin: 5px;
    background-color: white;
}

.opcio:hover > div.colors > .cercle{
    border-radius: 15px;
    padding: 10px;
    border:1px solid black;
    margin: 5px;
    background-color: white;
}

.informacio-title > h2{
    font-size: 1.6em;
    font-weight: bold;
}

.general{
    border: 1px solid black;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
}

#cos-form{
    width: 80%;
    margin: auto;
}

.general > h4{
    font-size: 1.2em;
    margin: 10px 10px 10px 0px;
}

.caracteristiques{
    display: flex;
    margin-bottom: 20px;
}

.caracteristiques p{
    margin: 0px 10px 0px 0px;
}

.contingut p{
    border: 1px solid #ffbd5994;
    padding: 4px 8px;
    border-radius: 15px;
    text-align: center !important;
    background-color: #ffbd5994;
}

.preu-definitiu{
    font-weight: bold;
    font-size: 1.2em;
}

.preu-antic{
    color: gray;
    text-decoration: line-through;
}

span.estalvi{
    background-color: #67ed2ec0;
    padding:2px 5px;
    margin-left: 5px;
    color: black;
}

.iva{
    color: gray;
    font-size: 0.90em;
}

button.comprarproducte{
    margin: 10px 0px;
    width: 100%;
    background-color: #7ed957;
    border: 1px solid #7ed957;
    padding: 10px;
    border-radius: 10px;
    font-weight: bold;
    color: white;
}

.contingut-text{
    margin-top: 60px;
    font-weight: bold;
}

.none{
    display: none !important;
}

@media (min-width: 768px) and (max-width: 1281px){
    nav#filter form {
        grid-template-columns: 1fr 1fr 1fr;
    }

    section#grid-productes{
        /*grid-template-columns: 20% 80%;*/
        grid-template-columns: 1fr;
        row-gap: 20px;
    }
    
    section.ambfiltre{
        grid-template-areas: "accions-botiga""filtre""productes"; 
    }

    section.sensefiltre{
        grid-template-areas: "accions-botiga""productes";
    }

    form div.aplicar{
        text-align: left;
    }

    nav#filter form div.aplicar> input{
        margin-left: 15px;
        color: black;
        font-weight: bold;
    }

    nav#accions-botiga{
        margin-bottom: 0px;
    }
    
    div#productes{
        margin-left: 0px;
    }

    .pagines{
        margin-top: 10px;
    }

    /*
    PRODUCTE.CSS
    */
    #cos-form{
        width: 100%;
    }
}

@media (max-width: 768px){
    section#grid-productes{
        grid-template-columns: 1fr;
        row-gap: 20px;
    }
    
    section.ambfiltre{
        grid-template-areas:  "accions-botiga""filtre""productes";
    }

    section.sensefiltre{
        grid-template-areas: "accions-botiga""productes";
    }
    
    div#productes{
        grid-template-columns: 1fr;
        margin-left: 0px;
    }

    nav#accions-botiga{
        margin-bottom: 0px;
    }

    .pagines{
        margin-top: 10px;
    }
        /*
    PRODUCTE.CSS
    */
    section.producte-css{
        grid-template-columns: 100%;
        grid-template-areas: "imatge-lateral""informacio";
    }
    #cos-form{
        width: 100%;
    }
}