@import url('style.css');
*{margin: 0; padding: 0;}
img{width: 50px; margin: 0;}

main{width: 100%; display: grid; place-items: center; padding: 0;}

main h1{margin: 25px;}
main form{width: 100%; position: relative; margin: 0; display: flex; justify-content: center;}
main form, .right-part button{
    width: 50%;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin: 10px;
    border: none;
    border-radius: 5px;
    background-color: var(--beige);
    outline: none;
}

main form input{border: none; width: calc(100% - 30px); background: transparent; position: relative; left: 0; outline: none;}
main form input::-webkit-search-cancel-button{
    -webkit-appearance: none;
    content: "";
    height: 20px;
    width: 20px;
    background: url('../images/icons/close.svg') center/cover no-repeat;
    border-radius:10px;
}

main form img{width: 25px; position: absolute; top: 7px; right: 10px;}

/***********/

#products{width: 100%;}

.product{
    width: 100%;
    margin: 0;
    padding: 25px;
    display: flex;
    flex-direction: column;
}
.product:nth-child(2){flex-direction: column;}
.product:nth-child(even) .product-content{flex-direction: row;}

.product-content{display: flex; margin: 0;}
.left-part{width: 50%;}
.right-part{width: 50%; height: 100%; margin: 0;}

.left-part h2{margin: 25px 25px 0 25px;}

.img{width: 100%; height: 100%; display: block; border-radius: 15px; margin: 0;}
.mint-chocolate{background: url('../images/mint-chocolate.webp') center/cover no-repeat;}
.honey-chocolate{background: url('../images/cioccolatini-miele.avif') center/cover no-repeat;}
.hazelnut-chocolate{background: url('../images/praline-nocciola.avif') center/cover no-repeat;}


.bottom{display: flex;}
.bottom a{margin: 0; display: grid; place-items: center;}
.bottom button{width: auto; padding: 15px; cursor: pointer;}

.bottom a, .bottom button{transition: .25s;}
.bottom a:hover, .bottom button:hover{scale: 1.075; transition: .25s;}

/***********/

.paginator{
    width: 80%;
    margin: 25px 0 100px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.paginator-container{display: flex;}

.paginator span{
    width: 50px; height: 50px;
    display: grid;
    place-items: center;
    margin: 0 10px;
    font-size: 1.25em;
    border: 1px solid #45322E;
    border-radius: 10px;
    transition: .25s;
    cursor: pointer;
}
.paginator span:hover{background: #45322E; color: white;}

.pages{display: flex;}
.chevron-left{transform: rotate(-90deg); border: none !important;}
.chevron-right{transform: rotate(90deg); border: none !important;}

.chevron-left:hover, .chevron-right:hover{background: none !important; scale: 1.25;}