.button.button--primary:before {
    background-color: unset;
}

#tbiButton{
    background: #f60;
    color: #fff;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border: 1px solid #f60;
    align-items: center;
    margin-top: 0px !important;
    height: 52px;
    max-width: 100% !important;
    width: 100%;
    padding: 4px 8px;
    font-size: 13px;
    width: 100% !important;
    padding: 2px 8px;
    box-sizing: border-box;
    font-weight: 500;
    border-radius: 14px;
}

/* @media (min-width: 1000px) {
  #tbiButton {
    max-width: 440px;
  }
}

@media (max-width: 750px) {
  #tbiButton {
    max-width: 440px;
  }
} */

#tbiButton .tbiCiSubtext {
    display: block;
    width: 100%;
    text-align: center;
}

#tbiCartButton {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: #f60 !important;
    color: #fff;
    cursor: pointer;
    border: 1px solid #f60 !important;
    height: 52px;
    float: right;
    font-size: 14px;
    box-sizing: border-box;
    transition: 0.3s linear all;
    width: 100%;
    padding: 2px 8px;
    text-decoration: none;
    box-shadow: none !important;
    opacity: 1 !important;
    /* padding-bottom: 7px; */
    font-weight: 500;
}

#tbiCartButton:after {
    box-shadow: none !important;
}

@media (max-width: 512px) {
  #tbiCartButton {
    margin-top: 16px;
    margin-bottom: 16px;
  }
}

#tbiCartButton .tbiCiSubtext {
    display: block;
    width: 100%;
    text-align: center;
}

#tbiMiniCartButton {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: #f60;
    color: #fff;
    cursor: pointer;
    border: 1px solid #f60;
    border-radius: 14px;
    font-weight: 500;
    font-size: 14px;
    margin: 15px auto 0px auto;
    min-width: 162px;
    width: 100%;
    height: 52px;
    padding-top: 2px;
    padding-bottom: 5px;
    margin-top: 0px;
}

#tbiMiniCartButton .tbiCiSubtext {
    display: block;
    width: 100%;
    text-align: center;
}

#tbiCheckoutButton {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: #f60;
    color: #fff;
    cursor: pointer;
    border: 1px solid #f60;
    border-radius: 10px;
    height: 48px;
    width: 100%;
    margin-top: 8px;
    padding: 4px 8px;
    font-size: 12px;
    text-decoration: none;
    box-shadow: none !important;
    padding-top: 2px;
    padding-bottom: 5px;
}

@media (max-width: 512px) {
  #tbiCheckoutButton {
    width: 100%;
  }
}

#tbiCheckoutButton .tbiCiSubtext {
    display: block;
    width: 100%;
    text-align: center;
}

#tbi_cart_button {
    margin-top: 10px!important;
}

.tbiLogo {
    max-width: 70px !important;
    /* height: auto; */
    height: 25px !important;
    margin-left: 5px !important;
    align-self: unset;
    display: block;
}

/*
  #tbiPopUpContainer is a native <dialog> (see initializePopup() in main.js), opened
  with showModal() so it is promoted into the browser's top layer. This is required
  because some merchant themes (e.g. mebelipremium.com's Shopify "Horizon" theme)
  render their own overlays - cart drawers, quick-view/zoom dialogs - as native
  <dialog> elements too, and the top layer always paints above every ordinarily
  z-indexed element, no matter how high. As a plain fixed-position <div>, no z-index
  value here could ever win against an already-open theme dialog.

  IMPORTANT: "display" must stay scoped to the [open] attribute, not put on the bare
  #tbiPopUpContainer selector. Closed <dialog> elements are hidden by a NORMAL
  (non-!important) user-agent rule - dialog:not([open]) { display: none } - which any
  author rule of equal-or-higher specificity overrides outright, regardless of
  !important. An unscoped "display: flex" here would make the dialog visible the
  instant it's created, before showModal() is ever called.
*/
#tbiPopUpContainer {
    position: fixed;
    z-index: 9999999999;
    width: 100%;
    height: 100%;
    background: rgba(51, 51, 51, .3);
    top: 0;
    justify-content: center;
    align-items: center;
    border: none;
    padding: 0;
    margin: 0;
    max-width: none;
    max-height: none;
}

/* Only takes effect once showModal() has applied [open]; stays correctly hidden
   (via the UA default above) until then. */
#tbiPopUpContainer[open] {
    display: flex;
}

/* Suppress the native <dialog> backdrop so it doesn't double up with the
   rgba(51,51,51,.3) dimming #tbiPopUpContainer already paints itself. */
#tbiPopUpContainer::backdrop {
    background: transparent;
}

#iframeContainer {
    width: 768px;
    height: 90vh;
    max-width: 100%;
    min-height: 400px;
    max-height: 720px;
    position: relative;
    background: #f4f4f4;
    border-radius: 24px;
    z-index: 99999999999;
}

#tbiPopUpIframe {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    z-index: 99999999999;
}

#tbiLoading {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    max-width: 40%;
}

.add_to_cart_holder{
    margin-bottom: 50px;
}

.cart__ctas{
    flex-direction: column;
}

@media (max-width:768px) {
}

.next-prev-buttons{
    display: flex;
    flex-flow: column;
}

.payment-step-wrapper .btn{
   margin-left:0;
}

.cart-section .cart-buttons .col-6:nth-child(2) {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
}