/*!***********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./cartridges/app_storefront_core/cartridge/client/default/scss/cart.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* stylelint-disable */
/* stylelint-enable */
/*
 * Set up a screen-wide ::before element behind its parent, to apply a colored background on a block.
 *
 * Usage :
 * .block {
 *    @include full-screen-background;
 *
 *    position: relative;
 * }
 */
/*
Usage

.block {
    @include arrow(right,red,5px,auto,auto,0,0,auto,-5px);

    width: 50px;
    height: 50px;
    position: relative;
}
*/
/*
Usage
    @include ratio-holder(364/300)
    Height/Width
*/
/* Mixin to cut off the rest of one-line (default) or multiline text with dots */
/* A small function allowing skipping base64 encoding
** and simply pasting the SVG markup right in the CSS.
** @author Jakob Eriksen
** @link http://codepen.io/jakob-e/pen/doMoML
** @param {String} $svg - SVG image to encode
** @return {String} - Encoded SVG data uri
*/
/* Replace substring 'fillColor' to real color from variables */
/**
 * Mixin to add icon as pseudo-element.
 */
/* stylelint-disable */
/* stylelint-enable */
/* stylelint-disable */
/*md

# Icons

## Icons example:

```html_example

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">account:</span>
    <i class="fi fi--account" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">arrow-down:</span>
    <i class="fi fi--arrow-down" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">arrow-left:</span>
    <i class="fi fi--arrow-left" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">arrow-right:</span>
    <i class="fi fi--arrow-right" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">arrow-up:</span>
    <i class="fi fi--arrow-up" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">back-to-top:</span>
    <i class="fi fi--back-to-top" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">bag:</span>
    <i class="fi fi--bag" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">bin:</span>
    <i class="fi fi--bin" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">checkbox:</span>
    <i class="fi fi--checkbox" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">checkbox-checked:</span>
    <i class="fi fi--checkbox-checked" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">close:</span>
    <i class="fi fi--close" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">heart:</span>
    <i class="fi fi--heart" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">language:</span>
    <i class="fi fi--language" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">location:</span>
    <i class="fi fi--location" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">minus:</span>
    <i class="fi fi--minus" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">money:</span>
    <i class="fi fi--money" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">phone:</span>
    <i class="fi fi--phone" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">plus:</span>
    <i class="fi fi--plus" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">share:</span>
    <i class="fi fi--share" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">track-order:</span>
    <i class="fi fi--track-order" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">whatsapp:</span>
    <i class="fi fi--whatsapp" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">alert:</span>
    <i class="fi fi--alert" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">card:</span>
    <i class="fi fi--card" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">check:</span>
    <i class="fi fi--check" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">download:</span>
    <i class="fi fi--download" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">eye:</span>
    <i class="fi fi--eye" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">facebook:</span>
    <i class="fi fi--facebook" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">filter:</span>
    <i class="fi fi--filter" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">gift:</span>
    <i class="fi fi--gift" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">instagram:</span>
    <i class="fi fi--instagram" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">link:</span>
    <i class="fi fi--link" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">logout:</span>
    <i class="fi fi--logout" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">mail:</span>
    <i class="fi fi--mail" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">menu:</span>
    <i class="fi fi--menu" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">pay:</span>
    <i class="fi fi--pay" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">pinterest:</span>
    <i class="fi fi--pinterest" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">radio:</span>
    <i class="fi fi--radio" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">radio-checked:</span>
    <i class="fi fi--radio-checked" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">search:</span>
    <i class="fi fi--search" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">tag:</span>
    <i class="fi fi--tag" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">twitter:</span>
    <i class="fi fi--twitter" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">wishlist-filled:</span>
    <i class="fi fi--wishlist-filled" aria-hidden="true"></i>
</div>

<div class="b-icon-example m-margin-b-10">
    <span class="b-icon-example__label d-inline-block m-width-200">youtube:</span>
    <i class="fi fi--youtube" aria-hidden="true"></i>
</div>

```
*/
:root {
  --icon--account: "";
  --icon--arrow-down: "";
  --icon--arrow-left: "";
  --icon--arrow-right: "";
  --icon--arrow-up: "";
  --icon--back-to-top: "";
  --icon--bag: "";
  --icon--bin: "";
  --icon--checkbox: "";
  --icon--checkbox-checked: "";
  --icon--close: "";
  --icon--heart: "";
  --icon--language: "";
  --icon--location: "";
  --icon--minus: "";
  --icon--money: "";
  --icon--phone: "";
  --icon--plus: "";
  --icon--share: "";
  --icon--track-order: "";
  --icon--whatsapp: "";
  --icon--alert: "";
  --icon--card: "";
  --icon--check: "";
  --icon--download: "";
  --icon--eye: "";
  --icon--facebook: "";
  --icon--filter: "";
  --icon--gift: "";
  --icon--instagram: "";
  --icon--link: "";
  --icon--logout: "";
  --icon--mail: "";
  --icon--menu: "";
  --icon--pay: "";
  --icon--pinterest: "";
  --icon--radio: "";
  --icon--radio-checked: "";
  --icon--search: "";
  --icon--tag: "";
  --icon--twitter: "";
  --icon--wishlist-filled: "";
  --icon--youtube: "";
}

.b-total {
  padding-top: 2rem;
}
@media (min-width: 768px) {
  .b-total {
    padding: 2rem 2rem;
    background-color: #f8f8f8;
  }
}
@media (min-width: 1024px) {
  .b-total {
    padding: 2rem;
  }
}
@media (min-width: 1440px) {
  .b-total {
    padding: 2rem 2rem;
  }
}
@media (min-width: 1512px) {
  .b-total {
    padding: 2rem;
  }
}
.b-total__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  .b-total__title {
    font-size: 1rem;
    margin-bottom: 2rem;
  }
}

.b-total-sum__text, .b-total-sum__title {
  margin-bottom: 0;
}
.b-total-sum__text {
  font-size: 1rem;
  font-weight: 700;
}
.b-total-sum__row {
  margin-bottom: 1rem;
  color: #231f20;
}
.b-total-sum__row--grand {
  margin-bottom: 2rem;
}
.b-total-sum__divider {
  margin: 0;
  padding-top: 1rem;
  background-color: transparent;
  border-top: 0.0625rem dashed #8a8d8e;
}

.b-coupon-asign {
  position: relative;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  margin-bottom: 1rem;
  background-color: rgba(138, 141, 142, 0.2);
  border-radius: 8px;
  background-color: #EFFFFA;
  border-radius: 8px;
  border: 1px dashed #4DE0B4;
  color: #32AD88;
}
.b-coupon-asign__remove {
  background-color: transparent;
  border: 0;
  padding: 0;
}
.b-coupon-asign__cost {
  font-size: 1rem;
  font-weight: 700;
}
.b-coupon-asign__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.b-coupon-code__field {
  position: relative;
}
.b-coupon-code__field .fi--tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.25rem;
  color: #8a8d8e;
}
.b-coupon-code__field:not(.is-valid):not(.is-invalid) .b-coupon-code__link--empty {
  display: block;
}
.b-coupon-code__field.is-invalid {
  border: 0;
}
.b-coupon-code__field.is-valid .b-coupon-code__link--success, .b-coupon-code__field.is-valid .b-coupon-code__icon {
  display: block;
  color: #209e43;
}
.b-coupon-code__field.is-invalid .b-coupon-code__link--error, .b-coupon-code__field.is-invalid .b-coupon-code__icon {
  display: block;
  color: #e03e52;
}
.b-coupon-code__input.form-control {
  padding-right: 3rem;
  padding-left: 4rem;
  color: #231f20;
}
@media (max-width: 1023.98px) {
  .b-coupon-code__input.form-control {
    background-color: transparent;
  }
}
.is-invalid .b-coupon-code__input.form-control::-webkit-input-placeholder {
  color: #e03e52;
}
.is-invalid .b-coupon-code__input.form-control::-moz-placeholder {
  color: #e03e52;
}
.is-invalid .b-coupon-code__input.form-control:-ms-input-placeholder {
  color: #e03e52;
}
.is-invalid .b-coupon-code__input.form-control::-ms-input-placeholder {
  color: #e03e52;
}
.is-invalid .b-coupon-code__input.form-control::placeholder {
  color: #e03e52;
}
.b-coupon-code__input.form-control:not(:focus) {
  border-color: rgba(138, 141, 142, 0.2);
}
.b-coupon-code__input.form-control::-webkit-input-placeholder {
  color: #8a8d8e;
}
.b-coupon-code__input.form-control::-moz-placeholder {
  color: #8a8d8e;
}
.b-coupon-code__input.form-control:-ms-input-placeholder {
  color: #8a8d8e;
}
.b-coupon-code__input.form-control::-ms-input-placeholder {
  color: #8a8d8e;
}
.b-coupon-code__input.form-control::placeholder {
  color: #8a8d8e;
}
.b-coupon-code__link-wrapper {
  position: absolute;
  top: 50%;
  left: 1rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: #fff;
  padding-right: 0.5rem;
}
@media (max-width: 1023.98px) {
  .b-coupon-code__link-wrapper {
    background-color: transparent;
  }
}
.b-coupon-code__link-wrapper .btn-link-text,
.b-coupon-code__link-wrapper .btn-link-text-u {
  display: inline-block;
  background-color: transparent;
  border: 0;
  padding: 0;
  font-size: 0.875rem;
}
.b-coupon-code__link {
  display: none;
}
.b-coupon-code__link-icon {
  font-size: 1.25rem;
  padding-right: 0.5rem;
}

.b-cart {
  background-color: #fbfbfb;
}
.b-cart[data-cart-stage] .b-cart__header {
  display: none;
}
.b-cart[data-cart-stage] .b-cart__btn--empty {
  display: none;
}
.b-cart[data-cart-stage] .b-cart__list {
  display: none;
}
.b-cart[data-cart-stage=full] .b-cart__header--full {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.b-cart[data-cart-stage=full] .b-cart__list {
  display: block;
}
.b-cart .b-product-item {
  -webkit-box-shadow: 0 0 17px 3px #f7f7f7;
          box-shadow: 0 0 17px 3px #f7f7f7;
  background: #fff;
  margin: 12px 0;
  padding: 16px;
  border-radius: 10px;
}
.b-cart[data-cart-stage=empty] .b-cart__header--empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #8a8d8e;
  text-align: center;
}
@media (min-width: 768px) {
  .b-cart[data-cart-stage=empty] .b-cart__header--empty {
    margin: 4rem 0 1.5rem;
  }
}
.b-cart[data-cart-stage=empty] .b-cart__header--empty .b-cart__header-title {
  margin: 0;
}
.b-cart[data-cart-stage=empty] .b-cart__header--empty .b-cart__header-text {
  font-size: 1rem;
}
.b-cart[data-cart-stage=empty] .b-cart__btn--empty {
  display: block;
}
@media (max-width: 767.98px) {
  .b-cart[data-cart-stage=empty] .b-total {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .b-cart[data-cart-stage=empty] .b-cart__body {
    padding: 2rem 1rem;
  }
}
.b-cart[data-cart-stage=empty] .b-cart__body .b-cart__body-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (max-width: 767.98px) {
  .b-cart[data-cart-stage=empty] .b-cart__body .b-cart__body-container {
    height: calc(100vh - var(--header-height) - 4rem);
  }
}
.b-cart[data-cart-stage=empty] .b-cart__body .b-cart__btn {
  width: 100%;
}
@media (min-width: 768px) {
  .b-cart[data-cart-stage=empty] .b-cart__body .b-cart__btn {
    width: auto;
  }
}
.b-cart[data-cart-stage=empty] .b-cart__body .coupon-wrapper-card {
  display: none;
}
@media (min-width: 1024px) {
  .b-cart__container {
    max-width: 1512px;
  }
}
.b-cart__body {
  padding-top: 2rem;
}
@media (min-width: 768px) {
  .b-cart__body {
    padding: 4rem 2rem;
  }
}
@media (min-width: 1024px) {
  .b-cart__body {
    padding: 4rem;
  }
}
@media (min-width: 1440px) {
  .b-cart__body {
    padding: 4rem 2rem;
  }
}
@media (min-width: 1512px) {
  .b-cart__body {
    padding: 4rem;
  }
}
.b-cart__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.b-cart__header-title, .b-cart__header-quantity {
  font-size: 1rem;
  line-height: 2.8125rem;
}
@media (min-width: 768px) {
  .b-cart__header-title, .b-cart__header-quantity {
    font-size: 1.125rem;
    line-height: 3.75rem;
  }
}
.b-cart__header-title {
  font-weight: 700;
  margin: 0 0 0 0.5rem;
}
.b-cart__btn {
  color: #fff;
}
.b-cart .b-product-item--bundle {
  border-bottom: 0;
}
.b-cart .b-product-item__wrapper {
  width: 100%;
  position: relative;
  -ms-flex-wrap: unset;
      flex-wrap: unset;
}
@media (min-width: 768px) {
  .b-cart .b-product-item__title {
    margin-bottom: 0.5rem;
  }
}
@media (min-width: 768px) {
  .b-cart .b-product-item__number {
    margin-bottom: 1rem;
  }
}
@media (min-width: 768px) {
  .b-cart .b-product-item__row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column wrap;
            flex-flow: column wrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.b-cart .b-product-item__quantity-form {
  width: 8rem;
}
@media (max-width: 427.98px) {
  .b-cart .b-product-item__quantity-form {
    width: 7.5625rem;
  }
}
@media (min-width: 768px) {
  .b-cart .b-product-item__quantity-form {
    width: 7.375rem;
  }
}
.b-cart .b-product-item__quantity-form .quantity-form__number {
  background-color: transparent;
}
.b-cart .b-product-item__form-check {
  width: 100%;
  margin-top: 1.5rem;
}
@media (min-width: 1024px) {
  .b-cart .b-product-item__form-check {
    background-color: transparent;
    padding: 0;
    text-align: left;
    max-width: 12.5rem;
  }
}
.b-cart .b-product-item__remove-line-item .remove-product {
  text-decoration: underline;
  margin-left: 15px;
  font-size: initial !important;
}
.b-cart .b-product-item__remove-line-item .remove-product i {
  display: none;
}
.b-cart .b-product-item__image.item-image {
  background-color: #fbfbfb;
  border-radius: 5px;
}
@media (max-width: 427.98px) {
  .b-cart .b-product-item__image.item-image {
    width: 5.625rem;
    height: 5.625rem;
  }
}
.b-cart .b-product-item__image.item-image img {
  mix-blend-mode: multiply;
}
.b-cart .b-product-item__image.item-image .b-pdpmain__badges {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.b-cart .b-product-item__image.item-image .b-badges__badge:not(.b-badges__small) {
  padding: 2px 10px;
  font-size: 9px;
  border-radius: 0 0 8px 8px;
}
.b-cart .b-product-item__attributes {
  margin-bottom: 0.5rem;
}
.b-cart .b-product-item__price {
  text-align: right;
  width: 81px;
}
@media (min-width: 768px) {
  .b-cart .b-product-item__price {
    margin-top: 2rem;
  }
}
.b-cart .b-product-item__price .b-price {
  display: block;
  margin-bottom: -0.5rem;
}
.b-cart .b-product-item__price .b-price__type-list .b-price__value {
  font-size: 1rem;
}
.b-cart .b-badges {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

#PromoPayTheHighestModal .modal-content {
  border: 1px solid #CD1A76;
}
#PromoPayTheHighestModal .modal-content h4 {
  color: #CD1A76;
}
#PromoPayTheHighestModal .modal-content button {
  background-image: -webkit-gradient(linear, right top, left top, from(#ff8c52), to(#7000FF));
  background-image: linear-gradient(to left, #ff8c52, #7000FF);
  border: navajowhite;
  border-radius: 35px;
  color: #fff;
  padding: 6px 40px;
}
#PromoPayTheHighestModal .modal-content a {
  display: inline-block;
  text-decoration: underline;
}

.form-steps {
  display: block;
  width: 100%;
  position: relative;
  margin: 40px 0;
  margin: 12px 0;
}
.form-steps p strong {
  color: #ff4d4d;
}
.form-steps p.completed strong {
  color: #008240;
}
.form-steps:after {
  content: "";
  display: table;
  clear: both;
}
.form-steps__badge {
  background: #65289B;
  color: #fff;
  display: table;
  padding: 1px 20px;
  border-radius: 25px;
}
.form-steps__header {
  background-color: #f8855a;
  color: #fff;
  padding: 5px 0px;
  border-radius: 10px 0 0px 0;
  text-align: center;
}
.form-steps__header strong {
  color: #fff !important;
}
.form-steps__header {
  background-image: -webkit-gradient(linear, left top, right top, from(#ff8c52), to(#7000FF));
  background-image: linear-gradient(to right, #ff8c52, #7000FF);
}
.form-steps__header.completed {
  background: #32ad88;
  border-radius: 0 0 10px 10px;
}
.form-steps__content {
  padding: 20px;
  -webkit-box-shadow: 0 0 17px 3px #f7f7f7;
  box-shadow: 0 0 17px 3px #f7f7f7;
  background: #fff;
  border-radius: 0x;
  min-width: 280px;
}

.form-steps__item {
  padding: 0;
  position: relative;
  display: block;
  float: right;
  width: 50%;
  text-align: right;
}
.form-steps__item.text-center .form-steps__item-icon {
  margin-left: auto;
  margin-right: auto;
}
.form-steps__item:last-child {
  text-align: left;
  direction: ltr;
}

.form-steps__item-content {
  display: inline-block;
}

.form-steps__item-icon {
  background: #f0f0f0;
  color: #000;
  display: block;
  border-radius: 100%;
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: 0 0 10px 0;
  position: relative;
  font-size: 13px;
  font-weight: 700;
  z-index: 2;
  -webkit-box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.form-steps__item-text {
  font-size: 13px;
  color: #000;
  font-weight: 500;
  max-width: 115px;
  display: block;
  line-height: 1.5;
  direction: rtl;
}

.form-steps__item-line {
  display: inline-block;
  height: 8px;
  width: 100%;
  background: #f0f0f0;
  float: right;
  position: absolute;
  right: 0;
  top: 17px;
  z-index: 1;
  -webkit-box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.1);
}

.form-steps__item--active .form-steps__item-icon {
  color: #ff0019;
}
.form-steps__item--active .form-steps__item-text {
  color: #ff0019;
}
.form-steps__item--active .form-steps__item-line {
  background: #f0f0f0;
}

.form-steps__item--completed .form-steps__item-line {
  background: #32ad88;
}
.form-steps__item--completed .form-steps__item-text {
  color: #32ad88;
}
.form-steps__item--completed .form-steps__item-icon {
  background-color: #30a683;
  background-image: url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDkuMTIgNyI+PHBhdGggZmlsbD0iIzMyQUQ4OCIgZD0iTTkuMTIgMS4wNkw4LjA2IDAgMy4xOCA0Ljg4IDEuMDYgMi43NiAwIDMuODIgMy4xOCA3bDUuOTQtNS45NHoiLz48L3N2Zz4=);
  background-image: url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDkuMTIgNyI+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTkuMTIgMS4wNkw4LjA2IDAgMy4xOCA0Ljg4IDEuMDYgMi43NiAwIDMuODIgMy4xOCA3bDUuOTQtNS45NHoiLz48L3N2Zz4=);
  color: transparent;
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: center center;
  width: 40px;
  height: 40px;
  line-height: 40px;
}

@media only screen and (max-width: 767px) {
  .form-steps__item-icon {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
  .form-steps__item--completed .form-steps__item-icon {
    width: 30px;
    height: 30px;
    line-height: 30px;
  }
  .form-steps__item-line {
    top: 12px;
  }
}
.coupon-wrapper-card {
  -webkit-box-shadow: 0 0 17px 3px #f7f7f7;
  box-shadow: 0 0 17px 3px #f7f7f7;
  background: #fff;
  margin: 12px 0;
  padding: 16px;
  border-radius: 10px;
}

.b-product-item.bag-card {
  padding: 0;
  background-image: -webkit-gradient(linear, right top, left top, from(#f1e6ff), to(#ffcfb6));
  border-radius: 0;
}
.b-product-item.bag-card .item-image {
  background: transparent;
}
.b-product-item.bag-card .item-image img {
  mix-blend-mode: normal;
}
.b-product-item.bag-card .line-item-unit-price,
.b-product-item.bag-card .product-wishlist,
.b-product-item.bag-card .b-product-item__quantity {
  display: none;
}
.b-product-item.bag-card .b-product-item__image.item-image {
  width: 4.5rem;
  height: 3rem;
}
.b-product-item.bag-card .b-product-item__image.item-image img {
  width: 87px;
  overflow: hidden;
  margin-left: 8px;
  margin-top: -22px;
}
.b-product-item.bag-card .b-product-item__image.item-image .b-product-item__line-item-name {
  font-size: 16px;
}
.b-product-item.bag-card .b-product-item__content {
  width: 100%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.b-product-item.bag-card .b-product-item__content .b-product-item__row {
  margin-right: auto;
}

.addBagToOrder {
  padding: 10px 20px;
  background-image: -webkit-gradient(linear, right top, left top, from(#f1e6ff), to(#ffcfb6));
  cursor: pointer;
  margin-top: 10px;
}
.addBagToOrder label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  margin-bottom: 0;
  cursor: pointer;
}
.addBagToOrder label::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0px;
  border: 1px solid rgb(255, 255, 255);
  background-color: #eee;
  border-radius: 50%;
}
.addBagToOrder label .img-wrap {
  width: 59px;
  overflow: hidden;
  margin-right: 8px;
  margin-top: -32px;
}
.addBagToOrder label .details .title {
  font-size: 14px;
  font-weight: 700;
}
.addBagToOrder label .details .caption {
  font-size: 12px;
  color: rgba(37, 40, 46, 0.5);
}
.addBagToOrder .checkbox {
  display: none;
}
.addBagToOrder .checkbox:checked + label::after {
  content: "";
  background: -webkit-gradient(linear, right top, left top, from(#ff6616), to(#9710ff));
  background: linear-gradient(-90deg, #ff6616 0%, #9710ff 100%);
  border: 1px solid #9710ff;
}

.gift-box button {
  background-color: #7000FF;
  border-radius: 5px;
  border: none;
  color: #fff;
  padding: 5px 15px;
}

html[lang=ar] .modal-content {
  direction: rtl;
}

.choose-bonus-product-dialog .carousel-indicators {
  display: none;
}

.not-available,
.disabled-div {
  pointer-events: none; /* Prevents all mouse interactions */
  opacity: 0.5; /* Optional: makes the div look visually disabled */
  cursor: not-allowed; /* Optional: changes cursor to 'not-allowed' */
}

#chooseBonusProductModal .carousel {
  max-width: 150px;
  margin: auto;
  mix-blend-mode: multiply;
}

@media screen and (max-width: 768px) {
  #chooseBonusProductModal .carousel {
    width: 90px;
  }
  #chooseBonusProductModal .product-name {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 600;
    margin: 0 8px;
  }
  .gift-box button, .gift-box p {
    font-size: 13px;
  }
  .gift-box h4 {
    font-size: 15px;
    line-height: 1;
  }
  .gift-box img {
    width: 50px;
  }
}