:root{

--main:#8b5e34;
--gold:#d89b45;
--dark:#3b2415;
--cream:#f8f2ea;
--white:#ffffff;
--shadow:0 15px 40px rgba(0,0,0,.12);
--radius:25px;

}



*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:"Tahoma",Arial,sans-serif;

}



html{

scroll-behavior:smooth;

}



body{

background:var(--cream);

color:var(--dark);

overflow-x:hidden;

}



a{

text-decoration:none;

}





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


.header{

width:100%;

height:95px;

background:white;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 5%;

position:sticky;

top:0;

z-index:999;

box-shadow:0 5px 30px rgba(0,0,0,.08);

animation:headerDown .8s ease;

}



.logo{

display:flex;

align-items:center;

gap:15px;

}



.logo img{

width:75px;

height:75px;

border-radius:50%;

object-fit:cover;

box-shadow:var(--shadow);

}



.logo h1{

font-size:30px;

color:var(--main);

}



.search-box{

position:relative;

width:40%;

}



.search-box input{

width:100%;

height:50px;

border-radius:30px;

border:2px solid #eee0d0;

padding:0 25px;

font-size:17px;

outline:none;

transition:.3s;

}



.search-box input:focus{

border-color:var(--gold);

box-shadow:0 0 20px #d89b4540;

}





.header-actions{

display:flex;

gap:15px;

align-items:center;

}



.header-actions a{

padding:15px 25px;

border-radius:35px;

font-weight:bold;

display:flex;

gap:8px;

align-items:center;

transition:.3s;

}



.cart-button{

background:var(--main);

color:white;

}



.whatsapp-button{

background:#25D366;

color:white;

}



.header-actions a:hover{

transform:translateY(-5px);

box-shadow:var(--shadow);

}



#cart-count{

background:white;

color:var(--main);

border-radius:50%;

padding:3px 8px;

}
/* ================= HERO SECTION ================= */


.hero{

min-height:600px;

background:

linear-gradient(
90deg,
rgba(0,0,0,.65),
rgba(0,0,0,.25)
),

url("../images/banner.jpg");

background-size:cover;

background-position:center;

display:flex;

align-items:center;

padding:0 8%;

position:relative;

overflow:hidden;

}




.hero::before{

content:"";

position:absolute;

width:500px;

height:500px;

background:#d89b4540;

border-radius:50%;

right:-200px;

top:-100px;

filter:blur(50px);

}





.hero-content{

position:relative;

z-index:2;

color:white;

max-width:650px;

animation:fadeUp 1s ease;

}





.hero-content span{

display:inline-block;

background:var(--gold);

padding:12px 25px;

border-radius:40px;

font-size:18px;

margin-bottom:25px;

}





.hero-content h2{

font-size:60px;

line-height:1.3;

margin-bottom:20px;

}





.hero-content p{

font-size:23px;

line-height:2;

}





.hero-content a{

display:inline-flex;

margin-top:30px;

background:white;

color:var(--main);

padding:18px 45px;

border-radius:40px;

font-size:20px;

font-weight:bold;

transition:.4s;

}





.hero-content a:hover{

background:var(--gold);

color:white;

transform:scale(1.08);

}









/* ================= SOCIAL BUTTONS ================= */



.social-links{

display:flex;

justify-content:center;

gap:20px;

padding:45px 5%;

flex-wrap:wrap;

}





.social-links a{

background:white;

color:var(--main);

padding:18px 35px;

border-radius:40px;

box-shadow:var(--shadow);

font-size:18px;

font-weight:bold;

display:flex;

gap:10px;

align-items:center;

transition:.4s;

}





.social-links a:hover{

transform:translateY(-10px);

background:var(--main);

color:white;

}










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



.categories{

padding:60px 5%;

}




.categories h2,

.products h2{

text-align:center;

font-size:42px;

color:var(--main);

margin-bottom:40px;

}





.category-container{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(200px,1fr));

gap:25px;

}





.category-container button{

height:150px;

border:none;

background:white;

border-radius:30px;

font-size:24px;

font-weight:bold;

color:var(--dark);

cursor:pointer;

box-shadow:var(--shadow);

transition:.4s;

}




.category-container button:hover{

background:var(--main);

color:white;

transform:translateY(-15px);

}









/* ================= PRODUCTS ================= */



.products{

padding:60px 5%;

}





#products-container{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(260px,1fr));

gap:35px;

}






.product-card{

background:white;

border-radius:30px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.5s;

position:relative;

}





.product-card:hover{

transform:translateY(-15px);

}





.product-image-box{

height:300px;

overflow:hidden;

position:relative;

}





.product-image-box img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s;

}





.product-card:hover .product-image-box img{

transform:scale(1.12);

}





.product-badge{

position:absolute;

top:20px;

right:20px;

background:var(--gold);

color:white;

padding:8px 18px;

border-radius:30px;

}





.product-content{

padding:25px;

text-align:center;

}





.product-content h3{

font-size:22px;

color:var(--main);

margin-bottom:15px;

}





.product-price{

font-size:28px;

font-weight:bold;

color:#d17b20;

margin-bottom:20px;

}





.product-buttons{

display:flex;

gap:10px;

}





.product-buttons button{

flex:1;

border:none;

padding:14px;

border-radius:30px;

background:var(--main);

color:white;

cursor:pointer;

font-weight:bold;

transition:.3s;

}





.product-buttons button:hover{

background:var(--gold);

}
/* ================= SEARCH RESULTS ================= */


#search-results{

position:absolute;

top:60px;

right:0;

width:100%;

background:white;

border-radius:20px;

box-shadow:var(--shadow);

overflow:hidden;

z-index:999;

display:none;

}





.search-item{

display:flex;

align-items:center;

gap:15px;

padding:15px;

cursor:pointer;

transition:.3s;

border-bottom:1px solid #eee;

}





.search-item img{

width:60px;

height:60px;

border-radius:15px;

object-fit:cover;

}





.search-item:hover{

background:#fff3e5;

}









/* ================= PRODUCT HOVER EFFECT ================= */



.product-card::after{

content:"";

position:absolute;

inset:0;

border-radius:30px;

border:2px solid transparent;

transition:.4s;

pointer-events:none;

}





.product-card:hover::after{

border-color:var(--gold);

}









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



footer{

background:

linear-gradient(
135deg,
#3b2415,
#1d120b
);

color:white;

padding:70px 5% 30px;

text-align:center;

margin-top:50px;

}





footer h2{

font-size:40px;

margin-bottom:20px;

}





footer p{

font-size:18px;

line-height:2;

opacity:.9;

}





.footer-links{

display:flex;

justify-content:center;

gap:20px;

margin:30px 0;

flex-wrap:wrap;

}





.footer-links a{

color:white;

background:#ffffff20;

padding:15px 30px;

border-radius:35px;

transition:.3s;

}





.footer-links a:hover{

background:var(--gold);

transform:translateY(-5px);

}









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



.whatsapp-float{


position:fixed;

bottom:30px;

left:30px;

width:70px;

height:70px;

border-radius:50%;

background:#25D366;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:38px;

z-index:9999;

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

animation:whatsappPulse 2s infinite;

}





.whatsapp-float:hover{

transform:scale(1.1);

}









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



.loading{

width:50px;

height:50px;

border:5px solid #eee;

border-top-color:var(--gold);

border-radius:50%;

animation:spin 1s linear infinite;

margin:auto;

}








/* ================= ANIMATIONS ================= */



@keyframes fadeUp{


from{

opacity:0;

transform:translateY(50px);

}


to{

opacity:1;

transform:translateY(0);

}


}




@keyframes headerDown{


from{

transform:translateY(-100px);

}


to{

transform:translateY(0);

}


}





@keyframes whatsappPulse{


0%{

box-shadow:0 0 0 0 #25D36680;

}


70%{

box-shadow:0 0 0 25px transparent;

}


100%{

box-shadow:0 0 0 0 transparent;

}


}





@keyframes spin{


to{

transform:rotate(360deg);

}


}









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


@media(max-width:1100px){



.header{

padding:0 3%;

}



.logo h1{

font-size:22px;

}



.search-box{

width:35%;

}



.hero-content h2{

font-size:45px;

}


}










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


@media(max-width:700px){



.header{


height:auto;

flex-direction:column;

gap:20px;

padding:20px;

}



.logo img{

width:60px;

height:60px;

}



.search-box{

width:100%;

}



.header-actions{

width:100%;

justify-content:center;

}




.hero{

min-height:500px;

padding:30px;

}



.hero-content h2{

font-size:35px;

}



.hero-content p{

font-size:18px;

}





.social-links a{

width:90%;

justify-content:center;

}




.categories h2,
.products h2{

font-size:32px;

}



.category-container button{

height:120px;

font-size:20px;

}




.product-image-box{

height:250px;

}





.product-buttons{

flex-direction:column;

}



footer h2{

font-size:30px;

}



.whatsapp-float{

width:60px;

height:60px;

font-size:30px;

bottom:20px;

left:20px;

}



}/* =====================================
   PREMIUM STORE EXTRA DETAILS
===================================== */


/* شريط العروض */

.offer-bar{

width:100%;

background:linear-gradient(
90deg,
#8b5e34,
#d89b45
);

color:white;

padding:15px;

text-align:center;

font-size:20px;

font-weight:bold;

overflow:hidden;

}



.offer-bar span{

display:inline-block;

animation:moveText 8s linear infinite;

}





@keyframes moveText{


from{

transform:translateX(100%);

}


to{

transform:translateX(-100%);

}


}








/* عنوان الأقسام */

.section-title{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:35px;

}





.section-title h2{

margin:0;

}






/* زر شاهد الكل */


.view-all{


background:var(--main);

color:white;

padding:12px 30px;

border-radius:30px;

font-weight:bold;

transition:.3s;


}



.view-all:hover{


background:var(--gold);

transform:translateY(-5px);


}








/* تحسين صورة المنتج */


.product-image-box::before{


content:"";

position:absolute;

inset:0;

background:linear-gradient(

transparent,

rgba(0,0,0,.35)

);

opacity:0;

transition:.4s;

z-index:1;


}




.product-card:hover .product-image-box::before{


opacity:1;


}








/* زر سريع */


.quick-view{


position:absolute;

bottom:20px;

left:50%;

transform:translateX(-50%);

background:white;

color:var(--main);

padding:12px 25px;

border-radius:30px;

font-weight:bold;

opacity:0;

transition:.4s;

z-index:2;


}





.product-card:hover .quick-view{


opacity:1;

bottom:30px;


}








/* علامة الخصم */


.discount{


position:absolute;

top:20px;

left:20px;

background:#e63946;

color:white;

padding:8px 15px;

border-radius:20px;

font-weight:bold;

z-index:3;


}







/* تقييم المنتجات */


.stars{


color:#ffb000;

font-size:18px;

margin:10px 0;


}








/* قسم الثقة */


.features{


display:grid;

grid-template-columns:

repeat(auto-fit,minmax(220px,1fr));

gap:25px;

padding:50px 5%;


}





.feature-box{


background:white;

padding:30px;

border-radius:25px;

text-align:center;

box-shadow:var(--shadow);

transition:.3s;


}





.feature-box:hover{


transform:translateY(-10px);


}





.feature-box i{


font-size:45px;

color:var(--gold);

margin-bottom:15px;


}





.feature-box h3{


color:var(--main);

margin-bottom:10px;


}









/* تأثير ظهور العناصر */

.reveal{


opacity:0;

transform:translateY(40px);

transition:1s;

}



.reveal.active{


opacity:1;

transform:translateY(0);


}









/* تحسين السلة في الهيدر */


.cart-button{


position:relative;

}



.cart-button::after{


content:"";

position:absolute;

inset:0;

border-radius:35px;

border:2px solid rgba(255,255,255,.3);


}








/* زر العودة للأعلى */


.top-btn{


position:fixed;

bottom:30px;

right:30px;

width:55px;

height:55px;

border-radius:50%;

background:var(--main);

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:25px;

cursor:pointer;

opacity:0;

pointer-events:none;

transition:.3s;

z-index:1000;


}





.top-btn.show{


opacity:1;

pointer-events:auto;


}









/* تحسين الفوتر للموبايل */


@media(max-width:700px){


.footer-links{


flex-direction:column;

align-items:center;


}



.footer-links a{


width:80%;


}


}
/* تحسين عرض المنتجات */

#products-container{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
padding:20px;

}



.product-card{

background:#fff;

border-radius:25px;

overflow:hidden;

box-shadow:0 10px 25px rgba(0,0,0,.12);

transition:.4s;

min-height:420px;

}



.product-card:hover{

transform:translateY(-10px);

}





.product-image-box{

width:100%;

height:260px;

overflow:hidden;

background:#eee;

}



.product-image-box img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}





.product-content{

padding:20px;

text-align:center;

}





.product-content h3{

font-size:20px;

height:55px;

overflow:hidden;

}



.product-price{

font-size:26px;

color:#d88920;

font-weight:bold;

margin:15px 0;

}




.product-buttons button{

border:none;

padding:12px;

border-radius:25px;

background:#8b5e34;

color:white;

cursor:pointer;

}




@media(max-width:1100px){

#products-container{

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

}

}



@media(max-width:700px){

#products-container{

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

gap:15px;

}


.product-image-box{

height:200px;

}

}
/* ================= FIX PRODUCT CARDS FINAL ================= */


#products-container{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(220px,1fr)) !important;
    gap:20px !important;
    align-items:start;
}




.product-card{
    height:430px !important;
    min-height:430px !important;
    max-height:430px !important;
    overflow:hidden !important;
}




.product-image-box{
    height:220px !important;
    min-height:220px !important;
    max-height:220px !important;
    overflow:hidden !important;
}





.product-image-box img{

    width:100% !important;
    height:220px !important;
    object-fit:cover !important;

}




.product-content{

    height:210px !important;
    padding:15px !important;

}




.product-content h3{

    font-size:18px !important;
    height:45px !important;
    overflow:hidden !important;
    margin-bottom:8px !important;

}





.product-price{

    font-size:24px !important;
    margin:10px 0 !important;

}





.product-buttons{

    display:flex !important;
    gap:8px !important;

}





.product-buttons button{

    padding:10px !important;
    font-size:14px !important;

}





@media(max-width:900px){

#products-container{

grid-template-columns:repeat(2,1fr) !important;

}


.product-card{

height:400px !important;

}

}



@media(max-width:500px){

#products-container{

grid-template-columns:1fr !important;

}


.product-card{

height:420px !important;

}

}
/* =====================================
   RESPONSIVE DESIGN
   COMPUTER + TABLET + MOBILE
===================================== */


/* الشاشات الكبيرة */

@media (min-width:1400px){


.header{

padding:0 8%;

}



#products-container{

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

}



.product-image-box{

height:260px;

}


.hero-content h2{

font-size:65px;

}



}





/* الكمبيوتر واللاب توب */

@media (max-width:1200px){


.header{

padding:15px 3%;

}



.logo h1{

font-size:24px;

}



.search-box{

width:35%;

}



#products-container{

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

}



.hero-content h2{

font-size:50px;

}


}







/* التابلت */

@media (max-width:900px){



.header{

flex-wrap:wrap;

height:auto;

gap:15px;

}



.logo{

width:100%;

justify-content:center;

}



.search-box{

width:80%;

order:3;

}



.header-actions{

justify-content:center;

width:100%;

}



#products-container{

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

gap:15px;

}



.hero{

min-height:450px;

}



.hero-content h2{

font-size:38px;

}



.categories .category-container{

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

}



}







/* الموبايل */

@media (max-width:600px){



body{

overflow-x:hidden;

}




.header{

padding:15px;

}



.logo img{

width:55px;

height:55px;

}



.logo h1{

font-size:20px;

}




.search-box{

width:100%;

}



.search-box input{

height:45px;

font-size:15px;

}




.header-actions{

flex-direction:column;

width:100%;

}



.header-actions a{

width:90%;

justify-content:center;

}



.hero{

height:500px;

padding:25px;

text-align:center;

}



.hero-content h2{

font-size:32px;

}



.hero-content p{

font-size:17px;

}





.hero-content a{

width:100%;

justify-content:center;

}





.social-links{

flex-direction:column;

align-items:center;

}




.social-links a{

width:95%;

justify-content:center;

}





.categories{

padding:30px 15px;

}



.categories h2,

.products h2{

font-size:28px;

}





.category-container{

grid-template-columns:1fr !important;

}




#products-container{

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

gap:10px;

padding:10px;

}




.product-card{

border-radius:18px;

}




.product-image-box{

height:170px !important;

}





.product-content{

padding:12px;

}




.product-content h3{

font-size:15px;

height:40px;

}





.product-price{

font-size:20px;

}





.product-buttons{

flex-direction:column;

}





.product-buttons button{

padding:10px;

font-size:13px;

}





footer{

padding:40px 15px;

}



footer h2{

font-size:25px;

}




.whatsapp-float{

width:55px;

height:55px;

font-size:28px;

}



}







/* موبايل صغير جدا */

@media (max-width:380px){



#products-container{

grid-template-columns:1fr;

}



.product-image-box{

height:230px !important;

}



}
html,body{
    overflow-x:hidden;
    width:100%;
}


img{
    max-width:100%;
}


*{
    box-sizing:border-box;
}
/* تحسين شكل كروت المنتجات */

.product-card{
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,.12);
    transition:.4s;
}


.product-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.18);
}


/* الصورة */

.product-image-box{
    height:280px !important;
    background:#f5f5f5;
}


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




/* المحتوى */

.product-content{
    padding:20px 15px !important;
}



.product-content h3{
    font-size:20px !important;
    line-height:1.5;
    color:#8b5e34;
    min-height:55px;
}




/* السعر */

.product-price{
    font-size:27px !important;
    color:#d88920;
    margin:15px 0;
}



/* النجوم */

.stars{
    font-size:16px;
    margin:8px;
}




/* الأزرار */

.product-buttons{
    display:flex;
    gap:10px;
}



.product-buttons button{

    height:45px;
    border-radius:30px;
    font-size:15px;
    background:#8b5e34;
    transition:.3s;

}


.product-buttons button:hover{

    background:#d89b45;
    transform:translateY(-3px);

}



/* علامة جديد */

.product-badge{

    top:15px;
    right:15px;
    background:#d89b45;
    padding:8px 18px;
    border-radius:30px;
    font-size:14px;

}
/* ===== تعديل زر عرض التفاصيل والسلة ===== */

.product-buttons{
    display:flex;
    gap:8px;
    justify-content:center;
}


.product-buttons button{

    padding:10px 14px !important;
    height:40px !important;
    border-radius:20px !important;
    font-size:13px !important;
    font-weight:bold;
    white-space:nowrap;

}


/* زر عرض التفاصيل بشكل بسيط */

.product-buttons button:first-child{

    background:#8b5e34;
    color:white;

}


/* زر السلة */

.product-buttons button:last-child{

    background:#d89b45;
    color:white;

}




/* ===== تصغير الأقسام ===== */


.categories{

    padding:35px 5% !important;

}



.categories h2{

    font-size:30px !important;
    margin-bottom:25px !important;

}



.category-container{

    gap:15px !important;

}



.category-container button{

    height:90px !important;
    border-radius:18px !important;
    font-size:18px !important;

}



/* شكل أبسط للكارت */

.product-card{

    border-radius:20px !important;

}



.product-image-box{

    height:230px !important;

}



.product-content{

    padding:15px !important;

}



.product-content h3{

    font-size:17px !important;

}


.product-price{

    font-size:23px !important;

}
.section-title{

display:flex;

align-items:center;

justify-content:space-between;

margin-bottom:30px;

}



.view-all{

border:none;

background:#8b5e34;

color:white;

padding:12px 25px;

border-radius:30px;

cursor:pointer;

font-weight:bold;

}



.view-all:hover{

background:#d89b45;

}



@media(max-width:600px){

.section-title{

flex-direction:column;

gap:15px;

}


.view-all{

width:100%;

}

}