*{
  box-sizing:border-box
}

body{
  margin:0;
  background:#0b0b0b;
  color:#f5f2ea;
  font-family:Arial,sans-serif
}

header{
  text-align:center;
  padding:45px 18px 30px;
  border-bottom:1px solid #262626
}

h1{
  font-size:34px;
  margin:8px
}

.eyebrow,
#warranty,
.price{
  color:#d7b56d
}

#tagline{
  color:#aaa
}

main{
  max-width:1150px;
  margin:auto;
  padding:22px 16px
}

#search{
  width:100%;
  padding:15px;
  border-radius:12px;
  border:1px solid #333;
  background:#151515;
  color:white;
  font-size:16px;
  outline:none
}

#search:focus{
  border-color:#d7b56d
}

/* CATEGORÍAS */

#categories{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  padding:16px 0
}

.cat{
  border:1px solid #333;
  background:#151515;
  color:#eee;
  border-radius:12px;
  padding:14px 10px;
  min-height:54px;
  cursor:pointer;
  font-size:13px;
  line-height:1.25;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  transition:.2s
}


.cat:hover{
  border-color:#666;
  transform:translateY(-1px)
}

.cat.active{
  border-color:#d7b56d;
  color:#d7b56d;
  background:#1b1811
}

/* TÍTULO Y CONTADOR */

.title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:12px 0
}

#count{
  color:#aaa;
  font-size:13px
}

/* MENSAJE CUANDO AÚN NO HAY CATEGORÍA */

.category-message{
  grid-column:1/-1;
  width:100%;
  text-align:center;
  padding:45px 20px;
  color:#aaa;
  border:1px dashed #333;
  border-radius:15px;
  background:#111
}

/* PRODUCTOS */

#products{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px
}

.card{
  background:#151515;
  border:1px solid #252525;
  border-radius:15px;
  overflow:hidden;
  transition:.2s
}

.card:hover{
  border-color:#3a3a3a;
  transform:translateY(-2px)
}

.card img{
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  background:#111;
  display:block
}

.body{
  padding:12px
}

.name{
  min-height:38px;
  line-height:1.25;
  font-size:14px
}

.sku{
  color:#999;
  font-size:12px;
  margin-top:5px
}

.price{
  font-size:18px;
  font-weight:bold;
  margin:9px 0
}

.wa{
  display:block;
  background:white;
  color:#111;
  text-align:center;
  text-decoration:none;
  font-weight:bold;
  padding:11px;
  border-radius:10px
}

.wa:hover{
  opacity:.9
}

footer{
  text-align:center;
  color:#777;
  padding:30px;
  font-size:12px
}

/* TABLET Y COMPUTADOR */

@media(min-width:650px){

  #categories{
    grid-template-columns:repeat(3,1fr)
  }

}

@media(min-width:800px){

  #categories{
    grid-template-columns:repeat(4,1fr)
  }

  #products{
    grid-template-columns:repeat(4,1fr)
  }

}

@media(min-width:1050px){

  #categories{
    grid-template-columns:repeat(6,1fr)
  }

}