*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial;
color:#fff;
text-align:center;
overflow-x:hidden;
}

/* BACKGROUND */
body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url("images/bg.jpg") no-repeat center center;
background-size:cover;
z-index:-2;
}

body::after{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.35);
z-index:-1;
}

/* HEADER */
header{
padding:25px;
background:rgba(0,0,0,0.5);
}

.logo{
max-width:420px;
width:90%;
}

/* FLAGS */
.flag{
width:40px;
height:25px;
margin:5px;
cursor:pointer;
}

/* GRID */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
padding:30px;
}

/* CARD */
.card{
background:rgba(0,0,0,0.6);
border-radius:10px;
overflow:hidden;
cursor:pointer;
transition:0.3s;
}

.card:hover{
transform:scale(1.05);
}

.img-wrap{
position:relative;
}

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

.badge{
position:absolute;
top:10px;
left:10px;
padding:5px 10px;
font-size:12px;
font-weight:bold;
border-radius:5px;
z-index:10;
}

.sold{
background:red;
color:white;
}

.limited{
background:gold;
color:black;
}

.knife-id{
position:absolute;
bottom:10px;
right:10px;
background:black;
color:white;
padding:3px 8px;
font-size:12px;
border-radius:5px;
z-index:10;
}

.card h3{
padding:10px;
}

.desc{
font-size:14px;
color:#ccc;
padding:0 10px;
}

.specs{
padding:10px;
font-size:14px;
color:#ccc;
text-align:left;
}

.price{
color:gold;
font-weight:bold;
}

.status{
color:orange;
}

/* BUTTON */
.card button{
margin:10px;
padding:10px;
border:none;
border-radius:6px;
cursor:pointer;
background:#25D366;
color:#fff;
}

/* MODAL */
.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.95);
justify-content:center;
align-items:center;
flex-direction:column;
z-index:999;
}

.modal img{
max-width:90%;
max-height:75%;
}

.close{
position:absolute;
top:20px;
right:30px;
font-size:35px;
cursor:pointer;
}

.nav{
margin-top:20px;
}

/* 🔥 ПО-ГОЛЕМИ БУТОНИ ЗА ТЕЛЕФОН */
.nav button{
padding:20px 30px;
font-size:28px;
border-radius:10px;
background:rgba(0,0,0,0.6);
color:white;
border:none;
}

/* 📱 СПЕЦИАЛНО ЗА МОБИЛНИ */
@media (max-width:768px){

.nav{
width:100%;
display:flex;
justify-content:space-between;
padding:0 20px;
}

.nav button{
width:45%;
padding:25px;
font-size:32px;
}

}
/* 🔥 MATERIAL BADGE */
.material{
  display:inline-block;
  margin-top:6px;
  padding:4px 10px;
  font-size:12px;
  background:rgba(255,215,0,0.1);
  color:gold;
  border:1px solid rgba(255,215,0,0.3);
  border-radius:6px;
}

/* BASE */
.material{
  display:inline-block;
  margin-top:6px;
  padding:4px 10px;
  font-size:12px;
  border-radius:6px;
  border:1px solid;
}

/* 🔥 Elmax (gold premium) */
.mat-elmax{
  color:gold;
  background:rgba(255,215,0,0.1);
  border-color:rgba(255,215,0,0.4);
}

/* 🔥 Damascus (red premium) */
.mat-damascus{
  color:#ff4d4d;
  background:rgba(255,0,0,0.1);
  border-color:rgba(255,0,0,0.4);
}

/* 🔥 D2 (silver steel) */
.mat-d2{
  color:#ccc;
  background:rgba(200,200,200,0.1);
  border-color:rgba(200,200,200,0.4);
}

/* default */
.mat-default{
  color:#aaa;
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.2);
}