.webpage
{
    font-family: Roboto, arial;
    margin:0 0 10px 0;
    background-color: rgb(226, 224, 224);
}



/*Page Header*/

.barr{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #c2a184;
    padding:10px 10px 10px 10px;
    margin-top: 89px;
}

.page-title{
    color:white;
    font-size: 20px;
    font-weight: bold;
    cursor:pointer;
}

.searches
{
    display: flex;
    align-items: center;

}

.searchbarr{
    border-radius: 5px;
    width:300px;
    height: 30px;
    border-style: none;
    padding-left: 10px;
    transition: background-color 0.15s;
}
.searchbarr:hover{
    background-color: rgba(209, 206, 206, 0.788);
}

.magnifier-icon{
    width:20px;
    height:20px;
    cursor:pointer;
    margin-left:-25px;
}

.sortt{
    width:150px;
    height:50px;
    background-color: #c2a184;
    color:white;
    font-size: 18px;
    border-color: white;
    cursor:pointer;
    text-align: center;
    transition: background-color 0.15s;
}
.sortt:focus,.searchbar:focus{
    outline-width: 0;
}
option{
    background-color: #c2a184;
}
.sortt:hover{
    background-color: rgba(155, 155, 155, 0.3);
}

/*====================================*/

.products{
    display:grid;
    column-gap: 5px;
    row-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-bottom: 70px;
}

.product-box
{
    border-style: none;
    border-radius: 11px;
    border-color: rgb(199, 193, 193);
    width:300px;
    border-width: 1px;
    margin-top:10px;
    margin-left: 15px;
    padding-left: 0px;
    transition: transform 0.3s ease;
    box-shadow: 2px 2px 2px gray;
    background-color: rgb(226, 224, 224);
}

.product-box:hover,.productsimage:hover{
    transform:translateY(-5px);
}
.productsimage{
    width:250px;
    margin:20px 5px 5px 20px;
    cursor:pointer;
    border-radius: 9px;
    transition: transform 0.3s ease;
}

.price{
    font-weight: bold;
    font-size: 20px;
    display:block;
}
.productsname{
    margin-bottom: 0;
    cursor:pointer;
    width:130px;
    transition: text-decoration 0.15s ;
}
.productsname:hover{
    text-decoration: underline;
}
.details{
    font-size: 14px;
    color:gray;
    margin-top: 4px;
    width:130px;
}
.texts{
    display:flex;
    justify-content: center;
}

.buy-button{
    margin: 20px 10px 0px 0px;
    width:80px;
    height:30px;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    background-color: white;
    cursor: pointer;
    box-shadow: 2px 2px 2px black;
    border-color:black;
    transition: all 0.2s ease;
    font-size: 11px;
    
}
.buy-button:hover{
    background-color:#59331a;
    color:white;
    border:none;
    box-shadow: 1px 1px 1px #59331a;
   
}
i{
   color:white;
   width:100%;
}


@media(max-width:995px){
    .products{
        grid-template-columns: 1fr 1fr;
    }
}
@media(min-width:1285px){
    .products{
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}
@media(max-width:1286px) and (min-width:996px){
    .products{
        grid-template-columns: 1fr 1fr 1fr;
    }
}