body{font-family:sans-serif;background:#f8f5ff;margin:0;direction:rtl;color:#3a3550}
.logo{
    height:100px;
    width:auto;
}

header{background:#ffffff;padding:15px 40px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ece6ff;position:sticky;top:0}
nav a{margin:0 10px;text-decoration:none;color:#4a3f75;font-size:14px}
.hero{background:#efeaff;padding:80px 20px;text-align:center}
.hero h1{font-size:34px}
.btn{background:#ffb6d9;padding:12px 22px;border-radius:6px;text-decoration:none;color:#4a2c40}
.container{padding:40px 20px;max-width:1100px;margin:auto}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:25px}
.card{background:#ffffff;border-radius:10px;overflow:hidden;box-shadow:0 5px 15px rgba(120,90,200,0.08)}
.card img{width:100%;height:180px;object-fit:cover}
.card h3{font-size:16px;padding:10px}
.price{padding:0 10px;color:#7a5cff}
.card button{margin:10px;background:#b8e0ff;border:none;padding:10px;border-radius:6px;width:calc(100% - 20px);cursor:pointer}
.about,.faq,.contact{padding:60px 20px;max-width:900px;margin:auto;text-align:center}
.faq-item{margin:15px 0}
footer{background:#ffffff;text-align:center;padding:30px;margin-top:40px;border-top:1px solid #ece6ff}
/* سبد خرید */

.cart{
position:fixed;
left:20px;
bottom:20px;
background:#ffffff;
padding:15px;
border-radius:12px;
box-shadow:0 5px 20px rgba(120,90,200,.25);
width:280px;
max-height:60vh;
overflow-y:auto;
transition:.3s;
z-index:1000
}

.cart.closed{
transform:translateY(82%);
height:55px;
overflow:hidden;
padding-top:35px
}

.cart h4{
margin-top:0;
margin-bottom:10px
}

.cart-toggle{
position:absolute;
top:5px;
right:5px;
background:#ffb6d9;
padding:6px 10px;
border-radius:20px;
cursor:pointer;
font-size:18px;
display:flex;
align-items:center;
gap:5px
}

.cart-badge{
background:#ff4d6d;
color:white;
border-radius:50%;
padding:2px 7px;
font-size:11px
}

.cart-item{
display:flex;
justify-content:space-between;
font-size:13px;
margin-bottom:6px
}

.remove{
color:#ff4d6d;
cursor:pointer
}

.cart button{
margin-top:6px;
width:100%;
padding:8px;
border:none;
border-radius:6px;
background:#b8e0ff;
cursor:pointer
}

.order{
background:#c8f7d4
}
@media(max-width:700px){

.cart{
left:0;
right:0;
bottom:0;
width:100%;
border-radius:15px 15px 0 0;
max-height:70vh
}

.cart.closed{
transform:translateY(60%)
}

.cart-toggle{
left:50%;
right:auto;
transform:translateX(-50%)
}

}

@media(max-width:700px){
header{flex-direction:column}
nav{margin-top:10px}
.hero h1{font-size:26px}
}
.thumb{
position:relative;
width:100%;
cursor:pointer;
overflow:hidden;
}

.thumb img{
width:100%;
display:block;
border-radius:10px;
}

.play{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:rgba(90,60,150,0.7);
color:white;
font-size:18px;
padding:10px 14px;
border-radius:50%;
pointer-events:none;
}
.video-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(40,20,80,0.75);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

.video-box{
position:relative;
width:80%;
max-width:800px;
background:#000;
border-radius:10px;
overflow:hidden;
}

.video-box video{
width:100%;
display:block;
}

.close{
position:absolute;
top:10px;
right:10px;
font-size:26px;
color:white;
background:rgba(80,50,150,0.6);
width:35px;
height:35px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
cursor:pointer;
z-index:10;
}