.gbbRemoveCartItemConfirmationMainContainer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: rgba(24, 24, 24, 0.8);
  z-index: 1000000000;
}
.gbbRemoveCartItemConfirmationContainerModal {
  position: fixed;
  z-index: 1000000000;
  transform: translate(0, -50%);
  background: #ffff;
  border-radius: 5px;
  text-align: center;
  padding: 10px;
  max-height: 95vh;
  /* left: 5vw;
    top: 5vh;
    right: 5vw; */
  left: 5vw;
  right: 5vw;
  top: 50vh;
}
.gbbRemoveCartItemConfirmationContainerModal {
  display: grid;
  grid-gap: 10px;
}

.gbbCartPageCartProductsContainerHeader {
  display: grid;
  /* grid-template-columns: 1fr 0.2fr; */
  justify-content: space-between;
  align-items: center;
}
.gbbCartPageCartProductsContainerHeaderLabel {
  justify-self: start;
  font-size: 16px;
  font-weight: bold;
}
.gbbCartPageCartProductsModalClose {
  justify-self: end;
  padding: 12px 10px;
  font-weight: bold;
  transform: rotate(45deg);
  font-size: 35px;
  position: absolute;
  top: -8px;
  right: 0px;
  color: #b2b5b9;
  cursor: pointer;
  user-select: none;
}
.gbbCartPageCartModalProductsContainer {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 5px;
  /* overflow-x: auto; */
  overflow-y: auto;
  max-height: 70vh;
}
.gbbCartPageCartModalProductsContainer {
  grid-auto-flow: row;
}
.gbbCartPageCartModalProductContainer {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 10px;
  position: relative;
  padding: 5px;
}
.gbbCartPageCartModalProductContainer {
  grid-template-columns: 0.5fr 3fr;
}

.gbbCartPageCartProductImageContainer {
  display: grid;
  width: 80px;
  height: 80px;
  border: 1px solid #cfc9c9;
  overflow: hidden;
  object-fit: contain;
}
.gbbCartPageCartModalProductImage {
  width: 100%;
  height: 100%;
}
.gbbCartPageCartModalProductTextContainer {
  font-size: 14px;
  /* width: 165px; */
  display: grid;
  grid-template-columns: 1fr 0.2fr;
  justify-content: space-between;
  align-items: start;
  grid-gap: 10px;
}
.gbbCartPageCartModalProductTitle {
  width: 100%;
  text-align: left;
}
.gbbCartModalProductTitleQty {
  display: grid;
  justify-content: start;
  width: unset;
}
.gbbCartPageCartModalProductQuantity {
  justify-self: start;
}
.gbbCartPageCartModalProductPriceQtyContainer {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 5px;
}
.gbbCartPageCartModalProductPrice {
  font-weight: bold;
}
.gbbUnavailableProductsModalFooter {
  display: grid;
  grid-gap: 10px;
}
.gbbCartPageProductsModalFooterBackBtn,
.gbbCartPageProductsModalFooterRemoveBtn {
  padding: 10px 10px;
  text-align: center;
  color: #000;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  font-weight: 500;
  background: black;
  color: white;
  border: none;
}
.gbbCartPageProductsModalFooter {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
}
.gbbDisabled {
  pointer-events: none;
  opacity: 0.2;
  /* background-color: black; */
}

.gbbExtBundlesHTMLContainer{
  width: 100%;
}

.gbbExtBundleHTMLContainer{
  height: fit-content;
  display: grid;
  grid-template-columns: 1fr 4fr 1.2fr;
  margin: 20px 0px;
  padding: 10px;
  border-radius: 5px;
}


.gbbExtBundleHTMLContainer{
  border: 1px solid #bcbcbc;
}

.gbbExtBundleHTMLContainerSideCart{
  grid-template-columns: 2fr 4fr 1fr;
}

.gbbExtBundleImageContainer{
  /* height: 10%; */
  width: 80%;
}

.gbbExtBundleImage{
  width: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.gbbExtBundleTextContainer{
  padding: 10px;
}

.gbbExtBundleTitle{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 4px;
}

.gbbExtSideCartBundleTitle{
  grid-template-rows: 1fr 1fr;
  grid-template-columns: auto;
  grid-gap: 0px
}

.dbbExtBundleId{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 4px;
}

.gbbExtBundleTitleLabel, .gbbExtBundleIdLabel, .gbbExtBundleContentsTextLabel{
  font-weight: 800;
}

.gbbExtPriceAndRemoveContainer{
  text-align: right;
  padding: 10px;
}

.gbbExtPriceContainer{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 5px;
}

.gbbExtBundleOriginalPriceContainer{
  text-decoration: line-through;
  font-size: smaller;
}

.gbbExtBundleDiscountedPrice{
  font-weight: 900;
}

.gbbExtNoDiscountPrice{
  grid-template-columns: 1fr;
}
.gbbExtBundleRemoveContainerButton{
  display: flex;
  float: right;
}

.gbbExtBundleRemoveButton{
  color: red;
  cursor: pointer; 
  width: fit-content;
}

@media (min-width: 1023px) {
  .gbbCartPageProductsModalFooter {
    grid-template-columns: 1fr 1fr;
  }
  .gbbRemoveCartItemConfirmationContainerModal{
    left: 30vw;
    right: 30vw;
  }
}


.gbbExtBundleUpsellWrapper {
}

.gbbExtBundleUpsellContainer:not(:empty){
  display: grid;
  margin: 5% 0;
  border-radius: 5px;
  grid-gap: 5px;
}

.gbbExtBundleRedirectButton {
  display: grid;
  justify-content: center;
  /* background: black; */
  /* color: white; */
  padding: 5px;
  cursor: pointer;
  width: 100%;
  border: 2px solid gray;
  border-radius: 5px;
}

.gbbExtHide{
  display: none;
}



/******************************************************************/
/***************   MIX AND MATCH BUNDLE CSS START   ***************/
/******************************************************************/
.gbbMixProductPageWidgetContainer{
  display:grid;
  grid-template-columns: 1fr;
  gap:20px;
  .gbbMixBundleAddToCartBtnWrapper{
    /* display: grid;
    grid-template-columns: 0.3fr 0.7fr;
    gap: 8px; */
    .gbbMixBundleQuantityWrapper{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      border: 2px solid #000000;
      place-items: center;
      border-radius: 5px;
      .gbbMixBundleQuantityDecrementBtn , .gbbMixBundleQuantityLabel , .gbbMixBundleQuantityIncrementBtn{
        line-height: normal;
        font-size: 16px;
        color: #000000;
        font-weight: 600;
      }

      .gbbMixBundleQuantityDecrementBtn , .gbbMixBundleQuantityIncrementBtn{
        cursor:pointer;
      }
    }
    .gbbMixAddtoCartBtn{
      width:100%;
      padding: 6px 10px;
      background-color: #000000;
      color: #ffffff;
      font-weight: 500;
      text-align: center;
      border:none;
      border-radius: 5px;
      cursor: pointer;
    }
    .gbbMixAddtoCartBtnDisabled{
      opacity:0.5;
      pointer-events: none;
    }
  }
}

.gbbMixSkeletonsCardWrapper{
  width:100%;
  display: grid;
  grid-template-columns: repeat(3 , 1fr);
  gap:16px;
  .gbbMixSkeletonWrapper{
    display:block;
    width:100%;
    height:200px;
    .gbbMixSkeletonCard , .gbbMixTextSkeleton{
      --bg: #e5e5e5;
      --glare-bg: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.4), transparent);
      position: relative;
      background-color: var(--bg);
      overflow: hidden;
    }

    .gbbMixSkeletonCard::before , .gbbMixTextSkeleton::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: var(--glare-bg);
      transform: translateX(-100%);
      animation: skeleton-glare 1.75s infinite ease-out;
      z-index: 1;
    }

    .gbbMixSkeletonCard{
      display: block;
      width: 100%;
      height: 230px;
      border-radius: 5px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    }
    .gbbMixTextSkeleton{
      display: block;
      width: 100%;
      height: 28px;
      margin-top: 13px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    }
  }
}

.gbbMixEmptyStateCardWrapper{
  width:100%;
  display: grid;
  grid-template-columns: repeat(3 , 1fr);
  gap:16px;
}

.gbbMixEmptyStateCard{
  min-height: 200px;
  height:100%;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 2px dashed #000000;
  cursor:pointer;
  .gbbMixEmptyStatCardAndTextWrapper{
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    gap:12px;
    .gbbMixEmptyStateCardIconWrapper{
      width: 80px;
      height: 80px;
      padding: 10px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background-color: transparent;
    }
    .gbbMixEmptyStateCardText{
      text-align: center;
      font-size: 16px;
      font-weight: 600;
      color: #3e3e3e;
      line-height: normal;
      padding: 10px;
    }
  }
}

.gbbMixSelectedProductCard{
  position:relative;
  min-height:200px;
  width:100%;
  height:100%;
  padding:5px;
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-gap:5px;
  border-radius: 10px;
  border: 2.4px solid #1e1e1e;
  .gbbMixProductPageCategorySelectedPrtoductIconWrapper{
    position: absolute;
    top: -5%;
    right: -8%;
    width: 28px;
    height: 28px;
    cursor:pointer;
    svg{
      width:100%;
      height:100%;
    }
  }
  .gbbMixSelectedProductCardImageWrapper{
    /* width: 100%; */
    /* height:100%; */
    aspect-ratio: 3 / 3;
    border-radius: 5px;
    overflow: hidden;
    .gbbMixSelectedProductCardImage{
      width:100%;
      height:100%;
      object-fit: cover;
    }
  }

  .gbbMixSelectedProductCardTitle{
    /* display:grid;
    place-items: center; */
    font-size:14px;
    font-weight: 600;
    text-align: center;
    color: #000000;
    line-height: normal;
  }
}

.gbbMixProductPageCategoriesWrapper{
  width:100%;
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  .gbbMixProductPageCategoryWrapper{
    display: grid;
    grid-template-columns: 1fr;
    gap:10px;
    .gbbMixProductPageCategoryTitle{
      font-size:20px;
      font-weight: 600;
      text-align: left;
      color: #000000;
      line-height: normal;
    }
    .gbbMixProductPageCategorySelectedProductsWrapper{
      display:grid;
      grid-template-columns: repeat(3 , 1fr);
      gap:16px;
     
    }
  }
}

/**************** Procucts Modal CSS  *****************************/
.gbbMixFade{
  animation-name: gbbFade;
  animation-duration: 0.5s;
  animation-timing-function: ease-in-out;
}

.gbbMixSlide{
  animation-name: gbbSlide;
  animation-duration: 0.4s; /* Increased duration for smoothness */
  /* animation-timing-function: cubic-bezier(0.4, 0, 1, 1); */
  animation-timing-function: ease-in-out;
}


@keyframes gbbSlide {
  0% {
    transform: translateY(20%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes gbbFade {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}


.gbbMixProductsModal{
  max-width: 1600px;
  margin: 0 auto;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:0;
  border-radius: 15px 15px 0 0;
  background-color: #F4F9F9;
  transition: 0.4s height ease-in-out;
  z-index: 99;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
  overflow: hidden;
  user-select: none;
  .gbbMixModalContentWrapper{
    width:100%;
    height:100%;
    position: relative;
  }
}

.gbbMixProductsModalOpen{
  height:95vh;
}

.gbbMixProductsModalClose{
  height:0;
}


.gbbMainHeaderWrapper{
  position:relative;
  padding: 20px 0 0 0;
  width:100%;
  .gbbMixModalCloseIconWrapper{
    z-index: 999;
  }
  .gbbMixModalCloseIconMobileIconWrapper{
    z-index: 999;
  }
}

.gbbMixModalCloseIconWrapper{
  position: absolute;
  height: 38px;
  width: 38px;
  top: 10px;
  right: 10px;
  padding:2px;
  border-radius: 5px;
  cursor:pointer;
}

.gbbMixModalCloseIconMobileIconWrapper{
  display: none;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  left: 50%;
  svg{
    width:100%;
    height:100%;
  }
}

.gbbMixModalCloseIconWrapper svg{
  fill: rgba(138, 138, 138, 1);
}

.gbbMixModalCloseIconWrapper:hover{
  background-color:#d4d4d4;
}

.gbbMixCategoriesMainWrapper{
  position: relative;
  padding: 16px 20px 12px 20px;
  .gbbMixCategoriesConditionsText{
    width: 100%;
    text-align: center;
    margin-top: 18px;
    font-weight: 600;
    color: #000000;
    line-height: normal;
    font-size: 24px;
    padding:0 15px;
    word-break: break-all;
  }

  .gbbMixDiscountText{
    color:#444444;
    font-weight: 500;
    text-align: center;
    line-height: normal;
    padding:0 16px;
  }
}

.gbbMixCategoriesWrapper{
  --numberOfGridChildren:3;
  padding:0 4px;
  max-width: 60%;
  margin: 0 auto;
  display: grid;
  grid-gap: 16px;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--numberOfGridChildren) - 1)*16px)/var(--numberOfGridChildren));
  overflow-x: scroll;
  scrollbar-width: none;
  .gbbMixCategory{
    width:100%;
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    padding: 8px 24px;
    border-radius: 8px;
    color: #000000;
    cursor: pointer;
    text-align: center;
    border: 1.5px solid #000000;
  }

  .gbbMixLeftSliderBtn, .gbbMixRightSliderBtn{
    position: absolute;
    display: grid;
    background-color: #dadada;
    padding: 6px;
    border-radius: 50%;
    z-index:99999;
    cursor:pointer;
  }

  .gbbMixLeftSliderBtn{
    top:8%;
    left: 18%;
  }

  .gbbMixRightSliderBtn{
    top:8%;
    right: 18%;
  }
  
  
  .gbbMixCategorySelected{
    background-color: #000000;
    color:#ffffff;
  }
}

.gbbMixCategoriesWrapper::-webkit-scrollbar {
  display: none;
}

.gbbMixModalBody{
  position:relative;
  width:100%;
  padding: 0px 15px 0 15px;
  scrollbar-gutter: stable;
  overflow-y: auto;
  overflow-x:hidden;
}

.gbbMixProductsContainer{
  position:absolute;
  left:0;
  right:0;
  padding:0 80px;
  overflow:hidden;
  padding-bottom:174px;
  .gbbMixLoaderWrapper{
    width: 32px;
    height: 32px;
    margin: 16px auto 0 auto;
  }
  .gbbMixProductsItemsContainer{
    width:100%;
    display: grid;
    grid-template-columns: repeat(5 , 1fr);
    row-gap: 29px;
    padding-top:16px;
    column-gap: 36px;
    .gbbMixProductItem{
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      /* grid-template-rows: 2fr 0.5fr 0.5fr; */
      padding: 12px;
      row-gap:10px;
      border-radius: 12px;
      background-color: #ffffff;
      border: 1px solid #e3e3e3;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
      transition: all 0.3s cubic-bezier(.25,.8,.25,1);

      .gbbMixProductSelectSvgIconWrapper{
        display:none;
      }
      
      .gbbMixProductImageContainer{
        width: 100%;
        height:100%;
        aspect-ratio: 3 / 2.6;
        border-radius: 5px;
        background-color: #ffffff;
        overflow: hidden;
        .gbbMixProductImageContainerImg{
          width: 100%;
          height: 100%;
          object-fit: cover;
          background-color:#ffffff;
          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        }

        .gbbMixProductImageContainerImg:hover{
          scale: 1.2;
        }
      }

      .gbbMixProductsVariantAndTitleContainer{
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 5px;
        .gbbMixVariantTitle , .gbbMixSingleVariantTitle{
          text-align: center;
          color:#000000;
          font-weight:600;
          font-size:16px;
          line-height: normal;
        }
        .gbbMixVariantSelect{
          width: 100%;
          padding: 4px 6px;
          border-radius: 5px;
          .gbbMixVariantOptions{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }

      .gbbMixProductTextContainer{
        .gbbMixProductTitle{
          color:#000000;
          font-weight: 600;
          line-height: 20px;
          text-align: center;
          font-size: 16px;
        }
      }

      .gbbMixProductActionContainer{
        align-self: end;
        .gbbMixProductButtonWrapper{
          .gbbMixProductAddButton{
            padding: 6px 10px;
            line-height: normal;
            font-size:16px;
            background-color: #000000;
            color: #ffffff;
            border-radius: 5px;
            text-align: center;
            cursor: pointer;
          }
        }

        .gbbMixProductsQuantityButtonWrapper{
          display: grid;
          grid-template-columns: 1fr 2fr 1fr;
          place-items: center;
          background-color: #f1f2f3;
          border-radius: 11px;
          .gbbMixProductQuantityLabel{
            color: #000000;
            font-weight: 600;
            font-size: 16px;
            line-height: normal;
          }
          .gbbMixProductsQuantityIncrementButton, .gbbMixProductsQuantityDecrementButton {
            width: 100%;
            font-size: 15px;
            color: #ffffff;
            font-weight: 600;
            background-color: #000000;
            text-align: center;
            border-radius: 5px;
            cursor: pointer;
          }
        }
      }

      .gbbMixProductPriceWrapper{
        display: flex;
        align-items: center;
        justify-content: center;
        line-height:normal;
        gap: 6px;
        .gbbMixProductPrice{
          color: #000000;
          font-weight: 600;
        }

        .gbbMixProductComparedAtPrice{
          color: #000000;
          font-size:13px;
          text-decoration: line-through;
          font-weight: 500;
        }
      }
    }

    .gbbMixProductItemSelected{
      transition: none;
      border:2px solid #1e1e1e;
      .gbbMixProductSelectSvgIconWrapper{
        display: block;
        position: absolute;
        top: -18px;
        right: -20px;
      }
    }

    .gbbMixProductItem:hover{
      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12), 0 10px 10px rgba(0, 0, 0, 0.12);
    }
  }
}

.gbbMixModalFooter{
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 15px;
    background-color: rgba(30, 30, 30, 0.80);
    box-shadow: 93px 48px 29px 0px rgba(0, 0, 0, 0.00), 60px 31px 27px 0px rgba(0, 0, 0, 0.03), 34px 17px 23px 0px rgba(0, 0, 0, 0.10), 15px 8px 17px 0px rgba(0, 0, 0, 0.17), 4px 2px 9px 0px rgba(0, 0, 0, 0.20);
    .gbbMixFooterWrapper{
      position: relative;
      display: block;
      width: 300px;
      line-height: normal;
      border-radius: 15px;
      .gbbMixFooterContainer{
        padding-top:5px;
        .gbbMixPriceAndCartQuantityWrapper{
          background-color: #ffffff;
          position: absolute;
          top: -15px;
          transform: translateX(-50%);
          left: 50%;
          display: grid;
          grid-template-columns: 1fr 1px 1fr;
          grid-gap:10px;
          align-items: center;
          place-items: center;
          border-radius: 16px;
          padding: 4px 12px;
          box-shadow: 93px 48px 29px 0px rgba(0, 0, 0, 0.00), 60px 31px 27px 0px rgba(0, 0, 0, 0.03), 34px 17px 23px 0px rgba(0, 0, 0, 0.10), 15px 8px 17px 0px rgba(0, 0, 0, 0.17), 4px 2px 9px 0px rgba(0, 0, 0, 0.20);
          .gbbMixCartPriceWrapper{
            position: relative;
            display: grid;
            grid-template-columns: auto auto;
            gap: 6px;
            align-items: center;
            padding:0;
            border:none;
            .gbbMixCartTotalPrice{
              color: #000000;
              font-weight: 600;
            }
      
            .gbbMixCartTotalPriceDiscountApplied{
              font-size: 12px;
              text-decoration: line-through;
              font-weight: 500;
            }
      
            .gbbMixCartDiscountedPrice{
              display:block;
              color: #000000;
              font-weight: 600;
            }

            .gbbMixCartHideDiscountPrice{
              display:none;
            }
          }

          .gbbMixDivider{
            display:block;
            width:100%;
            height:100%;
            background-color: #000000;
          }

          .gbbMixCartQuantityAndIconWrapper{
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            place-items: center;
            .gbbMixCartQuantity{
              line-height: normal;
              color:#000000;
              font-weight: 600;
            }
            .gbbMixCartIcon{
              width:20px;
              height:20px;
              display: grid;
              place-items: center;
              svg{
                width:100%;
                height:100%;
              }
            }
          }
        }
        .gbbMixFooterPrevAndNextButtonWrapper{
          display: grid;
          grid-template-columns: 1fr 1fr;
          column-gap: 8px;
          padding: 20px 15px 18px 15px;
          .gbbMixFooterPrevButton , .gbbMixFooterNextButton{
            background-color: #ffffff;
            line-height: normal;
            display: grid;
            place-items: center;
            padding: 16px 8px;
            border-radius: 10px;
            color: #000000;
            font-weight: 600;
            text-transform: uppercase;
            cursor:pointer;
          }
          .gbbMixButtonDisabled{
            background-color: #898989;
            pointer-events: none;
          }
        }
      }
    }
}

.gbbMixToastNotification{
  position: fixed;
  bottom: 0;
  left: 50%;
  max-width: 400px;
  width: fit-content;
  padding: 14px 16px;
  opacity:0;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr;
  /* grid-template-columns: 1.7fr 0.2fr; */
  align-items: center;
  gap: 16px;
  transform: translateX(-50%);
  z-index: 99;
  background-color: rgba(30, 30, 30, 0.90);
  border-radius: 8px;
  box-shadow: 91px 83px 34px 0px rgba(0, 0, 0, 0.00), 58px 53px 31px 0px rgba(0, 0, 0, 0.01), 33px 30px 27px 0px rgba(0, 0, 0, 0.05), 15px 13px 20px 0px rgba(0, 0, 0, 0.09), 4px 3px 11px 0px rgba(0, 0, 0, 0.10);
  transition: all 0.5s linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%);
  .gbbMixToastText{
    color: #ffffff;
    /* justify-self: start; */
    text-align: center;
    font-size:16px;
    line-height: 18px;
  }

  .gbbMixToastCloseBtnWrapper{
    display: none;
    width: 24px;
    height: 24px;
    justify-self: end;
    cursor:pointer;
    svg{
      fill: #ffffff;
    }
  }
}

.gbbMixToastNotificationActive{
  bottom:22%;
  pointer-events: all;
  opacity: 1;
}

/* 2xl */
@media (max-width: 1536px) {
  .gbbMixProductsContainer{
    .gbbMixProductsItemsContainer{
      grid-template-columns: repeat(5, 1fr);
      gap:30px;
    }
  }
}

/* xl */
@media (max-width: 1280px) {
  .gbbMixProductsContainer{
    .gbbMixProductsItemsContainer{
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
    }
  }
}

/* lg */
@media (max-width: 1024px) {
  .gbbMixProductsContainer{
    padding:0 30px;
    .gbbMixProductsItemsContainer{
      grid-template-columns: repeat(3, 1fr);
      row-gap: 30px;
      column-gap: 30px;
    }
  }
}

/* md */
@media (max-width: 768px) {
  .gbbMixEmptyStateCardWrapper{
    grid-template-columns: repeat(2 , 1fr);
  }

  .gbbMixSkeletonsCardWrapper{
    grid-template-columns: repeat(2 , 1fr);
    grid-gap:14px;
    .gbbMixSkeletonWrapper{
      height:160px;
    }
  }

  .gbbMixProductPageCategoriesWrapper{
    .gbbMixProductPageCategoryWrapper{
      .gbbMixProductPageCategorySelectedProductsWrapper{
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 14px;
        .gbbMixEmptyStateCard{
          min-height:160px;
          .gbbMixEmptyStatCardAndTextWrapper{
            .gbbMixEmptyStateCardIconWrapper{
              width:60px;
              height:60px;
            }
            .gbbMixEmptyStateCardText{
              font-size:10px;
            }
          }
        }
        .gbbMixSelectedProductCard{
          min-height:160px;
          .gbbMixProductPageCategorySelectedPrtoductIconWrapper{
            width:22px;
            height:22px;
          }
          .gbbMixSelectedProductCardTitle{
            font-size:10px;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }

  .gbbMixModalHeader{
    .gbbMainHeaderWrapper{
      .gbbMixModalCloseIconMobileIconWrapper{
        display:block;
        /* top: 9%;
        width: 50px;
        height: 8px;
        border-radius: 5px;
        background-color: #808080c4; */
    
      }
      
      .gbbMixModalCloseIconWrapper{
        display:none;
      }
    }
  }

  .gbbMixModalBody{
    width: 100%;
    height: 76dvh;
    /* padding: 10px 15px 40% 15px; */
    overflow-y: auto;
    overflow-x:hidden;
  }

  .gbbMixCategoriesMainWrapper{
    padding: 28px 0 0 0;
    .gbbMixDiscountText{
      padding: 0px 16px 8px 16px;
    }
    .gbbMixCategoriesConditionsText{
      font-size:16px;
    }
    .gbbMixCategoriesWrapper{
      display:flex;
      margin:0 10px;
      max-width:100%;
      .gbbMixCategory{
        flex-grow: 1;
        flex-shrink: 0;
        width: 238px;
        font-size: 16px;
        padding: 5px;
      }
      .gbbMixRightSliderBtn{
        display:none;
        top:19%;
        right: 5%;
        svg{
          height:28px;
          width:28px;
        }
      }
      .gbbMixLeftSliderBtn{
        display:none;
        top:19%;
        left: 5%;
        svg{
          height:28px;
          width:28px;
        }
      }
    }
  }
  .gbbMixProductsContainer{
    padding:0 20px;
    padding-bottom:60%;
    .gbbMixProductsItemsContainer{
      grid-template-columns: repeat(2 , 1fr);
      row-gap: 20px;
      column-gap: 20px;
      .gbbMixProductItem{
        row-gap: 8px;
        .gbbMixProductSelectSvgIconWrapper{
          top: -5%;
          right: -10%;
          svg{
            width: 35px;
            height: 35px;
          }
        }
        .gbbMixProductTextContainer{
          .gbbMixProductTitle{
            font-size: 14px;
          }
        }

        .gbbMixProductPriceWrapper{
          .gbbMixProductPrice{
            font-size: 14px;
          }
          .gbbMixProductComparedAtPrice{
            font-size: 12px;
          }
          .gbbMixProductDiscountedPrice{
            font-size: 14px;
          }
        }
        .gbbMixProductsVariantAndTitleContainer{
          .gbbMixSingleVariantTitle{
            font-size: 14px;
          }
          .gbbMixVariantTitle{
            display:none;
          }

          .gbbMixVariantSelect{
            .gbbMixVariantOptions{
              font-size: 14px;
            }
          }
        }
      }
    }
  }

  .gbbMixModalFooter{
    .gbbMixFooterWrapper {
      width: 300px;
    }
  }

  .gbbMixToastNotification{
    max-width: 85%;
    width: 100%;
  }
}


/* sm */
@media (max-width: 640px) {
  /* .gbbMixProductsContainer{
    padding:0;
    .gbbMixProductsItemsContainer{
      grid-template-columns: repeat(2 , 1fr);
      row-gap: 20px;
      column-gap: 20px;
      .gbbMixProductItem{
        .gbbMixProductSelectSvgIconWrapper{
          top: -16px;
          right: -16px;
          svg{
            width: 35px;
            height: 35px;
          }
        }
        .gbbMixProductImageContainer{
          height:130px;
        }
        .gbbMixProductTextContainer{
          .gbbMixProductTitle{
            font-size: 16px;
          }
        }
        .gbbMixProductsVariantAndTitleContainer{
          .gbbMixVariantTitle{
            font-size: 16px;
          }
          .gbbMixVariantSelect{
            .gbbMixVariantOptions{
              font-size: 16px;
            }
          }
        }
      }
    }
  } */
}

/* xs */
@media (max-width: 475px) {
  /* .gbbMixEmptyStateCardWrapper{
    grid-template-columns: repeat(2 , 1fr);
  }
  .gbbMixProductPageCategoriesWrapper{
    .gbbMixProductPageCategoryWrapper{
      .gbbMixProductPageCategorySelectedProductsWrapper{
        grid-template-columns: repeat(2 , 1fr);
      }
    }
  }
  .gbbMixProductsContainer{
    padding:0;
    .gbbMixProductsItemsContainer{
      grid-template-columns: repeat(2 , 1fr);
      row-gap: 20px;
      column-gap: 20px;
      .gbbMixProductItem{
        .gbbMixProductSelectSvgIconWrapper{
          top: -16px;
          right: -16px;
          svg{
            width: 35px;
            height: 35px;
          }
        }
        .gbbMixProductImageContainer{
          height:130px;
        }
        .gbbMixProductTextContainer{
          .gbbMixProductTitle{
            font-size: 16px;
          }
        }
        .gbbMixProductsVariantAndTitleContainer{
          .gbbMixVariantTitle{
            font-size: 16px;
          }
          .gbbMixVariantSelect{
            .gbbMixVariantOptions{
              font-size: 16px;
            }
          }
        }
      }
    }
  } */
}