*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

body{

background:#0d0d0d;

color:white;

max-width:480px;

margin:auto;

overflow-x:hidden;

}

.topBar{

position:sticky;

top:0;

background:#111;

padding:15px;

z-index:100;

box-shadow:0 5px 20px rgba(0,0,0,.4);

}

.title{

font-size:24px;

font-weight:bold;

margin-bottom:15px;

}

#search{

width:100%;

padding:16px;

border:none;

outline:none;

border-radius:18px;

font-size:17px;

background:#202020;

color:white;

}

#cards{

padding:18px;

display:flex;

flex-direction:column;

gap:22px;

}

.card{

background:#1b1b1b;

border-radius:25px;

overflow:hidden;

box-shadow:0 12px 35px rgba(0,0,0,.45);

transition:.25s;

}

.card:active{

transform:scale(.98);

}

.media{

width:100%;

aspect-ratio:1/1;

object-fit:cover;

background:#333;

display:block;

}

.content{

padding:18px;

}

.name{

font-size:22px;

font-weight:bold;

margin-bottom:8px;

}

.rating{

font-size:18px;

color:#FFD700;

margin-bottom:10px;

}

.desc{

font-size:15px;

line-height:1.5;

opacity:.85;

margin-bottom:18px;

}

.buy{

display:block;

width:100%;

text-align:center;

padding:16px;

background:#19b36b;

color:white;

font-weight:bold;

font-size:18px;

border-radius:16px;

text-decoration:none;

}

.buy:active{

transform:scale(.97);

}

#loader{

padding:30px;

text-align:center;

opacity:.6;

}

@media(min-width:481px){

body{

background:#000;

}

}
.details{

display:block;

margin-top:12px;

padding:14px;

border-radius:14px;

text-align:center;

background:#2c2c2c;

color:white;

text-decoration:none;

font-weight:bold;

}
.product-page{
max-width:480px;
margin:auto;
padding:20px;
}

.product-content{
padding-top:20px;
}

.product-content h2{
font-size:26px;
margin-bottom:15px;
}

.product-content .rating{
font-size:20px;
font-weight:bold;
color:#FFD700;
margin-bottom:20px;
}

.product-content .buy,
.product-content .back{
display:block;
width:100%;
padding:16px;
margin-top:15px;
text-align:center;
text-decoration:none;
border-radius:16px;
box-sizing:border-box;
}

.back{
background:#333;
color:#fff;
}

#loadMore{
display:block;
width:calc(100% - 36px);
margin:20px auto 30px;
padding:16px;
background:#19b36b;
color:#fff;
font-size:18px;
font-weight:bold;
border:none;
border-radius:18px;
cursor:pointer;
transition:.2s;
}

#loadMore:hover{
opacity:.9;
}

#loadMore:active{
transform:scale(.97);
}

#loadMore:disabled{
background:#555;
cursor:not-allowed;
opacity:.7;
}