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

@font-face {
    font-family: "yakanbakh";
    src: url("fonts/YekanBakhFaNum-VF.woff");
    src: url("fonts/YekanBakhFaNum-VF.woff2");
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
body {
    direction: rtl;
    font-size: 18px;
    text-align: right;
    font-family: "yakanbakh";
    font-weight: 400;
}

header {
    margin-bottom: 20px;
    box-shadow: 0px 4px 8px 0px #d6d6d6;
}

.top-header {
    background: #f1fcff;
    padding: 5px;
    margin-top: 7px;
}

.top-right-header {
    float: right;
}

.top-right-header span {
    float: right;
}

.top-left-header {
    float: left;
}

.top-left-header span {
    float: left;
}

.top-left-header span i {
    float: left;
    color: darkblue;
    margin-right: 5px;
}

.main-header {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

.main-h-right {
    display: flex;
    align-items: center;
    width: 60%;
}

.main-h-right .logo {
    max-width: 169px;
}

.main-h-right .logo a {
    display: flex;
}

.main-h-right .logo img {
    max-width: 169px;
}

.main-h-right .search-main {
    width: 100%;
    margin-right: 53px;
}

.main-h-right .search-main form {
    position: relative;
}

.main-h-right .search-main form input[type="search"] {
    background: lightgray;
    border-radius: 10px;
    padding: 15px;
    width: 100%;
}
.main-h-left {
  display: flex;
  align-items: center;
  gap: 20px }
  .main-h-left .favorite-btn-header {
	background-color: pink;
	padding: 7px;
	border-radius: 10px;
}
.main-h-left .favorite-btn-header a {
	color: darkblue;
	text-decoration: none;
	display: flex;
	align-items: center;
}
.main-h-left .cart-btn-header a {
	background: pink;
	color: darkblue;
	text-decoration: none;
	padding: 7px;
	border-radius: 9px;
	display: flex;
}
.main-h-left .cart-btn-header a .cart-btn-text {
	padding-left: 10px;
	border-left: 1px solid gray;
}
.main-h-left .cart-btn-header a .text-btn-num {
	margin-right: 5px;
}
.down-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.main-menu {
	display: flex;
	align-items: center;
}
.megamenus {
	border-left: 1px solid darkblue;
	padding-left: 10px;
	font-weight: 450;
	margin-right: 20px;
	cursor: pointer;
    position: relative;

}
.title-menu {
	color: darkblue;
}
.menu-header > ul > li {
	display: inline-block;
	list-style: none;
	margin: 0px 10px;
	padding-top: 15px;
	position: relative;
}
.menu-header > ul > li a {
	text-decoration: none;
	color: blue;
	padding: 14px 0px;
}
.menu-header > ul > li a:hover{
    border-bottom: 1px solid blue;
    text-shadow: 2px 2px 2px black;
}
.register-btn {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-left: 20px;
	color: darkblue;
	border: 5px double darkblue;
}
.menu-header > ul > li > ul {
	position: absolute;
	width: 151px;
	top: 30px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	box-shadow: 5px 5px 10px 0px black;
	padding: 7px 0px;
    right: -30 ;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.menu-header ul  li:hover ul{
    opacity: 1;
    visibility: visible;
    top: 58px;
}

.menu-header > ul > li > ul > a{
    padding: 7px 14px ;
    display: block;
}
.menu-header > ul > li > ul > a:hover{
    font-size: 19px;
    color: orangered;
}
.mok-megamenu > ul {
	position: absolute;
	width: 270px;
	box-shadow: 0px 5px 10px 0px gray;
    padding-right: 0px;
    visibility: hidden;
    opacity: 0;
}
.megamenus:hover >.mok-megamenu > ul{
    visibility: visible;
    opacity: 1;
    top:40px
}
.mok-megamenu > ul::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 40px;
	top: -20;
}
.mok-megamenu > ul > li:hover{
    background-color: lightblue;
}
.mok-megamenu > ul > li:hover >a{
    color: orangered;
}
.mok-megamenu > ul > li > a{
    padding: 5px;
    color: blue;

}
.mok-megamenu > ul > li >ul{
    position: absolute;
    background-color: pink;
    right: 100%;
    width: 900px;
    display: flex;
    height: 100%;
    box-shadow: 0px 5px 10px 0px gray;
    top: 0px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
 }
 .mok-megamenu > ul > li:hover >ul{
    visibility: visible;
    opacity: 1;

 }
 .mok-megamenu > ul > li >ul >li{
    width: 33%;

 }
 .mok-megamenu > ul > li >ul >li >a{
    color: darkblue;
    border-right: 3px solid orangered;
    padding-right: 5px;
 }
 .mok-megamenu > ul > li >ul >li > ul{
    padding-right: 0px;
    margin-top: 10px;

 }
 .mok-megamenu > ul > li >ul >li > ul li a{
    color: #343f7c;
    display: block;
    padding: 5px;
 }
 .main-slider img{
    width: 100%;
    height: 300px;

 }
 .main-slider .owl-stage-outer{
    border: 3px solid orangered;
    border-radius: 15px;
    box-shadow: 5px 5px 10px 0px black;
 }
 .main-slider .owl-theme .owl-dots{
    position: absolute;
    bottom: 0px;
    width: 100%;

 }
.main-slider .owl-theme .owl-dot button.owl-dots span{
    background-color: darkblue;
    width: 10px;
    height: 10px;
    margin: 2px 3px;
  }
   .main-slider .owl-theme .owl-dots button.active span{
    background-color: rgb(26, 10, 167);
    width: 18px;
   }
    .main-slider .owl-carousel .owl-nav button{
        position: absolute;
        background-color: lightblue;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        opacity: 0;
    }
    .main-slider:hover .owl-carousel .owl-nav button{
        opacity: 1;
    }
    .main-slider .owl-carousel .owl-nav button:hover{
        background-color: darkblue;
        color: lightblue;
    }
    .main-slider .owl-carousel .owl-nav button.owl-next{
        right: 80px;
    }
    .main-slider .owl-carousel .owl-nav button.owl-prev{
        right: 35px;
    }
    .owl-theme .owl-nav{
        margin-top: -56px;
    }
    .mok-product{
        margin-top: 115px;
    }
    
    .mok-product .title-pro h5{
        margin-bottom: 20px;

    }
    .mok-product .title-pro h5 a{
        color: darkblue;
        border-bottom: 3px solid orangered;
        padding: 10px;
    }
    .product-slider .product-item{
        background-color: red;
        box-shadow: 5px 5px 10px 0p gray;
        margin: 13px;
        width: 400px;
    }
    .box-sell{
        display: flex;
        justify-content: space-between;

    }
    .box-sell .best-sell{
        background-color: rgb(30, 0, 139);
        border-radius: 20px;
       position: relative;

    }
    .box-sell .best-sell  .head{
        display: flex;
        justify-content: center;
        font-size: 20px;

    }
     .box-sell .best-sell  .head p{
        color: aqua;
        font-weight: bold;

     }
     .box-sell .best-sell figure{
        border-radius: 50%;
        height: 150px; ;
        width: 150px;
        margin: 5px auto;
        padding: 5px;
        overflow: hidden;
        animation: pulse-animation 2s infinite;
     }
     @keyframes pulse-animation
    {
        0%
    {
        box-shadow: 0 0 0 0px white;
    }
    100%
    {
        box-shadow: 0 0 0 20px white;
    }
    }

      .box-sell .best-sell figure{
        max-width: 140px;
        margin: auto;
        display: block;
        border-radius: 50%;
      }
      .box-sell .best-sell h2{
        overflow: hidden;
        height: 50px;
        line-height: 22px;

      }
       .box-sell .best-sell h2 a {
        font-size: 15px;
        color: wheat;
        font-weight: 450;
       }
        .box-sell .best-sell .price{
            display: flex;
            gap: 24px;
            justify-content: center;
            color: wheat;
            margin: 20px 0px;

        }
         .box-sell .best-sell .price del{
            font-size: 15px;
            opacity: 1;
            font-weight: 450;

         }
          .box-sell .best-sell .price ins{
            text-decoration: none;
            font-size: 18px;
            font-weight: 700;

          }
           .box-sell .best-sell .price ins span{
            font-size: 15px;
           }
            .box-sell .best-sell .add-cart{
                position: absolute;
                left: 130px;
            }
            .box-sell .best-sell .add-cart{
                background: wheat;
                color: blue;
                border-radius: 50%;
                font-size: 450px;
                padding: 5px;
            }
            .other-sell{
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
            }
            .other-sell .product-sell{
                width: 7px;
                background: white;
                box-shadow: 0px 0px 10px 0px gray;
                border-radius: 15px;
                padding: 10px;
                height: 120px;

            }
            .other-sell .product-sell figure{
                float: right;
                margin-left: 15px;

            }
            .other-sell .product-sell figure img{
                max-width: 80px;

            }
            .other-sell .product-sell h2 a{

            }
            .other-sell .product-sell .down{

            }
            .other-sell .product-sell .down .nubmer{

            }
            .other-sell .product-sell .down .price{

            }
            .other-sell .product-sell .down .price del{

            }
            .other-sell .product-sell .down .price ins{

            }
            .other-sell .product-sell .down .price ins span{

            }
            *{
    margin:0;
    padding:0;
}



/* محصولات */
.products{
    flex:1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.product-card{
    background:#fff;
    border-radius:10px;
    padding:10px;
    display:flex;
    flex-direction:row-reverse;
    align-items:center;
    justify-content:space-between;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
    transition:.3s;
}

.product-card:hover{
    transform:translateY(-3px);
}

.product-card img{
    width:80px;
    height:80px;
    object-fit:cover;
}

.info{
    flex:1;
    margin-right:10px;
}

.info h2{
    color:#1e88e5;
    font-size:24px;
    margin-bottom:10px;
}

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

.new{
    font-weight:bold;
}

.old{
    color:#999;
    text-decoration:line-through;
}

/* سایدبار */


.best-product{
    background:white;
    color:black;
    border-radius:12px;
    padding:10px;
    text-align:center;
}

.best-product img{
    width:120px;
    height:120px;
    border-radius:50%;
    object-fit:cover;
}

.best-product p{
    margin:10px 0;
    font-weight:bold;
}

.price-box{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.old-price{
    text-decoration:line-through;
    color:#888;
}

.new-price{
    color:#001dbd;
    font-weight:bold;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:tahoma;
}


/* عنوان */
.title-box{
    width:220px;
    margin:auto;
    text-align:center;
    background:#0328ff;
    color:white;
    padding:14px;
    border-radius:20px 20px 0 0;
    font-weight:bold;
    box-shadow:0 0 8px rgba(0,0,0,.2);
}

/* برندها */
.brands-wrapper{
    background:white;
    padding:40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-radius:8px;
    box-shadow:0 0 10px rgba(0,0,0,.08);
}

.brands{
    flex:1;
    display:flex;
    justify-content:space-evenly;
    align-items:center;
}

.brand img{
    width:170px;
    height:110px;
    object-fit:contain;
    transition:.3s;
}

.brand img:hover{
    transform:scale(1.08);
}

/* دکمه های کناری */
.nav-btn{
    width:75px;
    height:55px;
    border:none;
    background:#0328ff;
    color:white;
    font-size:24px;
    border-radius:20px;
    cursor:pointer;
}

/* امکانات */
.services{
    margin-top:50px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:30px;
}

.service{
    text-align:center;
}


}

/* ریسپانسیو */
@media(max-width:900px){

    .brands{
        flex-wrap:wrap;
        gap:20px;
    }

    .services{
        grid-template-columns:repeat(2,1fr);
    }

    .brand img{
        width:120px;
    }
}

@media(max-width:600px){

    .services{
        grid-template-columns:1fr;
    }

    .nav-btn{
        display:none;
    }
}

.plus,
.add-product,
.circle-plus,
.floating-btn{
    display: none !important;
}
.footer{
    background:#fff;
    padding:40px 80px;
    direction:rtl;
}

.footer-top{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:50px;
    margin-bottom:40px;
}

.footer h3{
    margin-bottom:20px;
    color:#222;
    font-size:22px;
}

.footer-about p{
    line-height:2.2;
    color:#666;
}

.footer-links ul{
    list-style:none;
}

.footer-links li{
    margin-bottom:12px;
}

.footer-links a{

    color:#666;
    transition:.3s;
}

.footer-links a:hover{
    color:#004cff;
}

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

.footer-enamad img{
    width:180px;
}

/* دانلود اپلیکیشن */

.app-box{
    background:#f5f5f5;
    border-radius:15px;
    padding:15px 25px;

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

    margin-bottom:30px;
}

.app-title{
    font-size:24px;
    font-weight:bold;
}

.stores{
    display:flex;
    gap:15px;
}


}

/* تماس */

.footer-contact{
    display:flex;
    justify-content:space-between;
    align-items:center;

    border-bottom:1px solid #e5e5e5;
    padding-bottom:20px;
}

.go-top{
    border:none;
    background:white;
    border:1px solid #ddd;
    padding:12px 25px;
    border-radius:10px;
    cursor:pointer;
    font-size:16px;
}

.contact-info{
    display:flex;
    gap:15px;
    color:#666;
}

/* پایین */

.footer-bottom{
    margin-top:25px;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.socials{
    display:flex;
    gap:20px;
}

.socials a{
    color:#777;
    font-size:24px;
    transition:.3s;
}

.socials a:hover{
    color:#004cff;
}

.footer-bottom p{
    color:#777;
}



.modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    z-index:9999;
}

.modal-content{
    background:#fff;
    width:500px;
    max-width:90%;
    margin:80px auto;
    padding:30px;
    border-radius:8px;
    text-align:center;
    position:relative;
}

.close{
    position:absolute;
    top:10px;
    left:15px;
    font-size:35px;
    cursor:pointer;
    color:#999;
}

.logo{
    width:150px;
    margin-bottom:20px;
}

.modal-content input{
    width:100%;
    padding:15px;
    margin:10px 0;
    border:none;
    background:#f5f5f5;
    font-size:16px;
    box-sizing:border-box;
}

.submit-btn{
    width:100%;
    padding:15px;
    background:#0d1ca8;
    color:white;
    border:none;
    font-size:18px;
    cursor:pointer;
    margin-top:10px;
}

.modal-content p{
    margin-top:20px;
}
.modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

.modal-content{
    width:500px;
    max-width:90%;
    background:#fff;
    border-radius:5px;
    padding:25px;
    text-align:center;
    position:relative;
}

.close{
    position:absolute;
    top:10px;
    left:15px;
    font-size:35px;
    color:#999;
    cursor:pointer;
}

.logo{
    width:150px;
    margin-bottom:20px;
}

.modal-content input{
    width:100%;
    padding:15px;
    margin:10px 0;
    background:#f5f5f5;
    border:none;
    box-sizing:border-box;
}

.login-btn{
    width:100%;
    padding:15px;
    background:#1019a8;
    color:#fff;
    border:none;
    cursor:pointer;
    margin-top:10px;
}
.product-box{
    display:flex;
    gap:40px;
    background:#fff;
    padding:30px;
    border-radius:15px;
    direction:rtl;
}

.product-image{
    width:40%;
    position:relative;
}

.product-image img{
    width:100%;
}



.actions{
    position:absolute;
    left:10px;
    top:120px;
    display:flex;
    flex-direction:column;
    gap:15px;
}

.actions button{
    width:55px;
    height:55px;
    border:1px solid #ddd;
    border-radius:10px;
    background:#fff;
    font-size:22px;
    cursor:pointer;
}

.product-info{
    flex:1;
}

.product-info h2{
    font-size:30px;
    line-height:1.8;
}

.specs{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin:30px 0;

}
.mok-breadcrumb{
    font-size: 14px;
    margin: 20px 0;
    color: gray;


}
.mok-breadcrumb a{
    color: gray;

}
.product-intro{
    background-color: rgb(248, 244, 244);
    border-radius: 15px;
    box-shadow: 0px 5px 5px 0px;
    padding: 25px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
 

}
.product-intro .right{
    width: 49%;

}
.product-intro .right header{
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid darkblue;

}
.product-intro .right header h1{
    font-size: 20px;
    font-weight: 700;

}
.product-intro .right header span{
    font-weight: 300;
    color: gray;
    display: block;
    margin-top: 10px;

}
.product-intro .right .product-meta{
    display: flex;
    justify-content: space-between;

}
.product-intro .right .product-meta .meta-pro{
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 20px;


}
.product-intro .right .product-meta .meta-pro i{
    color: darkblue;
    font-size: 20px;
    margin-left: 5px;

}
.product-intro .right .product-delivery {
    display: flex;
    gap: 10px 25px;
    margin-bottom: 25px;
    justify-content:start ;

}
.product-intro .right .product-delivery span i{
    color: orangered;
    margin-left: 5px;
    font-size: 10px;
}
.product-intro .right .additional-product{
    display: flex;
    flex-wrap: wrap;
    gap: 15px 20px;
    max-height: 110px;
    overflow: hidden;
    margin-bottom: 50px;
    

}
.product-intro .right .additional-product .property-item{
    display: flex;
    
}
.product-intro .right .additional-product .property-item span{
    color: gray;
    font-weight: 300;
    
}
.product-intro .right .additional-product .property-item span i{
    color: lightsalmon;
    
}
.product-intro .right .p-q{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

}
.product-intro .right .p-q .quantity{
    display: flex;
    border: 2px solid rgb(161, 155, 155);
    border-radius: 8px;
    width: 180px;
    height: 50px;
}
.product-intro .right .p-q .quantity button{
    font-size: 20px;
    background: transparent;
    padding: 0px 20px;
    cursor: pointer;
    margin: 10px auto;
    
}
.product-intro .right .p-q .quantity button.plus{
    border-left: 1px solid gray;
    
}
.product-intro .right .p-q .quantity button.minus{
        border-right: 1px solid gray;

}
.product-intro .right .p-q .quantity .quty{
    width: 100%;
    height: 100%;
    font-size: 20px;
    text-align: center;
    font-weight: 700;
    appearance: textfield;

}
.product-intro .right .p-q .single-price{
    display: flex;
    gap: 15px;

}
.product-intro .right .p-q .single-price .price{
    display: flex;
    gap: 15px;
    
}
.product-intro .right .p-q .single-price .price del{
   
	font-size: 20px;
	font-weight: 400;
	color: gray;
	margin-right: 15px;
	margin-bottom: 30px;

    
}
.product-intro .right .p-q .single-price .price ins{
    font-size: 23px;
    text-decoration: none;
    font-weight: 700;
    
}
.product-intro .right .p-q .single-price .price ins span{
    font-size: 16px;
    font-weight: 450;
    
}
.product-intro .right .p-q .single-price .discount {
    background: orangered;
    color: white;
    font-size: 16px;
    font-weight: 450;
    width: 40px;
    height: 40px;
    display: flex;
    margin-left: 15px;
    align-items: center;
    justify-content: center;
    clip-path: polygon(70.71% 100%, 100% 70.71%, 100% 29.29%, 70.71% 0%, 29.29% 0%, 0% 29.29%, 0% 70.71%, 29.29% 100%);
background-color: #ff8800


    
}
.product-intro .right .single-add-to-cart{
    background: orangered;
    color: white;
    font-size: 18px;
    font-weight: 450;
    width: 100%;
    padding: 10px 0px;
    cursor: pointer;
    border-radius: 14px;

}
.product-intro .left::before{
    content: ;
    position: absolute;
    width: 100%;
    height: 100%;
    background: darkblue;
    opacity: 0.1;
    pointer-events: none;
    border-radius: 15px;
}

.product-intro .left{
    display: flex;
    justify-content: space-between;
    width: 48%;
    position: relative;
    padding: 20px;

}
.product-intro .left .product-action {
    display: flex;
    flex-direction: column;
    gap: 10px;
margin-top: 15%;
min-width: 6%;
z-index: 3;

    
}
.product-intro .left .product-action .item-action button{
    background:wheat ;
    border: 1px solid black;
    border-radius: 10px;
    min-width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
    
}
.product-intro .left .product-action .item-action button:hover span{
    max-width: 250px;
    padding: 10px;
    

}
.product-intro .left .product-action .item-action button i {

}
.product-intro .left .product-action .item-action button span{
    white-space: nowrap;
    max-width: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;

}
               
.product-intro .left .product-image{

}
.floating-button{
    width: 60px;
    height: 60px;
    font-size: 36px;
    position: fixed;
    right: 74px;
    bottom: 20px;
    background: orangered;
    color: white;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    cursor: pointer;
    z-index: 100;
}
.floating-contact .contact-list{
    position: fixed;
    right: 50px;
    bottom: 100px;
    width: 250px;
    background: lightblue;
    border-radius: 15px;
    box-shadow: 5px 5px 10px 0px gray;
    z-index: 100;
    padding: 10px;
    display: none;
}
.floating-contact .contact-list a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
    color: darkblue;
    font-size: 15px;

}
.floating-contact .contact-list a img{
    width: 35px;
    height: 35px;
    
}
.contact-box {
    width: 90%;
    max-width: 1100px;
    margin: 30px auto;
    padding: 25px 35px;
    background-color: #a9d8ea;
    border-radius: 15px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);

    direction: rtl;
    text-align: right;
    box-sizing: border-box;
}

.contact-box h2 {
    margin: 0 0 20px;
    color: #f47721;
    font-size: 22px;
    font-weight: bold;
    font-weight: bold;
}

.contact-box p {
    margin: 10px 0;
    color: #0004ff;
    font-size: 15px;
    line-height: 2;
}
.contact-box p {
    font-family: Tahoma, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 2;
    color: #005dcf;
}
.footer{
    box-shadow: 0 10px 20px gray;
}
.main-box {
    width: 90%;
    max-width: 1100px;
    margin: 30px auto;
    padding: 20px;

    background: #a9d8e8;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);

    display: flex;
    flex-direction: row-reverse;
    gap: 25px;

    direction: rtl;
}

/* قسمت محصولات */
.product-grid {
    flex: 1;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* سایدبار سمت راست */
.sidebar {
    width: 280px;
}

/* کادر جستجو و دسته‌بندی */
.search-box,
.categories {
    background: white;
    border: 1px solid #555;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    direction: rtl;
    font-family: "Vazirmatn", Tahoma, sans-serif;
}


/* کادر آبی اصلی */

.shop-section {
    width: 82%;
    min-height: 480px;

    margin: 25px auto;

    padding: 25px;

    background: #a9d9e9;

    border-radius: 15px 15px 0 0;

    display: flex;

    flex-direction: row-reverse;

    gap: 35px;

    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}


/* =====================
   محصولات
===================== */

.products {
    flex: 1;

    display: flex;

    justify-content: center;

    gap: 35px;

    direction: rtl;
}


.product-card {
    position: relative;

    width: 205px;
    height: 395px;

    flex-shrink: 0;

    background: #fff;

    border-radius: 17px;

    padding: 47px 13px 15px;

    box-shadow: 0 5px 10px rgba(0,0,0,.20);

    overflow: hidden;
    display: flex;
    flex-direction: column;
}


/* تخفیف */

.discount {
    position: absolute;

    top: 13px;
    right: 13px;

    width: 30px;
    height: 35px;

    background: #ff5b00;

    color: white;

    font-size: 10px;

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

    border-radius: 0 0 4px 4px;
}


/* چراغ ها */

.lights {
    position: absolute;

    top: 20px;
    left: 14px;

    display: flex;

    gap: 5px;
}

.lights i {
    width: 9px;
    height: 9px;

    border-radius: 50%;

    display: block;
}

.lights .green {
    background: #008d22;
}

.lights .yellow {
    background: #f2d600;
}

.lights .red {
    background: #ed3025;
}

/* عکس محصول */

.product-card img {
    width: 100%;
    height: 135px;
    object-fit: contain;
    display: flow;
    margin-top: 10px;
}


/* اسم محصول */

.product-card h3 {
    width: 100%;

    font-size: 13px;

    color: #15204d;

    font-weight: 700;

    text-align: right;

    direction: rtl;

    margin: 0 0 15px;

    line-height: 1.8;

    white-space: normal;

    overflow-wrap: break-word;

    word-break: normal;
}


/* پایین کارت */

.product-bottom {
    display: flex;

    justify-content: space-between;

    align-items: center;

    direction: ltr;

    margin-top: auto;
}



/* اسم محصول */


.price {
    direction: rtl;

    display: flex;

    flex-direction: row;
    align-items: center;
    gap: 5px;
}
.price::before{
    content: "تومان";
    font-size: 9px;
    font-weight: 700;
    color: #17255a;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin-left: 2px;
}
.price-values{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.price del {
    font-size: 9px;

    color: #777;
text-decoration: line-through;
}

.price strong {
    font-size: 13px;

    color: #111b4d;

    font-weight: 800;
    white-space: nowrap;
}


/* دکمه + */

.add {
    width: 24px;
    height: 24px;

    border: none;

    border-radius: 50%;

    background: #ff6415;

    color: white;

    font-size: 20px;

    line-height: 20px;

    cursor: pointer;
    flex-shrink: 0;
}


/* =====================
   سایدبار
===================== */

.sidebar {
    width: 300px;

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    gap: 18px;
}


.side-box {
    background: white;

    border: 2px solid #34456d;

    border-radius: 14px;

    padding: 18px 15px;

    box-shadow: 0 2px 5px rgba(0,0,0,.12);
}


/* جستجو */

.search-box {
    height: 125px;
}

.side-box h3 {
    margin: 0 0 12px;

    padding-bottom: 1px;

    border-bottom: 2px solid orangered;

    color: #17255a;

    font-size: 14px;

    font-weight: 800;
}


.search {
    display: flex;

    gap: 7px;

    direction: ltr;
}

.search input {
    width: 100%;

    height: 40px;

    border: 1px solid #91a5ad;

    background: #a9d9e9;

    border-radius: 11px;

    outline: none;
}

.search button {
    width: 58px;

    height: 40px;

    border: none;

    border-radius: 9px;

    background: #ff5b00;

    color: white;

    font-family: inherit;

    font-size: 10px;
}


/* دسته بندی */

.categories {
    min-height: 245px;
}

.categories ul {
    list-style: none;

    padding: 0;

    margin: 0;
}

.categories li {
    padding: 10px 0;

    color: #17255a;

    font-size: 13px;

    font-weight: 600;
    .side-box h3 
    padding-bottom: 1px;
    border-bottom: 2px solid rgb(218, 132, 101);
    
}

.error404 {
    text-align: center;
    padding: 100px 20px;
}

.error404 h1 {
    font-size: 120px;
    line-height: 1;
    margin: 0;
    color: #1976d2;
    font-weight: 800;
}

.error404 h2 {
    font-size: 32px;
    margin: 18px 0 10px;
}

.error404 p {
    font-size: 18px;
    color: #666;
    margin: 0 auto 32px;
}

.error404-buttons {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 50px;
}

.error404-btn {
    display: inline-block;
    padding: 14px 28px;
    border-radius: 9px;
    text-decoration: none;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}

.error404-home {
    background: #1976d2;
}

.error404-shop {
    background: #ff9800;
}
#zuck-modal-content{
    direction: ltr;
    text-align: left;
}
div#stories {
    margin-right: 350px;
    gap: 15px;
    display: flex;
}
.search-min {
    margin-right: 30px;
}


.m-slider .owl-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    pointer-events: none;
}

.m-slider .owl-nav button {
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 32px;
    line-height: 40px;
    cursor: pointer;
    pointer-events: auto;
}

.m-slider .owl-nav button:hover {
    background: rgba(0, 0, 0, 0.85);
}

.m-slider .owl-dots {
    text-align: center;
    margin-top: 15px;
}

.m-slider .owl-dot {
    border: none;
    background: transparent;
    padding: 5px;
}

.m-slider .owl-dot span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
}

.m-slider .owl-dot.active span {
    background: #333;
}
.owl-carousel .owl-item img {
    display: block;
    width: 258%;
    height: 300px;
}
.menu-header ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.menu-header ul li {
    display: block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.menu-header > ul {
    display: flex !important;
}

.menu-header > ul > li {
    margin-left: 30px !important;
}