@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');

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

body{
background:#000;
color:#fff;
overflow-x:hidden;
}

/* ================= HEADER ================= */

header{
position:fixed;
top:0;
left:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:8px 60px;
background:transparent;
height:80px;
z-index:1000;
transition:.4s ease;
}

header.scrolled{
background:#fff;
box-shadow:0 2px 10px rgba(0,0,0,.15);
}

.logo img{
width:230px;
}

nav ul{
display:flex;
gap:30px;
list-style:none;
}

nav ul li a{
color:#fff;
font-weight:600;
text-decoration:none;
transition:.3s;
}

header.scrolled nav ul li a{
color:#000;
}

nav ul li a:hover,
nav ul li a.active{
color:#ff2e2e;
}

/* ================= HERO ================= */

.product-hero{
padding:160px 20px 100px;
background:#111;
text-align:center;
}

.product-hero h1{
font-size:50px;
margin-bottom:10px;
}

.product-hero p{
color:#bbb;
}

/* ================= PRODUCTS ================= */

.product-grid{
max-width:1200px;
margin:90px auto;
padding:0 20px;

display:grid;
grid-template-columns:repeat(4, 1fr);  /* always 4 per row */
gap:40px;
}

@media(max-width:1100px){
  .product-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:800px){
  .product-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:500px){
  .product-grid{
    grid-template-columns:1fr;
  }
}

.product-card{
background:#111;
border-radius:14px;
overflow:hidden;
transition:.35s;
}

.product-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 50px rgba(255,46,46,.25);
}

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

.product-card h3{
margin:15px;
}

.price{
color:#ff2e2e;
font-weight:700;
margin:0 15px;
}

.desc{
color:#bbb;
font-size:14px;
padding:10px 15px 20px;
}

/* ================= FOOTER ================= */

.site-footer{
background:#000;
border-top:1px solid #222;
}

.footer-container{
max-width:1200px;
margin:auto;
padding:60px 20px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:40px;
}

.footer-logo{
width:160px;
margin-bottom:15px;
}

.footer-box h4{
color:#ff2e2e;
margin-bottom:15px;
}

.footer-box p,
.footer-box li{
color:#ccc;
font-size:14px;
line-height:1.6;
list-style:none;
margin-bottom:8px;
}
.footer-social a{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
background:#111;
border-radius:50%;
margin-right:10px;
color:#fff;
transition:.3s;
}
.footer-box ul li a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s;
}
.footer-social a:hover{
background:#ff2e2e;
}

.footer-bottom{
text-align:center;
padding:20px;
border-top:1px solid #222;
color:#aaa;
font-size:13px;
}


/* HIDE DESCRIPTION INITIALLY */
.product-desc{
  max-height:0;
  overflow:hidden;
  color:#bbb;
  font-size:14px;
  padding:0 15px;
  transition:.35s ease;
}

/* SHOW WHEN ACTIVE */
.product-card.active .product-desc{
  max-height:200px;
  padding:10px 15px;
}

/* BUY BUTTON */

.buy-btn{
  display:block;
  margin:15px;
  padding:12px;
  text-align:center;
  background:#ff2e2e;
  color:#fff;
  text-decoration:none;
  font-weight:600;
  border-radius:6px;
  transition:.3s;
}

.buy-btn:hover{
  background:#e02020;
}

.product-filters{
  max-width:1100px;
  margin:30px auto;
  padding:0 20px;
}

.product-filters form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

.product-filters select,
.product-filters input{
  padding:10px;
  border-radius:6px;
  border:1px solid #ccc;
  font-family:Montserrat;
}

.product-filters button{
  background:#111;
  color:#fff;
  padding:10px 18px;
  border:none;
  border-radius:6px;
  cursor:pointer;
}

.reset-btn{
  padding:10px 16px;
  background:#eee;
  border-radius:6px;
  text-decoration:none;
  color:#333;
}