:root{

--navy:#0F2E4D;
--gold:#D4AF37;
--bg:#FBF8F1;
--white:#fff;
--text:#1A237E;

}


/* =====================
GENERAL
===================== */

*{
box-sizing:border-box;
}

body{

margin:0;
background:var(--bg);
font-family:'Cairo',sans-serif;

}


.container{

width:90%;
max-width:1300px;
margin:auto;

}



/* =====================
NAVBAR
===================== */


.store-navbar{

background:#fff;
position:sticky;
top:0;
z-index:1000;
box-shadow:0 5px 20px #0001;

}


.store-navbar .container{

height:80px;
display:flex;
align-items:center;
justify-content:space-between;

}


.store-logo{

font-size:28px;
font-weight:900;
color:var(--navy);

display:flex;
gap:10px;
align-items:center;

}


.back-btn{

background:#f3f4f6;
padding:10px 22px;
border-radius:40px;
text-decoration:none;
color:var(--navy);
font-weight:700;

}


.cart-btn{

width:50px;
height:50px;
border-radius:50%;

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

background:var(--gold);
color:white;

}



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


.store-header{

padding:50px 0;
background:white;

}


.store-info{

display:flex;
align-items:center;
gap:40px;

}



.store-image{

width:150px;
height:150px;

border-radius:50%;
overflow:hidden;

box-shadow:0 10px 30px #0002;

flex-shrink:0;

}


.store-image img{

width:100%;
height:100%;
object-fit:cover;

}



.store-details h1{

font-size:38px;
color:var(--navy);
margin:0;

}



.store-details p{

color:#555;

}



.store-stats{

display:flex;
gap:15px;

}



.store-stats div{

background:var(--bg);
padding:15px 30px;
border-radius:20px;
text-align:center;

}



.store-stats h3{

margin:0;
font-size:28px;
color:var(--gold);

}



/* SEARCH */


.store-search{

margin-top:40px;
position:relative;

}


.store-search input{

width:100%;
height:60px;

border-radius:40px;
border:none;

padding:0 60px;

font-size:17px;

box-shadow:0 10px 30px #0001;

}



.store-search i{

position:absolute;
right:25px;
top:20px;
color:var(--navy);

}



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


.store-categories{

background:white;
padding:25px 0;

}



.category-list{

display:flex;
gap:15px;

overflow-x:auto;

}



.category-btn{

border:none;

padding:12px 25px;

border-radius:30px;

background:#eee;

color:var(--navy);

font-weight:700;

white-space:nowrap;

cursor:pointer;

}


.category-btn.active{

background:var(--gold);
color:white;

}



/* =====================
PRODUCT GRID
===================== */


.store-products{

padding:60px 0;

}



.products-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:25px;

}



/* =====================
PRODUCT CARD
===================== */

.product-card{
    width:100%;
    display:flex;
    flex-direction:column;
    border-radius:22px;
    overflow:hidden;
    background:#fff;
}


.product-card:hover{

transform:translateY(-8px);

}



/* IMAGE */


.product-image{

height:220px;

background:#eee;

overflow:hidden;

}


.product-image img{

width:100%;
height:100%;

object-fit:contain;

}



/* BODY */


.product-body{

padding:18px;

display:flex;

flex-direction:column;

flex:1;

}



.product-category{

font-size:13px;

background:#fff3d8;

padding:5px 15px;

border-radius:20px;

color:var(--navy);

width:max-content;

}



.product-title{

font-size:20px;

margin:12px 0;

color:var(--text);

height:35px;

overflow:hidden;

}



.product-description{

font-size:14px;

color:#666;

height:45px;

overflow:hidden;

}



/* PRICE */


.product-bottom{

margin-top:auto;

}


.price-box{

font-weight:800;

}



.old-price{

text-decoration:line-through;

color:#999;

}



.new-price{

color:var(--gold);

font-size:22px;

}



/* BUTTONS */


.product-actions{

display:flex;

gap:10px;

margin-top:15px;

}



.product-actions a{

flex:1;

height:45px;

display:flex;

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

border-radius:12px;

text-decoration:none;

font-weight:bold;

font-size:14px;

}



.details-btn{

background:#eee;

color:var(--navy);

}


.product-actions .cart-btn{

background:var(--gold);

color:white;

}



/* =====================
RESPONSIVE
===================== */


@media(max-width:1100px){


.products-grid{

grid-template-columns:repeat(3,1fr);

}


}



@media(max-width:800px){


.store-info{

flex-direction:column;
text-align:center;

}

.products-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:25px;
}

}



@media(max-width:500px){


.products-grid{

grid-template-columns:1fr;

}


.product-card{

height:450px;

}


.store-details h1{

font-size:28px;

}


}


.store-info{
    display:flex;
    align-items:center;
    gap:40px;
    background:#fff;
    padding:35px;
    border-radius:30px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.store-image{
    flex:0 0 170px;
    width:170px;
    height:170px;
    border-radius:50%;
    overflow:hidden;
    border:6px solid #fff;
    box-shadow:0 10px 35px rgba(0,0,0,.15);
}

.store-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.store-content{
    flex:1;
}

.store-content h1{
    font-size:42px;
    color:#0F2E4D;
    margin-bottom:10px;
    font-weight:900;
}

.store-content p{
    font-size:18px;
    color:#666;
    margin-bottom:25px;
}

.store-stats{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.stat-card{
    display:flex;
    align-items:center;
    gap:15px;
    background:#FBF8F1;
    border:1px solid #eee;
    padding:18px 25px;
    border-radius:18px;
    min-width:180px;
}

.stat-card i{
    width:55px;
    height:55px;
    border-radius:50%;
    background:linear-gradient(135deg,#D4AF37,#f5d76e);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.stat-card h3{
    margin:0;
    font-size:26px;
    color:#0F2E4D;
}

.stat-card span{
    color:#777;
    font-size:14px;
}

@media(max-width:768px){

.store-info{
    flex-direction:column;
    text-align:center;
}

.store-stats{
    justify-content:center;
}

.store-image{
    width:130px;
    height:130px;
}

.store-content h1{
    font-size:30px;
}

.stat-card{
    width:100%;
    justify-content:center;
}
}