.cartPageDesign{
    width: 100%;
}
.cartPageLoading{
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9;
    background-color: var(--themeLightColor);

}
.cartPageLoadingCon{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: #FFF #FFF transparent transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
  }
  .loader::after,
  .loader::before {
    content: '';  
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid;
    border-color: transparent transparent var(--themeColor) var(--themeColor);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotationBack 0.5s linear infinite;
    transform-origin: center center;
  }
  .loader::before {
    width: 32px;
    height: 32px;
    border-color: #FFF #FFF transparent transparent;
    animation: rotation 1.5s linear infinite;
  }

  @keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  } 
  @keyframes rotationBack {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }

.newCartPage2{
    width:100%;
    min-height:100vh;
    overflow:hidden;
    background-color: var(--themeUltraLight);
}
.cartTopBar{
    padding:20px 10px;
    background-color: #FFF;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.cartTopLogo{
    width:100px;
}
.cartTopLogo img{
    width:100%;
    object-fit:contain;
}
.cartLoggedInSinnedAs{
    font-size:12px;
    color:rgba(0,0,0,0.4);
}
.cartLoggedInSinnedAsEmail{
    font-size:16px;
    color:rgba(0,0,0,0.8);
    font-weight:600;
}
.cartMaxWidth{
    width:calc(90% - 20px);
    max-width:1300px;
    margin:0 auto;
}
.bgWhite{
    background-color:#FFFFFF;
}
.bgRed{
    background-color:#F7665E;
}
.bgGreen{
    background-color:#6CBC72;
}
.NewCartBody{
    padding:20px 0;
}
.newCartHeadings{
    font-weight:600;
    font-size:25px;
    color:#000000;
    display:inline-block;
}
.newCartHeadings:after{
    content:"";
    height:7px;
    background: linear-gradient(45deg, var(--themeColor), transparent);
    display:block;
    margin-top:10px;
    border-radius:20px;
}
.NewCartBody{
    display:flex;
    justify-content:space-between;
}
.newCartRightPage{
    width:350px;
}
.newCartLeftPage{
    width:calc(100% - 380px);
}
.myShoppingList{
    margin-top:20px;
}
.shoppingList{
    padding:10px;
    background-color:#FFFFFF;
    border-bottom:0.1px solid #00000019;
    border-radius:5px;
}
.shoppingListImage{
    padding:5px;
    border-radius:10px;
    background-color: var(--themeLightColor);
    width:80px;
    height:80px;
}
.shoppingListImage img{
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:10px;
}
.headingGrid{
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
}
.shoppingList{
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    align-items:center;
    font-size: 14px;
}
.smallHeading{
    font-weight:bold;
    font-size:16px;
}
.shoppingProductArea{
    display: grid;
    grid-template-columns: 0.5fr 2fr;
    gap:10px;
    align-items:center;
}
.shoppingProductArea a{
    font-weight:600;
    font-size:16px;
    color:#000000;
    text-decoration:none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.productTags{
    display:inline-block;
    padding:2px 5px;
    border-radius:5px;
    background-color:var(--themeLightColor);
    font-size:12px;
    margin-top:10px;
}
.myShoppingListM0{
    margin:0;
    margin-bottom:10px;
}
.cartQuantity{
    width:100px;
    background-color:var(--themeLightColor);
    padding:5px 0;
    border-radius:5px;
    margin:0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    cursor:pointer;
    font-size:14px;
}
.quantityValue{
    border:0.1px solid #0000001a;
    border-top:0;
    border-bottom:0;
}
.removeItemNew{
    padding:5px;
    border-radius:5px;
    font-size:20px;
    color:#000000aa;
    cursor: pointer;
}
.activeTag{
    background-color:var(--themeColor);
    color:#FFFFFF;
}
.moreOffers{
    padding:10px;
    background-color:var(--themeLightColor);
    margin-top:5px;
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 100px 100px;
    border-radius:5px;
    gap:10px;
    align-items:center;
    border: 8px solid #FFFFFF; 
}
.moreOfferHeading{
    font-size:18px;
    font-weight:600;
    color:#000000;
}
.moreOfferSubHeading{
    font-size:14px;
    color:#000000;
    padding:5px 0;
}
.itemBtns{
    padding:5px 10px;
    background-color:#FFFFFFaa;
    border:0.5px solid var(--themeColor);
    width:100%;
    border-radius:5px;
    transition:0.5s;
    cursor:pointer;
}
.itemBtns:hover{
    background-color: var(--themeColor);
    color:#FFFFFF;
}
.cartSideBlockBody{
    padding:10px;
    margin-top:10px;
    font-size: 14px;
}
.newCartBtn{
    padding:10px;
    border-radius:5px;
    background:var(--themeColor);
    color:#FFFFFF;
    border:0;
    width:100%;
    margin-top:10px;
    font-size:16px;
}
.cartSideBlock{
    margin-bottom:20px;
}
.changeAddress{
    font-weight:normal;
    float:right;
    font-size:12px;
    padding:2px 8px;
    display:inline-block;
    background-color:var(--themeColor);
    border-radius:2px;
    color:#FFFFFF;
    cursor:pointer;
}
.paddingList{
    list-style-type:none;
    margin:0;
    padding:0;
}
.paddingList li{
    padding:10px 0;
    font-size: 14px;
    cursor: pointer;
}
.paddingList li a{
    color:var(--themeColor);
    text-decoration:none;
}
.noPadding{
    padding: 0 10px;
}
.themeTxt{
    color:var(--themeColor);
}
.smallSvg svg{
    width:20px;
    height:20px;
    object-fit:contain;
}
.whiteText, .whiteText *{
    color:#FFFFFF;
}
.promocodeInput{
    padding:10px;
    border:0;
    width:calc(100% - 20px);
    background-color:var(--themeLightColor);
    border-radius:5px;
}
.applyCouponBtn{
    border:0;
    padding: 10px;
    width:100%;
    background-color: var(--themeColor);
    color:#FFFFFF;
    border-radius:5px;
}

.addressSideBar{
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.2);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
}
.addressBody{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}
.addressLeft{
    width: calc(100% - 400px);
}
.addressRight{
    background: #FFFFFF;
    width: 400px;
    position: relative;
    right: -100%;
    transition: 0.5s;
    animation: 0.5s slideLeft ease-in-out;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    height: 100vh;
    overflow: auto;
}
.selectAddressTopBar{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
}
.selectAddressTopBarHeading{
    font-size: 20px;
    font-weight: 600;
}
.addressBackBtn{
    line-height: 0;
    cursor: pointer;
}
.emptyAddress{
    padding: 10px;
    border-radius: 10px;
    background: var(--themeLightColor);
    width: calc(100% - 40px);
    margin: 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}
.emptyAddress img{
    width: 150px;
    height: auto;
    object-fit: contain;
}
.selectAddressTopBar{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.addressTopLeft{
    display: flex;
    align-items: center;
    gap: 10px;
}
.addnewAddress{
    font-size: 14px;
    font-weight: 600;
    color: var(--themeColor);
}
.addAddressBtnArea{
    display: grid;
    grid-template-columns: 1fr 2fr;    
    gap: 10px;
}
.closeAddress{
    background-color: transparent;
    border: 0.5px solid var(--themeColor);
    color: var(--themeColor);
    border-radius: 5px;
}
.newAddressCard{
    padding: 10px;
    font-size: 14px;
    width: calc(96% - 20px);
    margin: 0 auto;
    background-color: var(--themeLightColor);
    border-radius: 5px;
    margin-bottom: 10px;
}
.selectThisAddress{
    padding: 5px;
    width: 100%;
    margin-top: 10px;
    border: 0;
    background-color: var(--themeColor);
    border-radius: 5px;
    color: #FFFFFF;
    cursor: pointer;
}
.disabledQuantity{
    /*pointer-events: none;*/
    opacity: 0.5;
    cursor: not-allowed;
}
.strikePrice{
    text-decoration: line-through;
    display: inline-block;
    font-weight: 600;
}

.forOffers ul li{
    display: flex;
    justify-content: space-between;
    align-items: center
}
.forOffers ul li .offerLeft{
    width: calc(100% - 120px);
}
.forOffers ul li .offerRight{
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: var(--themeColor);
    color :#FFF;
    border-radius: 10px;
    display: flex;
    align-items: center;
    font-size: 30px;
    text-align: center;
    font-weight: bold;
    justify-content: center;
    flex-direction: column;
}
.forOffers ul li .offerRight span{
    font-size: 14px;
}
.forOffers ul li .offerRight .inBox{
    display: flex;
    align-items: flex-start;
}

.forOffers ul li{
    background-color: red;
    width: calc(90% - 20px);
    padding: 10px;
    margin: 10px auto;
    background-color: var(--themeLightColor);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.freeShippingBar{
    width: 300px;
    border-radius: 5px;
    background-color: var(--themeLightColor);
    padding: 10px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.cartHeadingArea{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.truckIcon{
    width: 20px;
    height: 20px;
    object-fit: contain;
    position: absolute;
    animation: swipeToRight 1s ease-in-out;
}


.freeShippingText{
    font-size: 12px;
    padding-left: 30px;
}

.discountSummary{
    border: 0.1px solid rgba(0,0,0,0.05);
    border-radius: 5px;
    margin-top: 10px;
}
.discountSummary p{
    padding: 5px;
    font-size: 14px;
    color: #6CBC72;
}
.cartTopRight{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.currencyPickerFromCart{
    width: 100px;
}
.cartCurrencyArea{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.newCartPage2 .iconCon{
    display: block;
    visibility: visible!important;
    width: 25px;
    height: 25px;
}
.newCartPage2 .currencyDropDown{
    top:30px;
    max-height: 200px;
}
.newCartPage2 .currencyToggle{
    padding: 5px 10px;
    border-radius: 5px;
    position: relative;
}
.emptyCart2{
    width: calc(90% - 20px);
    padding: 10px;
    max-width: 400px;
}
.emptyCart2Con{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 100px);
}
.emptyCart2 .emptyCartIcon{
    width: 150px;
    height: 150px;
    object-fit: contain;
}
.emptyCart2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}
.emptyCart2 .yourCart{
    font-size: 25px;
    font-weight: bold;
}

.cartOfferList{
    list-style-type: none;
}
.cartOfferList li{
    padding: 5px 10px;
    border-radius: 5px;
    margin-top: 5px;
}
.offerDataName svg{
    width: 20px;
    height: 20px;
    color: #6CBC72;
}
.offerDataName{
    font-size: 16px;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}
.offerDataShopNow a{
    font-weight: bold;
    color: var(--themeColor);
    text-decoration: none;
    font-size: 14px;
}
.offerDataCon{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.offerDataName small{
    display: inline-block;
    background-color: var(--themeColor);
    color: #FFFFFF;
    padding: 1px 10px;
    border-radius: 10px;
    font-size: 12px;
}
.placeOrderNewCon{
    padding: 0!important;
}
.placeOrderNew{
    padding: 10px;
    background-color: var(--themeColor);
    color: #FFFFFF;
    border: 0;
    width: 100%;
    font-size: 20px;
    border-radius: 5px;
    cursor: pointer;
}

.getExitingOffersBar{
    padding:10px;
    background:var(--themeLightColor);
    border:10px solid #FFFFFF;
    border-radius:5px;
    display:grid;
    grid-template-columns:calc(100% - 100px) 100px;
    align-items:center;
}
.getExitingOffersText{
    font-weight:bold;
}
.moreOffersPopup{
    width:100%;
    height:100vh;
    background-color:#000000aa;
    position:fixed;
    top:0;
    left:0;
    z-index:99;
}
.moreOffersPopupCon{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.moreOfferListCon{
    padding:10px;
    border-radius:10px;
    background-color:#FFFFFF;
    width:calc(90% - 20px);
    max-width:300px;
    position:relative;
}
.moreOfferHeading{
    font-weight:600;
    font-size:16px;
    color:#000000;
}
.moreOfferListCon ul{
    list-style-type:none;
}
.moreOfferListCon .offerListLi{
    display:grid;
    grid-template-columns: 20px calc(100% - 30px);
    gap:10px;
    padding:10px 0 10px 0;
    cursor:pointer;
    align-items:center;
    border-bottom:0.5px solid #00000029;
    transition:0.5s;

}
.offerListLi:hover{
    padding:10px;
    border-radius:5px;
    background-color:var(--themeColor);
    color:#ffffff;
}
.offerListLi span{
    line-height:0;
}
.offerListLi svg{

    width:16px;
    height:16px;
    object-fit:contain;
}
.closeOfferPop{
    position:absolute;
    width:30px;
    height:30px;
    border:0.5px solid #00000029;
    border-radius:5px;
    display:flex;
    align-items:center;
    justify-content:center;
    right:0;
    top:0;
    cursor:pointer;
}

@keyframes swipeToRight{
    0%{
        left:0
    }
    80%{
        left:100%;
    }
    81%{
        opacity:0;
    }
    82%{
        left:-50%;
    }
    83%{
        opacity:1;
    }
    100%{
        left:0%;
    }
}

@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
@keyframes slideLeft{
    from{
        right: -100%;
    }
    to{
        right: 0%;
    }
}
@media only screen and (max-width: 900px){
    .cartMaxWidth{
        width: calc(100% - 20px);
    }
    .NewCartBody{
        flex-direction: column;
    }
    .newCartRightPage{
        width: 100%;
    }
    .newCartLeftPage{
        width: 100%;
    }
    .cartHeadingArea{
        flex-direction: column;
        gap: 10px;
    }
    .shoppingList{
        grid-template-columns: repeat(4, 1fr);

        /*grid-column-start: 1;*/
        /*flex-direction: column;*/
        /*grid-template-columns: repeat(1, 1fr);*/
    }
    .shoppingProductArea{
        grid-column: 1 / 5;
    }
    .headingGrid{
        display: none;
    }
    .moreOffers{
        /*grid-template-columns: 3fr 1fr 1fr 1fr 2fr;*/
        grid-template-columns: auto;
        grid-template-areas: 'myArea myArea';
    }
    .fixedBtns{
        position: fixed;
        bottom: 0;
        padding: 10px!important;
        background-color: #FFF;
        left: 0;
        z-index: 99;
        width: calc(100% - 20px);

        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 10px;
        align-items: center;
        border-top: 0.5px solid var(--themeColor);
    }

    .mobileAmount{
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 22px;
    }
    .newCartPage2 .currencyDropDown{
        top:60px;
    }
    .myArea{
        grid-area: myArea;
    }
}