@media only screen and (max-width: 1400px){
    .page-width {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
}
@media only screen and (max-width: 1300px){
    .ul.NavCenter {
        flex: unset;
    }
}
@media only screen and (max-width: 1045px){
    div#CollectionGrid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .ContainerSearch {
        display: none;
    }
    .promo-section{
        height: unset;
    }
    .MainImg {
        display: none;
    }
    .NavBarLeft.mobileShow {
        display: inline-block !important;
    }
    .right-sidebar{
    display: none;
    }
    aside.sidebar {
        padding: 0;
        position: fixed;
        height: 100%;
        background: white;
        z-index: 100;
        width: 300px;
        top: 0;
        visibility: hidden;
        opacity: 0;
        transition: all cubic-bezier(0.48, 0.18, 0, 0.89) 0.3s;
        left: -100%;
        z-index: -1;
    }
}
@media only screen and (max-width: 950px){

    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    div#CollectionGrid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .NavRight ,.Flexo{
        flex: unset !important;
    }
    .NavBar img {
        margin-right: 0rem;
    }
    .cart-popup {
        width: 84%;
    }
    button {
        padding: 10px 0px;
    }
    .variant-button{
        padding: 10px 20px !important;
    }
}
@media only screen and (max-width: 800px){
    .product-image:hover .main-img {
        opacity: 1; /* annule l'effet */
      }
    
      .product-image:hover .hover-img {
        opacity: 0; /* annule l'effet */
      }
    a.Flexo {
    height: 80px;
    }
    section#ProductContainer {
        margin-top: 10.3rem;
    }
    .info-about-us {
        max-width: 100%;
    }
    .card.home-contact {
        max-width: 100%;
        padding: 40px 29px 42px !important;
    }
    input.button-primary.w-button {
        width: 100%;
        margin: 0;
    }
    .BarTop span {
        font-size: 0.9rem;
        font-weight: 700;
    }
    .input-wrapper {
        width: 100%;
    }
    .input-wrapper label {
        width: 100%;
        text-align: left;
    }
    .input-wrapper input {
        width: 100%;
    }
    .social-icons p {
        text-align: center;
    }
    form#contact-form {
        display: flex;
    }
    svg#menu-bars {
        cursor: pointer;
        color: black;
    }
    .hideLaptop {
        display: inline-flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 14px;
    }
    .hideLaptop img{
        width: 30%;
        box-shadow: 0 0 5px #dddddda1;
        border-radius: 8px;
    }
    
    aside.sidebar.active {
        visibility: visible;
        opacity: 1;
        transition: left cubic-bezier(0.48, 0.18, 0, 0.89) 0.3s;
        left: 0;
        z-index: 1000;
        border-radius: 0;
    }
    .sidebar li {
        padding: 10px 15px;
    }
    .SombreHide {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: opacity cubic-bezier(0.48, 0.18, 0, 0.89) 0.4s;
        position: FIXED;
        backdrop-filter: blur(2px);
        background: #0000001c;
        z-index: -1;
        visibility: hidden;
        opacity: 0;
    }
    .SombreHide.active{
        visibility: visible;
        transition: opacity cubic-bezier(0.48, 0.18, 0, 0.89) 0.2s;
        opacity: 1;
        z-index: 999;
    }
    main.promo-section {
        flex: 0;
        overflow: hidden;
        width: 100%;
        padding: 0;
        border-radius: 0;
    }
    .card {
        padding: 15px;
        width: 100%;
    }
    .ContainerImagesHaut {
        flex-direction: column;
    }
    .SelectDivVille span {
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        direction: rtl;
        text-align: left;
    }
    .MainImage {
        width: 100%;
        flex: auto;
        min-height: unset;
        max-height: 400px;
    }
    
    .showMobile{
        display: inline;
    }
    .hideMobile{
        display: none;
    }
    .showMobileDesc {
        display: flex;
        margin-bottom: 23px;
    }
    .DescriptionProduct.showdesctopDesc {
        display: none;
    }
    .ContainerBorderQuantity {
        /* display: flex;
        align-items: center;
        margin-top: 0.5rem;
        position: fixed;
        bottom: 0;
        width: 100%;
        background: white;
        height: 60px;
        border-top: 1px solid #ddd;
        left: 0;
        display: flex;
        z-index: 100;
        justify-content: center;
        box-shadow: 0 0 10px #ddd; */
    }
    .InfoProduct h1 {
        font-size: 1.2rem;
        line-height: 28px;
    }
    section.ProductPage {
        flex-direction: column;
    }
    section#ProductContainer.page-width {
        /* padding-left: 0 !important;
        padding-right: 0 !important; */
    }
    .MinImage{
        margin-top: 1rem !important;
    }

    .MinImage {
        margin-left: 0.0rem;
       
    }
    
    .mobileShow{
        display: inline-block;
    }
    .InfoProduct {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
    }
    .ContainerImages {
        width: 100%;
    }
    section.ProductPage {
        margin-top: 1rem;
    }
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ul.NavCenter {
        display: none;
    }
    .MinImage.slider-nav{
        width: 100% !important;
        display: flex;
    }
    .ContainerImages {
        display: block;
    }
    .ContainerInput {
        gap: 10px;
    }
    .breadcrumb {
        margin-top: 0rem;
    }
    .container {
        gap: 0;
        flex-direction: column;
    }
    .shopping-cart{
        padding: 0;
    }
    .Padding-20 {
        margin-bottom: 3rem;
    }
    
    .item-details h4 a{
        font-size: .8070rem;
        line-height: 0.5;
    }
    .price{
        font-size: .8070rem;
    }
        
span.mini-title {
    font-size: 13px;
}
.container.page-width.no_width_mobile {
    max-width: 100%;
    padding: 0;
    margin-top: 9.3rem;
    display: block;
    height: 240px;
    overflow: hidden;
}
.engagements-bar {
    margin-top: 1rem;
}
}
@media only screen and (max-width: 570px){
    .collection {
        padding: 0 18px;
    }
    .card .image-container {
        height: max-content !important;
    }
    .card .image-container img {
        width: 45% !important;
        height: 100% !important; 
        max-width: 100% !important;
    }
    .card {
        padding: 0 10px !important;
        border-radius: 12px;
        text-align: center;
        width: 100% !important;
    }
    .MainImage {
        /* max-height: 400px; */
    }
    .MainImage img.ZoomImg {
        aspect-ratio: 1 / 1; 
        border-radius: 5px;
    }
    /* .MainImg {
        display: none;
    } */
     
    .MinImage img {
        aspect-ratio: 1 / 1;
        height: auto;
        max-height: auto;
        border-radius: 5px;
        margin: 0 3px;
    }
    a.collection {
        padding: 0;
    }
}
@media only screen and (max-width: 400px){
    .cart-item-controls {
        display: flex;
        width: 100%;
        align-items: center;
        margin-top: 17px;
    }
    .container.page-width.no_width_mobile {
        height: 200px;
    }
}