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


body{

background:#000;
color:white;

}


header{

height:80px;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 8%;

background:#000;

}



.logo{

font-size:25px;
font-weight:900;
letter-spacing:3px;

}



nav a{

color:white;
text-decoration:none;
margin-left:30px;

}



.hero{

height:90vh;

background:
linear-gradient(
rgba(0,0,0,.6),
rgba(0,0,0,.9)
),
url("images/cards-background.png");


background-size:cover;

display:flex;
align-items:center;
justify-content:center;

text-align:center;

}



.hero h1{

font-size:70px;

}



.hero p{

margin:20px;
font-size:20px;

}



.button,
button{

background:white;
color:black;
border:none;

padding:15px 30px;

cursor:pointer;

font-weight:bold;

}



.featured,
.page{

padding:80px 8%;
text-align:center;

}



.products{

display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;

margin-top:40px;

}



.card{

width:280px;

}



.card img{

width:100%;
height:300px;

object-fit:contain;

}



.card h3{

margin:15px;

}



.popup{

display:none;

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.8);

align-items:center;
justify-content:center;

}



.popup-box{

background:#111;
padding:40px;
width:350px;

}



.popup-box select,
.popup-box label{

display:block;
width:100%;
margin:15px 0;

}



.close{

float:right;
cursor:pointer;
font-size:25px;

}



/* =========================
   PRODUCT PAGE LAYOUT
========================= */


.product-page{

display:flex;

justify-content:center;

align-items:center;

gap:70px;

padding:100px 8%;

min-height:80vh;

}




/* IMAGE AREA */

#imageControls{

display:flex;

align-items:center;

justify-content:center;

gap:25px;

}




#productImage{

width:450px;

height:550px;

object-fit:contain;

display:block;

}




#imageControls button{

width:50px;

height:50px;

padding:0;

margin:0;

font-size:22px;

display:flex;

align-items:center;

justify-content:center;

}






/* PRODUCT DETAILS */


.product-info{

text-align:left;

max-width:350px;

}





.product-info button{

margin-left:0;

}





.product-info select{

width:100%;

margin-top:10px;

}



form{

max-width:400px;
margin:auto;

}



input,
textarea{

width:100%;
padding:15px;
margin:10px;

background:#111;

border:1px solid white;

color:white;

}



footer{

background:#000;
text-align:center;
padding:40px;

}

.lookbook{

padding:100px 8%;

background:#050505;

text-align:center;

}



.lookbook h2{

font-size:40px;

letter-spacing:3px;

margin-bottom:15px;

}



.lookbook p{

color:#aaa;

margin-bottom:50px;

}



.lookbook-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

}



.lookbook-image{

height:500px;

overflow:hidden;

background:#111;

}



.lookbook-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

}



.lookbook-image img:hover{

transform:scale(1.05);

}

.hero h1{

font-family:'Jacques Francois', serif;

font-size:80px;

letter-spacing:4px;

}



.hero p{

font-family:'Kapakana', serif;

font-size:28px;

letter-spacing:2px;

}

/* =========================
   BUTTON STYLING
========================= */


.button,
button{

display:inline-block;

background:white;

color:black;

text-decoration:none;

border:none;

padding:16px 38px;

margin:15px;

font-size:14px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

cursor:pointer;

transition:all 0.35s ease;

position:relative;

overflow:hidden;

}




.button:hover,
button:hover{

background:#000;

color:white;

outline:1px solid white;

transform:translateY(-5px);

}





.button::before,
button::before{

content:"";

position:absolute;

left:0;

bottom:0;

height:2px;

width:0%;

background:white;

transition:0.35s ease;

}



.button:hover::before,
button:hover::before{

width:100%;

}







/* HERO SHOP BUTTON */

.hero .button{

margin-top:35px;

font-size:15px;

padding:18px 50px;

letter-spacing:3px;

}





/* PRODUCT VIEW BUTTONS */

.card .button{

margin-top:20px;

}





/* PRODUCT BUY BUTTON */

.product-info button{

margin-top:25px;

}





/* FORM BUTTON */

form button{

margin-top:20px;

}

/* =========================
   PRODUCT TYPOGRAPHY
========================= */


.card h3{

font-family:'Jacques Francois', serif;

font-size:28px;

letter-spacing:2px;

font-weight:400;

margin-top:20px;

}



.card p{

font-family:'Jacques Francois', serif;

font-size:20px;

letter-spacing:1px;

color:#d6d6d6;

margin-top:10px;

}




.product-info h1{

font-family:'Jacques Francois', serif;

font-size:45px;

letter-spacing:3px;

font-weight:400;

}



.product-info p{

font-family:'Jacques Francois', serif;

font-size:25px;

letter-spacing:2px;

}

/* =========================
   SECTION HEADINGS
========================= */


/* Featured Drops */

.featured h2{

font-family:'Jacques Francois', serif;

font-size:45px;

letter-spacing:4px;

font-weight:400;

}



/* Wild Card Lookbook */

.lookbook h2{

font-family:'Jacques Francois', serif;

font-size:45px;

letter-spacing:4px;

font-weight:400;

}



/* Lookbook subtitle */

.lookbook p{

font-family:'Kapakana', serif;

font-size:28px;

letter-spacing:2px;

color:#d6d6d6;

}

/* =========================
   GLOBAL PAGE TYPOGRAPHY
========================= */


/* Main page headings */

.page h1{

font-family:'Jacques Francois', serif;

font-size:55px;

font-weight:400;

letter-spacing:5px;

margin-bottom:40px;

}





/* Page introduction text */

.page p{

font-family:'Kapakana', serif;

font-size:28px;

line-height:1.6;

letter-spacing:1px;

color:#d6d6d6;

max-width:800px;

margin:0 auto;

}





/* Contact page */

form input,
form textarea{

font-family:'Kapakana', serif;

font-size:18px;

letter-spacing:1px;

}





/* Product page labels */

.product-info h3{

font-family:'Jacques Francois', serif;

font-size:24px;

font-weight:400;

letter-spacing:2px;

}





/* Dropdown menus */

.product-info select{

font-family:'Kapakana', serif;

font-size:18px;

padding:12px;

background:#111;

color:white;

border:1px solid white;

}





/* Footer */

footer{

font-family:'Kapakana', serif;

font-size:18px;

letter-spacing:2px;

}

/* =========================
   PRODUCT BADGE OVERLAY
========================= */


.product-image-wrap{

position:relative;

}



.product-image-wrap img{

width:100%;

display:block;

}




.collab-badge{

position:absolute;

top:20px;

left:20px;


background:white;

color:black;


padding:10px 18px;


font-size:12px;

font-weight:bold;

letter-spacing:2px;


z-index:2;


transform:rotate(-5deg);


box-shadow:0 5px 15px rgba(0,0,0,0.4);


}

.collab-badge{

transition:all 0.3s ease;

}



.collab-badge:hover{

background:#0057ff;

color:white;

transform:rotate(-5deg) scale(1.08);

}

/* =========================
   ANNOUNCEMENT BAR
========================= */


/* =========================
   GLASS ANNOUNCEMENT BAR
========================= */


.announcement-bar{

width:100%;

height:42px;


background:rgba(255,255,255,0.08);


border-top:1px solid rgba(255,255,255,0.2);

border-bottom:1px solid rgba(255,255,255,0.2);


backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);


box-shadow:0 8px 30px rgba(0,0,0,0.25);


overflow:hidden;

display:flex;

align-items:center;


}



.announcement-track{

display:flex;

white-space:nowrap;

will-change:transform;

}




.announcement-track span{


font-family:'Jacques Francois', serif;


font-size:18px;


letter-spacing:3px;


padding-right:80px;


color:white;


text-shadow:

0 2px 10px rgba(0,0,0,0.8);


}