/* ===============================
   MS EMPIRE STORE
   Luxury Black & Gold Theme
================================= */

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

html{
    scroll-behavior:smooth;
}

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

/* Gold Accent */
:root{
    --gold:#d4af37;
    --dark:#050505;
    --card:#111111;
    --light:#f5f5f5;
}

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

header{
    width:100%;
    position:fixed;
    top:0;
    left:0;
    padding:18px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(0,0,0,.85);
    backdrop-filter:blur(12px);
    z-index:999;
    border-bottom:1px solid rgba(212,175,55,.25);
}

.logo{
    font-size:28px;
    font-weight:700;
    color:var(--gold);
    display:flex;
    align-items:center;
    gap:10px;
}

img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
nav{
    display:flex;
    gap:35px;
}

nav a{
    text-decoration:none;
    color:white;
    font-size:16px;
    transition:.35s;
}

nav a:hover{
    color:var(--gold);
}

.cart-btn{
    text-decoration:none;
    background:var(--gold);
    color:black;
    padding:12px 24px;
    border-radius:40px;
    font-weight:600;
    transition:.35s;
}

.cart-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 0 20px rgba(212,175,55,.6);
}

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

.hero{
    height:100vh;
    background:
    linear-gradient(rgba(0,0,0,.75),
    rgba(0,0,0,.75)),
    url("images/store-bg.jpg") center/cover;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:30px;
}

.hero-content{
    max-width:850px;
    animation:fadeUp 1.2s ease;
}

.hero h1{
    font-size:65px;
    line-height:1.2;
}

.hero h1 span{
    color:var(--gold);
}

.hero p{
    margin:25px 0;
    font-size:20px;
    color:#ddd;
}

.buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.gold-btn{
    text-decoration:none;
    background:var(--gold);
    color:black;
    padding:16px 38px;
    border-radius:40px;
    font-weight:700;
    transition:.35s;
}

.gold-btn:hover{
    transform:translateY(-5px);
    box-shadow:0 0 25px rgba(212,175,55,.6);
}

.outline-btn{
    text-decoration:none;
    border:2px solid var(--gold);
    color:var(--gold);
    padding:16px 38px;
    border-radius:40px;
    transition:.35s;
}

.outline-btn:hover{
    background:var(--gold);
    color:black;
}

/* ================= FEATURES ================= */

.features{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:30px;
    padding:90px 8%;
}

.feature{
    background:var(--card);
    border:1px solid rgba(212,175,55,.15);
    border-radius:20px;
    padding:40px;
    text-align:center;
    transition:.35s;
}

.feature:hover{
    transform:translateY(-10px);
    border-color:var(--gold);
    box-shadow:0 15px 40px rgba(212,175,55,.18);
}

.feature i{
    font-size:45px;
    color:var(--gold);
    margin-bottom:20px;
}

.feature h3{
    margin-bottom:10px;
}

/* ================= ABOUT ================= */

.about{
    padding:100px 10%;
    text-align:center;
}

.about h2{
    font-size:42px;
    color:var(--gold);
    margin-bottom:20px;
}

.about p{
    max-width:800px;
    margin:auto;
    color:#ccc;
    line-height:1.9;
    margin-bottom:35px;
}

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

footer{
    margin-top:80px;
    padding:50px 20px;
    background:#0b0b0b;
    border-top:1px solid rgba(212,175,55,.15);
}

.footer-content{
    text-align:center;
}

.footer-content h2{
    color:var(--gold);
    margin-bottom:10px;
}

.socials{
    margin:25px 0;
}

.socials i{
    color:var(--gold);
    font-size:24px;
    margin:0 12px;
    cursor:pointer;
    transition:.3s;
}

.socials i:hover{
    transform:scale(1.2);
}

/* ================= ANIMATION ================= */

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* ================= MOBILE ================= */

@media(max-width:900px){

header{
flex-direction:column;
gap:20px;
padding:20px;
}

nav{
flex-wrap:wrap;
justify-content:center;
}

.hero h1{
font-size:42px;
}

.hero p{
font-size:17px;
}

.buttons{
flex-direction:column;
align-items:center;
}

.gold-btn,
.outline-btn{
width:260px;
text-align:center;
}

.about h2{
font-size:32px;
}

}
/* SHOP PAGE */

.shop-banner{

margin-top:90px;

padding:70px;

text-align:center;

background:#111;

}

.shop-banner h1{

font-size:50px;

color:#d4af37;

}

.shop-banner p{

margin-top:15px;

color:#ccc;

}

.search-section{

padding:30px;

text-align:center;

}

.search-section input{

width:90%;

max-width:600px;

padding:16px;

font-size:17px;

border:none;

border-radius:50px;

background:#1a1a1a;

color:white;

outline:none;

border:1px solid #d4af37;

}

.categories{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

padding:20px;

}

.categories button{

padding:12px 25px;

background:#d4af37;

border:none;

border-radius:30px;

cursor:pointer;

font-weight:600;

transition:.3s;

}

.categories button:hover{

transform:translateY(-4px);

}

.products{

padding:60px;

}

#product-container{

display:grid;

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

gap:30px;

}
/* PRODUCT CARD */

.product-card{
    background:#1b1b1b;
    border:2px solid #d4af37;
    border-radius:18px;
    overflow:hidden;
    padding:15px;
}

.product-card:hover{

transform:translateY(-8px);

border-color:#d4af37;

box-shadow:0 15px 35px rgba(212,175,55,.25);

}

.product-card img{

width:100%;

height:220px;

object-fit:cover;

border-radius:15px;

}

.product-card h3{

margin:18px 0 10px;

}

.price{

font-size:22px;

font-weight:bold;

color:#d4af37;

margin-bottom:15px;

}

.product-card button{

background:#d4af37;

color:black;

border:none;

padding:14px 28px;

border-radius:30px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.product-card button:hover{

transform:scale(1.05);

}
/* CART PAGE */

.cart-page{

padding:130px 8%;

}

.cart-page h1{

text-align:center;

color:#d4af37;

margin-bottom:40px;

}

.cart-item{

display:flex;

gap:25px;

background:#111;

padding:20px;

border-radius:18px;

margin-bottom:25px;

border:1px solid rgba(212,175,55,.15);

}

.cart-item img{

width:170px;

height:170px;

object-fit:cover;

border-radius:15px;

}

.cart-details{

flex:1;

}

.cart-details h2{

margin-bottom:10px;

}

.cart-details p{

font-size:20px;

color:#d4af37;

}

.quantity{

display:flex;

align-items:center;

gap:15px;

margin:20px 0;

}

.quantity button{

width:40px;

height:40px;

border:none;

background:#d4af37;

font-size:22px;

font-weight:bold;

cursor:pointer;

border-radius:50%;

}

.remove{

margin-top:15px;

background:red;

color:white;

padding:12px 20px;

border:none;

border-radius:30px;

cursor:pointer;

}

.cart-summary{

margin-top:50px;

text-align:right;

}

.cart-summary h2{

color:#ccc;

}

.cart-summary h3{

font-size:36px;

color:#d4af37;

margin:20px 0;

}

.empty-cart{

text-align:center;

padding:80px;

background:#111;

border-radius:20px;

}
/* ===========================
CHECKOUT PAGE
=========================== */

.checkout-page{

padding:130px 8%;

}

.checkout-container{

display:grid;

grid-template-columns:1fr 400px;

gap:40px;

}

.checkout-form{

background:#111;

padding:40px;

border-radius:20px;

}

.checkout-form h1{

color:#d4af37;

margin-bottom:25px;

}

.checkout-form input,
.checkout-form textarea,
.checkout-form select{

width:100%;

padding:18px;

margin-bottom:18px;

background:#1c1c1c;

border:1px solid rgba(212,175,55,.3);

color:white;

border-radius:10px;

font-size:16px;

}

.checkout-form textarea{

height:120px;

resize:none;

}

.checkout-form button{

width:100%;

padding:18px;

background:#d4af37;

color:black;

font-size:18px;

font-weight:700;

border:none;

border-radius:50px;

cursor:pointer;

transition:.3s;

}

.checkout-form button:hover{

transform:translateY(-4px);

box-shadow:0 0 20px rgba(212,175,55,.5);

}

.order-summary{

background:#111;

padding:35px;

border-radius:20px;

height:fit-content;

}

.order-summary h2{

color:#d4af37;

margin-bottom:20px;

}

.summary-item{

display:flex;

justify-content:space-between;

margin-bottom:15px;

padding-bottom:15px;

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

}

#summary-total{

margin-top:25px;

font-size:34px;

}
.product-image{
    width:100%;
    height:220px;
    overflow:hidden;
    border-radius:15px;
    margin-bottom:15px;
    background:#222;
}

.product-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
/* LEARN MORE & CONTACT PAGE */

.page-banner{

margin-top:90px;

padding:80px 20px;

text-align:center;

background:#111;

}

.page-banner h1{

font-size:50px;

color:#d4af37;

margin-bottom:15px;

}

.page-banner p{

color:#ddd;

}

.info-section{

padding:70px 8%;

display:grid;

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

gap:30px;

}

.info-card{

background:#111;

padding:30px;

border-radius:18px;

border:1px solid rgba(212,175,55,.2);

}

.info-card h2{

color:#d4af37;

margin-bottom:20px;

}

.info-card p{

line-height:1.8;

color:#ddd;

}

.info-card ul{

padding-left:20px;

line-height:2;

}

.contact-container{

padding:70px 8%;

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

}

.contact-info,

.contact-form{

background:#111;

padding:35px;

border-radius:20px;

}

.contact-info h2,

.contact-form h2{

color:#d4af37;

margin-bottom:20px;

}

.contact-info p{

margin:20px 0;

font-size:18px;

}

.contact-info i{

color:#d4af37;

margin-right:10px;

}

.contact-form input,

.contact-form textarea{

width:100%;

padding:15px;

margin-bottom:20px;

background:#1a1a1a;

color:white;

border:1px solid #d4af37;

border-radius:10px;

}

.contact-form textarea{

height:150px;

resize:none;

}

.contact-form button{

width:100%;

padding:16px;

background:#d4af37;

border:none;

border-radius:40px;

font-size:18px;

font-weight:bold;

cursor:pointer;

transition:.3s;

}

.contact-form button:hover{

transform:translateY(-3px);

}

@media(max-width:900px){

.contact-container{

grid-template-columns:1fr;

}

}