:root{
  --color-white: #0E0E21;
  --color-bg: #1e2329;
  --color-gray-light: #3c3c3d;
  --color-gray-dark: #18191c;
  --color-dark: #0b0c0d ;
  --color-primary:  rgb(71, 7, 234);
  --color-success: #00b67a;
  --color-danger: #ff5c62;
  --color-warning: #ea9f27;
  --color-purple: rgb(160, 99, 245);
  --gray-border: #dadce0;
  --color-input-1: #282D87 ;
  --color-input-2: #EEBB05 ;
  --color-body : #eff2f6 ;
  --border-color: #B0B0B0;
  --color-button-blue : #004DFF;
  --color-secondary : #492cdd;
  --dark :#1D1E20;
  --color-fade : #3874ff;
  --color-gray-input :#8a94ad;
  --color-a: #525b75;
  --color-a-active : #141824;
  --color-lien: #007185;
  --color-direct-price: #7fda69;
  --li-hover : #e5edff;

  --up-color: #16c784;
    --down-color: #ea3943;

  --color-primary-light: rgba(71, 7, 234, 0.2);
  --color-success-light: rgba(34, 202, 75, 0.2);
  --color-danger-light: rgba(255, 67, 54, 0.2);
  --color-purple-light: rgba(160, 99, 245, 0.2);

  --card-padding: 1.6rem;
  --padding: 1rem;
  --padding-2: 8px ;


--card-border-radius: 1.6rem;
--border-radius-1: 1rem;
--border-radius-2: 6px;

--bg-dashboard : #e3e6ed;

    --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Solid";
    --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Regular";
    --fa-font-light: normal 300 1em/1 "Font Awesome 6 Light";
    --fa-font-thin: normal 100 1em/1 "Font Awesome 6 Thin";
    --fa-font-duotone: normal 900 1em/1 "Font Awesome 6 Duotone";
    --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";


}


*{
  margin: 0;
  padding: 0;
  outline: 0;
  border: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;

}


#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  z-index: 4;
  cursor: pointer;
}

.text-body-tertiary {
  color: rgba(82,91,117,1);
  width: 20px;
  height: 20px;
}

.active{
  
  border: solid 1px var(--gray-border);
  border-radius: var(--border-radius-2);
  padding: 2px
}

/*all comments css */

main .cards-comment .c-product-detail .add-comment .all-comments{


  width: 100%;
  display: flex;
  flex-direction: column;
  gap:0.626rem;
  
}

main .cards-comment .title{
  width: 100%;
    padding-left: 50px;
    margin-top: 20px;
}

main .cards-comment .title h1{

  font-family: 'nunito', sans-serif;
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    unicode-bidi: isolate;
    line-height: 1.2;
    color: #141824;
}

main .cards-comment .c-product-detail .add-comment .all-comments .comments{

  width: 100%;
  display: flex;
  flex-direction: column;

}


main .cards-comment .c-product-detail .add-comment .all-comments .comments .name{

  display: flex;
  align-items: center;
  width: 100%;

}

main .cards-comment .c-product-detail .add-comment .all-comments .comments .name button{

  background: transparent;

}


main .cards-comment .c-product-detail .add-comment .all-comments .comments .name p{

  margin-left: 15px;
  font-size: 16px;
  font-weight: 550;
}

main .cards-comment .c-product-detail .add-comment .all-comments .comments .name img{

  width: 100px;
}

main .cards-comment .c-product-detail .add-comment .all-comments .comments .time{

  margin-top: 0.313rem;
  width: 100%;
}

main .cards-comment .c-product-detail .add-comment .all-comments .comments .time p{

  color: #525B75;
}

main .cards-comment .c-product-detail .add-comment .all-comments .comments .text{

  display: flex;
  width: 100%;
  margin-top: 0.313rem;
}

main .cards-comment .c-product-detail .add-comment .all-comments .comments .text p{

  color: #222834;
}

main .cards-comment .c-product-detail .add-comment .all-comments .comments .imgs{


  width: 100%;
  display: flex;
  margin-top: 0.313rem;
  margin-bottom: 0.500rem;
  
}


main .cards-comment .c-product-detail .add-comment .all-comments .comments .imgs img{

  width:150px;
  height: 150px;
  object-fit: contain;
}


/* all comments css end */


/*style comment page */

main .cards-comment{

  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.626rem;
}

main .cards-comment .title{

  width: 100%;
    padding: 0.313rem;
}

main .cards-comment .c-product-detail{

  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.626rem;
}

main .cards-comment .c-product-detail .c-product{

  width: 100%;
  display: flex;
  gap:0.626rem;
  margin-left: 1rem;
}

main .cards-comment .c-product-detail .c-product .prod-img{

  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-2);
  border: solid 1px var(--gray-border);
  background: #ffffff;

}

main .cards-comment .c-product-detail .c-product .prod-img img{

  width: 100%;
  height: 100%;
  object-fit: contain;
}

main .cards-comment .c-product-detail .c-product .c-p-name{

  margin-top: 0.313rem;
  display: flex;
  flex-direction: column;

}

main .cards-comment .c-product-detail .c-product .c-p-name a{

  text-decoration: underline;
  color: #000000;
}


main .cards-comment .c-product-detail .c-product .c-p-name span{

  font-size: 20px;

}


main .cards-comment .c-product-detail .c-product .c-p-name .c-store{

  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

main .cards-comment .c-product-detail .c-product .c-p-name .c-store img{

  width: 100%;
  height: 100%;
  object-fit: contain;
}

main .cards-comment .c-product-detail .c-product .c-p-name .c-ranking{

  display: flex;
  flex-direction: column;
}

main .cards-comment .c-product-detail .add-comment{

  width: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 15px;
}

main .cards-comment .c-product-detail .add-comment .title{

  display: flex;

}

main .cards-comment .c-product-detail .add-comment .title span{

  
  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.5em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;
}

main .cards-comment .c-product-detail .add-comment hr{
background-color: transparent;
    display: block;
    height: 1px;
    border-width: 0;
    border-top: 1px solid var(--gray-border);
    line-height: 19px;
    margin-bottom: 14px;
    margin-top: 20px;
    margin-bottom: 20px;

}


main .cards-comment .c-product-detail .add-comment span{
  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.3em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;
        margin-bottom: 0.313rem;
}

main .cards-comment .c-product-detail .add-comment .score{

  width: 100%;
  display: flex;

}

main .cards-comment .c-product-detail .add-comment .score button{

   display: inline-block;
            color: #ffffff;
            background-color: var(--gray-border);
            width: 30px;
            height: 30px;
            clip-path: polygon(
                50% 0%,
                61% 35%,
                98% 35%,
                68% 57%,
                79% 91%,
                50% 70%,
                21% 91%,
                32% 57%,
                2% 35%,
                39% 35%
            );
            border: none;
            cursor: pointer;
            margin: 5px;
            transition: background-color 0.3s;
}

 

        main .cards-comment .c-product-detail .add-comment p{

          color: #707070;
        }

       

        main .cards-comment .c-product-detail .add-comment form{

          width: 100%;
          display: flex;
          flex-direction: column;
        }

      

        main .cards-comment .c-product-detail .add-comment form  .ajouterFichier{

           width: 130px;
            height: 130px;
            border: 2px dashed #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: #666;
            cursor: pointer;
            position: relative;
            margin-top: 0.313rem;
        }

        main .cards-comment .c-product-detail .add-comment form .ajouterFichier input{



          position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;

        }

        main .cards-comment .c-product-detail .add-comment form .gallery{
      display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
        }

        main .cards-comment .c-product-detail .add-comment form .gallery .image-container {
    position: relative;
    margin: 10px;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

 main .cards-comment .c-product-detail .add-comment form .gallery .image-container img {
   width: 130px;
    height: 130px;
    object-fit: contain;
}

 main .cards-comment .c-product-detail .add-comment form .gallery .image-container .remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #707070;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0.200rem;
}

main .cards-comment .c-product-detail .add-comment form .gallery .image-container .move-btn {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: blue;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

        main .cards-comment .c-product-detail .add-comment form input[type="text"]{

          width: 60%;
          height: 35px;
          padding: 0.313rem;
          font-size: 16px;
          border: 1px solid var(--gray-border);
          background: #ffffff;
          margin-top: 0.313rem;
          font-family: 'nunito', sans-serif;
            display: block;
          unicode-bidi: isolate;
          line-height: 1.2;
          color: #141824;
          margin-bottom: 0.626rem;
        }

        main .cards-comment .c-product-detail .add-comment form textarea{

          width: 60%;
          resize: none;
          height: 130px;
          font-size: 16px;
          padding: 0.313rem;
          background: #ffffff;
          border: solid 1px var(--gray-border);
          font-family: 'nunito', sans-serif;
            display: block;
          unicode-bidi: isolate;
          line-height: 1.2;
          color: #141824;
          margin-top: 0.313rem;
        }

         main .cards-comment .c-product-detail .add-comment form .button{

          width: 60%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 0.939rem;
         }

         main .cards-comment .c-product-detail .add-comment form .button input{

          width: 140px;
          height: 35px;
          font-size: 18px;
          color: #ffffff;
          background: var(--color-fade);
          border-radius: var(--border-radius-2);
          cursor: pointer;
         }

/*style comment page end */

        /* Styles pour la modal */
       


body{ 

  background: var(--color-body);
  width: 100%;
  display: flex;
  flex-direction: column;

  
}

main{

  direction: flex;
  width: 100%;
  flex-direction: column;
  
}

/* css header */

main header{


    top: 0;
    left: 0;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 80px;
    z-index: 1;
    
}

main header .logo{

  display: flex;
  flex-direction: column;
  align-items: center;
  width: 10%;
  height: 80px;



}

main header .logo a{

  width: 170px;
  height: 60px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

main header .logo a img{

  width: 100%;
  
 
}

main header .search{

  width: 50%;
  display: flex;
  align-items: center;
}

main header .search form{
  display: flex;
  width: 100%;
}

main header .search form button{

  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-bottom-left-radius: var(--border-radius-1);
  border-top-left-radius: var(--border-radius-1);
  border-left: solid 1px var(--gray-border);
  border-top: solid 1px var(--gray-border);
  border-bottom: solid 1px var(--gray-border);
}

main header .search form button img{

  color: var(--color-gray-input);
}


main header .search input{

width: 100%;
height: 35px;
border-right: solid 1px var(--gray-border);
border-top: solid 1px var(--gray-border);
border-bottom: solid 1px var(--gray-border);

border-bottom-right-radius: var(--border-radius-1);
border-top-right-radius: var(--border-radius-1);

}

main header .nav-option{

  display: flex;
  gap:0.313rem;
  justify-content: center;
  align-items: center;
 


}


main header .nav-option .balance{

  display: flex;
  align-items: center;
  justify-content: center;
  gap:0.313rem;
  margin-right: 0.313rem;
  height: 30px;
  
}

main header .nav-option .balance span{

  display: block;
    font-size: 16px;
    font-weight: bold;
    color: #707070;
}

main header .nav-option button{

  background: transparent;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

main header .nav-option button:hover{

  cursor: pointer;
}

/* css header end */

/* css menu */


.modal {
            display: none; /* Cacher la modal par défaut */
            position: fixed;
            z-index: 999;
            right: 0;
            top: 0;
            top:-100;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.4); /* Couleur de fond */
            
        }

        @keyframes showSidebar{

        to{
            top: 0;
        }
    }
        .modal-content {
            background-color: #f2f2f2;
             right: 0;
            top: 0;
            top:-100;
            position: absolute;
           animation: showSidebar 1000ms ease forwards;
            border: 1px solid #888;
            width: 30%; /* Largeur de la modal */
            display: block;
            padding: 0.313rem;

        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

         .modal-content .alertcard{

          width: 100%;
          display: flex;
          flex-direction: column;
          
         }

          .modal-content .alertcard .alert-i-n{

            width: 100%;
            display: flex;
            gap:0.313rem;
          }

           .modal-content .alertcard .alert-i-n .alertimg{

            width: 30%;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
           }

           .modal-content .alertcard .alert-i-n .alertimg img{

            width: 100%;
            height: 100%;
            object-fit: contain;
           }

           .modal-content .alertcard .alert-i-n .alertname{

            width: 70%;
            display: flex;
           }

            .modal-content .alertcard .alert-i-n .alertname span{


  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1em;
      
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;

            }

            .modal-content .alertcard .alertmess{

              width: 100%;
              display: flex;
              align-items: center;
              gap:0.626rem;
        
              margin-top: 0.626rem;
              padding-left: 0.626rem;
              
            }

            .modal-content .alertcard .alertmess span{

              
              font-size: 18px;
              color: #707070;
              border-radius: var(--border-radius-1);
              }

              .modal-content .alertcard .alertmess img{

                width: 25px;
                height: 25px;
              }


main .menu{

  display: flex;
  justify-content: space-between;
  width: 100%;
  background: #ffffff;
  height: 40px;
  padding-left: 40px;
  padding-right: 40px;
  align-items: center;
}

main .menu .category{

  display: flex;
  align-items: center;
  width: 30%;
}

main .menu .category button{

  background: transparent;
  display: flex;
  align-items: center;
  gap:5px;
  font-size: 16px;
  color: var(--color-a);

}

main .menu .category button:hover{

  cursor: pointer;
}

main .menu .category button img{

  width: 25px;
}

main .menu .nav{

  width: 70%;
  display: flex;
  align-items: center;

}

main .menu .nav ul{

  display: flex;
  gap:25px;
  width: 100%;
}

main .menu .nav ul li{


}

main .menu .nav ul li a{

  text-decoration: none;
  color: var(--color-a);
  font-size: 16px;

  
}

main .menu .nav ul li a:hover{

  color: var(--color-a-active);
}

main .menu .phonebalance{

  display: none;
}

/* css menu end */

/* css banierre */

 main .banniere{

width: 100%;
  position: relative;
  margin-top: auto;
}



main .banniere .mySlides img{


}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -40px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 6px;
  width: 100%;
  text-align: center;
}

.product{

   position: absolute;
  top: 280px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  padding-right:20px;
}

.product .scard{

  display: flex;
  flex-direction: column;
  background: #ffffff;
  padding: 20px;
  justify-content: center;
  align-items: center;
  gap:0.313rem;
  border-radius: var(--border-radius-2);
}

.product .scard h2{
  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.2em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;
        margin-bottom: 0.313rem;

}

.product .s-p{

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap:0.626rem;
  height: 90%;
  
  
}

.product .s-p button{

  width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:0.313rem;
  background: transparent;
  height: 100%;


  
}

.product .s-p button:hover{

  cursor: pointer;
}

.product .s-p button img{
width: 100%;
height:  100%;
object-fit: contain;

}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 18px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color:red;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  margin-top: 180px;
}

.active, .dot:hover {
  background-color: #ffffff;
  border: solid 1px #707070;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

main .searchphone{

  display: none;
}

/* css menu phone */

 .menuphone {

  display: none;

 }

 #menuToggle{

  display: none;
 }

 #overlaypc  {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 999;
        }

  .menupc {
            width: 350px;
            max-width: 80%;
            height: 100%;
            position: fixed;
            top: 0;
            left: -350px;
            background-color: #ffffff;
            color: white;
            overflow-y: auto;
            transition: 0.3s;
           display: block;
            z-index: 1000;
        }

         .menupc {
            width: 350px;
            max-width: 80%;
            height: 100%;
            position: fixed;
            top: 0;
            left: -350px;
            background-color: #ffffff;
            color: white;
            overflow-y: auto;
            transition: 0.3s;
           display: block;
            z-index: 1000;
        }

        .menupc .infouser{

          width: 100%;
          display: flex;
          flex-direction: column;
          background: var(--color-body);
          position: relative;

        }

        .menupc .infouser .name{
          width: 100%;
          position: relative;
          padding: 0.626rem;
          margin-bottom: 50px;
          display: flex;
          flex-direction: column;
          align-items: center;

        }

        .menupc .infouser .name a{

          display: flex;
          align-items: center;
          justify-content: center;
          text-align: right;
          gap:0.313rem;
          position: absolute;
          right: 0;
          font-size: 1.1rem;
          font-family: nunito;
          font-weight: bold;
          color: #000000;


        }

        .menupc .infouser .name .balance{


          display: flex;
          align-items: center;
          text-align: right;
          gap:0.313rem;
          position: absolute;
          right: 0;
         
          margin-top: 40px;
          margin-right: 30px;




        }

        .menupc .infouser .name .balance span{

        font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: rgba(82,91,117,1);

      }


        .menupc .infouser .name button {

          display: flex;
          align-items: center;
          text-align: left;
          gap:0.313rem;
          position: absolute;
          left: 0;
          font-size: 1.1rem;
          font-family: nunito;
          font-weight: bold;
          color: #000000;
          margin-left: 0.313rem;
          background: transparent;
        }

        .menupc .infouser .name button img{

          width: 24px;
        }


.menupc .infouser hr{

          background-color: transparent;
    display: block;
    height: 1px;
    border-width: 0;
    border-top: 2px solid #e7e7e7;
    line-height: 19px;
    margin-bottom: 14px;
    margin-top: 20px;
    margin-bottom: 20px;

}

.menupc .infouser .home{

  width: 100%;
  display: flex;
  padding: 0.626rem;
  position: relative;
  padding-bottom: 10px;
}

.menupc .infouser .home span{

 font-family: 'nunito', sans-serif;
        display: flex;
        font-size: 1.5em;
      
        unicode-bidi: isolate;
        line-height: 1.2;
        font-weight: bold;
        color: #000000;
        align-items: center;
        position: relative;

}

.menupc .infouser .home span img{

  margin-left: 25px;
}


        .menupc .infouser .logo a img{

width: 100px;
        }

        .menupc a {
            padding: 10px 20px;
            text-decoration: none;
            font-size: 18px;
            color: white;
            display: block;
            transition: 0.3s;
        }

        .menupc a:hover {
            background-color: var(--color-body);
        }

        .menupc .back-btnpc,
        .menupc .close-btn {
            background-color: var(--color-body);
            text-align: center;
        }

        .menupc .back-btnpc a,
        .menupc .close-btn a {
            padding: 10px;
            cursor: pointer;
            color: #000000;
        }

         #mainMenupc {

          padding-top:0.626rem; 
          width: 100%;
         }

        #mainMenupc .title{
         width: 100%;
         padding-left: 0.939rem;

          
        }

        #mainMenupc .title span{
font-family: 'nunito', sans-serif;
        display: flex;
        font-size: 1rem;
      
        unicode-bidi: isolate;
        line-height: 1.2;
        font-weight: bold;
        color: #000000;
        align-items: center;
        position: relative;

        }

        #mainMenupc li{

          
          display: flex;
          height: 50px;
          padding-left: 0.939rem;
          align-items: center;
          position: relative;
          padding-right: 0.929rem;
          
          
        }

         #mainMenupc li a{

          display: flex;
          height: 100%;
          align-items: center;
          gap:0.626rem;
          text-decoration: none;
          color: #000000;
          font-size: 20px;
         }

         #mainMenupc li span{

          display: block;
          position: absolute;
          right: 0;
          color: #707070;
          font-size: 20px;
          margin-right: 1.3rem;
          
         }

       

        .submenupc {
            display: none;

        }

        .submenupc li{
display: flex;
          height: 50px;
          padding-left: 0.939rem;

        }

       .submenupc  li a{

          display: flex;
          height: 100%;
          align-items: center;
          gap:0.626rem;
          text-decoration: none;
          color: #000000;
         }



/* css home bottom */


main .bottom{

  margin-top: 180px;
  margin-left: 20px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
}

main .bottom .store-slide{

  display: none;
}




main .bottom .store-slide-pc{

  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.313rem;
  position: relative;
  margin-bottom: 0.939rem;
  

}

main .bottom .store-slide-pc .title{


  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 0.313rem;
  padding: 0.313rem;
  width: 100%;

}

main .bottom .store-slide-pc .title span{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.17em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;
}

main .bottom .store-slide-pc .slide-card-pc{

  position: relative;
   
   
    width: 100%;
    display: grid;
    grid-template-columns: repeat(7,1fr);


    

}

main .bottom .store-slide-pc .slide-card-pc a{

  text-decoration: none;
}

main .bottom .store-slide-pc .slide-card-pc a button{

  

   display: flex;
   flex-direction: column;
          
           margin-top: 0.626rem;
          background: transparent;
          cursor: pointer;
            gap:0.313rem;
            user-select: none; /* Empêche la sélection de texte pendant le glissement */
}

main .bottom .store-slide-pc .slide-card-pc a button .img{

  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #ffffff;
  
}

main .bottom .store-slide-pc .slide-card-pc a button .img img{

  width: 150px; /* largeur fixe */
            height: 150px; /* hauteur fixe */
            object-fit: contain; /* ajuste le contenu de l'image */
            border-radius: 50%;

        }

        main .bottom .store-slide-pc .slide-card-pc a button .name{

          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 0.313rem;

        }

        main .bottom .store-slide-pc .slide-card-pc a button .name span{


          font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.05em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;

        }








main .bottom .product-card-1{

  display: flex;
  flex-direction: column;
  background: #ffffff;
  width: 100%;
  border-radius: var(--border-radius-2);
  padding: 0.313rem;

}

main .bottom .product-card-1 .title{

  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 0.313rem;
  padding: 0.313rem;
  width: 100%;
  padding-left: 0.626rem; 
  
}


main .bottom .product-card-1 .title h2{
  font-family: 'nunito', sans-serif;
    display: block;
    font-size: 1.17em;
    font-weight: bold;
    unicode-bidi: isolate;
    line-height: 1;
    color: #141824;
}

main .bottom .product-card-1 .title a{

  color: var(--color-fade);
}


main .bottom .product-card-1 .title a:hover{

  text-decoration: underline;
}

main .bottom .product-card-1 .product-c-1{

display: grid;
grid-template-columns: repeat(6,1fr);
justify-content: space-between;
gap:0.313rem;
width: 100%;


}

main .bottom .product-card-1 .product-c-1 button{

  width: 100%;
  height: 100%;
  background: transparent;
 
}

main .bottom .product-card-1 .product-c-1 button:hover{

  cursor: pointer;
}

main .bottom .product-card-1 .product-c-1 button img{

  width: 100%;
  height: 100%;
  object-fit: contain;
  
  
}
main .bottom .title h2{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.3em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;

}


main .bottom .product-card-2{

  display: grid;
  width: 100%;
  background: #ffffff;
  margin-top: 30px;
  grid-template-columns: repeat(6, 1fr);
  gap:15px;
  padding: 0.313rem;
}

main .bottom .product-card-2 button{

background: transparent;
width: 100%;
margin-top: 25px;

}

main .bottom .product-card-2 button:hover{

  cursor: pointer;
}


main .bottom .product-card-2 button .p2{

  width: 100%;
  display: flex;
  flex-direction: column;


}

main .bottom .product-card-2 button .p2 .p-img{

  width: 100%;
  height: 170px;


}

main .bottom .product-card-2 button .p2 .p-img img{

  width: 100%;
  height: 170px;
  object-fit: contain;


}

main .bottom .product-card-2 button .p2 .p-name{

  margin-top: 0.313rem;
  width: 100%;
}

main .bottom .product-card-2 button .p2 .p-name p{

  color: var(--color-lien);
}

main .bottom .product-card-2 button .p2 .price-direct{

  display: flex;
  width: 100%;
  margin-top: 5px;
  flex-direction: column;
}

main .bottom .product-card-2 button .p2 .price-direct .estimated,
main .bottom .product-card-2 button .p2 .price-direct .total-price{

    width: 100%;
  margin-top: 5px;
  display: flex;
  align-items: center;
  position: relative;

}

main .bottom .product-card-2 button .p2 .price-direct .estimated span{

  font-weight: 550;
  font-size: 14px;
  color: #707070;
}

main .bottom .product-card-2 button .p2 .price-direct .total-price span{

     color: #565959; 
      font-size: 16px;
      font-weight: 550;
     


}

main .bottom .product-card-2 button .p2 .price-direct .progression{

width: 100%;
  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 5px;

}

main .bottom .product-card-2 button .p2 .price-direct .progression .progressbar{

  width: 30px;
}


#off{

  color: red;
}



.swiper-container {
           display: none;

        }



.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #ffffff;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav .menu{

  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px;
  border-bottom: 1px solid var(--gray-border);

}

.sidenav .menu .title{

  display: flex;
  width: 100%;
  margin-bottom: 15px;
  gap:0.313rem;
}

.sidenav .menu .title h3{

  font-size: 22px;
}

.sidenav .menu .element{

  display: flex;
  flex-direction: column;
  width: 100%;

}

.sidenav .menu .element ul{

  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.313rem;
}

.sidenav .menu .element ul li{

  width: 100%;
  height: 30px;
  padding: 15px;
  display: flex;
  align-items: center;

}

.sidenav .menu .element ul li:hover{

  background: #e5edff;
}

.sidenav .menu .element ul li a{

  text-decoration: none;
  color: #111111;
  font-size: 15px;

}

.sidenav  a{

  color: #111111;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}


/* profil-drop */


main .focus-notif{

  position: absolute;
  right: 0;
  background: #ffffff;
    width: 20px;
    height: 20px;
  top: 55px;
  transform: rotate(45deg);
  border-top: 1px solid var(--gray-border);
  border-left: 1px solid var(--gray-border);
  margin-right: 88px;
  z-index: 2;
  display: none;
  
}


main .notif-drop {

    position: absolute;
  right: 0;
  background: #ffffff;
  top: 65px;
  padding-top: 0.313rem;
  border: 1px solid var(--gray-border);
  margin-right: 65px;
  border-radius: var(--border-radius-2);
  z-index: 1;
  display: none;
  flex-direction: column;
  max-height: 70%;
  width: 250px;
  overflow-y: scroll;
}

main .notif-drop .title{

  width: 100%;
  padding: 0.313rem;
  border-bottom: solid 1px var(--gray-border);

}

main .notif-drop a{

  text-decoration: none;
}

main .notif-drop .notif-card{

  display: flex;
  flex-direction: column;
  width: 100%;
  padding-bottom: 0.313rem;
  border-bottom: solid 1px var(--gray-border);
  margin-bottom: 0.313rem;

  

}

main .notif-drop .notif-card .products{

  width: 100%;
  display: flex;
  margin-top: 0.313rem;
}

main .notif-drop .notif-card .products .imgs{

  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

main .notif-drop .notif-card .products .imgs img{

  width: 50%;
  height: 100%;
  vertical-align: middle;
  
}

main .notif-drop .notif-card .products .name{

  width: 60%;
  display: flex;
  flex-direction: column;
  gap:5px;
}

main .notif-drop .notif-card .products .name span{

  color: #111;
}


main .notif-drop .notif-card .time{

  display: flex;
  gap:5px;
  width: 100%;
  padding-left: 20px;
  margin-top: 0.313rem;

}

main .notif-drop .notif-card .time span{

  color: #111;
}

main .notif-drop .notif-card .time img{

  width: 20px;
}

main .focus-drop{

  position: absolute;
  right: 0;
  background: #ffffff;
    width: 20px;
    height: 20px;
  top: 55px;
  transform: rotate(45deg);
  border-top: 1px solid var(--gray-border);
  border-left: 1px solid var(--gray-border);
  margin-right: 45px;
  z-index: 5;
  display: none;
  
}

 main .product-info-phone{

  display: none;
 }

main .profil-drop {

    position: absolute;
  right: 0;
  background: #ffffff;
  top: 65px;
  padding-top: 0.313rem;
  border: 1px solid var(--gray-border);
  margin-right: 25px;
  border-radius: var(--border-radius-2);
  z-index: 5;
  display: none;
  flex-direction: column;
  padding: 20px;
}

main .profil-drop .person{

  display: flex;
  flex-direction: column;
  gap:0.313rem;
  align-items: center;
  justify-content: center;
}

main .profil-drop .menu-profil{

  width: 100%;
  direction: flex;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--gray-border);
  margin-top: 20px;
}

main .profil-drop .menu-profil ul{

  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.313rem;
}

main .profil-drop .menu-profil ul li{

  width: 100%;
  border-radius: var(--border-radius-2);
  padding: 0.313rem;
  height: 30px;
  background: transparent;
  display: flex;
  align-items: center;
  gap:5px;
}

main .profil-drop .menu-profil ul li:hover{

  background: var(--li-hover);
  cursor: pointer;
}

#li-active{
background: var(--li-hover);

}

main .profil-drop .menu-profil ul li a{

  text-decoration: none;
  color: #222834;
  font-size: 16px;
}

main .profil-drop .person .img{

   width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-fade);

}

main .profil-drop .person .img span{

  font-size: 26px;
  color: #ffffff;
  font-weight: bold;
}
main .profil-drop .person .imgs{

  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  
}

main .profil-drop .person .img img{

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

}
main .profil-drop .person .imgs img{

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

main .profil-drop .button{

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:20px;
  margin-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gray-border);
}

main .profil-drop .button li#login{

  width: 200px;
  height: 40px;
  border-radius: var(--border-radius-2);
  padding: 0.313rem;
  background: transparent;
  border: 1px solid var(--color-fade);
  display: flex;
  align-items: center;
  justify-content: center;
}

main .profil-drop .button li#login:hover{

  cursor: pointer;
}


main .profil-drop .button li#create{

  width: 200px;
  height: 40px;
  border-radius: var(--border-radius-2);
  padding: 0.313rem;
  background: var(--color-fade) ;
  display: flex;
  align-items: center;
  justify-content: center;
}

main .profil-drop .button li#create:hover{

  background: var(--color-button-blue);
  cursor: pointer;
}


main .profil-drop .button li#create a{

  color: #ffffff;
}

main .profil-drop .button li#login a{

  color: var(--color-fade);
}

main .profil-drop .business{

  margin-top: 0.313rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

main .profil-drop .business li{


  width: 200px;
  height: 40px;
  border-radius: var(--border-radius-2);
  padding: 0.313rem;
  background: #E67E22  ;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.313rem;
}

main .profil-drop .business li:hover{

  cursor: pointer;
  background: #CA6F1E;

}

main .profil-drop .business li#logout{

  background: transparent;
  border: 1px solid var(--color-fade);
  display: flex;
  align-items: center;
  justify-content: center;
  gap:0.626rem;
}

main .profil-drop .business li#logout a{

  color: var(--color-fade);
  display: flex;
  align-items: center;
  justify-content: center;
  gap:0.313rem;
}



main .profil-drop .business li a{

  color: #ffffff;
}

main .focus-nav{
    position: absolute;
  left: 0;
  background: #ffffff;
    width: 20px;
    height: 20px;
  top: 115px;
  transform: rotate(45deg);
  border-top: 1px solid var(--gray-border);
  border-left: 1px solid var(--gray-border);
  margin-left: 65px;
  z-index: 5;
  display: none;

}

main .category-drop{

    position: absolute;
  left: 0;
  background: #ffffff;
  top: 125px;
  padding-top: 0.313rem;
  border: 1px solid var(--gray-border);
  margin-left: 25px;
  border-radius: var(--border-radius-2);
  z-index: 5;
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Colonnes flexibles */
  padding: 0.313rem;
  padding-bottom: 20px;
  height: 600px;
  width: 95%;
  gap:0.626rem;

}

main .category-drop .menu{

  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 5px;
 



}

main .category-drop .menu .title{

  display: flex;
  align-items: center;
  min-width: 100%;
  min-height: 40px;
  max-height: 40px;
  margin-bottom: 0.626rem;
  
}


main .category-drop .menu .title a{

  text-decoration:none;
  width: 100%;

  
  
}

main .category-drop .menu .title a h4{

  color: #000000;
}


main .category-drop .menu .element{

  
  display: flex;
  flex-direction: column;
  gap:7px;
  width: 100%;
  

}

main .category-drop .menu .element li{

  height: 30px;
  padding: 5px;
  border-radius: var(--border-radius-2);

}

main .category-drop .menu .element li:hover{

  background: #e5edff;
  cursor: pointer;
}
main .category-drop .menu .element li a{

  color: #141824;
}




/* home end css */



/* login css */

.register-cards{


  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.register-cards .logo{

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 15px;
}

.register-cards .logo a img{

  width: 170px;
}

.register-cards .register-card{


  display: flex;
  flex-direction: column;
  border-radius: 8px;
  border-radius: 4px;
    position: relative;
    padding: 14px 18px;
    border: solid 1px #e8e8e8;
    background: #ffffff;
    margin-bottom: 20px;


}

.register-cards .register-card h1{

  font-weight: 400;
    font-size: 28px;
    line-height: 1.2;
    font-family: Arial,sans-serif;
    text-rendering: optimizeLegibility;
    padding-bottom: 4px;
    color: #000000;
    margin-bottom: 20px;
}

.register-cards .register-card form{

  width: 100%;
  display: flex;
  flex-direction: column;
}


.register-cards .register-card form label{

    display: block;
    padding-left: 2px;
    padding-bottom: 2px;
    font-weight: 700;
    cursor: default;


    font-family: 'nunito', sans-serif;
        
   margin-bottom: 0.313rem;
   
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;

}


.register-cards .register-card form input[type="text"],
.register-cards .register-card form input[type="email"],
.register-cards .register-card form input[type="password"]{

  background-color: #fff;
    height: 31px;
    padding: 3px 7px;
    line-height: normal;
    writing-mode: horizontal-tb !important;
    padding-block: 1px;
    padding-inline: 2px;
    width: 300px;
    border: 1px solid #a6a6a6;
    border-top-color: #949494;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 1px 0 rgba(0,0,0,.07) inset;
    outline: 0;
    margin-bottom: 0.313rem;
    padding: 5px;
}


.register-cards .register-card form input[type="submit"]{

  background-color: var(--color-fade);
    height: 31px;
    padding: 3px 7px;
    line-height: normal;
    width: 300px;
    border-radius: 3px;
    outline: 0;
    margin-bottom: 0.313rem;
    border-radius: 5px;
    margin-top: 5px;
    cursor: pointer;
    color: #ffffff;
    


}

.register-cards .register-card form input[type="submit"]:hover{

  background: var(--color-button-blue);
}

.register-cards .register-card .condition{

  width: 300px;
  text-align: center;
}

.register-cards .register-card .condition p a{

  color: var(--color-fade);
}

.register-cards .register-card .condition p a:hover{

  text-decoration: underline;
}



.register-cards .register-card hr {
    background-color: transparent;
    display: block;
    height: 1px;
    border-width: 0;
    border-top: 1px solid #e7e7e7;
    line-height: 19px;
    margin-bottom: 14px;
    margin-top: 20px;
    margin-bottom: 20px;

}

.register-cards .register-card .seller span,
.register-cards .register-card .create span {

    font-weight: 700!important;

}

.register-cards .register-card .seller a,
.register-cards .register-card .create a{

  color: var(--color-fade);

}

.register-cards .register-card .seller a:hover,
.register-cards .register-card .create a:hover{

  text-decoration: underline;
}




/* login end css */



/* profil css */


main .title-profil{

  width: 100%;
  margin-top: 30px;
  padding-left: 50px;
}

main .title-profil h1{

  font-size: 30px;
  font-weight: 800;
}

main .card-product-phone{

  display: none;
}


main .cards-profil{

  width: 100%;
  padding-left: 50px;
  display: flex;
  gap:30px;
}

main .cards-profil .left{

  width: 60%;
  border: 1px solid var(--gray-border);
  border-radius: var(--border-radius-2);
  padding: 15px;
  background: #ffffff;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

main .cards-profil .left .info-p{

  display: flex;
  width: 100%;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gray-border);


}


main .cards-profil .left .info-p .photo{

  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

main .cards-profil .left .info-p .photo .img{

  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-fade);
}


main .cards-profil .left .info-p .photo .img h1{

  color: #ffffff;
  font-size:44px;
}


main .cards-profil .left .info-p .n-s{

  display: flex;
  flex-direction: column;
  width: 70%;
}

main .cards-profil .left .info-p .n-s .name{

  width: 100%;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  gap:5px;
  
}

main .cards-profil .left .info-p .n-s .name h2{


  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.2em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;

}

main .cards-profil .left .info-p .n-s .social{

  display: flex;
  gap:0.313rem;
}

main .cards-profil .left .info-p .n-s .social img{

  width: 25px;
}

main .cards-profil .left .info-t{

  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;

}

main .cards-profil .left .info-t .element-t{

  display: flex;
  flex-direction: column;
  gap:5px;
  align-items: center;
  justify-content: center;
}


main .cards-profil .left .info-t .element-t span#title{

  color: #3e465b;
  font-size: 16px;

}

main .cards-profil .left .info-t .element-t span#text{

  font-size: 20px;
  color: #111;
}


main .cards-profil .right{

    width: 35%;
  border: 1px solid var(--gray-border);
  border-radius: var(--border-radius-2);
  padding: 15px;
  background: #ffffff;
  margin-top: 20px;
  display: flex;
  flex-direction: column;


}

main .cards-profil .right .title{

  display: flex;
  width: 100%;
  gap:20px;
  align-items: center;
  margin-bottom: 20px;
}

main .cards-profil .right .title a img{

  width: 20px;
}

main .cards-profil .right .info{

  display: flex;
    flex-direction: column;
  width: 100%;
  border-top: 1px solid var(--gray-border);
  padding: 15px;
}

main .cards-profil .right .info .s-s{

  display: flex;
  width: 100%;
  margin-bottom: 20px;

}
main .cards-profil .right .info .s-s .see{

width: 30%;
display: flex;
align-items: center;


}

main .cards-profil .right .info .s-s .set{

  width: 70%;
  display: flex;
  align-items: center;
}


main .myproduct{

  margin-top: 30px;
  width: 100%;
  padding-left: 50px;
  display: flex;
  flex-direction: column;
  padding-right:  3%;

}

main .myproduct .product-menu{

  display: flex;
  gap:0.313rem;
  width: 100%;
  align-items: center;
  margin-bottom: 20px;

}

main .myproduct .product-menu button{

  display: flex;
  gap:5px;
  align-items: center;
  padding: 0.313rem;
  background: transparent;
  cursor: pointer;
}


main .myproduct .winnercard{

  width: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: var(--border-radius-2);
  border: 1px solid var(--gray-border);
  
  
}

main .myproduct .cart-product{

  width: 100%;
  display: none;
  flex-direction: column;
  background: #ffffff;
  border-radius: var(--border-radius-2);
  border: 1px solid var(--gray-border);

  
  
}



main .myproduct .cart-product#winnercard{

  display: flex;
}

main .myproduct .cart-product#wishcart{

  display: none;
}

main .myproduct .cart-product#completecard{

  display: none;
}

main .myproduct .cart-product .items,
main .myproduct .winnercard .items{

  display: flex;
  width: 100%;
  border-top: solid 1px var(--gray-border);
  margin-bottom: 0.313rem;
  padding-top: 5px;

}

main .myproduct .cart-product .items .name,
main .myproduct .winnercard .items .name{

  width: 35%;
  display: flex;
  gap:15px;
  padding: 0.313rem;
  align-items: center;
  
  
}

main .myproduct .cart-product .items .name a,
main .myproduct .winnercard .items .name a{

  color: var(--color-fade);
  text-decoration: none;
}

main .myproduct .cart-product .items .name .img,
main .myproduct .winnercard .items .name .img{

  width: 60px;
  height: 60px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px var(--gray-border);
  border-radius: var(--border-radius-2);

}

main .myproduct .cart-product .items .name .img img,
main .myproduct .winnercard .items .name .img img{

  width: 100%;
  height: 100%;
  object-fit: contain;
}

main .myproduct .cart-product .items .status,
main .myproduct .winnercard .items .status{

  width: 15%;
  display: flex;
  padding: 0.313rem;
  align-items: center;
  
}

main .myproduct .cart-product .items .status a,
main .myproduct .winnercard .items .status a{

  color: #000000;
  text-decoration: underline;
}

main .myproduct .cart-product .items .price,
main .myproduct .winnercard .items .price{

  width: 15%;
  display: flex;
  padding: 0.313rem;
  align-items: center;
}

main .myproduct .cart-product .items .delivery,
main .myproduct .winnercard .items .delevery{

  width: 15%;
  display: flex;
  padding: 0.313rem;
  align-items: center;
}

main .myproduct .cart-product .items .date,
main .myproduct .winnercard .items .date{

width: 15%;
display: flex;
  padding: 0.313rem;
  align-items: center;

}

main .myproduct .cart-product .items .option,
main .myproduct .winnercard .items .option{

  width: 10%;
  display: flex;
  padding: 0.313rem;
  align-items: center;
  gap:15px;
}

main .myproduct .cart-product .items .option button,
main .myproduct .winnercard .items .option button{

  background: transparent;
}

main .myproduct .cart-product .items .option button img,
main .myproduct .winnercard .items .option button img{
  width: 20px;
}

main .myproduct .cart-wish{

  width: 100%;
  display: none;
  flex-direction: column;
  background: #ffffff;
  border-radius: var(--border-radius-2);
  border: 1px solid var(--gray-border);
  
  
}

main .myproduct .cart-wish .items{

  display: flex;
  width: 100%;
  border-top: solid 1px var(--gray-border);
  margin-bottom: 0.313rem;
  padding-top: 5px;

}

main .myproduct .cart-wish .items .name{

  width: 35%;
  display: flex;
  gap:15px;
  padding: 0.313rem;
  align-items: center;
  
  
}

main .myproduct .cart-wish .items .name a{

  color: var(--color-fade);
  text-decoration: none;
}

main .myproduct .cart-wish .items .name .img{

  width: 60px;
  height: 60px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px var(--gray-border);
  border-radius: var(--border-radius-2);

}

main .myproduct .cart-wish .items .name .img img{

  width: 40%;
  height: 100%;
}

main .myproduct .cart-wish .items .status{

  width: 15%;
  display: flex;
  padding: 0.313rem;
  align-items: center;
  
}

main .myproduct .cart-wish .items .status a{

  text-decoration: underline;
  color: #000000;
  
}


main .myproduct .cart-wish .items .price{

  width: 15%;
  display: flex;
  padding: 0.313rem;
  align-items: center;
}

main .myproduct .cart-wish .items .delivery{

  width: 15%;
  display: flex;
  padding: 0.313rem;
  align-items: center;
}

main .myproduct .cart-wish .items .date{

width: 15%;
display: flex;
  padding: 0.313rem;
  align-items: center;

}

main .myproduct .cart-wish .items .option{

  width: 10%;
  display: flex;
  padding: 0.313rem;
  align-items: center;
  gap:15px;
}

main .myproduct .cart-wish .items .option button{

  background: transparent;
}

main .myproduct .cart-wish .items .option button img{
  width: 20px;
}

main .myproduct .storeuser{

  width: 100%;
  display: none;
  flex-direction: column;
  grid-template-columns: repeat(8 , 1fr);
  background: #ffffff;
  border-radius: var(--border-radius-2);
  border: 1px solid var(--gray-border);
  padding: 15px;
  
  
}

main .myproduct .storeuser a button{

  display: flex;
  flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: transparent;
    margin-bottom: 15px;
}

main .myproduct .storeuser a button:hover{

  cursor: pointer;
}

main .myproduct .storeuser a button .store{

  display: flex;
   align-items: center;
    justify-content: center;
     border: solid 1px #cbd0dd;
    border-radius: var(--border-radius-2);
    background: transparent;
    padding: 0.313rem;
    height: 100px;


}

main .myproduct .storeuser a button .store img{

  width: 100px;
  height: 100%;
  object-fit: contain;
  

  }

  main .myproduct .storeuser a button .name{

    width: 100%;
  margin-top: 0.313rem;
  
  }


main .myproduct .storeuser a button .name span{

  display: block;
    font-size: 16px;
    font-weight: bold;
    color: #707070;

}


/* product-details css */

main .cards-P{

  width: 100%;
  display: flex;
  grid-template-columns: repeat(2,1fr);
  margin-top: 20px;
  gap:20px;
  padding: 30px;

}

main .cards-P .img-P{

  width: 60%;
  display: flex;
  gap:20px;

}

main .cards-P .img-P .left{

  width: 15%;
  display: flex;
  flex-direction: column;
  gap:0.313rem;
  


}




main .cards-P .img-P .left .i-p:after {
  content: "";
  display: table;
  clear: both;

}

main .cards-P .img-P .left .i-p img{

  width: 90px;
  height: 90px;
  object-fit: contain;
}

main .cards-P .img-P .right{
  width: 85%;
  display: flex;
  flex-direction: column;
}

main .cards-P .img-P .right .img{

  width: 100%;
  height: 425px;
  width: 100%;
  display: flex;
  padding: 0.313rem;
  
  
  align-items: center;
  justify-content: center;
  background: #ffffff;
  align-items: center;
}



main .cards-P .img-P .right .img img{

  width: 100%;
  height: 100%;
  object-fit: contain;
  
}





main .cards-P .img-P .right .choose{

  margin-top: 20px;
  width: 100%;
  display: flex;
  gap:15px;
  align-items: center;
  

}

main .cards-P .img-P .right .choose button{

  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #31374a;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 550;

}


main .cards-P .img-P .right .description{

  display: flex;

}

main .cards-P .img-P .right .description p{

      display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    color: #141824;
    font-size: 18px;
}


main .cards-P .img-P .right .specification{

  width: 100%;
  display: flex;
  flex-direction: column;


}

main .cards-P .img-P .right .specification .title{

  width: 100%;
  margin-top: 0.313rem;
  margin-bottom: 0.913rem;

}

main .cards-P .img-P .right .specification .title span{

      font-family: 'nunito', sans-serif;
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    unicode-bidi: isolate;
    line-height: 1.2;
    color: #141824;
}

main .cards-P .img-P .right .specification .card-spe{

  width: 100%;
  display: flex;
  gap:0.626rem;
  margin-bottom: 0.700rem;

}
main .cards-P .img-P .right .specification .card-spe .left-spe{

  width: 30%;
}

main .cards-P .img-P .right .specification .card-spe .left-spe span{

  font-family: 'nunito', sans-serif;
    display: block;
    font-size: 1em;
    font-weight: bold;
    unicode-bidi: isolate;
    line-height: 1.2;
    color: #141824;
}

main .cards-P .img-P .right .specification .card-spe .right-spe{

  width: 70%;
}

main .cards-P .img-P .right .specification .card-spe .right-spe span{

  font-family: 'nunito', sans-serif;
    display: block;
    font-size: 1em;
    unicode-bidi: isolate;
    line-height: 1.2;
    color: #141824;
}


main .cards-P .img-P .right .ratings{

  display: none;
  flex-direction: column;
  width: 100%;
  padding: 0.313rem;
  background: #ffffff;
  border-radius: var(--border-radius-2);
  margin-top: 15px;
}

main .cards-P .img-P .right .ratings .r-s{

  display: flex;
  width: 100%;

}

main .cards-P .img-P .right .ratings .r-s .note{

  display: flex;
  align-items: center;
  margin-right: 0.313rem;
}

main .cards-P .img-P .right .ratings .r-s .note span{

  display: flex;
  font-size: 16px;
  color: #8A94AD;
  font-weight: 550;
  

}


main .cards-P .img-P .right .ratings .r-s .star{

  display: flex;
}

main .cards-P .img-P .right .ratings .r-s .star img{

  width: 100px;
}

main .cards-P .img-P .right .ratings .r-s .star button{

  background: transparent;
}


main .cards-P .img-P .right .ratings .r-s .text{

  display: flex;
  align-items: center;
  margin-left: 0.313rem;
}


main .cards-P .img-P .right .ratings .r-s .button{

  display: flex;
  align-items: center;
  margin-left: 30px;
}

main .cards-P .img-P .right .ratings .r-s .button button{

  display: flex;
  align-items: center;
  background: var(--color-fade);
  color: #ffffff;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
  border-radius: var(--border-radius-1);
  padding: 0.313rem;
}

main .cards-P .img-P .right .ratings .r-s .button button:hover{

  background: var(--color-button-blue);
}

main .cards-P .img-P .right .ratings .allc{

margin-top: 15px;
display: flex;
flex-direction: column;
gap:15px;
}



main .cards-P .img-P .right .ratings .allc .comment{

  width: 100%;
  display: flex;
  flex-direction: column;
  
}

main .cards-P .img-P .right .ratings .allc .comment .name{

  display: flex;
  align-items: center;
  width: 100%;

}

main .cards-P .img-P .right .ratings .allc .comment .name button{

  background: transparent;

}


main .cards-P .img-P .right .ratings .allc .comment .name p{

  margin-left: 15px;
  font-size: 16px;
  font-weight: 550;
}

main .cards-P .img-P .right .ratings .allc .comment .name img{

  width: 100px;
}

main .cards-P .img-P .right .ratings .allc .comment .time{

  margin-top: 0.313rem;
  width: 100%;
}

main .cards-P .img-P .right .ratings .allc .comment .time p{

  color: #525B75;
}

main .cards-P .img-P .right .ratings .allc .comment .text{

  display: flex;
  width: 100%;
  margin-top: 0.313rem;
}

main .cards-P .img-P .right .ratings .allc .comment .text p{

  color: #222834;
}

main .cards-P .img-P .right .ratings .allc .comment .imgs{


  width: 100%;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  justify-content: space-between;
  margin-top: 0.313rem;
  margin-bottom: 0.313rem;
}


main .cards-P .img-P .right .ratings .allc .comment .imgs img{

  width:120px;
  height: 120px;
  object-fit: contain;
}

main .cards-P .img-P .right .ratings .allc .response{

  display: flex;
  flex-direction: column;
  margin-top: 0.313rem;
}

main .cards-P .img-P .right .ratings .allc .response .seller{

  display: flex;
  align-items: center;

}

main .cards-P .img-P .right .ratings .allc .response .seller h4{

  margin-left: 5px;
}

main .cards-P .img-P .right .ratings .allc .response .seller p{

  margin-left: 15px;
  color: #525B75;
}

main .cards-P .img-P .right .ratings .allc .response .seller .com p{

  
}

main .cards-P .img-P .right .ratings .page{

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap:0.313rem;
  margin-top: 15px;

}

main .cards-P .img-P .right .ratings .page button{

  background: transparent;
  color: #3e465b;
  font-size: 13px;
  padding: 0.313rem;
  font-weight: 550;
  cursor: pointer;
  border-radius: var(--border-radius-2);
}

#active-button{

  background: var(--color-fade);
  color: #ffffff;
}

main .cards-P .details-P{

  width: 40%;
  display: flex;
  flex-direction: column;
  
}

main .cards-P .details-P .name{

  
}

main .cards-P .details-P .name h2{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.2em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;

}

main .cards-P .details-P .grade{

  width: 100%;
  display: flex;
  margin-top: 0.313rem;
  align-items: center;
  

}

main .cards-P .details-P .grade p{

  margin-right: 5px;
}

main .cards-P .details-P .grade a{

  margin-left: 0.313rem;
  color: blue;
}

main .cards-P .details-P .grade button{

  background: transparent;
  cursor: pointer;


}

main .cards-P .details-P .grade img{

  width: 120px;
}

main .cards-P .details-P .grade button span{

  color: #e67e30;
  
}
main .cards-P .details-P .profil{


  margin-top: 0.313rem;
  display: flex;
  width: 100%;
  align-items: center;
  padding: 5px;
  gap:5px;
}

main .cards-P .details-P .profil .left{

width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

main .cards-P .details-P .profil .left img{

  width: 100%;
  height: 100%;
  object-fit: contain;
}

main .cards-P .details-P .profil .right a{

color: #000000;
text-decoration: none;

}

main .cards-P .details-P .profil .right a:hover{

  text-decoration: underline;
}

main .cards-P .details-P .price{

  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 15px;
}

main .cards-P .details-P .price .direct,
main .cards-P .details-P .price .draw{


  display: flex;
  flex-direction: column;
  width: 100%;

  }

main .cards-P .details-P .price .direct .total-price,
main .cards-P .details-P .price .direct .estimated{


  width: 100%;
  margin-top: 5px;
  display: flex;
  align-items: center;
  position: relative;
}


main .cards-P .details-P .price .direct .total-price span{

   color: #565959; 
      font-size: 18px;
      font-weight: 550;
      
}

main .cards-P .details-P .price .direct .estimated span{

  font-weight: 550;
  font-size: 14px;
  color: #707070;

}



main .cards-P .details-P .price .direct .price-pay{

 width: 100%;
  display: flex;
  align-items: center;
  margin-top: 5px;
  position: relative;
  margin-bottom: 5px;
}

main .cards-P .details-P .price .direct .price-pay span{

  margin-left: 0.313rem;
   text-align: center;
   width: 70px;
   height: 30px;
    font-size: 1rem;
    font-weight: 550;
    line-height: 21px;
   background: var(--color-success);
   display: flex;
   align-items: center;
   justify-content: center;
   color: #ffffff;
}



main .cards-P .details-P .price .draw .total{

  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 5px;

}






main .cards-P .details-P .promo{

  display: flex;
  flex-direction: column;
  gap:8px;
}

main .cards-P .details-P .promo p{

  font-size: 18px;
}

main .cards-P .details-P .promo p#time{

  color: #cc1b00;
  font-weight: 550;
}

main .cards-P .details-P .stock{

  margin-top: 15px;

}

main .cards-P .details-P .stock p{

  font-size: 24px;
  color: #25B003;
}

main .cards-P .details-P .color{

  display: flex;
  flex-direction: column;
  gap:5px;
  margin-top: 0.313rem;
}

main .cards-P .details-P .color .title{

  display: flex;
  gap:5px;

}

main .cards-P .details-P .color .title p{

  font-size: 16px;

}

main .cards-P .details-P .color .title .button{

  display: flex;
  margin-top: 5px;
  gap:0.313rem;
}

main .cards-P .details-P .color .button button{

  border-radius: 50%;
  background: blue;
  width: 25px;
  height: 25px;
  cursor: pointer;

}

main .cards-P .details-P .comment{

  width: 100%;
  margin: 0.313rem;

}

main .cards-P .details-P .comment span{

  width: 100%;
  color: #ffffff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

main .cards-P .details-P .comment span#addSuccess{

  background: var(--color-fade);
}

main .cards-P .details-P .comment span#already{

  background: var(--color-gray-input);
}
main .cards-P .details-P .option{

  display: flex;
  flex-direction: column;
  gap:0.313rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 15px;

}

main .cards-P .details-P .option button{

  width: 80%;
  height: 40px;
  border-radius: var(--border-radius-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 550;
  color: #ffffff;
  cursor: pointer;
}

main .cards-P .details-P .option button#b-direct{

  background: #25B003;



}

main .cards-P .details-P .option button#b-direct:hover{

  background: #23890B;
}

main .cards-P .details-P .option button#b-draw{

  background: var(--color-fade);
}

main .cards-P .details-P .option button#b-draw:hover{

  background: var(--color-button-blue);
}

main .cards-P .details-P .option button#b-cart{

  background: transparent;
  border: 1px solid var(--color-button-blue);
  color: var(--color-button-blue);
}

main .cards-P .details-P .option button#b-cart:hover{

  background: var(--color-button-blue);
  color: #ffffff;
}

main .cards-P .details-P .option button#wishlist{

  border: solid 1px #3874ff;
  display: flex;
  gap:5px;
  background: transparent;
  color:  #3874ff;
}

main .cards-P .details-P .option button#wishlist svg{

  width: 30px;
}


/* product-details end */


/* footer css */

main .footer{


  
  width: 100%;
  background: #ffffff;
  padding-top: 0;
  position: relative;
  bottom: 0;
  margin-top: 70px;
  padding-bottom: 50px;

}

main .footer .ancre{

  width: 100%;
  height: 60px;
  margin-bottom: 20px;
  padding-top: 0.313rem;
}

main .footer .ancre a button{

  width: 50px;
  height: 50px;
  cursor: pointer;
  color: var(--color-fade);
  font-size: 18px;
  background: var(--color-body);
  position: absolute;
  right: 0;
  margin-right: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

main .footer .ancre a button:hover{

  background: var(--gray-border);
}

main .footer .cards{

  
  display: flex;
  gap:15px;
  padding-left: 40px;
  padding-right: 40px;
  width: 100%;
}

main .footer .cards .allfooter{

  width: 100%;
  display: flex;
}

main .footer .cards .allfooter .card{

  display: flex;
  flex-direction: column;
  width: 100%;
  

}

main .footer .cards .card#c-logo{

display: flex;
  flex-direction: column;
  width: 40%;

}



main .footer .cards .card#c-logo .title .logo a img{

  width: 170px;
}

main .footer .cards .card#c-logo .text-c p{

  color: #525B75;
  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1em;
        unicode-bidi: isolate;
        line-height: 1.5;
        color: #141824;


}

main .footer .cards .allfooter .card .title{

  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

main .footer .cards .allfooter .card .title .logo{

  display: flex;
  flex-direction: column;
  height: 60px;


}



main .footer .cards .allfooter .card .title .titre{

display: flex;
  flex-direction: column;
  justify-content: center;
  height: 60px;

}

main .footer .cards .allfooter .card .title .titre h2{

  
  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;

}

main .footer .cards .allfooter .card .title .logo a img{

  
  width: 100px;
}



main .footer .cards .allfooter .card .text-c{

  display: flex;
  flex-direction: column;
  gap:0.313rem;
  align-items: center;
  justify-content: center;
}


main .footer .cards .allfooter .card .text-c a{

  color: #525B75;
  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 14px;
        unicode-bidi: isolate;
        line-height: 1.5;
         color: #525B75;
}





/* settings css */

main .cards-s{

  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-top: 40px;
}

main .cards-s .title-s{

  width: 100%;
  padding-left: 50px;
}

main .cards-s .title-s span{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.5em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;
}

main .cards-s .card-s{

  width: 100%;
  display: grid;
  grid-template-columns: repeat(3 , 1fr);
  justify-content: center;
  gap:20px;
  padding-top: 30px;
  padding-right: 50px;
  padding-left: 50px;

}


main .cards-s .card-s button{

  display: flex;
  border: 1px solid var(--gray-border);
  background: #ffffff;
  border-radius: var(--border-radius-2);
  width: 370px;
  cursor: pointer;

}


main .cards-s .card-s button .element-s{

  display: flex;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

main .cards-s .card-s button .element-s svg{

  width: 40px;
  height: 40px;
}

main .cards-s .card-s button .element-s .e-i{

  display: flex;
  width: 30%;
  
  padding: 0.313rem;
  display: flex;
  justify-content: center;
}

main .cards-s .card-s button .element-s .e-i .c-i{

  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c7ebff;
}

main .cards-s .card-s button .element-s .e-i .c-i img{

  width: 40px;
}

main .cards-s .card-s button .element-s .e-i .c-i svg{

  width: 40px;
  color: #000000;
}

main .cards-s .card-s button .element-s .e-t{

  display: flex;
  flex-direction: column;
  padding: 0.313rem;
  padding-bottom: 40px;
  gap:12px;
  width: 100%;
  margin-top: 0.313rem;


}

main .cards-s .card-s button .element-s .e-t h3{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.2em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;
}

main .cards-s .card-s button .element-s .e-t span{

  color: #565969;
}

main .overlay-card{

  position: fixed;
  display:none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
   background-color: rgba(0,0,0,0.5);
  z-index: 10;
  align-items: center;
  justify-content: center;
}


main .overlay-card .card {

  display: none;
  flex-direction: column;
  background: #ffffff;
  z-index: 11;
  border-radius: var(--border-radius-2);
  padding: 0.313rem;
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 20px;
  position: relative;
  max-height: 90%;
  overflow:hidden;
  overflow-y: scroll;
  padding-bottom: 20px;

  

}

main .overlay-card .card .close{

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  position: relative;
  margin-top: 15px;
}

main .overlay-card .card .close button{

  position: absolute;
  right: 0;
  width: 25px;
  height: 25px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

}


main .overlay-card .card .close button img{

  width: 20px;
  height: 20px;
}

main .overlay-card .card .s-title{

  width: 100%;
  display: flex;
  padding: 0.313rem;
  margin-bottom: 5px;
}

main .overlay-card .card .s-title span{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.3em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;

}

main .overlay-card .card .info,
main .overlay-card .card .balance,
main .overlay-card .card .cart{

  width: 100%;
  display: flex;
  padding: 0.313rem;
  margin-bottom: 5px;


}


main .overlay-card .card .info span{

  font-size: 20px;
  color: #707070;
}

main .overlay-card .card .balance span{

  font-size: 20px;
  font-weight: bold;

}

main .overlay-card .card .cart img{

  width: 70px;
}



main .overlay-card .card .s-input{

  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 15px;
  gap:15px;
  align-items: center;
}

main .overlay-card .card .s-input .input{

  width: 60%;
  display: flex;
  flex-direction: column;
  gap:5px;
}

main .overlay-card .card .s-input .input label{

  font-style: 18px;
  display: block;
    padding-left: 2px;
    padding-bottom: 2px;
    font-weight: 700;
    cursor: default;


    font-family: 'nunito', sans-serif;
        
   margin-bottom: 0.313rem;
   
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;
  
}

main .overlay-card .card .s-input .input input{

  background-color: #fff;
    height: 31px;
    padding: 3px 7px;
    line-height: normal;
    writing-mode: horizontal-tb !important;
    padding-block: 1px;
    padding-inline: 2px;
    width: 100%;
    border: 1px solid var(--gray-border);
    border-radius: 3px;
    outline: 0;
    padding: 5px;

}

main .overlay-card .card .s-input .input input[type="number"]{


height: 51px;
font-size: 30px;

}

main .overlay-card .card .submit{

  width: 100%;
  border-top: 1px solid var(--gray-border);
  display: flex;
  flex-direction: column;
}

main .overlay-card .card .submit .input{

  display: flex;
  width: 100%;
  align-items: center;
  gap:0.313rem;
  margin-top: 0.313rem;
  margin-bottom: 5px;
}

main .overlay-card .card .submit .input label{

  font-size: 18px;
  font-weight: bold;
}

main .overlay-card .card .submit .input input{

background-color: #fff;
    height: 31px;
    padding: 3px 7px;
    line-height: normal;
    writing-mode: horizontal-tb !important;
    padding-block: 1px;
    padding-inline: 2px;
    width: 50%;
    border: 1px solid var(--gray-border);
    border-radius: 3px;
    outline: 0;
    padding: 5px;

}


main .overlay-card .card .submit .button,
main .overlay-card .card .s-button .button{

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  margin-top: 0.313rem;

}

main .overlay-card .card .submit .button button,
main .overlay-card .card .s-button .button button{

  width: 150px;
  height: 40px;
  border-radius: var(--border-radius-2);
  background: var(--color-fade);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.313rem;
  text-align: center;
  font-size: 16px;
    cursor: pointer;
}


main .overlay-card .card .submit .all-trans,
main .overlay-card .card .all-trans{

  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  margin-bottom: 20px;


}

main .overlay-card .card .submit .all-trans .trans-title,
main .overlay-card .card .all-trans .trans-title{


  width: 100%;
  display: flex;
  padding: 0.313rem;
  margin-bottom: 5px;

}

main .overlay-card .card .submit .all-trans .trans-title span,
main .overlay-card .card .all-trans .trans-title span{

font-family: 'nunito', sans-serif;
    display: block;
    font-size: 1.3em;
    font-weight: bold;
    unicode-bidi: isolate;
    line-height: 1.2;
    color: #141824;

}

main .overlay-card .card .submit .all-trans .trans-table,
main .overlay-card .card .all-trans .trans-table{


  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.313rem;
  margin-bottom: 20px;

}

main .overlay-card .card .submit .all-trans .trans-table .table-title,
main .overlay-card .card .all-trans .trans-table .table-title{

  width: 100%;
  display: flex;
  height: 30px;
  margin-bottom: 0.313rem;
  
}

main .overlay-card .card .submit .all-trans .trans-table .table-title .date,
main .overlay-card .card .submit .all-trans .trans-table .table-trans .date,
main .overlay-card .card .all-trans .trans-table .table-title .date{

  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;

}

main .overlay-card .card .submit .all-trans .trans-table .table-title .statut,
main .overlay-card .card .submit .all-trans .trans-table .table-trans .statut,
main .overlay-card .card .all-trans .trans-table .table-title .statut{

  width: 20%;
  height: 100%;
  display: flex;
  align-items: center;

}

main .overlay-card .card .submit .all-trans .trans-table .table-title .amount,
main .overlay-card .card .submit .all-trans .trans-table .table-trans .amount,
main .overlay-card .card .all-trans .trans-table .table-title .amount{

  width: 20%;
  height: 100%;
  display: flex;
  align-items: center;

}

main .overlay-card .card .submit .all-trans .trans-table .table-title .id,
main .overlay-card .card .submit .all-trans .trans-table .table-trans .id,
main .overlay-card .card .all-trans .trans-table .table-title .id{

  width: 30%;
  height: 100%;
  display: flex;
  align-items: center;

}

main .overlay-card .card .submit .all-trans .trans-table .table-title .date span,
main .overlay-card .card .submit .all-trans .trans-table .table-title .statut span,
main .overlay-card .card .submit .all-trans .trans-table .table-title .amount span,
main .overlay-card .card .submit .all-trans .trans-table .table-title .id span,
main .overlay-card .card .all-trans .trans-table .table-title span{

  
  font-size: 18px;
}

main .overlay-card .card .submit .all-trans .trans-table .table-trans,
main .overlay-card .card .all-trans .trans-table .table-trans{


  width: 100%;
  display: flex;
  height: 50px;
  border-top: 1px solid var(--gray-border);
  padding-top: 15px;
  padding-bottom: 15px;
  

}

main .overlay-card .card .all-trans .trans-table .table-trans .date{

  width: 30%;
}



main .overlay-card .card .submit .all-trans .trans-table .table-trans .date span,
main .overlay-card .card .all-trans .trans-table .table-trans .date span{

  font-weight: 16px;
}

main .overlay-card .card .submit .all-trans .trans-table .table-trans .statut span,
main .overlay-card .card .all-trans .trans-table .table-trans .statut span{

  padding-top:5px;
  padding-bottom:5px;
  padding-right:20px;
  padding-left:20px;
  color: #ffffff;
  border-radius: var(--border-radius-2);
}

main .overlay-card .card .submit .all-trans .trans-table .table-trans .statut,
main .overlay-card .card .all-trans .trans-table .table-trans .statut{

  padding-left: 0.313rem;
  width: 30%;
}

main .overlay-card .card .submit .all-trans .trans-table .table-trans .amount,
main .overlay-card .card .all-trans .trans-table .table-trans .amount{

  padding-left: 0.313rem;
  width: 20%;
}


main .overlay-card .card .submit .all-trans .trans-table .table-trans .statut span#pending,
main .overlay-card .card .all-trans .trans-table .table-trans .statut span#pending{

  background: var(--color-warning);

}

main .overlay-card .card .submit .all-trans .trans-table .table-trans .statut span#success,
main .overlay-card .card .all-trans .trans-table .table-trans .statut span#success{

  color: var(--color-success);

}

main .overlay-card .card .submit .all-trans .trans-table .table-trans .statut span#danger,
main .overlay-card .card .all-trans .trans-table .table-trans .statut span#danger{

  background: var(--color-danger);

}

main .overlay-card .card .submit .all-trans .trans-table .table-trans .amount span,
main .overlay-card .card .all-trans .trans-table .table-trans .amount span{

  font-size: 18px;
  font-weight: 500;
  
}

main .overlay-card .card .all-trans .trans-table .table-trans .id{

  width: 30%;
}

main .overlay-card .card .submit .all-trans .trans-table .table-trans .id span,
main .overlay-card .card .all-trans .trans-table .table-trans .id span{

  color: #707070;
}

main .overlay-card .card .aff-cards{

  width: 100%;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:0.626rem;
  padding: 0.313rem;

}

main .overlay-card .card .aff-cards .aff-point,
main .overlay-card .card .aff-cards .aff-members{

  width: 100%;
  height: 100px;
  border-radius: var(--border-radius-2);
  
  
            
}
main .overlay-card .card .aff-cards .aff-members{
  background: #EBFDFF;

}
main .overlay-card .card .aff-cards .aff-point{
  
    background: #CAECFB;

}

main .overlay-card .card .aff-cards .aff-point .title,
main .overlay-card .card .aff-cards .aff-members .title{

width: 100%;
padding: 0.313rem;


  
  }

  main .overlay-card .card .aff-cards .aff-point .title span,
main .overlay-card .card .aff-cards .aff-members .title span{


  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;
}

main .overlay-card .card .aff-cards .aff-point .point,
main .overlay-card .card .aff-cards .aff-members .point{

width: 100%;
padding: 0.313rem;
margin-top: 0.626rem;
padding-left: 0.626rem;


  
  }

  main .overlay-card .card .aff-cards .aff-point .point span,
main .overlay-card .card .aff-cards .aff-members .point span{


  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.4em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;
}



main .overlay-card .card .aff-name{

  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.626rem;
  gap:0.313rem;
 
}

main .overlay-card .card .aff-name span{


  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;


}


main .overlay-card .card .info-delete{

display: flex;
flex-direction: column;
gap:0.626rem;
width: 100%;
padding: 0.313rem;

}


main .overlay-card .card .info-delete h3{

 font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.1em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;

}

main .overlay-card .card .info-delete span{

 font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1em;
     
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #707070;

}

main .overlay-card .card .button-delete{

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.626rem;
}

main .overlay-card .card .button-delete button{

  width: 180px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  border: solid 1px var(--color-danger);
  background: transparent;
  color: var(--color-danger);
  cursor: pointer;
  border-radius: var(--border-radius-2);
  gap:0.626rem;
}

/* list css */
main .overlay-card .card .button-delete button svg{

  width: 20px;
  height: 20px;
  color: var(--color-danger);
}

main .overlay-card .card .button-delete button:hover{

  background: var(--color-danger);
  color: #ffffff;
 svg{

  color: #ffffff;

 }
}

main .cards-list{

  width: 100%;
  display: flex;
}

main .cards-list form{

  width: 28%;
  display: flex;
}

main .cards-list form .left-list{

  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 25px;

}

main .cards-list form .left-list .title-list{

  margin-bottom: 0.313rem;
  width: 100%;
}

main .cards-list form .left-list .title-list h2{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.4em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;

}

main .cards-list form .left-list .filter-card{

  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;


}

main .cards-list form .left-list .filter-card .drop{

  display: flex;
  width: 100%;
  margin-bottom: 0.313rem;
}


main .cards-list form .left-list .filter-card .drop span{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;

  
}



main .cards-list form .left-list .filter-card .element-list{

  display: flex;
  gap:3px;
  margin-bottom: 5px;
}


main .cards-list form .left-list .filter-card .element-list input[type="checkbox"]{

width: 30px;
height: 18px;

border: var(--gray-border);

}

main .cards-list form .left-list .filter-card .element-list span{

  color: #31374a;
  font-size: 18px;
}


main .cards-list form .left-list .filter-card .element-list input[type="text"]#min{

width: 105px;
height: 35px;
border: solid 1px var(--gray-border);
padding: 5px;
border-top-left-radius: var(--border-radius-2);
border-bottom-left-radius: var(--border-radius-2);
}

main .cards-list form .left-list .filter-card .element-list input[type="text"]#max{

width: 105px;
height: 35px;
border: solid 1px var(--gray-border);
padding: 5px;
border-top-right-radius: var(--border-radius-2);
border-bottom-right-radius: var(--border-radius-2);
}



main .cards-list form .left-list .filter-card .element-list input[type="submit"]{

  width: 45px;
  height: 35px;
  color: #ffffff;
  background: var(--color-fade);
  cursor: pointer;
  border-radius: var(--border-radius-2);
  margin-left: 20px;
}


main .cards-list .right-list{

  width: 72%;

}

main .cards-list .right-list .banniere{

  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 0.313rem;
  height: 100px;
  
}

main .cards-list .right-list .banniere .imgstore{

  width: 100px;
  height: 100px;
}

main .cards-list .right-list .banniere .imgstore img{

  width: 100%;
  height: 100%;
  object-fit: contain;
  
}

main .cards-list .right-list .banniere span{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.2em;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;
}

main .cards-list .right-list .filterphone{

  display: none;
  
}



main .cards-list .right-list .list-product{

  width: 100%;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  padding: 20px;
  gap:20px;
  margin-top: 25px;
}

main .cards-list .right-list .list-product button{

background: transparent;
width: 100%;

}

main .cards-list .right-list .list-product button:hover{

  cursor: pointer;
}


main .cards-list .right-list .list-product button .p2{

  width: 100%;
  display: flex;
  flex-direction: column;


}

main .cards-list .right-list .list-product button .p2 .p-img{

  width: 100%;
  height: 200px;
  background: #ffffff;
  border-top-left-radius: var(--border-radius-2);
  border-top-right-radius: var(--border-radius-2);
  


}

main .cards-list .right-list .list-product button .p2 .p-img img{

  width: 100%;
  height: 100%;
  border-top-left-radius: var(--border-radius-2);
  border-top-right-radius: var(--border-radius-2);
  object-fit: contain;
  
}

main .cards-list .right-list .list-product button .p2 .p-name{

  margin-top: 0.313rem;
  width: 100%;
}

main .cards-list .right-list .list-product button .p2 .p-name p{

      color: var(--color-lien);
      font-size: 14px;
}

main .cards-list .right-list .list-product button .p2 .price-direct{

  display: flex;
  width: 100%;
  margin-top: 5px;
  flex-direction: column;
}

main .cards-list .right-list .list-product button .p2 .price-direct .estimated,
main .cards-list .right-list .list-product button .p2 .price-direct .total-price{

  width: 100%;
  margin-top: 5px;
  display: flex;
  align-items: center;
  position: relative;

}

main .cards-list .right-list .list-product button .p2 .price-direct .estimated span{

  font-weight: 550;
  font-size: 14px;
  color: #707070;
}

main .cards-list .right-list .list-product button .p2 .price-direct .total-price span{

  color: #565959; 
      font-size: 18px;
      font-weight: 550;
      

}

main .cards-list .right-list .list-product button .p2 .price-direct .d-p{

  width: 50%;
  padding: 5px;
  background: var(--color-direct-price);
  margin-left: 0.313rem;
}

main .cards-list .right-list .list-product button .p2 .price-direct .d-p span{

  color: #111;
}

main .cards-list .right-list .list-product button .p2 .price-direct .price-amount{

  width: 100%;
  margin-top: 0.313rem;
  display: flex;
}


main .cards-list .right-list .list-product button .p2 .price-direct .price-amount span{

      color: #0F1111;
       font-size: 22px;
       text-align: left;
       margin-left: 0.313rem;
}

main .cards-list .right-list .list-product button .p2 .price-direct .price-amount span#reduc{

  text-decoration: line-through;

}

main .cards-list .right-list .list-product button .p2 .price-direct .progression{

  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 5px;
  


}

main .cards-list .right-list .list-product button .p2 .price-direct .progression .progressbar{

  width: 30px;
}

 @keyframes progress {
  0% { --percentage: 0; }
  100% { --percentage: var(--value); }
}

@property --percentage {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

[role="progressbar"] {
  --percentage: var(--value);
  --primary: #00b67a;
  --secondary: #ABEBC6;
  --size: 40px;
  animation: progress 2s 0.5s forwards;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}

[role="progressbar"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: conic-gradient(var(--primary) calc(var(--percentage) * 1%), var(--secondary) 0);
  mask: radial-gradient(white 52%, transparent 0);
  mask-mode: alpha;
  -webkit-mask: radial-gradient(#0000 52%, #000 0);
  -webkit-mask-mode: alpha;
}

[role="progressbar"]::after {
  counter-reset: percentage var(--value);
  font-family: Helvetica, Arial, sans-serif;
  font-size: calc(var(--size) / 3.5);
  font-weight: bold;
  color: var(--primary);
}

main .cards-list .right-list .list-product button .p2 .price-direct .promo{

  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: left
  margin-top:0.313rem;
  gap:5px;
  position: relative;
}

main .cards-list .right-list .list-product button .p2 .price-direct .promo span{

  font-weight: 550;
  font-size: 12px;
  color: #707070;
  display: flex;
  align-items: left;
  text-align: left;
  
}

main .cards-list .right-list .list-product button .p2 .price-direct .addtocard{

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15px;

}

main .cards-list .right-list .list-product button .p2 .price-direct .addtocard input{

  width: 70%;
  height: 35px;
  border-radius: var(--border-radius-2);
  color: #ffffff;
  background: var(--color-fade);
  font-weight: 600;
}

main .cards-list .right-list .list-product button .p2 .price-direct .addtocard input:hover{

  cursor: pointer;
}



/* cart css */

main .cart-cards{

  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px;
}

main .cart-cards .cart-title{


  
  width: 100%;
  padding-left: 0.313rem;
  margin-bottom: 20px;
}

main .cart-cards .cart-title h2{

  font-size: 28px;

}

main .cart-cards .Cart-l-r{

  width: 100%;
  display: flex;

}

main .cart-cards .Cart-l-r .cart-left{

  width: 70%;
  background: #ffffff;
  border-radius: var(--border-radius-2);
  display: flex;
  flex-direction: column;
  padding: 0.313rem;
}


main .cart-cards .Cart-l-r .cart-left .cart-product{

  display: flex;
  width: 100%;
  gap:0.313rem;
  padding-top:20px; 
  padding-bottom:20px; 
  border-top: solid 1px var(--gray-border);
}

main .cart-cards .Cart-l-r .cart-left .cart-product .empty{

  width: 100%;
  display: flex;
  flex-direction: column;
  gap:0.313rem;
  padding-left: 0.612rem;


}

main .cart-cards .Cart-l-r .cart-left .cart-product .empty h2{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.3em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;



}

main .cart-cards .Cart-l-r .cart-left .cart-product .empty span{




}

main .cart-cards .Cart-l-r .cart-left .cart-product .select{

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

main .cart-cards .Cart-l-r .cart-left .cart-product .select input{

  width: 15px;
  height: 15px;
}

main .cart-cards .Cart-l-r .cart-left .cart-product:nth-child(1){

  border-top: none;

}



main .cart-cards .Cart-l-r .cart-left .cart-product .prod-img{

  display: flex;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 170px;
}

main .cart-cards .Cart-l-r .cart-left .cart-product .prod-img img{

  width: 100%;
  height: 100%;
  object-fit: contain;
}


main .cart-cards .Cart-l-r .cart-left .cart-product .prod-details{

  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 0.313rem;
}

main .cart-cards .Cart-l-r .cart-left .cart-product .prod-details .name-price{

  display: flex;
  width: 100%;

}

main .cart-cards .Cart-l-r .cart-left .cart-product .prod-details .name-price .prod-name{

  width:85%;
  display: flex;
  
}

main .cart-cards .Cart-l-r .cart-left .cart-product .prod-details .name-price .prod-name span{

  font-size: 18px;
}

main .cart-cards .Cart-l-r .cart-left .cart-product .prod-details .name-price .prod-price{

  width: 15%;
  position: relative;

}


main .cart-cards .Cart-l-r .cart-left .cart-product .prod-details .name-price .prod-price span{

  font-size: 18px;
  position: absolute;
  right: 0;
  margin-right: 5px;

}


main .cart-cards .Cart-l-r .cart-left .cart-product .prod-details .prod-spec{

  width: 100%;
  display: flex;
  flex-direction: column;
  gap:5px;
  margin-top: 0.313rem;
}

main .cart-cards .Cart-l-r .cart-left .cart-product .prod-details .prod-spec span{

  color: green;
}

main .cart-cards .Cart-l-r .cart-left .cart-product .prod-details .prod-spec .prod-text{

  display: flex;
  gap:5px;
}


main .cart-cards .Cart-l-r .cart-left .cart-product .prod-details .prod-spec .prod-text a{

  color: var(--color-fade);
}

main .cart-cards .Cart-l-r .cart-left .cart-product .prod-details .prod-option{

  display: flex;
  width: 100%;
  gap:20px;
  margin-top: 0.313rem;
  align-items: center;
}

main .cart-cards .Cart-l-r .cart-left .cart-product .prod-details .prod-option .quantity{

  display: flex;
  gap:5px;
  align-items: center;
}

main .cart-cards .Cart-l-r .cart-left .cart-product .prod-details .prod-option .quantity button{

  background: transparent;
  cursor: pointer;
}

main .cart-cards .Cart-l-r .cart-left .cart-product .prod-details .prod-option .quantity button img{

  width: 20px;
}

main .cart-cards .Cart-l-r .cart-left .cart-product .prod-details .prod-option .quantity p{

  font-size: 16px;
}

main .cart-cards .Cart-l-r .cart-left .cart-product .prod-details .prod-option .lien{

  display: flex;
  gap:0.313rem;
}

main .cart-cards .Cart-l-r .cart-left .cart-product .prod-details .prod-option .lien button{

  background: transparent;
  color: var(--color-fade);
  font-size: 14px;
  cursor: pointer;
}


main .cart-cards .Cart-l-r .cart-right{

  width: 30%;
  display: flex;
  flex-direction: column;
  padding: 0.313rem;
  margin-left: 0.313rem;
}

main .cart-cards .Cart-l-r .cart-right .summary{

  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--border-radius-2);
  background: #ffffff;
  position: relative;
}

main .cart-cards .Cart-l-r .cart-right .summary .title-sum{

  margin-bottom: 0.313rem;
  width: 100%;
  padding: 15px;
}

main .cart-cards .Cart-l-r .cart-right .summary .title-sum h3{

  font-size: 26px;
}

main .cart-cards .Cart-l-r .cart-right .summary .text-sum{

  width: 100%;
  display: flex;
  position: relative;
  padding: 0.313rem;
}

main .cart-cards .Cart-l-r .cart-right .summary .text-sum span{

  font-size: 20px;
}

main .cart-cards .Cart-l-r .cart-right .summary .text-sum h3{

  position: absolute;
  right: 0;
  font-size: 20px;
  margin-right: 0.313rem;

}

main .cart-cards .Cart-l-r .cart-right .summary .total{

  margin-top: 15px;
  border-top: 1px solid var(--gray-border);
  border-bottom: 1px solid var(--gray-border);
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0.313rem;
}

main .cart-cards .Cart-l-r .cart-right .summary .total span{

  font-size: 22px;

}

main .cart-cards .Cart-l-r .cart-right .summary .total h3{

  position: absolute;
  right: 0;
  font-size: 24px;
  margin-right: 0.313rem;

}

main .cart-cards .Cart-l-r .cart-right .summary .proceed{

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.313rem;
  margin-bottom: 15px;
  margin-top: 15px;
}

main .cart-cards .Cart-l-r .cart-right .summary .proceed button{

  width: 90%;
  background: var(--color-fade);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--border-radius-2);
  cursor: pointer;
  height: 45px;
}

main .bottom .mark{

  width: 100%;
  display: flex;
  justify-content: space-between;
  background: var(--color-body);
  margin-top: 20px;
 
}
  


main .bottom .mark .mark-card{

   display: flex;
  flex-direction: column;
   background: #ffffff;
  padding: 20px;
  justify-content: center;
  align-items: center;
  gap:0.313rem;
  border-radius: var(--border-radius-2);

}

main .bottom .mark .mark-card .mark-logo{

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

main .bottom .mark .mark-card .mark-logo a img{

width: 80px;


}

main .bottom .mark .mark-card .mark-prod{

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:0.313rem;
  height: 100%;
}


main .bottom .mark .mark-card .mark-prod .prod button{

   width: 105px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:20px;
  background:transparent;
  height: 150px;
  margin-bottom: 0.626rem;
}

main .bottom .mark .mark-card .mark-prod .prod button:hover{

  cursor: pointer;
}

main .bottom .mark .mark-card .mark-prod .prod button img{


width: 115px;
height: 120px;
object-fit: contain;

}



/* Store cc */

#d-blue{

  height: 10px;
  width: 10px;
  background-color: var(--color-fade);
  border-radius: 50%;
  display: inline-block;
}

#d-green{

  height: 10px;
  width: 10px;
  background-color: var(--color-success);
  border-radius: 50%;
  display: inline-block;
}

#d-orange{

  height: 10px;
  width: 10px;
  background-color: #E67E22;
  border-radius: 50%;
  display: inline-block;
}

#d-red{

   height: 10px;
  width: 10px;
  background-color: #900C3F;
  border-radius: 50%;
  display: inline-block;

  
}


main .all-store{

  margin-top: 20px;
  padding: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

main .all-store .store-title{

  width: 100%;
  display: flex;
  margin-bottom: 15px;
}

main .all-store .store-title h1{

      font-family: 'nunito', sans-serif;
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    unicode-bidi: isolate;
    line-height: 1.2;
    color: #141824;
}

main .all-store .store-cards{

  width: 100%;
  display: grid;
  grid-template-columns: repeat(6 , 1fr);
  gap:15px;
}

main .all-store .store-cards a{

  display: flex;
  width: 100%;
  text-decoration: none;
}

main .all-store .store-cards a .card-store{


  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 0.313rem;
}

main .all-store .store-cards a .card-store .img-card{

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  padding: 20px;
  border: solid 1px #cbd0dd;
  border-radius: var(--border-radius-2);
  
}


main .all-store .store-cards a .card-store .img-card img{

  width: 100%;
  height: 100%;
  object-fit: contain;
}

main .all-store .store-cards a .card-store .store-name{


  width: 100%;
  margin-top: 0.313rem;
  

}

main .all-store .store-cards a .card-store .store-name span{

 

    font-family: 'nunito', sans-serif;
      display: block;
        font-size: 1.17em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;


}

main .all-store .store-cards a .card-store .store-details{

  margin-top: 15px;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap:8px;
}


main .all-store .store-cards a .card-store .store-details .elements{

  display: flex;
  width: 100%;
  gap:8px;
  align-items: center;
}

main .all-store .store-cards a .card-store .store-details .elements span{


color: #9fa6bc;

}

/* checkout css offline */

main .choff-cards{
 width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-top: 40px;

}

main .choff-cards .choff-l-r{

  width: 100%;
  display: flex;
  justify-content: center;
  padding-left: 40px;
  
}



main .choff-cards .title{

  width: 100%;
  padding-left: 40px;
}

main .choff-cards .choff-l-r .title h1{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.5em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;
}

main .choff-cards .choff-l-r .choff-left{

  width: 50%;
  display: flex;
  flex-direction: column;

}

main .choff-cards .choff-l-r .choff-left form{

 width: 100%;
  display: flex;
  flex-direction: column;
  gap:0.626rem;
  padding-top: 0.939rem;

}

main .choff-cards .choff-l-r .choff-left form .info-user{

  display: flex;
  flex-direction: column;
  width: 100%;

}

main .choff-cards .choff-l-r .choff-left form .info-user .title{

  width: 100%;
  margin-bottom: 0.626rem;

}

main .choff-cards .choff-l-r .choff-left form .info-user .title span{

      font-family: 'nunito', sans-serif;
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    unicode-bidi: isolate;
    line-height: 1;
    color: #141824;
}


main .choff-cards .choff-l-r .choff-left form .info-user .choff-inputs{

  width: 100%;
  display: flex;
  flex-direction: column;
  gap:0.626rem;
}

main .choff-cards .choff-l-r .choff-left form .info-user .choff-inputs .choff-inpu{

  width: 100%;
  display: flex;
  flex-direction: column;

}

main .choff-cards .choff-l-r .choff-left form .info-user .choff-inputs .choff-inpu label{


font-family: 'nunito', sans-serif;
    display: block;
    font-size: 0.9em;
    font-weight: bold;
    unicode-bidi: isolate;
    line-height: 1;
    color: #141824;


}

main .choff-cards .choff-l-r .choff-left form .info-user .choff-inputs .choff-inpu input{

    width: 100%;
    height: 35px;
    border: solid 1px var(--gray-border);
    background: #ffffff;
    padding: 0.313rem;
    font-size: 16px;
    margin-top: 0.626rem;
    border-radius: var(--border-radius-2);
}

main .choff-cards .choff-l-r .choff-left form .choff-input{

  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 0.626rem;
}

main .choff-cards .choff-l-r .choff-left form .choff-input input[type="submit"]{

  width: 40%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  color: #ffffff;
  background: var(--color-fade);
  border-radius: var(--border-radius-2);
}

main .choff-cards .choff-l-r .choff-right{

  width: 50%;
  display: flex;
  flex-direction: column;
  padding-left: 0.939rem;
  padding-right: 0.626rem;


}

main .choff-cards .choff-l-r .choff-right .pro-img{

  display: flex;
  width: 100%;
  gap:10px;
  margin-bottom: 0.626rem
}

main .choff-cards .choff-l-r .choff-right .pro-img .choff-img{


  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.626rem;

}

main .choff-cards .choff-l-r .choff-right .pro-img .choff-img img{

  width: 130px;
  height: 130px;
  object-fit: contain;
}

main .choff-cards .choff-l-r .choff-right .pro-img .choff-name{

  display: flex;
  flex-direction: column;
  gap:10px;


}

main .choff-cards .choff-l-r .choff-right .pro-img .choff-name span#green-v{

  color: #008000;


}

main .choff-cards .choff-l-r .choff-right .summary-ch{

    display: flex;
    flex-direction: column;
    width: 100%;
    border-radius: var(--border-radius-2);
    background: #ffffff;
    position: relative;
}

main .choff-cards .choff-l-r .choff-right .summary-ch .title-sum-ch {
    margin-bottom: 0.313rem;
    width: 100%;
    padding: 15px;
}

main .choff-cards .choff-l-r .choff-right .summary-ch .text-sum-ch {
    width: 100%;
    display: flex;
    position: relative;
    padding: 0.313rem;
}

main .choff-cards .choff-l-r .choff-right .summary-ch .text-sum-ch span {
    font-size: 20px;
}

main .choff-cards .choff-l-r .choff-right .summary-ch .text-sum-ch h3{

  position: absolute;
  right: 0;
  font-size: 20px;
  margin-right: 0.313rem;

}

main .choff-cards .choff-l-r .choff-right .summary-ch .total-ch{

  margin-top: 15px;
  border-top: 1px solid var(--gray-border);
  border-bottom: 1px solid var(--gray-border);
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0.313rem;
}

main .choff-cards .choff-l-r .choff-right .summary-ch .total-ch span{

  font-size: 22px;

}

main .choff-cards .choff-l-r .choff-right .summary-ch .total-ch h3{

  position: absolute;
  right: 0;
  font-size: 24px;
  margin-right: 0.313rem;

}
/* checkout css offline end 8?

/* checkout css */

main .checkout-cards{

  width: 100%;
  display: flex;
  padding-right: 20px;
  padding-left:20px;
  gap:50px;
  position: relative;


}

main .checkout-cards .left-checkout-phone{

 display: none;

}

main .checkout-cards .left-checkout{

  width: 50%;
  display: flex;
  flex-direction: column;
  gap:0.939rem;
}

main .checkout-cards .left-checkout .left-top{

  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.626rem;
}


main .checkout-cards .left-checkout .left-top .title{

  width: 100%;


  }

  main .checkout-cards .left-checkout .left-top .title span{


  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.3em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;
  }

 

  main .checkout-cards .left-checkout .left-top .left-checkout-info{

  margin-top: 0.939rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap:0.939rem;
}

main .checkout-cards .left-checkout .left-top .left-checkout-info .left-checkout-details{

  width: 100%;
  display: flex;
  position: relative;
}

main .checkout-cards .left-checkout .left-top .left-checkout-info .left-checkout-details span{

font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1em;
      font-weight: 550;
        unicode-bidi: isolate;
        line-height: 1;
        color: #707070;
       


}

main .checkout-cards .left-checkout .left-top .left-checkout-info .left-checkout-details span b{
 color: #141824;

}

main .checkout-cards .left-checkout .left-top .left-checkout-info .left-checkout-details span#value{


  position: absolute;
  right: 0;
  margin-right: 0.313rem;
   color: #141824;
}


main .checkout-cards .left-checkout .left-top .left-checkout-info .left-checkout-details span#total-text{


font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.2em;
      font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;

}

main .checkout-cards .left-checkout .left-top .left-checkout-info .left-checkout-details span#total-text-left{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.2em;
      font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;
        position: absolute;
        right: 0;
        margin-right: 0.313rem;
}




main .checkout-cards .left-checkout hr,
main .checkout-cards .right-checkout form hr{

background-color: transparent;
    display: block;
    height: 1px;
    border-width: 0;
    border-top: 1px solid #e7e7e7;
    line-height: 19px;
    margin-bottom: 14px;
    margin-top: 20px;
    margin-bottom: 20px;



}


main .checkout-cards .left-checkout .left-bottom {

  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--border-radius-2);
  padding:0.626rem;
}


main .checkout-cards .left-checkout .left-bottom .title{

  width: 100%;
  display: flex;
}

main .checkout-cards .left-checkout .left-bottom .title span{



  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.3em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;

}

main .checkout-cards .left-checkout .left-bottom .left-checkout-info{

  margin-top: 0.939rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap:0.939rem;
}

main .checkout-cards .left-checkout .left-bottom .left-checkout-info.left-checkout-details{

  width: 100%;
  display: flex;
  position: relative;
}

main .checkout-cards .left-checkout .left-bottom .left-checkout-info.left-checkout-details span{

font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.1em;
      font-weight: 550;
        unicode-bidi: isolate;
        line-height: 1;
        color: #707070;
       


}

main .checkout-cards .left-checkout .left-bottom .left-checkout-info.left-checkout-details span b{
 color: #141824;

}

main .checkout-cards .left-checkout .left-bottom .left-checkout-info.left-checkout-details span#value{


  position: absolute;
  right: 0;
  margin-right: 0.313rem;
   color: #141824;
}


main .checkout-cards .left-checkout .left-bottom .left-checkout-info.left-checkout-details span#total-text{


font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.4em;
      font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;

}

main .checkout-cards .left-checkout .left-bottom .left-checkout-info.left-checkout-details span#total-text-left{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.4em;
      font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;
        position: absolute;
        right: 0;
        margin-right: 0.313rem;
}







main .checkout-cards .left-checkout .left-bottom .left-checkout-info.left-checkout-details a{

font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.1em;
      font-weight: 550;
        unicode-bidi: isolate;
        line-height: 1;
        color: var(--color-fade);



}

main .checkout-cards .right-checkout{

  display: flex;
  flex-direction: column;
  width: 50%;
  background: #ffffff;
  border-radius: var(--border-radius-2);
  padding:0.626rem;
  margin-top: 0.626rem;
  position: relative;
}


main .checkout-cards .right-checkout .title{

  width: 100%;
  display: flex;
  margin-bottom: 0.313rem;
}

main .checkout-cards .right-checkout .title span{



  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.3em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;

}

main .checkout-cards .right-checkout .left-checkout-card-items{


  display: flex;
  flex-direction: column;
  width: 100%;
  gap:0.626rem;
}

main .checkout-cards .right-checkout .left-checkout-card-items .left-checkout-card-item{

  display: flex;
  width: 100%;
  gap:0.626rem;
  margin-bottom: 0.313rem;
}

main .checkout-cards .right-checkout .left-checkout-card-items .left-checkout-card-item .left-checkout-card-item-img{

  width: 35%;
  height: 150px;
  display: flex;
  

}

main .checkout-cards .right-checkout .left-checkout-card-items .left-checkout-card-item .left-checkout-card-item-img img{

  width: 100%;
  height: 100%;
  object-fit: contain;
}

main .checkout-cards .right-checkout .left-checkout-card-items .left-checkout-card-item .left-checkout-card-item-name{

  width: 75%;
  margin-top: 0.626rem;

}

main .checkout-cards .right-checkout .left-checkout-card-items .left-checkout-card-item .left-checkout-card-item-name span{


font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1rem;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;
        

}

main .checkout-cards .right-checkout form{

  
 
  margin-top: 20px;
  width: 100%;
  margin-bottom: 0.626rem;
  
  

 

}

main .checkout-cards .right-checkout form .post{

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

main .checkout-cards .right-checkout form .post button{

  width: 40%;
    background: #25B003;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--border-radius-2);
    cursor: pointer;
    height: 45px;
} 

/* contact css */

main .contact-cards{

  width: 100%;
  display: flex;
  flex-direction: column;
}

main .contact-cards{

  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-top: 40px;
}

main .contact-cards .title{

  width: 100%;
  padding-left: 50px;
}

main .contact-cards .title span{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.5em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;
}

main .contact-cards .c-h{

  width: 100%;
  display: flex;
  padding-right: 5%;
  padding-left: 5%;
  margin-top: 0.626rem;
  gap:0.939rem;
}

main .contact-cards .c-h .help-card{

  width: 30%;
  display: flex;
  flex-direction: column;
  gap:0.313rem;
}

main .contact-cards .c-h .help-card button{

  display: flex;
  border: 1px solid var(--gray-border);
  background: #ffffff;
  border-radius: var(--border-radius-2);
  width: 100%;
  cursor: pointer;

}


main .contact-cards .c-h .help-card button .element-s{

  display: flex;
  width: 100%;
}

main .contact-cards .c-h .help-card button .element-s .e-i{

  display: flex;
  width: 30%;
  
  padding: 0.313rem;
  display: flex;
  justify-content: center;
}

main .contact-cards .c-h .help-card button .element-s .e-i .c-i{

  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c7ebff;
}

main .contact-cards .c-h .help-card button .element-s .e-i .c-i img{

  width: 40px;
}

main .contact-cards .c-h .help-card button .element-s .e-t{

  display: flex;
  flex-direction: column;
  padding: 0.313rem;
  padding-bottom: 40px;
  gap:12px;
  width: 100%;
  margin-top: 0.313rem;


}

main .contact-cards .c-h .help-card button .element-s .e-t h3{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.2em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;
}

main .contact-cards .c-h .help-card button .element-s .e-t span{

  color: #565969;
}


main .contact-cards .c-h form{

  width: 70%;
  display: flex;
  flex-direction: column;
 align-items: center;
}

main .contact-cards .c-h form .qst{

  display: none;
  width: 100%;
  margin-bottom: 1rem;
}

main .contact-cards .c-h form .qst .qst-left{

  width: 40%;
  background: #EBFDFF;
  padding: 0.626rem;
}



main .contact-cards .c-h form .qst .qst-left img{

  width: 100%;
  height: 100%;
  object-fit: contain;
}

main .contact-cards .c-h form .qst .qst-right{

  width: 60%;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:0.313rem;
  background: #CAECFB;
  padding-top: 0.626rem;

}

main .contact-cards .c-h form .qst .qst-right a{

  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 0.313rem;
 

}

main .contact-cards .c-h form .qst .qst-right a .qq{

  width: 100%;
  display: flex;
  padding: 0.313rem;
  height: 70px;
}

main .contact-cards .c-h form .qst .qst-right a .qq .title{

  width: 80%;
  display: flex;
  flex-direction: column;
  gap:0.313rem;
}

main .contact-cards .c-h form .qst .qst-right a .qq .title span{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;

}

main .contact-cards .c-h form .qst .qst-right a .qq .title p{

  font-family: 'nunito', sans-serif;
        display: block;
      
       
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;

}

main .contact-cards .c-h form .qst .qst-right a .qq .svg{

  width: 20%;
}

main .contact-cards .c-h form .qst .qst-right a .qq .svg svg{

  width: 25px;
  height: 25px;
  color: var(--color-fade);
}

main .contact-cards .c-h form .msg{

  width: 100%;
  margin-top: 0.313rem;
  margin-bottom: 0.626rem;

}

main .contact-cards .c-h form .msg span{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.3em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;

}

main .contact-cards .c-h form .contact{

  width: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: var(--border-radius-2);
  padding: 0.626rem;
}

main .contact-cards .c-h form .contact .c-1{


  width: 100%;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:0.626rem;
}

main .contact-cards .c-h form .contact .c-1 .c{

  width: 100%;
  display: flex;
  flex-direction: column;
  gap:0.313rem;
}

main .contact-cards .c-h form .contact .c-1 .c label{

font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;

      }


main .contact-cards .c-h form .contact .c-1 .c input{

  width: 100%;
  height: 35px;
  border: solid 1px var(--gray-border);
  background: transparent;
  padding: 0.313rem;
  font-size: 16px;
}

main .contact-cards .c-h form .contact .c-2{

  width: 100%;
  display: flex;
  flex-direction: column;
  gap:0.313rem;
  margin-top: 0.626rem;
}

main .contact-cards .c-h form .contact .c-2 label{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;


}

main .contact-cards .c-h form .contact .c-2 textarea{

  width: 100%;
  height: 150px;
  border: solid 1px var(--gray-border);
  background: transparent;
  padding: 0.313rem;
  font-size: 18px;
  resize: none;
}

main .contact-cards .c-h form .contact .c-3{

  margin-top: 0.626rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

main .contact-cards .c-h form .contact .c-3 button{

  width: 130px;
  padding: 0.626rem;
  background: var(--color-fade);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-2);
  cursor: pointer;
  font-size: 18px;
}





/* contact css end */

/* again css */



main .again-cards{

  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-top: 40px;
}



main .again-cards .title{

  width: 100%;
  padding-left: 40px;
}

main .again-cards .title h1{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.5em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;
}

main .again-cards .again-prods{

  width: 100%;
  display: grid;
  grid-template-columns: repeat(6,1fr);
  padding-left: 40px;
  padding-right: 40px;

  margin-top: 20px;
  gap:0.939rem;
}

main .again-cards .again-prods a{

  width: 100%;
  display: flex;
}


main .again-cards .again-prods .again-prod{

  width: 100%;
  display: flex;
  flex-direction: column;
  gap:0.612rem;
  
}

main .again-cards .again-prods .again-prod .img{

   width: 100%;
  height: 160px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  
}

main .again-cards .again-prods .again-prod .img img{

  width: 100%;
  height: 100%;
  object-fit: contain;
  border-top-left-radius: 0;
  border-top-right-radius: 0;

}

main .again-cards .again-prods .again-prod .again-name{

   margin-top: 0.313rem;
  width: 100%;


}

main .again-cards .again-prods .again-prod .again-name span{

      color: var(--color-lien);
      font-size: 14px;

}

main .cards-list .right-list .list-product button .p2 .p-name{

  margin-top: 0.313rem;
  width: 100%;
}

main .cards-list .right-list .list-product button .p2 .p-name p{

      color: var(--color-lien);
      font-size: 14px;
}

main .again-cards .again-prods .again-prod .price{

  display: flex;
  width: 100%;
  margin-top: 5px;
  flex-direction: column;
}

main .again-cards .again-prods .again-prod .price span{
   font-weight: 550;
        font-size: 14px;
        color: #707070;

}

main .again-cards .again-prods .again-prod .price span#amount{

  font-weight: 550;
        font-size: 16px;
        color: #707070;


}

main .again-cards .again-prods .again-prod .progression{

width: 100%;
  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 5px;

}

main .again-cards .again-prods .again-prod .progression .progressbar{

 width: 30px;
}


main .again-cards .again-none{

  width: 50%;
  padding: 0.626rem;
  background: #ffffff;
  border-radius: var(--border-radius-2);
  margin-left: 40px;
  margin-top: 0.626rem;
}


main .again-cards .again-none span{
 

    line-height: 1.2;
   
}

main .discover{

  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-top: 20px;
}

main .discover .title{

  width: 100%;
  padding-left: 50px;
}

main .discover .title h1{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.5em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;
}

main .discover .all-discover{

  width: 100%;
  display: flex;
  flex-direction: column;

}

main .discover .all-discover .discover{

  width: 100%;
  display: flex;
  flex-direction: column;

}

main .discover .all-discover .discover .title{

 width: 100%;
 

}


 main .discover .all-discover .discover .title span{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.1em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;
}

main .discover .all-discover .discover .dis-p{

  width: 100%;
  display: grid;
  grid-template-columns: repeat(6,1fr);
  padding-left: 50px;
  padding-right: 0.626rem;
  margin-top: 20px;
  gap:0.939rem;
}

main .discover .all-discover .discover .dis-p a{


 width: 100%;
  display: flex;

}

main .discover .all-discover .discover .dis-p .again-prod{

  width: 100%;
  display: flex;
  flex-direction: column;
  gap:0.612rem;
  
}

main .discover .all-discover .discover .dis-p .again-prod .img{

   width: 100%;
  height: 160px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  
}

main .discover .all-discover .discover .dis-p .again-prod .img img{

  width: 100%;
  height: 100%;
  object-fit: contain;
  border-top-left-radius: 0;
  border-top-right-radius: 0;

}

main .discover .all-discover .discover .dis-p .again-prod .again-name{

   margin-top: 0.313rem;
  width: 100%;


}

main .discover .all-discover .discover .dis-p .again-prod .again-name span{

      color: var(--color-lien);
      font-size: 14px;

}

main .cards-list .right-list .list-product button .p2 .p-name{

  margin-top: 0.313rem;
  width: 100%;
}

main .cards-list .right-list .list-product button .p2 .p-name p{

      color: var(--color-lien);
      font-size: 14px;
}

main .discover .all-discover .discover .dis-p .again-prod .price{

  display: flex;
  width: 100%;
  margin-top: 5px;
  flex-direction: column;
}

main .discover .all-discover .discover .dis-p .again-prod .price span{
   font-weight: 550;
        font-size: 14px;
        color: #707070;

}

main .discover .all-discover .discover .dis-p .again-prod .price span#amount{

  font-weight: 550;
        font-size: 16px;
        color: #707070;


}

main .discover .all-discover .discover .dis-p .again-prod .progression{

width: 100%;
  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 5px;

}

main .discover .all-discover .discover .dis-p .again-prod .progression .progressbar{

 width: 30px;
}


/* css h-c */

main .button-phone{

 
  display: none;
}

main .h-p-card{

  width: 100%;
  display: flex;
  padding: 0.313rem;
  padding-bottom: 3rem;
  

}

main .h-p-card .h-p-left{

  width: 25%;
  display: flex;
  padding: 0.313rem;
 

}

main .h-p-card .h-p-left button{
  display: none;
}

main .h-p-card .h-p-left ul{

  width: 100%;
  display: flex;
  flex-direction: column;
  gap:0.313rem;

  
}

main .h-p-card .h-p-left ul li{

  display: flex;
  width: 100%;
  padding: 0.313rem;
}

main .h-p-card .h-p-left ul li a{

 
  font-family: 'nunito', sans-serif;
      display: block;
        font-size: 1em;
      
        unicode-bidi: isolate;
        line-height: 1;
        color: var(--color-fade);
}


main .h-p-card .h-p-right{

  width: 75%;
  padding: 0.313rem;
  display: flex;
  flex-direction: column;
   background: #ffffff;
   margin-top: 0.313rem;
   border-radius: var(--border-radius-2);


}


main .h-p-card .h-p-right .title{

  width: 100%;
  display: flex;
  padding: 0.313rem;
}

main .h-p-card .h-p-right .title h2{
 font-family: 'nunito', sans-serif;
      display: block;
        font-size: 1.5em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;

      }

main .h-p-card .h-p-right .h-p-text{

  width: 100%;
  padding: 0.313rem;
  display: flex;
  flex-direction: column;
  gap:0.313rem;
}
main .h-p-card .h-p-right .h-p-text span{
 font-family: 'nunito', sans-serif;
      display: block;
        font-size: 1.1em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;
        }

main .h-p-card .h-p-right .h-p-text p{

  color: #000000;
  font-size: 16px;
}

/*css h-c end */

/*css privacy */

main .priv-cards{

  width: 100%;
  display: flex;
  flex-direction: column;
}

main .priv-cards .logo{

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
}

main .priv-cards .logo img{

  width: 150px;
  height: 150px;
  object-fit: contain;
}

main .priv-cards .priv-element {

  width: 100%;
  display: flex;
  flex-direction: column;
  gap:1rem;
  padding: 1rem;
}

main .priv-cards .priv-element .title{
  width: 100%;
    padding-left: 50px;
    margin-top: 20px;
}

main .priv-cards .priv-element .title h1{

  font-family: 'nunito', sans-serif;
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    unicode-bidi: isolate;
    line-height: 1.2;
    color: #141824;
}
main .priv-cards .priv-element .content{
width: 100%;
margin-left: 0.626rem;
margin-right: 0.626rem;
background: #ffffff;
border-radius: var(--border-radius-2);
padding: 0.626rem;

}

main .priv-cards .priv-element .content span{

   font-family: 'nunito', sans-serif;
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    unicode-bidi: isolate;
    line-height: 1.2;
    color: #141824;

}

main .priv-cards .priv-element .content a{

  text-decoration: none;
  color: var(--color-fade);
}

/*css privacy end */

/* width */
::-webkit-scrollbar {
  width: 0.313rem;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 0.313rem;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #A6ACAF; 
  border-radius: 0.313rem;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #909497; 
}




/* responsive pour smartphone */

@media (max-width: 600px) {

  .text-body-tertiary {
  color: rgba(82,91,117,1);
  width: 25px;
  height: 25px;
}

  body{

  background: var(--color-body);
  width: 100%;
  display: flex;
  flex-direction: column;

  
}

main{

  direction: flex;
  width: 100%;
  flex-direction: column;
  position: relative;
  
}


  main header{


    top: 0;
    left: 0;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    z-index: 1;
    position: relative;
  
}



main header .logo{

  display: flex;
  flex-direction: column;
  align-items: center;
  width: 10%;
  height: 80px;
  padding-left: 20px;



}




main header .logo a{

  width: 120px;
  height: 100%;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

main header .logo a img{

  width: 100%;
 
 
}


main header .search{

  
  display: none;
}

main header .search form{
  display: none;
}

main header .search form button{

  display: none;
}

main header .search form button img{

  color: var(--color-gray-input);
}


main header .search input{

display: none;

}

main header .nav-option{

  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0;
  margin-right: 0.2rem;
  height: 80px;
  padding-top: 0.313rem;
  gap:0;
  
  
  
}


main header .nav-option .balance{

  display: none;
  

}

main header .nav-option .balance span{

  display: block;
    font-size: 20px;
    font-weight: bold;
    color: #707070;
    text-align: center;
}

main header .nav-option button{

  
  width: 50px;
  height:50px;
  display: flex;
  right: 0;

}

main header .nav-option button img{

  width: 30px;
}

main header .nav-option button:hover{

  cursor: pointer;
}


main .menu{

  display: flex;
  width: 100%;
  background: #ffffff;
  height: 50px;
  padding-left: 20px;
  padding-right: 20px;
  align-items: center;
  position: relative;
  
}

main .menu .category{

  display: flex;
  align-items: center;
  width: 40%;
}

main .menu .category button{

  background: transparent;
  display: flex;
  align-items: center;
  gap:5px;
  font-size: 18px;
  color: var(--color-a);

}

main .menu .category button:hover{

  cursor: pointer;
}

main .menu .category button img{

  width: 35px;
}

main .menu .nav{

  display: none;

}

main .menu .phonebalance{

  display: none;
    font-size: 20px;
    font-weight: bold;
    color: #707070;
}

main .banniere{

width: 100%;
  position: relative;
  margin-top: auto;
}


main .banniere .mySlides img{




}


.product{

 display: none;
 top: 0;
}

.product .scard{

  display: none;
  
}

.product .s-p{

  
  display: none;
  
  
}

.product .s-p button{

  
  display: none;

  
}


.product .s-p button img{

  display: none;

}

main .searchphone{
    width: 100%;
  display: flex;
  align-items: center;
  padding: 3px;
  
  margin-bottom: 0.313rem;


}


main .searchphone form{
  display: flex;
  width: 100%;
  gap:0;
}

main .searchphone form button{

  width: 60px;
  display: flex;
  align-items: var(--color-fade);
  align-items: center;
  justify-content: center;
  
  
}

main .searchphone form button img{

  color: var(--color-gray-input);
  width: 24px;
}


main .searchphone input{

width: 100%;
height: 45px;
border-left: solid 1px #99A3A4 ;
border-top: solid 1px #99A3A4 ;
border-bottom: solid 1px #99A3A4 ;
background: #ffffff;
border-radius: 0;
padding: 5px;
font-size: 20px;
color: #99A3A4 ;




}


 .swiper-container {
   display: flex;
            width: 100%;
            height: 350px;
            overflow: hidden;
            position: relative;
            margin-top: 0.313rem;
            z-index: 0;


        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            width: 80%;
            padding: 0.626rem;
             z-index: 0;
            /* Autres styles de vos slides */
        }

        .swiper-slide .title{

          width: 100%;
          margin-bottom: 0.626rem;

        }

        .swiper-slide .title span{

          font-family: 'nunito', sans-serif;
      display: block;
        font-size: 1.17em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;


        }

        .swiper-slide .swip-p{

          display: grid;
          grid-template-columns: repeat(2,1fr);
          gap:0.313rem;

          
          
        }

         .swiper-slide .swip-p a button{

          width: 170px;
          height: 130px;
          background: transparent;
          margin-bottom: 0.313rem;

         }

           .swiper-slide .swip-p a button img{

             width: 170px; /* largeur fixe */
            height: 130px; /* hauteur fixe */
            object-fit: contain; /* ajuste le contenu de l'image */

           }

           


main .bottom{

  margin-top: 0.625rem;
  margin-left:0.313rem;
  margin-right: 0.313rem;

  
}

main .bottom .product-card-1{

  display: flex;
  flex-direction: column;
  background: #ffffff;
  width: 100%;
  border-radius: var(--border-radius-2);
  padding: 0.313rem;

}

main .bottom .product-card-1 .title{

  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 0.313rem;
  padding: 0.313rem;
  width: 100%;
  
  
}

main .bottom .product-card-1 .title h2{

  font-family: 'nunito', sans-serif;
  display: block;
    font-size: 1.17em;
    font-weight: bold;
    unicode-bidi: isolate;
    line-height: 1;
    color: #141824;
}



main .bottom .product-card-1 .title a{

  color: var(--color-fade);
}


main .bottom .product-card-1 .title a:hover{

  text-decoration: underline;
}

main .bottom .product-card-1 .product-c-1{

display: grid;
align-items: center;
grid-template-columns: repeat(3,1fr);
gap: 0.313rem;
width: 100%;
justify-content: center;


}

main .bottom .product-card-1 .product-c-1 button{

  
   width: 120px; /* largeur fixe */
     height: 150px;
  background: transparent;
  margin-bottom: 0.938rem;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

main .bottom .product-card-1 .product-c-1 button:hover{

  cursor: pointer;
}

main .bottom .product-card-1 .product-c-1 button .p{

  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
main .bottom .product-card-1 .product-c-1 button .p img{

width: 120px;
  height: 120px;
   object-fit: contain; /* ajuste le contenu de l'image */
  
  
  
}




main .bottom .product-card-2{

  display: grid;
  width: 100%;
  background: #ffffff;
  margin-top: 30px;
  grid-template-columns: repeat(2, 1fr);
  gap:15px;
  padding: 0.313rem;
  margin-bottom: 0.626rem;
  padding-bottom: 0.626rem;
}

main .bottom .product-card-2 button{

background: transparent;
width: 100%;
margin-top: 25px;

}

main .bottom .product-card-2 button:hover{

  cursor: pointer;
}


main .bottom .product-card-2 button .p2{

  width: 100%;
  display: flex;
  flex-direction: column;



}

main .bottom .product-card-2 button .p2 .p-img{

  
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;



}

main .bottom .product-card-2 button .p2 .p-img img{

    object-fit: contain;
  width: 160px;
  height: 160px;


}

main .bottom .product-card-2 button .p2 .p-name{

  margin-top: 0.313rem;
  width: 100%;
}

main .bottom .product-card-2 button .p2 .p-name p{

  color: var(--color-lien);
  font-size: 14px;
}

main .bottom .product-card-2 button .p2 .price-direct{

  display: flex;
  width: 100%;
  margin-top: 5px;
  flex-direction: column;
}

main .bottom .product-card-2 button .p2 .price-direct .estimated,
main .bottom .product-card-2 button .p2 .price-direct .total-price{

    width: 100%;
  margin-top: 3px;
  display: flex;
  align-items: center;
  position: relative;

}

main .bottom .product-card-2 button .p2 .price-direct .estimated span{

  font-weight: 550;
  font-size: 14px;
  color: #707070;
}

main .bottom .product-card-2 button .p2 .price-direct .total-price span{

  color: #565959; 
      font-size: 16px;
      font-weight: 550;
      

}

main .bottom .product-card-2 button .p2 .price-direct .progression{

width: 100%;
  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 5px;

}


main .bottom .mark{

  width: 100%;
  display: grid;
  grid-template-columns: (1 ,1fr)
  justify-content: center;
  background: var(--color-body);
  margin-top: 20px;
  gap:0.626rem;
 
}
  


main .bottom .mark .mark-card{

   display: flex;
  flex-direction: column;
   background: #ffffff;
  padding: 20px;
  justify-content: center;
  align-items: center;
  gap:0.313rem;
  border-radius: var(--border-radius-2);

}

main .bottom .mark .mark-card .mark-logo{

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

main .bottom .mark .mark-card .mark-logo a img{

width: 80px;

}

main .bottom .mark .mark-card .mark-prod{

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:0.313rem;
  height: 100%;
}


main .bottom .mark .mark-card .mark-prod .prod button{

   width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:20px;
  background: transparent;
  height: 150px;
}

main .bottom .mark .mark-card .mark-prod .prod button:hover{

  cursor: pointer;
}

main .bottom .mark .mark-card .mark-prod .prod button img{


width: 110px;
height: 120px;
object-fit: contain;

}

main .bottom .mark .mark-card .mark-prod .prod button p{

  display: none;
}

main .bottom .store-slide-pc{

  display: none;
}



main .bottom .store-slide{

  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0.313rem;
  position: relative;
  margin-bottom: 0.939rem;
  

}

main .bottom .store-slide .title{


  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 0.313rem;
  padding: 0.313rem;
  width: 100%;

}

main .bottom .store-slide .title span{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.17em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;
}

main .bottom .store-slide .slide-card{

  position: relative;
    white-space: nowrap;
    cursor: grab;
    overflow: hidden;
    width: 100%;
    display: flex;


    

}

main .bottom .store-slide .slide-card a{

  text-decoration: none;
}

main .bottom .store-slide .slide-card a button{

  

   display: flex;
   flex-direction: column;
          
           
          background: transparent;
          
            gap:0.313rem;
            user-select: none; /* Empêche la sélection de texte pendant le glissement */
}

main .bottom .store-slide .slide-card a button .img{

  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  
  
}

main .bottom .store-slide .slide-card a button .img img{

  width: 150px; /* largeur fixe */
            height: 150px; /* hauteur fixe */
            object-fit: contain; /* ajuste le contenu de l'image */
            border-radius: 50%;

        }

        main .bottom .store-slide .slide-card a button .name{

          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 0.313rem;

        }

        main .bottom .store-slide .slide-card a button .name span{


          font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.05em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;

        }


        /* login page */

        .register-cards{


  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.register-cards .logo{

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 25px;

}

.register-cards .logo a img{

width: 130px;
}

.register-cards .register-card{


  display: flex;
  flex-direction: column;
  border-radius: 8px;
  border-radius: 4px;
    position: relative;
    padding: 14px 18px;
    border: solid 1px #e8e8e8;
    background: #ffffff;
    margin-bottom: 20px;


}

.register-cards .register-card h1{

  
    font-size: 28px;
    line-height: 1.2;

    text-rendering: optimizeLegibility;
    padding-bottom: 4px;

    margin-bottom: 20px;

      font-family: 'nunito', sans-serif;
        display: block;
 
        font-weight: bold;
        unicode-bidi: isolate;
       
        color: #141824;
}

.register-cards .register-card form{

  width: 100%;
  display: flex;
  flex-direction: column;
}


.register-cards .register-card form label{

    display: block;
    padding-left: 2px;
    padding-bottom: 2px;
    font-weight: 700;
    cursor: default;


    font-family: 'nunito', sans-serif;
        
   margin-bottom: 0.313rem;
   
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;

}


.register-cards .register-card form input[type="text"],
.register-cards .register-card form input[type="email"],
.register-cards .register-card form input[type="password"]{

  background-color: #fff;
    height: 40px;
    padding: 3px 7px;
    line-height: normal;
    writing-mode: horizontal-tb !important;
    padding-block: 1px;
    padding-inline: 2px;
    width: 300px;
    font-size: 16px;
    border: 1px solid #a6a6a6;
    border-top-color: #949494;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 1px 0 rgba(0,0,0,.07) inset;
    outline: 0;
    margin-bottom: 0.313rem;
    padding: 5px;
}


.register-cards .register-card form input[type="submit"]{

  background-color: var(--color-fade);
    height: 41px;
    padding: 3px 7px;
    line-height: normal;
    width: 300px;
    border-radius: 3px;
    outline: 0;
    margin-bottom: 0.313rem;
    border-radius: 5px;
    margin-top: 0.626rem;
    cursor: pointer;
    color: #ffffff;
    font-size: 16px;
    


}

.register-cards .register-card form input[type="submit"]:hover{

  background: var(--color-button-blue);
}

.register-cards .register-card .condition{

  width: 300px;
  text-align: center;
}

.register-cards .register-card .condition p a{

  color: var(--color-fade);
}

.register-cards .register-card .condition p a:hover{

  text-decoration: underline;
}



.register-cards .register-card hr {
    background-color: transparent;
    display: block;
    height: 1px;
    border-width: 0;
    border-top: 1px solid #e7e7e7;
    line-height: 19px;
    margin-bottom: 14px;
    margin-top: 20px;
    margin-bottom: 20px;

}

.register-cards .register-card .seller span,
.register-cards .register-card .create span {

    font-weight: 700!important;
    font-size: 14px;
    font-family: 'nunito', sans-serif;
        display: block;
   margin-bottom: 0.313rem;
   
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;

}

.register-cards .register-card .seller a,
.register-cards .register-card .create a{

  color: var(--color-fade);

}

.register-cards .register-card .seller a:hover,
.register-cards .register-card .create a:hover{

  text-decoration: underline;
}



/* footer css */


main .footer{


  
  width: 100%;
  background: #ffffff;
  padding-top: 0;
  position: relative;
  bottom: 0;
  margin-top: 50px;
  padding-bottom: 50px;

}

main .footer .ancre{

  width: 100%;
  height: 60px;
  margin-bottom: 20px;
  padding-top: 0.626rem;
}

main .footer .ancre a button{

  width: 50px;
  height: 50px;
  cursor: pointer;
  color: var(--color-fade);
  font-size: 18px;
  background: var(--color-body);
  position: absolute;
  right: 0;
  margin-right: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

main .footer .ancre a button:hover{

  background: var(--gray-border);
}

main .footer .cards{

  
  display: flex;
  flex-direction: column;
  gap:15px;
  padding-left: 0.626rem;
  padding-right: 0.626rem;
  width: 100%;
  
}

main .footer .cards .allfooter{

  width: 100%;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:0.626rem;
  
}

main .footer .cards .allfooter .card{

  display: flex;
  width: 100%;
  

}

main .footer .cards .card#c-logo{

  display: flex;
  flex-direction: column;
  width: 100%;

}

main .footer .cards .card#c-logo .title .logo a img{

  width: 120px;
}

main .footer .cards .card#c-logo .text-c{

  width: 100%;
  

}

main .footer .cards .card#c-logo .title{

  width: 100%;
}




main .footer .cards .allfooter .card .title{

  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

main .footer .cards .allfooter .card .title .logo{

  display: flex;
  flex-direction: column;
  height: 30px;

}




main .footer .cards .allfooter .card .title .titre{

     display: flex;
  flex-direction: column;
  justify-content: center;
  height: 30px;

}

main .footer .cards .allfooter .card .title .titre h2{

font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.05em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;
}

main .footer .cards .allfooter .card .title .logo a img{

  
  width: 100px;
}



main .footer .cards .allfooter .card .text-c{

  display: flex;
  flex-direction: column;
  gap:0.313rem;
  align-items: center;
  justify-content: center;
}


main .footer .cards .allfooter .card .text-c p{

  color: #525B75;
  line-height: 1.2 !important;
  font-size: 16px;
      display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

main .footer .cards .allfooter .card .text-c a{

  text-decoration: none;
    color: #525B75;
  font-size: 14px;
}




/* product-details css */


main .cards-P{

  display: none;


}



 

         .swiper-slide img{

          width: 90%;
          height: 100%;
          object-fit: contain;
         }

       main .product-info-phone{

        width: 100%;
        margin-top: 0.626rem;
        display: flex;
        flex-direction: column;
        padding: 0.626rem;
       }


 main .product-info-phone .product-name{

  width: 100%;

 }

  main .product-info-phone .product-name span{

    font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.30em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;

        color: #141824;



  }

   main .product-info-phone .note{

    width: 100%;
    margin-top: 0.626rem;
   }

    main .product-info-phone .note span{

      font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.5em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;

        color: #141824;


    }

     main .product-info-phone .store{

    width: 100%;
    margin-top: 0.626rem;

   }

     main .product-info-phone .store a{
      font-family: 'nunito', sans-serif;
        display: flex;
        font-size: 1.2em;
        align-items: center;
        unicode-bidi: isolate;
        height: 70px;
        color: var(--color-fade);

     }

     main .product-info-phone .store a img{

      width: 70px;
     }


main .product-info-phone hr{
      background-color: transparent;
    display: block;
    height: 1px;
    border-width: 0;
    border-top: 1px solid var(--gray-border);
    line-height: 19px;
    margin-bottom: 14px;
    margin-top: 20px;
    margin-bottom: 20px;

}

main .product-info-phone .estimation{

  width: 100%;
  margin-top: 5px;
  display: flex;
  flex-direction: column;
  position: relative;


}


main .product-info-phone .estimation span#text{

  font-weight: 550;
  font-size: 14px;
  color: #707070;


}


main .product-info-phone .estimation span#value{

  color: #565959; 
      font-size: 1.6rem;
      font-weight: 550;
      

  }


  main .product-info-phone .total{

    display: flex;
    width: 100%;
    margin-top: 0.626rem;



  }

  [role="progressbar"] {

  --size: 40px;

}

  main .product-info-phone .mes{

    display: flex;
    width: 100%;

  }

  main .product-info-phone .mes span{

    width: 120px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #ffffff;
    background: var(--color-success);
    margin-top: 0.626rem;
  }

  main .product-info-phone .info{

    display: flex;
  flex-direction: column;
  gap:8px;
  margin-top: 0.313rem;


  }

  main .product-info-phone .comments{

  width: 100%;
  margin: 0.313rem;
  

}

main .product-info-phone .comments span{

  width: 100%;
  color: #ffffff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

main .product-info-phone .comments span#addSuccess{

  background: var(--color-fade);
}

main .product-info-phone .comments span#already{

  background: var(--color-gray-input);
}

main .product-info-phone .info p{

  font-size: 18px;

}

main .product-info-phone .info p#timer{

  color: #cc1b00;
  font-weight: 550;
}

main .product-info-phone .button{

  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 0.800rem;
  gap:0.450rem;
}


main .product-info-phone .button button{

  width: 100%;
  height: 40px;
  border-radius: var(--border-radius-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 550;
  color: #ffffff;
  cursor: pointer;
}

main .product-info-phone .button button#b-draw-phone{

      background: var(--color-fade);
}



main .product-info-phone .button button#wishlist-phone{

  border: solid 1px #3874ff;
  display: flex;
  gap:5px;
  background: transparent;
  color:  #3874ff;
}

main .product-info-phone .button button#wishlist-phone svg{

  width: 30px;
  
}


main .product-info-phone .description{

  width: 100%;
  display: flex;
  flex-direction: column;
  gap:0.450rem;
  margin-top: 0.800rem;
}

main .product-info-phone .description .title{

  width: 100%;


}

main .product-info-phone .description .title span{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.2em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;

        color: #141824;


}

main .product-info-phone .description p{

  font-size: 1.1rem;
  margin-top: 0.800rem;

}

main .product-info-phone .specification{

  width: 100%;
  display: flex;
  flex-direction: column;


}

main .product-info-phone .specification .title{

  width: 100%;
  margin-top: 0.313rem;
  margin-bottom: 0.913rem;

}

main .product-info-phone .specification .title span{

      font-family: 'nunito', sans-serif;
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    unicode-bidi: isolate;
    line-height: 1.2;
    color: #141824;
}

main .product-info-phone .specification .card-spe{

  width: 100%;
  display: flex;
  gap:0.626rem;
  margin-bottom: 0.700rem;

}
main .product-info-phone .specification .card-spe .left-spe{

  width: 30%;
}

main .product-info-phone .specification .card-spe .left-spe span{

  font-family: 'nunito', sans-serif;
    display: block;
    font-size: 1em;
    font-weight: bold;
    unicode-bidi: isolate;
    line-height: 1.2;
    color: #141824;
}

main .product-info-phone .specification .card-spe .right-spe{

  width: 70%;
}

main .product-info-phone .specification .card-spe .right-spe span{

  font-family: 'nunito', sans-serif;
    display: block;
    font-size: 1em;
    unicode-bidi: isolate;
    line-height: 1.2;
    color: #141824;
}



main .product-info-phone .seller{

  width: 100%;
  display: flex;
  flex-direction: column;
  gap:0.450rem;
  margin-top: 0.800rem;
}

main .product-info-phone .seller .title{

  width: 100%;


}
main .product-info-phone .seller .title span{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.2em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;

        color: #141824;


}


main .product-info-phone .seller .img-name{

  width: 100%;
  display: flex;
  gap:0.313rem;
  align-items: center;
  height: 70px;
}

main .product-info-phone .seller .img-name img{

  width: 70px;
}

main .product-info-phone .seller .img-name span{


font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;

        color: #141824;

}

main .product-info-phone .seller .prod-am{

  width: 100%;
  padding-left: 20px;
}

main .product-info-phone .seller .prod-am span{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1em;
        unicode-bidi: isolate;
        line-height: 1.2;
        font-weight: bold;
        color: #141824;



}

main .product-info-phone .seller .button{

  width: 100%;

}

main .product-info-phone .seller .button li{

    width: 100%;
  height: 40px;
  border-radius: var(--border-radius-1);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-fade);
  


}


main .product-info-phone .seller .button li a{

  font-size: 18px;
  font-weight: 550;
  color: #ffffff;


}



main .product-info-phone .comment{

  width: 100%;
  display: flex;
  flex-direction: column;
  gap:0.450rem;
  margin-top: 0.800rem;
  margin-bottom: 0.626rem;
}

main .product-info-phone .comment .title{

  width: 100%;


}
main .product-info-phone .comment .title span{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.2em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;

        color: #141824;


}

main .product-info-phone .comment .allc{

margin-top: 15px;
display: flex;
flex-direction: column;
gap:15px;
}

main .product-info-phone .comment .commentbutton{

  width: 100%;
  display: flex;
  gap:0.939rem;
  align-items: center;
  
}


main .product-info-phone .comment .commentbutton img{

  width: 100px;
}

main .product-info-phone .comment .commentbutton a{

  color: var(--color-fade);
}

main .product-info-phone .comment .allc .comment{

  width: 100%;
  display: flex;
  flex-direction: column;
  
}

main .product-info-phone .comment .allc .comment .name{

  display: flex;
  align-items: center;
  width: 100%;

}

main .product-info-phone .comment .allc .comment .name button{

  background: transparent;

}


main .product-info-phone .comment .allc .comment .name p{

  margin-left: 15px;
  font-size: 16px;
  font-weight: 550;
}

main .product-info-phone .comment .allc .comment .name img{

  width: 100px;
}

main .product-info-phone .comment .allc .comment .time{

  margin-top: 0.313rem;
  width: 100%;
}

main .product-info-phone .comment .allc .comment .time p{

  color: #525B75;
}

main .product-info-phone .comment .allc .comment .text{

  display: flex;
  width: 100%;
  margin-top: 0.313rem;
}

main .product-info-phone .comment .allc .comment .text p{

  color: #222834;
}

main .product-info-phone .comment .allc .comment .he-re{

  width: 100%;
  display: flex;
  gap:1rem;
  align-items: center;
  margin-top: 0.626rem;
}

main .product-info-phone .comment .allc .comment .he-re a{

  color: var(--color-fade);
}

main .product-info-phone .comment .allc .comment .imgs{


  width: 100%;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  justify-content: space-between;
  margin-top: 0.313rem;
  margin-bottom: 0.313rem;
}


main .product-info-phone .comment .allc .comment .imgs img{

  width:120px;
  height: 120px;
  object-fit: contain;
}

main .product-info-phone .comment .allc .response{

  display: flex;
  flex-direction: column;
  margin-top: 0.313rem;
}

main .product-info-phone .comment .allc .response .seller{

  display: flex;
  align-items: center;

}

main .product-info-phone .comment .allc .response .seller h4{

  margin-left: 5px;
}

main .product-info-phone .comment .allc .response .seller p{

  margin-left: 15px;
  color: #525B75;
}

main .product-info-phone .comment .allc .response .seller .com p{

  
}


/* cart phone css */

main .cart-cards{

  padding: 0.313rem;
}

main .cart-cards .cart-title{

  margin-top: 0.626rem;
}


main .cart-cards .cart-title h2{


font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.5em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;

    }

    main .cart-cards .Cart-l-r .cart-right .summary .title-sum h3{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.5em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;
}

main .cart-cards .Cart-l-r{

  width: 100%;
  display: flex;
  flex-direction: column;

}


main .cart-cards .Cart-l-r .cart-left{

  width: 100%;
  background: #ffffff;
  border-radius: var(--border-radius-2);
  display: flex;
  flex-direction: column;
  padding: 0.313rem;
}

main .cart-cards .Cart-l-r .cart-left .cart-product .prod-details .name-price .prod-name{

  width:80%;
  margin-right: 0.313rem;
  
  
}



main .cart-cards .Cart-l-r .cart-left .cart-product .prod-details .name-price .prod-price{

  width: 20%;
  position: relative;

}


main .cart-cards .Cart-l-r .cart-right{

  width: 100%;
  margin-left: 0;
  margin-top: 0.313rem;
  padding: 0;
  
  
}


main .checkout-cards{

  width: 100%;
  display: flex;
  flex-direction: column;
  padding-right: 0.313rem;
  padding-left:0.313rem;
  gap:50px;

}

main .checkout-cards .left-checkout{

  display: none;
}

main .checkout-cards .right-checkout{

display: none;
}



main .checkout-cards .left-checkout-phone{

  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 0.626rem;
  background: #ffffff;
  
}


main .checkout-cards .left-checkout-phone .left-checkout-phone-card{

  display: flex;
  flex-direction: column;
  width: 100%;
  background: #ffffff;
  border-radius: var(--border-radius-2);
  padding:0.626rem;
}


main .checkout-cards .left-checkout-phone .left-checkout-phone-card .title{

  width: 100%;
  display: flex;
}

main .checkout-cards .left-checkout-phone .left-checkout-phone-card .title span{



  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.3em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;

}

main .checkout-cards .left-checkout-phone .left-checkout-phone-card .left-checkout-phone-info{

  margin-top: 0.939rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap:0.939rem;
}

main .checkout-cards .left-checkout-phone .left-checkout-phone-card .left-checkout-phone-info .left-checkout-phone-details{

  width: 100%;
  display: flex;
  position: relative;
}

main .checkout-cards .left-checkout-phone .left-checkout-phone-card .left-checkout-phone-info .left-checkout-phone-details span{

font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.1em;
      font-weight: 550;
        unicode-bidi: isolate;
        line-height: 1;
        color: #707070;
       


}

main .checkout-cards .left-checkout-phone .left-checkout-phone-card .left-checkout-phone-info .left-checkout-phone-details span b{
 color: #141824;

}

main .checkout-cards .left-checkout-phone .left-checkout-phone-card .left-checkout-phone-info .left-checkout-phone-details span#value{


  position: absolute;
  right: 0;
  margin-right: 0.313rem;
   color: #141824;
}


main .checkout-cards .left-checkout-phone .left-checkout-phone-card .left-checkout-phone-info .left-checkout-phone-details span#total-text{


font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.4em;
      font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;

}

main .checkout-cards .left-checkout-phone .left-checkout-phone-card .left-checkout-phone-info .left-checkout-phone-details span#total-text-left{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.4em;
      font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;
        position: absolute;
        right: 0;
        margin-right: 0.313rem;
}




main .checkout-cards hr{

background-color: transparent;
    display: block;
    height: 1px;
    border-width: 0;
    border-top: 1px solid #e7e7e7;
    line-height: 19px;
    margin-bottom: 14px;
    margin-top: 20px;
    margin-bottom: 20px;



}


main .checkout-cards .left-checkout-phone .left-checkout-phone-card .left-checkout-phone-info .left-checkout-phone-details  a{

font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.1em;
      font-weight: 550;
        unicode-bidi: isolate;
        line-height: 1;
        color: var(--color-fade);



}

main .checkout-cards .left-checkout-phone .left-checkout-phone-card .left-checkout-phone-card-items{


  display: flex;
  flex-direction: column;
  width: 100%;
  gap:0.626rem;
}

main .checkout-cards .left-checkout-phone .left-checkout-phone-card .left-checkout-phone-card-items .left-checkout-phone-card-item{

  display: flex;
  width: 100%;
  gap:0.626rem;
}

main .checkout-cards .left-checkout-phone .left-checkout-phone-card .left-checkout-phone-card-items .left-checkout-phone-card-item .left-checkout-phone-card-item-img{

  width: 35%;
  height: 150px;
  display: flex;
  

}

main .checkout-cards .left-checkout-phone .left-checkout-phone-card .left-checkout-phone-card-items .left-checkout-phone-card-item .left-checkout-phone-card-item-img img{

  width: 100%;
  height: 100%;
  object-fit: contain;
}

main .checkout-cards .left-checkout-phone .left-checkout-phone-card .left-checkout-phone-card-items .left-checkout-phone-card-item .left-checkout-phone-card-item-name{

  width: 75%;
  margin-top: 0.626rem;

}

main .checkout-cards .left-checkout-phone .left-checkout-phone-card .left-checkout-phone-card-items .left-checkout-phone-card-item .left-checkout-phone-card-item-name span{


font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1rem;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;
        

}

main .checkout-cards .left-checkout-phone form{

  width: 100%;
  display: flex;

}

main .checkout-cards .left-checkout-phone form .post{

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

main .checkout-cards .left-checkout-phone form .post button{

   width: 80%;
    background: #25B003;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--border-radius-2);
    cursor: pointer;
    height: 45px;
}

main .checkout-cards .left-checkout-phone .policy{

  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 0.939rem;
}


main .checkout-cards .left-checkout-phone .policy p a{

color: var(--color-fade);
}

.modal-content {
           
            width: 100%; /* Largeur de la modal */
           
        }

        /* list css */

        main .cards-list{

  width: 100%;
  display: flex;
  flex-direction: column;
}

main .cards-list form{

          width: 350px;
            max-width: 80%;
            height: 100%;
            position: fixed;
            top: 0;
            right: -350px;
            background-color: #ffffff;
            color: white;
            overflow-y: auto;
            transition: 0.3s;
           display: block;
            z-index: 1000;
}



main .cards-list .right-list{

  width: 100%;

}

main .cards-list .right-list .banniere{

  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 0.313rem;
  height: 100px;
  
}

main .cards-list .right-list .banniere img{

  width: 60px;
  height: 60px;
  
}

main .cards-list .right-list .banniere span{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.6em;
      font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;

    }

    main .cards-list .right-list .filterphone{

  display: flex;
  width: 100%;
  position: relative;
  margin-top: 0.626rem;
  padding-bottom: 0.939rem;
}

main .cards-list .right-list .filterphone img{

  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
  margin-right: 0.939rem;
}

main .cards-list .right-list .list-product{

  width: 100%;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  padding: 20px;
  gap:20px;
  margin-top: 15px;
}

main .cards-list .right-list .list-product button .p2 .p-img{

  width: 100%;
  height: 160px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  
  


}

main .cards-list .right-list .list-product button .p2 .p-img img{

  width: 100%;
  height: 100%;
  object-fit: contain;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  

  
}

main .cards-list .right-list .list-product button .p2 .p-name{

  margin-top: 0.313rem;
  width: 100%;
}

main .cards-list .right-list .list-product button .p2 .p-name p{

      color: var(--color-lien);
      font-size: 14px;
}

main .cards-list .right-list .list-product button .p2 .price-direct{

  display: flex;
  width: 100%;
  margin-top: 5px;
  flex-direction: column;
}

main .cards-list .right-list .list-product button .p2 .price-direct .estimated,
main .cards-list .right-list .list-product button .p2 .price-direct .total-price{

  width: 100%;
  margin-top: 5px;
  display: flex;
  align-items: center;
  position: relative;

}

main .cards-list .right-list .list-product button .p2 .price-direct .estimated span{

  font-weight: 550;
        font-size: 14px;
        color: #707070;
}

main .cards-list .right-list .list-product button .p2 .price-direct .total-price span{

 color: #565959;
        font-size: 16px;
        font-weight: 550;
        

}

main .cards-list .right-list .list-product button .p2 .price-direct .d-p{

  width: 50%;
  padding: 5px;
  background: var(--color-direct-price);
  margin-left: 0.313rem;
}

main .cards-list .right-list .list-product button .p2 .price-direct .d-p span{

  color: #111;
}

main .cards-list .right-list .list-product button .p2 .price-direct .price-amount{

  width: 100%;
  margin-top: 0.313rem;
  display: flex;
}


main .cards-list .right-list .list-product button .p2 .price-direct .price-amount span{

      color: #0F1111;
       font-size: 22px;
       text-align: left;
       margin-left: 0.313rem;
}

main .cards-list .right-list .list-product button .p2 .price-direct .price-amount span#reduc{

  text-decoration: line-through;

}

main .cards-list .right-list .list-product button .p2 .price-direct .progression{

  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 5px;
  


}

/* settings css */

main .cards-s .title-s{

  width: 100%;
  padding-left: 0.626rem ;
}

main .cards-s .card-s{

  width: 100%;
  display: grid;
  grid-template-columns: repeat(1 , 1fr);
  justify-content: center;
  gap:20px;
  padding-top: 30px;
  padding-right: 0.626rem;
  padding-left: 0.626rem;

}


main .cards-s .card-s button{

  display: flex;
  border: 1px solid var(--gray-border);
  background: #ffffff;
  border-radius: var(--border-radius-2);
  width: 100%;
  cursor: pointer;

}

main .cards-s .card-s button .element-s .e-t{

display: flex;
flex-direction: column;
  align-items: center;
  justify-content: center;
}

main .cards-s .card-s button .element-s .e-t h3{

  color: #111111;

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.5em;
      
        unicode-bidi: isolate;
        line-height: 1.2;
        
}

main .cards-s .card-s button .element-s .e-t span{

  color: #565969;


  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.2em;
      
        unicode-bidi: isolate;
        line-height: 1.2;
}



main .overlay-card .card {

  display: none;
  flex-direction: column;
  background: #ffffff;
  z-index: 11;
  border-radius: var(--border-radius-2);
  padding: 0.313rem;
  width: 96%;
  margin-left: 0.626rem;
  margin-right: 0.626rem;
  margin-top: 20px;
  position: relative;
  max-height: 95%;
  overflow:hidden;
  overflow-y: scroll;
  padding-bottom: 20px;

  

}

main .overlay-card .card .s-input .input{

  width: 100%;
  display: flex;
  flex-direction: column;
  gap:5px;
}

main .overlay-card .card .s-input .input label{

  display: block;
    padding-left: 2px;
    padding-bottom: 2px;
    font-weight: 700;
    cursor: default;


    font-family: 'nunito', sans-serif;
        
   margin-bottom: 0.313rem;
   
        unicode-bidi: isolate;
        line-height: 1;
        color: #141824;
}

main .overlay-card .card .s-input .input input{
background-color: #fff;
    height: 40px;
    padding: 3px 7px;
    line-height: normal;
    writing-mode: horizontal-tb !important;
    padding-block: 1px;
    padding-inline: 2px;
    width: 100%;
    font-size: 16px;
    border: 1px solid #a6a6a6;
    border-top-color: #949494;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(255,255,255,.5), 0 1px 0 rgba(0,0,0,.07) inset;
    outline: 0;
    margin-bottom: 0.313rem;
    padding: 5px;

}

 main .overlay-card .card .aff-cards{

  width: 100%;
  display: grid;
  grid-template-columns: repeat(1,1fr);
  gap:0.626rem;
  padding: 0.500rem;

}

main .overlay-card .card .submit .all-trans .trans-table{

    overflow-x: hidden;
  overflow-x: scroll;
}

main .overlay-card .card .all-trans .trans-table{

    overflow-x: hidden;
  overflow-x: scroll;
}

main .overlay-card .card .submit .all-trans .trans-table .table-title,
main .overlay-card .card .submit .all-trans .trans-table .table-trans{

  width: 150%;
}

main .overlay-card .card .all-trans .trans-table .table-title,
main .overlay-card .card .all-trans .trans-table .table-trans{

  width: 150%;
}


/* profil  */


main .cards-profil{

  width: 100%;
  padding-left: 0;
  display: flex;
  gap:0;
  
}

main .cards-profil .left{

  width: 100%;
  border: none;
  border-radius: var(--border-radius-2);
  padding: 15px;
  background: transparent;
  margin-top: 0;
  display: flex;
  flex-direction: column;

}

main .cards-profil .right{

  display: none;

}



main .cards-profil .left .info-p{

  display: flex;
  width: 100%;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--gray-border);
  
  


}


main .cards-profil .left .info-p .photo .img{

  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-fade);
}


main .cards-profil .left .info-p .photo .img h1{

  color: #ffffff;
  font-size:34px;
}


main .cards-profil .left .info-p .n-s{

  display: flex;
  flex-direction: column;
  width: 70%;
  margin-left: 1rem;
}

main .cards-profil .left .info-p .n-s .name{

  width: 100%;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  gap:5px;
  
}

main .cards-profil .left .info-p .n-s .name h2{
  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.2em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;

}

main .myproduct .product-menu{

  display: flex;
  gap:0.313rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  overflow: hidden;
  overflow-x: scroll;

}

main .myproduct .product-menu button{

color: #000000;
}


main .myproduct .storeuser{

  width: 100%;
  display: none;
  flex-direction: column;
  grid-template-columns: repeat(3 , 1fr);
  background: #ffffff;
  border-radius: var(--border-radius-2);
  border: 1px solid var(--gray-border);
  padding: 15px;
  
  
}

main .myproduct .storeuser a button .store{

  display: flex;
   align-items: center;
    justify-content: center;
     border: solid 1px #cbd0dd;
    border-radius: var(--border-radius-2);
    background: transparent;
    padding: 0.313rem;
    width: 110px;
    height: 110px;


}

main .myproduct .storeuser a button .store img{

  width: 100px;
  height: 100%;
  object-fit: contain;
  

  }

  main .title-profil{

  width: 100%;
  margin-top: 0,626rem;
  padding-left: 0.626rem;
}

main .title-profil h1{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.4em;
      
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;
}

/* store css */

main .all-store{

  margin-top: 20px;
  padding: 0.313rem;
  width: 100%;
  display: flex;
  flex-direction: column;
}

main .all-store .store-title{

  width: 100%;
  display: flex;
  margin-bottom: 0.626rem;
}

main .all-store .store-title h1{

  font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1.4em;
      
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #141824;
}

main .all-store .store-cards{

  width: 100%;
  display: grid;
  grid-template-columns: repeat(2 , 1fr);
  gap:15px;
}


main .all-store .store-cards a .card-store .img-card{

  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px;
  border: solid 1px #cbd0dd;
  border-radius: var(--border-radius-2);
  
}


main .all-store .store-cards a .card-store .img-card img{

  width: 120px;
  height: 120px;
  object-fit: contain;
}


main .myproduct{

  margin-top: 30px;
  width: 100%;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  padding-right:0;
  position: relative;
  

}



main .myproduct .cart-product{

  width: 100%;
  display: none;
  flex-direction: column;
  background: #ffffff;
  border-radius: var(--border-radius-2);
  border: 1px solid var(--gray-border);
  overflow: hidden;
  overflow-x: scroll;

}
main .myproduct .winnercard {

  width: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: var(--border-radius-2);
  border: 1px solid var(--gray-border);
  overflow: hidden;
  overflow-x: scroll;
  
  
  
}

main .myproduct .cart-product .items,
main .myproduct .winnercard .items{

  display: flex;
  width: 200%;
  border-top: solid 1px var(--gray-border);
  margin-bottom: 0.313rem;
  padding-top: 5px;
  overflow: hidden;

}

main .myproduct .cart-product .items .name,
main .myproduct .winnercard .items .name{

  width: 55%;
  display: flex;
  gap:15px;
  padding: 0.313rem;
  align-items: center;
  
  
}

main .myproduct .cart-product .items .name .img,
main .myproduct .winnercard .items .name .img{

  width: 70px;
  height: 70px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px var(--gray-border);
  border-radius: var(--border-radius-2);

}

main .myproduct .cart-product .items .name .img img,
main .myproduct .winnercard .items .name .img img{

  width: 100%;
  height: 100%;
  object-fit: contain;
}

main .myproduct .cart-product .items .status,
main .myproduct .winnercard .items .status{

  width: 15%;
  display: flex;
  padding: 0.313rem;
  align-items: center;
  
}

main .myproduct .cart-product .items .status a,
main .myproduct .winnercard .items .status a{

  color: #000000;
  text-decoration: underline;
}



main .myproduct .cart-product .items .delivery,
main .myproduct .winnercard .items .delevery{

  width: 30%;
  display: flex;
  padding: 0.313rem;
  align-items: center;
}

main .myproduct .cart-product .items .price,
main .myproduct .winnercard .items .price{

  width: 15%;
  display: flex;
  padding: 0.313rem;
  align-items: center;
}


main .myproduct .cart-product .items .date,
main .myproduct .winnercard .items .date{

width: 30%;
display: flex;
  padding: 0.313rem;
  align-items: center;

}

main .myproduct .cart-product .items .option,
main .myproduct .winnercard .items .option{

  width: 10%;
  display: flex;
  padding: 0.313rem;
  align-items: center;
  gap:15px;
}


/* menu phone css */

main .menu .category{

  display: none;
}

main .focus-nav{
 display: none;

}

main .category-drop{
display: none;
}

 #menuToggle {
           font-family: 'nunito', sans-serif;
        display: block;
        font-size: 2.5em;
      
        unicode-bidi: isolate;
        line-height: 1.2;
        color: #000000;
        display: block;
        }

        .menupc{
          display: none;
        }


        .menuphone {
            width: 350px;
            max-width: 80%;
            height: 100%;
            position: fixed;
            top: 0;
            left: -350px;
            background-color: #ffffff;
            color: white;
            overflow-y: auto;
            transition: 0.3s;
           display: block;
            z-index: 1000;
        }

        .menuphone .infouser{

          width: 100%;
          display: flex;
          flex-direction: column;
          background: var(--color-body);
          position: relative;

        }

        .menuphone .infouser .name{
          width: 100%;
          position: relative;
          padding: 0.626rem;
          margin-bottom: 50px;
          display: flex;
          flex-direction: column;
          align-items: center;

        }

        .menuphone .infouser .name a{

          display: flex;
          align-items: center;
          justify-content: center;
          text-align: right;
          gap:0.313rem;
          position: absolute;
          right: 0;
          font-size: 1.1rem;
          font-family: nunito;
          font-weight: bold;
          color: #000000;


        }

        .menuphone .infouser .name .balance{


          display: flex;
          align-items: center;
          text-align: right;
          gap:0.313rem;
          position: absolute;
          right: 0;
         
          margin-top: 40px;
          margin-right: 30px;




        }

        .menuphone .infouser .name .balance span{

        font-family: 'nunito', sans-serif;
        display: block;
        font-size: 1em;
        font-weight: bold;
        unicode-bidi: isolate;
        line-height: 1.2;
        color: rgba(82,91,117,1);

      }


        .menuphone .infouser .name button {

          display: flex;
          align-items: center;
          text-align: left;
          gap:0.313rem;
          position: absolute;
          left: 0;
          font-size: 1.1rem;
          font-family: nunito;
          font-weight: bold;
          color: #000000;
          margin-left: 0.313rem;
          background: transparent;
        }

        .menuphone .infouser .name button img{

          width: 24px;
        }


.menuphone .infouser hr{

          background-color: transparent;
    display: block;
    height: 1px;
    border-width: 0;
    border-top: 2px solid #e7e7e7;
    line-height: 19px;
    margin-bottom: 14px;
    margin-top: 20px;
    margin-bottom: 20px;

}

.menuphone .infouser .home{

  width: 100%;
  display: flex;
  padding: 0.626rem;
  position: relative;
  padding-bottom: 10px;
}

.menuphone .infouser .home span{

 font-family: 'nunito', sans-serif;
        display: flex;
        font-size: 1.5em;
      
        unicode-bidi: isolate;
        line-height: 1.2;
        font-weight: bold;
        color: #000000;
        align-items: center;
        position: relative;

}

.menuphone .infouser .home span img{

  margin-left: 25px;
}


        .menuphone .infouser .logo a img{

width: 100px;
        }

        .menuphone a {
            padding: 10px 20px;
            text-decoration: none;
            font-size: 18px;
            color: white;
            display: block;
            transition: 0.3s;
        }

        .menuphone a:hover {
            background-color: var(--color-body);
        }

        .menuphone .back-btn,
        .menuphone .close-btn {
            background-color: var(--color-body);
            text-align: center;
        }

        .menuphone .back-btn a,
        .menuphone .close-btn a {
            padding: 10px;
            cursor: pointer;
            color: #000000;
        }

         #mainMenu {

          padding-top:0.626rem; 
          width: 100%;
         }

        #mainMenu .title{
         width: 100%;
         padding-left: 0.939rem;

          
        }

        #mainMenu .title span{
font-family: 'nunito', sans-serif;
        display: flex;
        font-size: 1rem;
      
        unicode-bidi: isolate;
        line-height: 1.2;
        font-weight: bold;
        color: #000000;
        align-items: center;
        position: relative;

        }

        #mainMenu li{

          
          display: flex;
          height: 50px;
          padding-left: 0.939rem;
          align-items: center;
          position: relative;
          padding-right: 0.929rem;
          
          
        }

         #mainMenu li a{

          display: flex;
          height: 100%;
          align-items: center;
          gap:0.626rem;
          text-decoration: none;
          color: #000000;
          font-size: 20px;
         }

         #mainMenu li span{

          display: block;
          position: absolute;
          right: 0;
          color: #707070;
          font-size: 20px;
          margin-right: 1.3rem;
          
         }

       

        .submenu {
            display: none;

        }

        .submenu li{
display: flex;
          height: 50px;
          padding-left: 0.939rem;

        }

       .submenu  li a{

          display: flex;
          height: 100%;
          align-items: center;
          gap:0.626rem;
          text-decoration: none;
          color: #000000;
         }

         #overlaymenu,
         #overlayfilter
                      {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 999;
        }

        /*again css */

  main .again-cards .title{

  width: 100%;
  padding-left: 0.626rem;
}

        main .again-cards .again-prods{

  width: 100%;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  padding-left: 0.626rem;
  padding-right: 0.626rem;

  margin-top: 1.252rem;
  gap:0.939rem;
}

main .again-cards .again-none{

  width: 100%;
  padding: 0.626rem;
  background: #ffffff;
  border-radius: var(--border-radius-2);
  margin-top: 0.626rem;
  margin-left: 0.313rem;
  margin-right: 0.313rem;

}

/* again css end */

/*discover css */

main .discover .title{

  width: 100%;
  padding-left: 0.626rem;
}

main .discover .all-discover .discover .dis-p{

  width: 100%;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  padding-left:0.626rem;
  padding-right: 0.626rem;
  margin-top: 20px;
  gap:0.939rem;
}

/* contact phone */

main .contact-cards .title{

  width: 100%;
  padding-left: 3%;
}
main .contact-cards .c-h{

  width: 100%;
  display: flex;
  flex-direction: column;
  padding-right: 3%;
  padding-left: 3%;
  margin-top: 0.626rem;
  gap:0.939rem;
}

main .contact-cards .c-h .help-card{

  width: 100%;
  display: flex;
  flex-direction: column;
  gap:0.313rem;
}

main .contact-cards .c-h form{

  width: 100%;
  display: flex;
  flex-direction: column;
 align-items: center;
}


main .contact-cards .c-h form .qst{

  display: none;
  flex-direction: column;
  width: 100%;
  margin-bottom: 1rem;
}

main .contact-cards .c-h form .qst .qst-left{

  width: 100%;
  background: #EBFDFF;
  padding: 0.626rem;
}



main .contact-cards .c-h form .qst .qst-left img{

  width: 100%;
  height: 100%;
  object-fit: contain;
}

main .contact-cards .c-h form .qst .qst-right{

  width: 100%;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap:0.313rem;
  background: #CAECFB;
  padding-top: 0.626rem;

}

/* comment phone css */
 main .cards-comment .c-product-detail .add-comment form input[type="text"]{

          width: 100%;
          height: 35px;
          padding: 0.313rem;
          font-size: 16px;
          border: 1px solid var(--gray-border);
          background: #ffffff;
          margin-top: 0.313rem;
          font-family: 'nunito', sans-serif;
            display: block;
          unicode-bidi: isolate;
          line-height: 1.2;
          color: #141824;
          margin-bottom: 0.626rem;
        }

        main .cards-comment .c-product-detail .add-comment form textarea{

          width: 100%;
          resize: none;
          height: 130px;
          font-size: 16px;
          padding: 0.313rem;
          background: #ffffff;
          border: solid 1px var(--gray-border);
          font-family: 'nunito', sans-serif;
            display: block;
          unicode-bidi: isolate;
          line-height: 1.2;
          color: #141824;
          margin-top: 0.313rem;
        }

         main .cards-comment .c-product-detail .add-comment form .button{

          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 0.939rem;
         }

         /* css h-c phone */

         main .button-phone{

  width: 100%;
  padding: 0.313rem;
  display: flex;
  margin-top: 0.313rem;
}


main .button-phone button{

  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EBFDFF;
}

main .button-phone button svg{

  width: 50px;
}

         main .h-p-card .h-p-left{

            width: 350px;
            max-width: 80%;
            height: 100%;
            position: fixed;
            top: 0;
            left: -350px;
            background-color: #ffffff;
            color: white;
            overflow-y: auto;
            transition: 0.3s;
           display: block;
            z-index: 1000;
 

}

main .h-p-card .h-p-left button{

  display: flex;
  width: 35px;
  height: 35px;
  align-items: center;
  justify-content: center;
  background: transparent;
  margin-bottom: 0.626rem;
}

main .h-p-card .h-p-left button img{

  width: 25px;
}


 main .h-p-card .h-p-right{

  width: 100%;
 }

         /* css end h-c phone */

       main .choff-cards .title{

        margin-bottom: 0.626rem;;
       }

         main .choff-cards .choff-l-r{
          display: flex;
          flex-direction: column-reverse;
          padding-left: 10px;
          padding-right: 10px;
  
         }

         main .choff-cards .choff-l-r .choff-left{

          width: 100%;
         
         }

           main .choff-cards .choff-l-r .choff-right{

          width: 100%;

         }


main .choff-cards .choff-l-r .choff-left form .choff-input input[type="submit"]{

  width: 60%;
  
}

}