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

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

a{
text-decoration:none;
color:#fff;
}

img{
width:100%;
display:block;
}

button{
cursor:pointer;
font-family:inherit;
border:none;
outline:none;
}

header{
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
padding:0 7%;
background:#000;
display:flex;
justify-content:space-between;
align-items:center;
z-index:1000;
border-bottom:1px solid #222;
}

.logo{
display:flex;
align-items:center;
gap:12px;
font-size:28px;
font-weight:700;
letter-spacing:6px;
}

.logo img{
width:42px;
height:42px;
object-fit:contain;
}

nav{
display:flex;
gap:45px;
}

nav a{
font-size:13px;
letter-spacing:3px;
transition:.3s;
}

nav a:hover{
color:#bdbdbd;
}

.icons{
display:flex;
gap:25px;
font-size:20px;
}

.hero{
padding:150px 7% 80px;
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:80px;
min-height:100vh;
}

.hero-image{
display:flex;
justify-content:center;
align-items:center;
}

.hero-image img{
width:100%;
max-width:650px;
object-fit:contain;
filter:drop-shadow(0 0 35px rgba(255,255,255,.2));
}

.hero-text p{
letter-spacing:8px;
font-size:13px;
margin-bottom:20px;
color:#999;
}

.hero-text h1{
font-size:70px;
font-weight:800;
letter-spacing:8px;
margin-bottom:35px;
}

.btn{
display:inline-block;
padding:16px 45px;
border:1px solid #fff;
transition:.3s;
font-size:14px;
letter-spacing:2px;
}

.btn:hover{
background:#fff;
color:#000;
}

.products{
padding:80px 7%;
}

.products h2{
text-align:center;
font-size:28px;
letter-spacing:8px;
margin-bottom:70px;
}

.grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
}

.card{
background:#0b0b0b;
border:1px solid #222;
border-radius:18px;
overflow:hidden;
transition:.35s;
}

.card:hover{
transform:translateY(-8px);
border-color:#fff;
box-shadow:0 0 30px rgba(255,255,255,.08);
}

.card img{
height:380px;
object-fit:cover;
background:#151515;
}

.card h3{
padding:20px 20px 8px;
font-size:18px;
letter-spacing:3px;
}

.card p{
padding:0 20px;
margin-bottom:20px;
color:#bbb;
}
.sizes{
display:flex;
gap:10px;
padding:20px;
}

.sizes button{
flex:1;
height:42px;
background:transparent;
color:#fff;
border:1px solid #444;
transition:.3s;
}

.sizes button:hover,
.active-size{
background:#fff !important;
color:#000 !important;
}

.buttons{
display:flex;
gap:10px;
padding:0 20px 20px;
}

.buttons button{
flex:1;
height:48px;
background:transparent;
border:1px solid #fff;
color:#fff;
border-radius:10px;
font-weight:600;
letter-spacing:2px;
transition:.3s;
}

.buttons button:hover{
background:#fff;
color:#000;
}

.about{
padding:80px 7%;
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
}

.about div{
background:#111;
border:1px solid #222;
padding:50px;
}

.about h2{
letter-spacing:6px;
margin-bottom:25px;
}

.about p{
line-height:1.9;
color:#bbb;
margin-bottom:25px;
}

.products-page{
padding:140px 7% 80px;
}

.products-page h1{
text-align:center;
font-size:50px;
letter-spacing:8px;
margin-bottom:15px;
}

.subtitle{
text-align:center;
color:#999;
margin-bottom:60px;
}

.cart-page{
padding:140px 7%;
}

.cart-page h1{
text-align:center;
letter-spacing:6px;
margin-bottom:60px;
}

.cart-item{
display:grid;
grid-template-columns:180px 1fr auto;
gap:30px;
align-items:center;
background:#111;
border:1px solid #222;
padding:25px;
border-radius:15px;
}

.cart-image img{
width:100%;
}

.cart-details h2{
margin-bottom:15px;
}

.price{
color:#aaa;
margin-bottom:20px;
}

.quantity{
display:flex;
align-items:center;
gap:15px;
}

.quantity button{
width:40px;
height:40px;
background:#fff;
color:#000;
border:none;
}

.cart-summary{
margin-top:40px;
background:#111;
border:1px solid #222;
padding:30px;
border-radius:15px;
}

.summary-row{
display:flex;
justify-content:space-between;
margin:18px 0;
}

.total{
font-size:22px;
font-weight:700;
}

.checkout-btn,
.continue-btn{
width:100%;
height:55px;
margin-top:20px;
font-size:15px;
font-weight:600;
cursor:pointer;
}

.checkout-btn{
background:#fff;
color:#000;
}

.continue-btn{
background:transparent;
border:1px solid #fff;
color:#fff;
}
.checkout{
padding:140px 7%;
max-width:700px;
margin:auto;
}

.checkout h1,
.about-page h1,
.contact-page h1{
text-align:center;
font-size:50px;
letter-spacing:6px;
margin-bottom:40px;
}

.input-box{
margin-bottom:25px;
}

.input-box input,
.contact-page textarea{
width:100%;
background:#111;
border:1px solid #333;
color:#fff;
padding:18px 20px;
font-size:15px;
outline:none;
font-family:inherit;
}

.input-box input{
height:55px;
}

.contact-page textarea{
resize:none;
}

.input-box input:focus,
.contact-page textarea:focus{
border-color:#fff;
}

.about-page{
max-width:900px;
margin:auto;
padding:140px 7%;
text-align:center;
}

.about-page p{
color:#bbb;
line-height:2;
font-size:18px;
}

.contact-page{
max-width:800px;
margin:auto;
padding:140px 7%;
}

.contact-text{
text-align:center;
color:#999;
margin-bottom:50px;
}

.contact-info{
margin-top:50px;
text-align:center;
}

.contact-info p{
margin:15px 0;
color:#bbb;
}

.contact-info a{
color:#fff;
transition:.3s;
}

.contact-info a:hover{
color:#ccc;
}

footer{
padding:35px;
text-align:center;
border-top:1px solid #222;
letter-spacing:3px;
font-size:12px;
color:#888;
margin-top:70px;
}

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:#000;
}

::-webkit-scrollbar-thumb{
background:#444;
}

/* Loader */

#loader{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:#000;
display:flex;
justify-content:center;
align-items:center;
z-index:99999;
transition:.5s;
}

#loader img{
width:110px;
animation:pulse 1.5s infinite;
}

@keyframes pulse{
0%{transform:scale(.9);opacity:.5;}
50%{transform:scale(1);opacity:1;}
100%{transform:scale(.9);opacity:.5;}
}

body.loaded #loader{
opacity:0;
visibility:hidden;
}