/* @font-face {
    font-family: cairo;
    src: url(/font/cairo.ttf);
  }  */
  p{
    margin:0px;
  }
#allCont{
    display:grid;
    grid-template-columns: max-content 1fr;
    grid-column-gap:30px;
    width: 1200px;
    margin:auto;
    height:max-content;
    position:relative;
    margin-bottom: 50px;
    max-width:100%;
}
#acLeft{
    height:100%;
}
body:has( > #data-lang[data-lang="ar"]) .aclTitle{
  flex-direction: row-reverse;
}
body:has( > #data-lang[data-lang="ar"]) .aclTitle i{
  scale:-1;
}










.prodContFP{
  grid-column-gap: 10px;
}



/* 
.prodContFP{
  display:grid;
  width:1000px; 
  margin:auto; 
  grid-template-columns: repeat(4,1fr);
  grid-column-gap: 20px;  
  grid-row-gap:20px; 
  position:relative;
} 
.prodElemClass{
  position:relative; 
  cursor:pointer; 
  overflow: hidden;

}
.prodElemClass:hover .pecuImgFir{
}
.prodElemClass .pecuImgSec{
  opacity: 0;
  position:absolute;
  left:0px;
  transition:all .3s ease-in-out;
  z-index:3;

}
.prodElemClass:hover .pecuImgSec{
  opacity: 1 !important;
}
  .prodElemClass img,.pecuLoadImg{
    width:100%; 
    aspect-ratio: 1 / 1; 
    position:relative; 
  } 
  .pecuLoadImg{
    padding-top:5px; 
  }
  .loading-article b,
  .loading-article label{ 
    background-color: #eeeeef;  
    color:transparent;
  } 
  .loading-article p{
    color:transparent; 
  }


  .pecuLoveBtn i{
    left:0px; 
    position:relative;
    display:flex;

  }
  .prodElemClass:hover .pecuLoCaCont{
    transform: translateX(0%);
    z-index:10;
    opacity: 1;
  }
  
  .pecuLoCaCont{
    display:flex;
    flex-direction: column;
    transform: translateX(120%);
    position:absolute;
    top:0px;
    right:0px;
    transition: all .2s ease-in-out;
    opacity: 0;
  }
  .pecuLoveBtn{
    display:flex;
    justify-content: center;
    align-items: center;
    position:relative;
    padding:10px;
    z-index:5;
    font-size:22px;
    border-radius: 50%;
    height:50px;
    width:50px;
    margin:5px;
    border:none;
    background-color: white;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.081);
  }
  .prodElemClass:hover .pecuQuiLook{
    transform:translateY(0%);
    opacity: 1;
  }
  .pecuQuiLook{
    position:absolute;
    bottom:0px; 
    z-index:5;
    background-color: black; 
    color:white;
    display:flex;
    justify-content: center;
    align-items: center;
    padding:10px 0px;
    font-size:20px;
    width:100%;
    right:0px;
    transition: all .2s ease-in-out;
    transform:translateY(100%);
    opacity: 0;
  }
  
  .pecUpper{
    overflow:hidden; 
    background: linear-gradient(#eeeeef,#eeeeef);  
    border-radius: 5px;
    position:relative;
  }
  .pecLower{
    display:flex;
    flex-direction: column;
  }
  .pecLower p{
    padding-top:5px; 
    margin:0px; 
  }
  .pecLower label{
  }
  .peclTitle{
    font-size:20px;
    font-weight: bold; 
    display: table;
    table-layout: fixed;
    position:relative; 
    width:100%;  
  } 
  .peclTitle b{
    display:table-cell;
    width:100px;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow: hidden; 
  }
  .peclPrice{
    font-size:20px; 
  } */








.aclTitle{
  font-size: 17px;
  justify-content: space-between;
  display: flex;
  box-sizing: border-box;
  /* padding-bottom: 10px; */
  background: #1c4671;
  color: white;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 5px;
  font-weight: bold;
  font-style: italic;

}
.aclTitle i{
  align-items: center;
    display: flex
;
    justify-content: center;
}
#aclLowerCatg{
    display:grid;
    /* grid-template-columns: 1fr 1fr;  */
    /* gap:5px;  */
    align-items: center;
    user-select: none;
}
#aclLowerCatg,#aclLowerMode{
    border-radius:5px;   
  border:1px solid rgb(167, 167, 167);
}
#aclLowerCatg span:not(span:nth-of-type(1)),
#aclLowerMode span:not(span:nth-of-type(1))
{
  border-top:1px solid rgb(167, 167, 167);
}
#aclLowerCatg span{
    /* outline:1px solid rgb(167, 167, 167); */
    padding:10px;
    display:flex;
    justify-content: center;
    align-items: center;
    /* border-radius:5px;    */
    width:100%;
    box-sizing: border-box; 
    cursor:pointer;
}
#aclLowerCatg p{
    font-size:18px;
    padding-left:5px;

}
#acLeft{
    display:flex;
    flex-direction: column;
    gap:30px; 
} 
#aclLowerSize{
    display:grid;
    grid-template-columns: repeat(2,1fr);
    /* grid-gap:6px; */
    /* border:1px solid rgb(167, 167, 167); */
    border-radius:5px;

}

#aclLowerSize span{
    /* outline:1px solid rgb(167, 167, 167); */
    display:flex; 
    justify-content: center;
    align-items: center; 
    height:40px; 
    cursor:pointer;
    user-select: none;
}
#aclLowerSize span{
  border-bottom:1px solid rgb(167, 167, 167);

}
#aclLowerSize span:nth-of-type(1n){
  /* background-color: red; */
  /* border-right:1px solid rgb(167, 167, 167);
  border-bottom:1px solid rgb(167, 167, 167); */
}
#aclLowerSize span:nth-of-type(2n+1){
  border-left:1px solid rgb(167, 167, 167);

}
#aclLowerSize span{  
  border-right:1px solid rgb(167, 167, 167);

}
#aclLowerSize span:nth-of-type(1){
  border-top-left-radius: 5px;
}
#aclLowerSize span:nth-of-type(2){
  border-top-right-radius: 5px;
}

/* 
#aclLowerSize span:nth-last-child(1){
  border-bottom-right-radius: 5px;
} */



#aclLowerSize span:nth-of-type(1),
#aclLowerSize span:nth-of-type(2){
  border-top:1px solid rgb(167, 167, 167);
}
#aclLowerSize span:nth-last-of-type(1),
  #aclLowerSize span:nth-last-of-type(2){
  /* background-color: red; */
  /* border-bottom:none !important; */
}
#aclLowerMode{
    display:grid;
    grid-template-columns: 1fr;
}
#aclLowerMode span{
    display:flex; 
    justify-content: center;
    align-items: center; 
    height:40px; 
    user-select: none;
}


#aclLowerSize span,
#aclLowerMode span,
#aclLowerCatg span{
  cursor:pointer;
}

#aclLowerSize span:hover,
#aclLowerMode span:hover,
#aclLowerCatg span:hover{
  /* cursor:pointer; */
  background-color: #e7e7e7;
}


#aclLowerSize span[data-sel="true"],
#aclLowerMode span[data-sel="true"],
#aclLowerCatg span[data-sel="true"]
{
    /* background-color: #3498db;
    color:white;
    outline:0px; */
        /* color: white; */
        /* outline: 0px; */
        /* border:0px; */
        background: linear-gradient(45deg, transparent, transparent 80%, #3498db 1%, #3498DB);
}



.loading-article .pecUpper {
  width: 100%;     
  background: linear-gradient(90deg, #eeeeef 10%, #f5f5f5 50%, #eeeeef 100%) 0 0/200% 100%;

   animation: a 2s linear infinite;
}
 
@keyframes a {
  to {background-position:0% -200%;}
}








.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
  padding: 10px;
  /* border: 1px solid #ddd; */
  border-radius: 5px;
  /* background-color: #f5f5f5; */
  width: unset;
  margin: auto;
  margin-top:30px;
  max-width: 100vw;
}
.pagination div{
  display: flex;
  flex-direction: row;
}
.pagination a:hover,.pagination button:hover{
  background-color: #ddd;
}
.pagination a,.pagination button{
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  /* padding: 20px 20px; */
  margin: 0 3px;
  cursor: pointer;
  /* padding: 10px; */
  aspect-ratio: 1 / 1;
  height: 50px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  color:black;
  text-decoration: none;
}

.pagination button:hover {
  background-color: #ddd;
}

.pagination button.active {
  background-color: #007bff;
  color: #fff;
}


.prodElemClass.loading-article img{
  opacity: 0;
}








#quickViewProd{
  background-color: #000000a8;
  position:fixed; 
  height:100%;
  width:100%;
  z-index:101;

  top:0;
  display:flex;
  justify-content: center;
  transition:all .2s ease-in-out;

}
#qvpPlan{
  background-color: white;
  width:1000px;
  height:max-content;
  border-radius:5px;

  display:flex;
  position:relative;
  flex-direction: column;
  margin: 60px 0px;
}
#descSecSub{
  padding:0px 20px;    
  padding-bottom: 20px !important;

}
#descSecSub p{
    font-size: 18px;

}
#descSecSub label{
    font-weight: bold;
    font-size: 30px;
}










#qvpPlanCont { 
  position: relative; 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  width: 1000px; 
  grid-gap: 20px; 
  height: max-content;  
  padding:20px; 
  
  
} 

#acLeft { 
  display: flex; 
  flex-direction: column; 
  gap: 30px;
  width:220px;
} 
/* 
#aclPicPrim { 
  cursor: zoom-in; 
  background: linear-gradient(#e6e6e6,#e6e6e6); 
  width: 100%; 
  aspect-ratio: 4 / 3; 
  position: relative; 
  display: flex; 
  justify-content: center; 
  align-items: center;
}  */
/* 
#aclPicLower { 
  display: grid; 
  position: relative; 
  grid-template-columns: repeat(4,1fr); 
  grid-auto-rows: max-content; 
  grid-gap: 10px;
}  */

.acrSubTitle { 
  font-size: 20px;
  color:#2582df;
} 

.acrTitle { 
  font-size: 34px;

  font-weight: bold;
} 

.acrDesc { 
  font-size: 18px;
} 

.acrPrice { 
  font-size: 30px; 
  font-weight: bold; 
  /* padding-top: 10px;  */
  display: flex; 
  color: #0eab0e;
} 

#acRight hr  { 
  border-bottom: none; 
  margin: 15px 0px;
} 

.acrCont { 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
  margin-bottom: 15px;
} 


#acrPurCont{
  display:grid;
  grid-template-columns: max-content 1fr max-content;
  grid-column-gap: 10px;
}
#acrPurCont > div{

}

img { 
  user-select: none;
} 
/* 
#aclPicPrim img  { 
  position: absolute; 
  height: 100%; 
  width: 100%; 
  object-fit: cover; 
  object-position: center; 
  pointer-events: none; 
  transition: all .2s ease-in-out;
} 

#aclPicPrim:hover img { 
  opacity: 0;
}  */

/* .aclplElem { 
  background: linear-gradient(#e6e6e6,#e6e6e6); 
  width: 100%; 
  position: relative; 
  aspect-ratio: 4 / 3; 
  display: flex; 
  justify-content: center; 
  align-items: center;
}  */

.acrCont div  { 
  display: flex; 
  flex-direction: row; 
  gap: 10px;
} 


#acrpcBuyBtn { 
  background-color: rgb(255,118,0); 
  color: white; 
  padding: 10px;
  cursor:pointer;
  user-select: none;
} 

#acrPurCont span  { 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  font-size: 20px; 
  border-radius: 5px; 
  gap: 5px;
  padding: 15px;

} 

.aclplElem img  { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  object-position: center; 
  cursor: pointer;
} 

.acrcCElem { 
  height: 40px;
  aspect-ratio: 1 /1; 
  border-radius: 50%;
} 

.acrcCElem { 
  opacity: .5; 
  cursor: pointer; 
  position: relative; 
  background: #f5f5f6;
} 

.acrcCElem { 
  opacity: 1 !important; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  scale: .9;
} 
#acrpciCount{
  width:40px;

}
/* .acrcCElem[data-sel="true"]{
  opacity: 1 !important;
  border: 5px solid #000000;  
  outline: 2px solid rgb(255, 255, 255);
  outline-offset: -5px;
  scale:1;
} */
/* .acrCont .acrcSElem[data-sel="true"]{
    background-color: white; 
    border:2px solid #aaaaaa;
    opacity: 1;
    color:black; 
} */
.acrCont .acrcCElem:nth-of-type(1)  { 
  background-color: green;
} 

.acrCont .acrcCElem:nth-of-type(2)  { 
  background-color: brown;
} 

.acrCont .acrcCElem:nth-of-type(3)  { 
  background-color: orange;
} 

.acrCont .acrcCElem:nth-of-type(4)  { 
  background-color: purple;
} 

.acrcSElem { 
  font-size: 18px;
  height: 40px;
  aspect-ratio: 1 / 1; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  background-color: white; 
  border-radius: 10px; 
  color: #959595;
} 

/* .acrcSElem { 
  opacity: .5; 
  cursor: pointer; 
  position: relative; 
  background: #f5f5f6;
}  */

/* .acrcSElem { 
  cursor: pointer; 
  background-color: #f5f5f6;
}  */

#acrpcIncr { 
  display: grid; 
  grid-template-columns: repeat(3,1fr); 
  font-size: 22px;  
  border: 1px solid #8080808a; 
  border-radius: 5px;
} 

#acrpcCartBtn { 
  border: 1px solid gray;
} 

.fa-regular { 
  -moz-osx-font-smoothing: grayscale; 
  -webkit-font-smoothing: antialiased; 
  display: var(--fa-display,inline-block); 
  font-style: normal; 
  font-variant: normal; 
  line-height: 1; 
  text-rendering: auto;
} 

.fa-regular { 
  font-family: "Font Awesome 6 Pro";
} 

.fa-regular { 
  font-weight: 400;
} 

#acrPurCont span i  { 
  font-size: 16px;
} 

.fa-money-bill-1-wave:before,.fa-money-bill-wave-alt:before { 
  content: "\f53b";
} 

#acrpcIncr *  { 
  padding: 10px; 
  outline: none; 
  background-color: transparent; 
  border: none; 
  user-select: none;
} 

#acrpciMinus { 
  cursor: pointer;
} 

#acrpciPlus { 
  cursor: pointer;
} 

.fa-cart-plus:before { 
  content: "\f217";
} 




#qvpCloseElem{
  position:fixed;
  aspect-ratio: 1 / 1;
  display:flex;
  justify-content: center;
  align-items: center;
  color:white;
  top:0px; 
  right:20px;
  font-size:40px;

  padding:15px 20px;

}



.prodElemClass img{
  opacity: 1;
  transition: all .3s ease-in-out;
}
.prodElemClass[data-load='true'] img{
  opacity: 0 !important;
}






#acrHeaderSearch{
  display: grid;
  grid-template-columns: 1fr repeat(3,max-content);
  font-size:20px;
  padding-bottom:20px;
  display: none;
}
#acrHeaderSearch > div:nth-of-type(1){
  display: flex;
  flex-direction: row;
  gap:5px;
}
#acrHeaderSearch > div:nth-of-type(1) > label:nth-of-type(1){
  font-weight: bold;
}
#acrHeaderSearch > div:nth-of-type(1),
  #acrHeaderSearch > label:nth-of-type(1){
  position:relative;
  display: flex;
  align-items: center;
}
#acrhSelectOpt{
  width:100%;
  padding: 10px 15px;
  font-size: 18px;
  border-radius: 4px;
  border-color: #bdbdbd;
  outline: none;
}
#acrhsGridElems{
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding-right: 10px;
  font-size: 25px;
  color:#3f3f3f;
  align-items: center;
}



/* .pagination:has(#pagDivCont:not(:has(a))) {
  display: none;
} */
#pagDivCont{
  display: none;
}

#pagDivCont a[data-sel="true"]{
  background: #3498db;
  color: white !important;

}
.prodContFP{
  width:unset !important;
}

@media (max-width:1250px){
  #allCont{
    /* width:unset !important; */
    padding:0px 10px;
  }
}

@media (max-width:425px){

  .pagination:has(#pagDivCont a:nth-of-type(6)) button{
    display: none;
  }


  #allCont > #acLeft{
    display: none;
  }
  #allCont{
    display: unset !important;
  }
  
  .paHeFOSShopDel{
    display: none !important;
  }
  #acLeft{
    width:100% !important;
  }
  #acLeft > div:nth-last-of-type(1){
    padding-bottom: 160px;
  }
}




@media (max-width:375px) and (min-width:321px){

  .pagination a, .pagination button{
    height:43px !important;
  }

}

@media (max-width:320px){

  .pagination a, .pagination button{
    height:35px !important;
  }

}




.pecuOpenQuickView{
  
  height:100%;
  width:100%;
  /* background-color: red; */
  position:absolute;
  z-index:3;
}


.pecUpper[data-open="true"] .pecuOpenQuickView{
  display: none;
  
}
.pecUpper[data-open="true"] .pecuQuiLook{
  transform: translateX(0%);
  z-index:10;
  opacity: 1;
}