/* =========================
RESET
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:#0b1220;
color:#fff;
overflow-x:hidden;
line-height:1.5;
}

/* =========================
SCROLLBAR
========================= */

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

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

::-webkit-scrollbar-thumb{
background:#00d4ff;
border-radius:10px;
}

/* =========================
TOP BAR
========================= */

.topbar{
background:#000;
padding:10px 5%;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:10px;
font-size:.85rem;
border-bottom:1px solid rgba(255,255,255,.08);
}

.topbar div{
display:flex;
align-items:center;
gap:8px;
color:#ddd;
}

.topbar i{
color:#fbbf24;
}

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

header{
position:sticky;
top:0;
z-index:1000;
background:#0f172a;
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 5%;
box-shadow:0 3px 12px rgba(0,0,0,.25);
}

.logo{
display:flex;
align-items:center;
gap:10px;
}

.logo-icon{
width:50px;
height:50px;
border-radius:10px;
background:linear-gradient(135deg,#00d4ff,#fbbf24);
display:flex;
justify-content:center;
align-items:center;
font-size:1.6rem;
font-weight:700;
color:#000;
}

.logo h2{
color:#fbbf24;
line-height:1;
font-size:1.3rem;
}

.logo span{
font-size:.75rem;
color:#ccc;
}

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

nav a{
color:#fff;
text-decoration:none;
font-weight:500;
}

nav a:hover{
color:#00d4ff;
}

.header-actions{
display:flex;
align-items:center;
gap:12px;
}

#cartBtn{
background:#00d4ff;
border:none;
padding:8px 12px;
border-radius:8px;
cursor:pointer;
position:relative;
}

#cartCount{
position:absolute;
top:-6px;
right:-6px;
background:red;
color:#fff;
width:18px;
height:18px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:.7rem;
}

.menu-btn{
display:none;
background:none;
border:none;
color:#fff;
font-size:1.5rem;
cursor:pointer;
}

/* =========================
HERO
========================= */
.hero{
    height:90vh;
    background:url("images/hero.png") center/cover no-repeat;
    position:relative;
    display:flex;
    align-items:center;
    padding:0 6%;
    overflow:hidden;
}

/* dark overlay */
.overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.6);
    z-index:1;
}

/* content sits above overlay */
.hero-content{
    position:relative;
    z-index:2;
    max-width:650px;
}

.hero-badge{
    display:inline-block;
    padding:10px 18px;
    border:1px solid #00d4ff;
    border-radius:30px;
    color:#00d4ff;
    margin-bottom:20px;
    font-weight:600;
}

.hero h1{
    font-size:3.2rem;
    line-height:1.1;
    margin-bottom:10px;
}

.hero h2{
    font-size:2.2rem;
    color:#fbbf24;
    margin-bottom:20px;
}

.hero p{
    color:#ddd;
    font-size:1rem;
    line-height:1.6;
    margin-bottom:25px;
}

.hero-buttons{
display:flex;
gap:12px;
flex-wrap:wrap;
}

.btn-primary,
.btn-secondary{
padding:12px 22px;
border-radius:10px;
text-decoration:none;
color:#fff;
font-weight:600;
transition:.3s;
}

.btn-primary{
background:#00d4ff;
}

.btn-primary:hover{
transform:translateY(-3px);
}

.btn-secondary{
border:2px solid #fbbf24;
}

/* =========================
SECTIONS
========================= */

section{
padding:80px 7%;
}

.section-title{
text-align:center;
font-size:2rem;
margin-bottom:35px;
position:relative;
}

.section-title::after{
content:'';
width:80px;
height:4px;
background:#00d4ff;
display:block;
margin:15px auto;
border-radius:20px;
}

/* =========================
CATEGORIES
========================= */

.category-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
}

.category-card{
background:#111827;
padding:30px;
text-align:center;
border-radius:16px;
transition:.3s;
border:1px solid rgba(255,255,255,.05);
}

.category-card:hover{
transform:translateY(-8px);
}

.category-card i{
font-size:3rem;
color:#00d4ff;
margin-bottom:15px;
}

/* =========================
SEARCH
========================= */

.search-section{
padding-top:0;
}

#searchInput{
width:100%;
padding:16px;
border:none;
border-radius:12px;
font-size:1rem;
background:#111827;
color:#fff;
outline:none;
}

/* =========================
FILTERS
========================= */

.filter-buttons{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:35px;
}

.filter{
border:none;
padding:10px 20px;
border-radius:30px;
cursor:pointer;
background:#1e293b;
color:#fff;
transition:.3s;
}

.filter.active,
.filter:hover{
background:#00d4ff;
}

/* =========================
PRODUCTS
========================= */
.product-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:25px;
align-items:stretch;
}

/* PRODUCT CARD */
.product-card{
background:#111827;
border-radius:18px;
overflow:hidden;
transition:.3s;
border:1px solid rgba(255,255,255,.05);
display:flex;
flex-direction:column;
height:100%;
}

/* HOVER EFFECT */
.product-card:hover{
transform:translateY(-8px);
}

/* IMAGE (UNIFORM LOOK) */
.product-card img{
width:100%;
height:220px;
object-fit:cover;
object-position:center;
display:block;
}

/* TITLE (FOR ALIGNMENT CONSISTENCY) */
.product-card h3{
padding:15px 15px 5px;
min-height:48px;
}

/* PRICE */
.product-card p{
padding:0 15px;
font-weight:700;
color:#fbbf24;
font-size:1.2rem;
}

#checkoutBtn{
width:100%;
padding:15px;
border:none;
background:#25d366;
color:#fff;
border-radius:10px;
font-weight:600;
cursor:pointer;
margin-top:15px;
font-size:1rem;
transition:.3s;
display:flex;
justify-content:center;
align-items:center;
gap:8px;
}

/* BUTTON (ALWAYS AT BOTTOM) */
.product-card button{
margin:15px;
width:calc(100% - 30px);
padding:12px;
border:none;
background:#00d4ff;
color:#fff;
border-radius:10px;
cursor:pointer;
font-weight:600;
margin-top:auto;
}
/* =========================
ABOUT
========================= */

.about-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:20px;
}

.about-grid div{
background:#111827;
padding:25px;
border-radius:16px;
}

/* =========================
CONTACT
========================= */

.contact-box{
max-width:700px;
margin:auto;
background:#111827;
padding:35px;
border-radius:20px;
text-align:center;
}

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

footer{
background:#000;
padding:25px;
text-align:center;
}

footer h2{
color:#fbbf24;
margin-bottom:10px;
}

footer p{
color:#ccc;
margin-top:8px;
}

/* =========================
CART
========================= */

.cart-sidebar{
position:fixed;
top:0;
right:-100%;
width:360px;
height:100vh;
background:#0f172a;
z-index:3000;
transition:.3s;
display:flex;
flex-direction:column;
}

.cart-sidebar.active{
right:0;
}

#cartItems{
flex:1;
overflow-y:auto;
padding:20px;
}

/* =========================
WHATSAPP
========================= */

.floating-whatsapp{
position:fixed;
right:20px;
bottom:20px;
width:55px;
height:55px;
background:#25d366;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:1.8rem;
animation:pulse 2s infinite;
text-decoration:none;
color:#fff;
}

.contact a{
    color:#25D366;
    text-decoration:none;
    font-weight:600;
}

@keyframes pulse{
0%,100%{transform:scale(1);}
50%{transform:scale(1.1);}
}

/* =========================
RESPONSIVE
========================= */
@media (max-width: 900px){

    .menu-btn{
        display:block;
    }

    nav ul{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#0f172a;
        flex-direction:column;
        padding:15px;
        display:none;
        z-index:999;
    }

    nav ul.show{
        display:flex;
    }

    /* HERO */
    .hero{
        text-align:center;
        justify-content:center;
        padding:0 5%;
    }

    .hero-content{
        max-width:100%;
    }

    .hero h1{
        font-size:2.7rem;
    }

    .hero h2{
        font-size:1.8rem;
    }

    .hero-buttons,
    .hero-features{
        justify-content:center;
        flex-wrap:wrap;
    }

    /* CART */
    .cart-sidebar{
        width:100%;
    }
}

/* =========================
SMALL PHONES
========================= */

@media (max-width: 600px){

    .hero{
        min-height:100vh;
        padding:0 5%;
    }

    .hero h1{
        font-size:2.2rem;
    }

    .hero h2{
        font-size:1.5rem;
    }

    .section-title{
        font-size:1.8rem;
    }

    .logo h2{
        font-size:1.2rem;
    }
}