.store-container{
padding:40px;
}

.title{
text-align:center;
margin-bottom:30px;
}


/* SEARCH AREA */

.store-top{

display:flex;
justify-content:center;
gap:20px;
margin-bottom:40px;
flex-wrap:wrap;

}

.store-top input{

padding:10px;
width:250px;
border:1px solid #ccc;

}

.store-top select{

padding:10px;
border:1px solid #ccc;

}


/* GRID */

.book-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;

}


/* CARD */

.book-card{

background:white;
border:1px solid #ddd;
padding:20px;
text-align:center;
transition:.3s;

}

.book-card:hover{

transform:translateY(-5px);
box-shadow:0px 5px 15px rgba(0,0,0,0.2);

}

.book-card img{

width:100%;
height:250px;
object-fit:cover;

}

.price{
color:#c1121f;
font-weight:700;
font-size:19px;
}
.original-price{
text-decoration: line-through;
color: #888;
font-size: 14px;
}

.discount-price{
color:#c1121f;
font-weight:700;
font-size:19px;
font-weight:800;
}

.off{
color: green;
font-size: 13px;
margin-left: 5px;
}

/* BUTTON AREA */

.btn-area{

display:flex;
justify-content:center;
gap:10px;
margin-top:10px;

}

.btn-area button{

background:#FFC107;
border:none;
padding:8px 12px;
cursor:pointer;
font-weight:bold;

}

.btn-area a{

text-decoration:none;
background:black;
color:white;
padding:8px 12px;

}

.btn-area button:hover{

background:black;
color:white;

}

.book-card{

transition:.4s;

}

.book-card:hover{

transform:translateY(-10px) scale(1.03);
box-shadow:0px 10px 25px rgba(0,0,0,.25);

}

.sale-ribbon{
position:absolute;
top:10px;
left:-5px;
background:red;
color:white;
padding:5px 15px;
font-size:12px;
font-weight:bold;
transform:rotate(-20deg);
}
.book-card{
position:relative;
}

.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.book-card {
    max-width: 250px;
    margin: auto;
}

.book-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.book-card {
    max-width: 250px;
    margin: auto;
}

.book-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}