[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_js/_debug.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
/* eslint-disable no-console */
class debug {
  constructor({
    logo = '<img src="https://via.placeholder.com/160x60">',
  } = {}) {
    this.classOn = 'debug-on'

    this.logo = logo
    this.headerHTML = `<header class="main-header debug-elem"> <div class="container"> <div class="header-link"> <a href="/" title="add more products" class="buy-more-link link">Continue shopping</a> <a href="/checkout/#/cart" title="back to cart" class="back-cart-link link">Back to Cart</a> </div><a href="/" title="Go to homepage" class="logo">${this.logo}</a> </div></header>`
    this.footerHTML = `<footer class="main-footer debug-elem"> <div class="container"> <svg class="vtex-logo" height="40" viewBox="0 0 115 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M48.2904 13.4951H20.8256C18.6959 13.4951 17.3322 15.7303 18.3287 17.5885L21.076 22.7244H16.0956C15.7802 22.7245 15.4701 22.805 15.1955 22.9581C14.9209 23.1112 14.6909 23.3318 14.528 23.5984C14.3651 23.865 14.2746 24.1686 14.2654 24.4799C14.2562 24.7911 14.3286 25.0994 14.4756 25.375L23.3121 41.8868C23.4679 42.1772 23.7009 42.4202 23.986 42.5897C24.2712 42.7592 24.5977 42.8488 24.9306 42.8488C25.2635 42.8488 25.59 42.7592 25.8752 42.5897C26.1603 42.4202 26.3933 42.1772 26.5491 41.8868L28.949 37.4266L31.9598 43.0541C33.0195 45.0333 35.8901 45.037 36.9535 43.0599L50.7197 17.4848C51.6927 15.6759 50.365 13.4951 48.2904 13.4951ZM35.9533 24.4223L30.0175 35.4525C29.9137 35.6456 29.7587 35.8072 29.5689 35.9198C29.3792 36.0325 29.162 36.0921 28.9405 36.0921C28.7191 36.0921 28.5019 36.0325 28.3122 35.9198C28.1224 35.8072 27.9674 35.6456 27.8636 35.4525L21.9851 24.4687C21.8868 24.2856 21.8382 24.0805 21.8437 23.8734C21.8493 23.6662 21.909 23.464 22.017 23.2863C22.125 23.1085 22.2776 22.9614 22.4601 22.859C22.6426 22.7566 22.8488 22.7025 23.0587 22.7019H34.9061C35.1107 22.7019 35.3119 22.7542 35.49 22.8537C35.6682 22.9532 35.8172 23.0965 35.9226 23.2697C36.028 23.4429 36.0862 23.64 36.0916 23.842C36.097 24.044 36.0493 24.2439 35.9533 24.4223Z" fill="#F71963" style=" /* fill: #000; */"></path><path d="M77.5031 25.3597H74.4988V35.5249C74.4986 35.6176 74.4613 35.7063 74.3949 35.7718C74.3286 35.8373 74.2387 35.8742 74.1448 35.8744H71.8279C71.7341 35.8742 71.6442 35.8373 71.5779 35.7718C71.5115 35.7063 71.4742 35.6176 71.474 35.5249V25.3597H68.4521C68.4066 25.3616 68.3612 25.3544 68.3186 25.3385C68.2759 25.3227 68.2369 25.2986 68.2039 25.2677C68.1709 25.2367 68.1445 25.1995 68.1264 25.1583C68.1082 25.117 68.0986 25.0726 68.0981 25.0277V23.2297C68.0986 23.1847 68.1082 23.1403 68.1264 23.0991C68.1445 23.0578 68.1709 23.0206 68.2039 22.9897C68.2369 22.9587 68.2759 22.9346 68.3186 22.9188C68.3612 22.903 68.4066 22.8958 68.4521 22.8976H77.5023C77.5961 22.8933 77.6879 22.9257 77.7575 22.988C77.8271 23.0502 77.869 23.1371 77.8739 23.2297V25.0284C77.8688 25.1207 77.827 25.2073 77.7575 25.2693C77.6881 25.3314 77.5966 25.3639 77.5031 25.3597Z" fill="#F71963"></path><path d="M87.1474 35.8013C86.5284 35.8883 85.487 36.0283 83.577 36.0283C81.2953 36.0283 79.2795 35.4519 79.2795 32.2742V26.4742C79.2795 23.2965 81.3137 22.7375 83.5946 22.7375C85.5039 22.7375 86.5284 22.8775 87.1474 22.9645C87.3949 22.9993 87.5014 23.087 87.5014 23.3139V24.9401C87.5012 25.0327 87.4638 25.1215 87.3975 25.187C87.3312 25.2525 87.2412 25.2894 87.1474 25.2896H83.4184C82.5871 25.2896 82.2867 25.5687 82.2867 26.4771V28.0663H87.0064C87.1002 28.0665 87.1902 28.1034 87.2565 28.1689C87.3228 28.2344 87.3602 28.3231 87.3604 28.4158V30.0746C87.3602 30.1672 87.3228 30.2559 87.2565 30.3214C87.1902 30.3869 87.1002 30.4238 87.0064 30.424H82.2867V32.2749C82.2867 33.1826 82.5871 33.4625 83.4184 33.4625H87.1474C87.2412 33.4627 87.3312 33.4995 87.3975 33.565C87.4638 33.6305 87.5012 33.7193 87.5014 33.8119V35.4359C87.5014 35.6614 87.3949 35.7665 87.1474 35.8013Z" fill="#F71963"></path><path d="M100.491 35.8709H97.6795C97.4497 35.8709 97.3432 35.7984 97.2198 35.6091L94.7818 31.7877L92.5728 35.525C92.4487 35.7346 92.3253 35.8745 92.1322 35.8745H89.515C89.338 35.8745 89.2499 35.7694 89.2499 35.6476C89.2533 35.6048 89.2653 35.5632 89.2851 35.525L93.1162 29.2175L89.2455 23.2283C89.2258 23.1963 89.2138 23.1604 89.2102 23.1232C89.2165 23.059 89.2476 22.9997 89.2969 22.9575C89.3462 22.9153 89.4101 22.8933 89.4753 22.8963H92.3224C92.517 22.8963 92.6587 23.071 92.763 23.2283L95.0256 26.7554L97.2154 23.2283C97.3035 23.071 97.4629 22.8963 97.656 22.8963H100.273C100.338 22.8933 100.402 22.9153 100.452 22.9575C100.501 22.9997 100.532 23.059 100.538 23.1232C100.535 23.1604 100.523 23.1963 100.503 23.2283L96.6514 29.2545L100.668 35.525C100.7 35.5783 100.718 35.6382 100.721 35.6998C100.722 35.8013 100.633 35.8709 100.491 35.8709Z" fill="#F71963"></path><path d="M63.8595 22.9324C63.7964 22.9325 63.7352 22.9543 63.6865 22.9939C63.6377 23.0336 63.6044 23.0887 63.5922 23.1499L61.0249 32.5306C60.9896 32.7228 60.9368 32.7924 60.7774 32.7924C60.6181 32.7924 60.5652 32.7199 60.5299 32.5306L57.9597 23.1477C57.9475 23.0865 57.9142 23.0314 57.8654 22.9918C57.8167 22.9521 57.7555 22.9303 57.6924 22.9302H55.1655C55.1244 22.9302 55.0838 22.9394 55.0468 22.9571C55.0098 22.9747 54.9773 23.0004 54.9518 23.0322C54.9262 23.064 54.9083 23.101 54.8993 23.1406C54.8902 23.1802 54.8904 23.2213 54.8996 23.2608C54.8996 23.2608 58.0353 34.0191 58.0698 34.1249C58.4884 35.4067 59.504 36.0193 60.7965 36.0193C62.0273 36.0193 63.1017 35.3777 63.5217 34.1285C63.5716 33.9835 66.6376 23.2601 66.6376 23.2601C66.6467 23.2206 66.6468 23.1796 66.6377 23.1401C66.6286 23.1006 66.6106 23.0636 66.5851 23.032C66.5595 23.0003 66.5271 22.9747 66.4902 22.957C66.4532 22.9394 66.4128 22.9302 66.3717 22.9302L63.8595 22.9324Z" fill="#F71963"></path><path d="M48.2904 13.4951H20.8256C18.6959 13.4951 17.3322 15.7303 18.3287 17.5885L21.076 22.7244H16.0956C15.7802 22.7245 15.4701 22.805 15.1955 22.9581C14.9209 23.1112 14.6909 23.3318 14.528 23.5984C14.3651 23.865 14.2746 24.1686 14.2654 24.4799C14.2562 24.7911 14.3286 25.0994 14.4756 25.375L23.3121 41.8868C23.4679 42.1772 23.7009 42.4202 23.986 42.5897C24.2712 42.7592 24.5977 42.8488 24.9306 42.8488C25.2635 42.8488 25.59 42.7592 25.8752 42.5897C26.1603 42.4202 26.3933 42.1772 26.5491 41.8868L28.949 37.4266L31.9598 43.0541C33.0195 45.0333 35.8901 45.037 36.9535 43.0599L50.7197 17.4848C51.6927 15.6759 50.365 13.4951 48.2904 13.4951ZM35.9533 24.4223L30.0175 35.4525C29.9137 35.6456 29.7587 35.8072 29.5689 35.9198C29.3792 36.0325 29.162 36.0921 28.9405 36.0921C28.7191 36.0921 28.5019 36.0325 28.3122 35.9198C28.1224 35.8072 27.9674 35.6456 27.8636 35.4525L21.9851 24.4687C21.8868 24.2856 21.8382 24.0805 21.8437 23.8734C21.8493 23.6662 21.909 23.464 22.017 23.2863C22.125 23.1085 22.2776 22.9614 22.4601 22.859C22.6426 22.7566 22.8488 22.7025 23.0587 22.7019H34.9061C35.1107 22.7019 35.3119 22.7542 35.49 22.8537C35.6682 22.9532 35.8172 23.0965 35.9226 23.2697C36.028 23.4429 36.0862 23.64 36.0916 23.842C36.097 24.044 36.0493 24.2439 35.9533 24.4223Z" fill="#F71963"></path></svg> </div></footer>`
  }

  headernFooter() {
    $('body').prepend(this.headerHTML)
    $('body').append(this.footerHTML)
  }

  start() {
    $('body').addClass(this.classOn)
    this.headernFooter()
    console.log(
      "%c >>>>> YOU ARE CURRENTLY DEBUGING THE HEADER, IT'S A BETA! ISSUES CAN HAPPEN... Use `vcustom.debug.stop()` to stop! ",
      'background: #111; color: #bada55'
    )
  }

  stop() {
    $('body').removeClass(this.classOn)
    $('.debug-elem').remove()
  }
}

module.exports = debug

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_js/_utils.js from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```javascript
module.exports.debounce = (func, wait) => {
  let timeout

  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout)
      func(...args)
    }

    clearTimeout(timeout)
    timeout = setTimeout(later, wait)
  }
}

module.exports.formatCurrency = (_locale, _currency, _value) => {
  const price = _value / 100

  new Intl.NumberFormat(_locale, {
    style: 'currency',
    currency: _currency,
  }).format(price)

  return price
}

module.exports.findClosestLang = (clientLocale, locales) => {
  const [clientLang] = clientLocale.split('-')

  return Object.values(locales).find(country => {
    const [countryLang] = country.locale.split('-')

    return clientLang === countryLang
  })
}

module.exports.getShipStateValue = state => {
  const stateValue =
    $(
      `.vcustom--vtex-omnishipping-1-x-address #ship-state option[value^='${state}']`
    ).val() ||
    $(
      `.vcustom--vtex-omnishipping-1-x-address #ship-state option[value$='${state}']`
    ).val()

  return stateValue
}

module.exports.parseDateBd = input => {
  const parts = input.match(/(\d+)/g)

  return new Date(parts[0], parts[1] - 1, parts[2]) // months are 0-based
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_scss/_configs/_style.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss
// IMPORTED FROM STORE THEME

$base: #f4f2f2; // body bg...
$baseInverted: #21364f; // general

$actionPrimary: #1a73e8; //links, buttons borders, backgrounds
$actionPrimaryDarken: #1d63be; // usually 15% more

$actionSecondary: #f1f7ff;

$emphasis: #000000;
$disabled: #999999;

$success: #2fba2d; // success button, cta, usually the "checkout", "login", "pay"
$successDarken: #269e24;  // usually 15% more
$successFaded: #beffa5;

$danger: #ff4c4c;
$dangerFaded: #ffe6e6;

$warning: #ffb100;
$warningFaded: #fff6e0;

$muted1: #323232; //titles & borders
$muted2: #676767; //borders
$muted3: #999999; //borders
$muted4: #cbcbcb; //borders
$muted5: #eee; //borders
$muted6: #f3f3f3; //borders & bg

// CHECKOUT VARS

$fontSize: 12px;
$borderRadius:4px;
$btnBorderRadius:30px;

$maxWrapper: 980px;
$inputHeight:40px;

$bordersContainers:none; // 2px solid $muted5

//font

$fontFamily: 'Roboto', sans-serif;

// NOT included on admin -- kept for future (no change!)

$showCouponField:true;
$countingSteps:true;
$showCheckoutSteps:true;
$buttonShadow:false;
$mobileWidth:690px;

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_scss/_configs/_style.app.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss
// IMPORTED FROM STORE THEME

$base: "{{base}}"; // body bg...
$baseInverted: "{{$baseInverted}}"; // general

$actionPrimary: "{{actionPrimary}}"; //links, buttons borders, backgrounds
$actionPrimaryDarken: "{{actionPrimaryDarken}}"; // usually 15% more

$actionSecondary: "{{actionSecondary}}";

$emphasis: "{{emphasis}}";
$disabled: "{{disabled}}";

$success: "{{success}}"; // success button, cta, usually the "checkout", "login", "pay"
$successDarken: "{{successDarken}}";  // usually 15% more
$successFaded: "{{successFaded}}";

$danger: "{{danger}}";
$dangerFaded: "{{dangerFaded}}";

$warning: "{{warning}}";
$warningFaded: "{{warningFaded}}";

$muted1: "{{muted1}}"; //titles & borders
$muted2: "{{muted2}}"; //borders
$muted3: "{{muted3}}"; //borders
$muted4: "{{muted4}}"; //borders
$muted5: "{{muted5}}"; //borders
$muted6: "{{muted6}}"; //borders & bg

// CHECKOUT VARS

$fontSize: "{{fontSize}}";
$borderRadius:"{{borderRadius}}";
$btnBorderRadius:"{{btnBorderRadius}}";

$maxWrapper: "{{maxWrapper}}";
$inputHeight:"{{inputHeight}}";

$bordersContainers:"{{bordersContainers}}"; // 2px solid $muted5

//font

$fontFamily: "{{fontFamily}}";

// NOT included on admin -- kept for future (no change!)

$showCouponField:true;
$countingSteps:true;
$showCheckoutSteps:true;
$buttonShadow:false;
$mobileWidth:690px;

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_scss/_components/_cart.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss
.cart {
  border:none;
  padding:0;
}

body.v-custom-step-cart {
.main-header {
  .header-link {
    display: block;
  }
}
}
// empty cart

body.v-custom-cart-empty {

#cart-title,
#shipping-preview-container,
.summary-template-holder,
.checkout-steps,
.cart-more-options {display:none !important;}
.cart-template-holder {
  margin:0 auto;
}
}
.empty-cart-content {padding:50px 0;}

// end empty cart

h1#cart-title {display:none !important;}

.cart-more-options,
.cart-template-holder .cart {
	padding: 20px 30px;
	background: #fff;
	margin: 0;
	border-radius: $borderRadius;
	@media (max-width: $mobileWidth) {
		padding: 12px;
	}
}

.cart-template-holder .cart {
  border:$bordersContainers;
  margin-bottom:20px;
}

.table.cart-items {

  display: block;

  thead {
    width: 100%;
    display: block;
    tr {
      display:flex;
      align-items: center;
      th {
        &.product {
          width: calc(100% - 235px) !important;
        }

        &.product-price,
        &.quantity-price {
          width:90px !important;
        }

        &.item-remove,
        &.quantity-price,
        &.shipping-date {
          display: none;
        }

        &.quantity { min-width: 62px; }

        &.product-image {order:1;}
        &.product-name {order:2;}
        &.shipping-date {order:3;}
        &.quantity {order:4;}
        &.product-price,
        &.quantity-price {order:5;}

      }
    }
  }

  tr {
    &.item-attachments-head {
      border:none !important;
      justify-content: center;
      .help-arrow {display: none;}
    }
    &.item-attachments-content {
      input,
      select {
        @extend %input-style;
      }
    }

  }

  td.shipping-date {
      display:none;
  }

  tbody {
    display:flex;
    flex-wrap:wrap;
    width: 100%;
    tr {
      width:100%;
      display: flex;
      flex-wrap:wrap;
      border-top:1px solid  $muted5;

      &.hide {
        display:none;
      }

      > .v-custom-bundles {
        width: 100%;
      }

      @media(max-width: $mobileWidth) {
        margin-top:0 !important;
        &:first-child {
          border:none;
        }
      }

      &.item-attachments-head,
      &.item-attachments-content {display: none;}

      .v-custom-product-item-wrap {
        width:100%;
        display: flex;
        align-items: center;
        position:relative;
        padding:20px 0;
        @media(max-width: $mobileWidth) {
          display: block;
          padding:10px 0;
          &:after {
            content:"";
            clear:both;
            display:block;
          }
        }
      }

      td {
        width: auto;
        border:none;

        &.product-name {
          .add-service-container,
          .clone-item.btn,
          .add-item-attachment-container {
            margin:10px 0;
            + p {display: none;}
          }

          .add-service.btn,
          .clone-item.btn,
          .add-item-attachment-container a{
            @extend .btn-secondary;
          }

          @media(min-width: 769px) {
            width: calc(100% - 355px) !important;
          }

          .seller {
            display:block;
          }
        }

        &.product-price,
        &.quantity-price {
          width: 90px !important;
          white-space: nowrap;
          margin: 0 10px;
          line-height: 16px;

          br {display:none;}

          @media (max-width: $mobileWidth) {
            width: initial !important;
            text-align: right;
            float: right;
            margin: 0;
            padding: 0;
          }

          .new-product-price-label,
          .old-product-price-label {
            display: none;
          }

          .list-price {
            font-size: 10px;
          }

          .total-selling-price,
          .best-price {
            font-weight: bold;
            position: relative;
            @media (max-width: $mobileWidth) {
              display: flex;
              justify-content: flex-end;
              margin-top: 7px;
              .discount {margin-left: 5px;display: block;}
            }
          }

          .new-product-real-price-per-unit {display: inline-block;}

          .v-custom-quantity-price {
            &__best {
              font-weight:bold;
              font-size:$fontSize;
            }
            &__list {
              display: block;
              font-size: 10px;

              &--list,
              &--selling {
                display:block;
              }
              &--list {
                text-decoration: line-through;
                color: $muted3;
              }

              &,
              &--selling {
                color: $muted2;
                font-size: 10px;
                line-height: 11px;
              }

              &--selling {
                margin-bottom: 3px;
                .discount {display:none;}

                &:after {content:")";}
                &:before {content:"(";}

                .best-price {
                  font-weight:normal;
                  display: inline-block;
                }
              }

              > *:last-child {
                @media (max-width: $mobileWidth) {
                  margin-bottom:-7px;
                }
              }
            }

          }

          &.v-custom-quantity-price-active {
            > .list-price {display:none !important;}
          }

          > span.list-price,
          > span.best-price {
            display: block;
          }

          //manual pricing
          span.product-manualprice,
          a.manualprice-link-remove {
            z-index: 2;
          }

          a.manualprice-link-remove {
            position: absolute;
            top: -2px;
            left: -4px;
            background: #FFF;
          }

          a.manualprice-link-remove i.icon-remove:before {
            width: 10px !important;
            height: 10px !important;
          }

          span.product-manualprice {
            padding: 5px 5px 5px 31px;
            border: 1px solid #ccc;
            display: inline-block;
            background: #FFF;
            border-radius:5px;
            box-shadow: 0 0 19px #777;
            position: absolute;
            top: 0;
            left: 0;
            transform:translate(-15%, -34%);
          }

        }

        &.product-price {
          @media (max-width: $mobileWidth) {
            span.list-price:not(.hide) + br + span.best-price {margin-top:0;}
          }
        }

        &.item-remove {
          margin-left: auto;
          width: 20px !important;
          @media (max-width: $mobileWidth) {
            top:0 !important;
          }
        }

        &.product-image {order:1;}
        &.product-name {order:2;width: 60%;}
        &.shipping-date {order:3;}

        &.quantity {order:4;}
        &.product-price,
        &.quantity-price {order:5;}
        &.item-remove {order:10;}

        &.quantity-price {display: none !important;}
        &.product-price {display: block !important;}

        .field-help {
          background:$actionPrimary;
          border-color:$actionPrimary;
        }

        i.icon-question-sign {
          color:$actionPrimary;
        }

        .add-item-attachment-container,
        .clone-item,
        p.clone-item-container {
          display: none !important;
        }

        hr.clone-item-sep {
          margin:0;
          clear: both;
          border:none;
        }

        .product-service {
          height:calc( #{$inputHeight} + 10px);
          margin-top: 10px;
          position: relative;

          @media (min-width:$mobileWidth) {
            fieldset {
              width: 100%;
              position: absolute;
              min-width: 250px;
            }
          }

          p {display: flex;}
          select {
            @extend %input-style;
            background:#FFF;
            width: 100%;
            margin-right: 10px;
          }
          input[type=submit] {
            @extend .btn-secondary;
          }
        }

        &.quantity input {
          line-height: inherit;
        }

      }

      .v-custom-assemblies {
        clear: both;
      }

      &.v-custom-bundles-in {
        .product-service {display: none;}
      }

      &.item-unavailable {
        margin: 10px 0;
        border-radius: 10px;
        border: none !important;

        @media (max-width:$mobileWidth) {
          padding: 0;
          text-align: center;
        }
      }

      &.v-custom-indexedItems-in {
        & + tr.item-unavailable { display:none }
      }

      &.v-custom-indexed-item {
        border:none;
      }

      &.v-custom-indexed-item,
      &.item-service {
        margin:0 0 10px 0;
        padding:0;
        border-top:none;

        .v-custom-product-item-wrap,
        .v-custom-trservice-wrap {
          background:$actionSecondary;
          border:1px dashed $muted4;
          border-radius:$borderRadius;

          width: 100%;
          display: flex;
          align-items: center;

          box-sizing: border-box;
          padding: 5px 10px;
        }

        .v-custom-trservice-wrap {
          margin-bottom: 10px;
          margin-top: 10px;
        }

        td.quantity {
          background: #FFF;
          width:25px;
          height:20px;
          text-align:center;
          justify-content: center;
          p {
            width:100%;
          }
        }

        td.product-price {display: none !important;}
        td.quantity-price {display: block !important;}

        .item-remove {
          margin-left: auto;
          position: initial;
          width: auto;
          i.icon.icon-remove.item-remove-ico:before {
            content: "-";
            background: $danger;
            color: #FFF;
            line-height: 9px;
            border-radius: 100%;
            width: 16px;
            height: 16px;
            font-size: 27px;
          }
        }

        @media(max-width: $mobileWidth) {
          border-top:none !important;
          .product-price,
          .quantity {
            margin:auto !important;
            width:auto !important;
            min-width:initial !important;
          }
        }
      }

      &.v-custom-indexed-item {
        &:last-child {
          margin-bottom: 20px;
        }
        td.product-image {display:none;}
        td.quantity {
          @media (max-width:$mobileWidth) {
            display:none;
          }
        }
        td.product-name {
          margin-left:0 !important;
          padding: 0 !important;
          width: 100% !important;
          margin-right:15px;
        }
        p {margin:0;padding:0;}
      }

      &:last-child {
        border-bottom:none;
      }

      &.v-custom-assemblies-in .v-custom-product-item-wrap {

      }
        &.v-custom-assemblies-in.v-custom-indexed-item .v-custom-product-item-wrap {
          .v-custom-assemblies {

          }
        }
    }

    > tr.v-custom-indexed-item,
    > tr[data-parentitemindex] {
      display:none;

      & + .item-unavailable {
        display:none;
      }
    }
  }

  td.product-image {

    a {
      overflow: hidden;
      border-radius: $borderRadius;
    }
    a {margin-right:20px;}
    a,
    img {
        width:100px;
        display:block;
        max-width: initial;
        height: auto;

        @media(max-width: $mobileWidth) {
          width: 70px;
        }
    }
  }

  td.product-name {
    a,
    a:hover {
        color:#333;
        font-weight:bold;
        text-decoration:none;
    }

  }

  td.quantity {
    margin: 0 0 0 10px;
    display:flex;
    align-items: center;
    padding: 0;
    border-radius: $borderRadius;
    border:1px solid $muted4;
    float:left;
    min-width: 30px;
    text-align: center;
    justify-content: center;

    input {
      margin:0;
      @extend %input-style;
      width: 30px !important;
      height:30px !important;
      padding:0;
      border:none;
      box-shadow:none;
    }
    .item-quantity-change {
      position:initial;
      left:initial;
      top:initial;
      bottom:initial;
      height: initial;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;

      i {
        background:none;
        line-height:30px;
        display: inline-block;
        &:before {
          font-weight:bold;
          font-size:22px;
          width:25px;
          height:25px;
          line-height:25px;
          color:#000;
          border-radius:100%;
        }
      }

      > p {
        margin: 0;
      }

      &.item-quantity-change-decrement i:before {
        content:"-";
        line-height:21px;
      }
      &.item-quantity-change-increment i:before {
        content:"+"
      }
    }
  }

  @media(max-width: $mobileWidth) {

    td.quantity {width: 97px;}
    td.product-name,
    td.quantity {
      margin-left: 90px !important;
    }
  }

  i.icon.icon-remove.item-remove-ico:before {
    content:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEyLjAwMSA1MTIuMDAxIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIuMDAxIDUxMi4wMDE7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cGF0aCBkPSJNMjg0LjI4NiwyNTYuMDAyTDUwNi4xNDMsMzQuMTQ0YzcuODExLTcuODExLDcuODExLTIwLjQ3NSwwLTI4LjI4NWMtNy44MTEtNy44MS0yMC40NzUtNy44MTEtMjguMjg1LDBMMjU2LDIyNy43MTcNCgkJCUwzNC4xNDMsNS44NTljLTcuODExLTcuODExLTIwLjQ3NS03LjgxMS0yOC4yODUsMGMtNy44MSw3LjgxMS03LjgxMSwyMC40NzUsMCwyOC4yODVsMjIxLjg1NywyMjEuODU3TDUuODU4LDQ3Ny44NTkNCgkJCWMtNy44MTEsNy44MTEtNy44MTEsMjAuNDc1LDAsMjguMjg1YzMuOTA1LDMuOTA1LDkuMDI0LDUuODU3LDE0LjE0Myw1Ljg1N2M1LjExOSwwLDEwLjIzNy0xLjk1MiwxNC4xNDMtNS44NTdMMjU2LDI4NC4yODcNCgkJCWwyMjEuODU3LDIyMS44NTdjMy45MDUsMy45MDUsOS4wMjQsNS44NTcsMTQuMTQzLDUuODU3czEwLjIzNy0xLjk1MiwxNC4xNDMtNS44NTdjNy44MTEtNy44MTEsNy44MTEtMjAuNDc1LDAtMjguMjg1DQoJCQlMMjg0LjI4NiwyNTYuMDAyeiIvPg0KCTwvZz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K");
    width:15px;
    height:15px;
  }

}

.summary-template-holder {
	background: #fff;
	padding: 20px;
	text-align: left;

	box-sizing: border-box;
	border-radius: $borderRadius;

	position: sticky;
	top: 20px;

	border: $bordersContainers;

	.summary-totalizers,
	.summary-coupon-wrap {
		width: 100% !important;
	}

	.cart-more-options {
		display: none !important;
	}

	.summary-coupon {
		text-align: center;
		margin: 0 auto !important;
		min-width: initial;

		fieldset.coupon-fieldset {
			@if $showCouponField {
				.coupon-data {
					display: none !important;
				}
			}

			p {
				margin: 0;
				color: $muted2;
				label {
					cursor: initial;
					font-size: 13px;
				}
			}

			input[type="text"],
			button[type="submit"] {
				@extend %input-style;
			}
			button[type="submit"] {
				@extend .btn-secondary;
			}

			.coupon-data {
				margin: 0;
				width: 100%;
				a {
					@extend .btn, .btn-link;
					width: 100%;
					text-decoration: underline;
				}
			}

			> div {
				display: flex;
				justify-content: space-between;
				align-items: center;

				@if $showCouponField {
					&[style*="none"] {
						p.coupon-label {
							display: none;
						}
						display: block !important;
					}
				}

				&[style*="flex"] {
					p.coupon-label {
						display: none;
					}
					p.coupon-fields {
						width: 100%;
					}
				}
			}
		}

		p.coupon-fields {
			span {
				display: flex;
				width: 100%;
				position: relative;
				&.info {
					align-items: center;
					padding: 0;
					color: $muted1;
					> span {
						text-align: left;
						margin-right: 10px;
						color: $actionPrimary;
					}
				}
				input {
					width: 100%;
					margin-right: 10px;
				}
			}
			.delete {
				width: auto;
				#cart-coupon-remove {
					color: $danger;
					font-size: 0;
					display: flex;
					align-items: center;

					&:before {
						content: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEyLjAwMSA1MTIuMDAxIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIuMDAxIDUxMi4wMDE7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cGF0aCBkPSJNMjg0LjI4NiwyNTYuMDAyTDUwNi4xNDMsMzQuMTQ0YzcuODExLTcuODExLDcuODExLTIwLjQ3NSwwLTI4LjI4NWMtNy44MTEtNy44MS0yMC40NzUtNy44MTEtMjguMjg1LDBMMjU2LDIyNy43MTcNCgkJCUwzNC4xNDMsNS44NTljLTcuODExLTcuODExLTIwLjQ3NS03LjgxMS0yOC4yODUsMGMtNy44MSw3LjgxMS03LjgxMSwyMC40NzUsMCwyOC4yODVsMjIxLjg1NywyMjEuODU3TDUuODU4LDQ3Ny44NTkNCgkJCWMtNy44MTEsNy44MTEtNy44MTEsMjAuNDc1LDAsMjguMjg1YzMuOTA1LDMuOTA1LDkuMDI0LDUuODU3LDE0LjE0Myw1Ljg1N2M1LjExOSwwLDEwLjIzNy0xLjk1MiwxNC4xNDMtNS44NTdMMjU2LDI4NC4yODcNCgkJCWwyMjEuODU3LDIyMS44NTdjMy45MDUsMy45MDUsOS4wMjQsNS44NTcsMTQuMTQzLDUuODU3czEwLjIzNy0xLjk1MiwxNC4xNDMtNS44NTdjNy44MTEtNy44MTEsNy44MTEtMjAuNDc1LDAtMjguMjg1DQoJCQlMMjg0LjI4NiwyNTYuMDAyeiIvPg0KCTwvZz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K");
						width: 11px;
						height: 12px;
						display: block;
						line-height: 10px;
					}
				}
			}
		}

		i.icon-spin.loading-coupon {
			border: 1px solid #666;
			border-top: none;
			border-radius: 100%;
			font-size: 0;
			width: 20px;
			height: 20px;
			padding: 0;
			line-height: 0;
			display: none;
			margin: 0;
			position: absolute;
			top: 25%;
			right: 10px;
			z-index: -1;
		}
	}

	// .summary-coupon

	span.link-choose-more-products-wrapper {
		display: none;
	}

	.cart-links-bottom {
		float: none;
		margin: 10px 0 0 0;

		.btn {
			width: 100%;
			box-sizing: border-box;
			&-success {
				font-weight: bold;
			}
		}

		@media (max-width: $mobileWidth) {
			position: fixed;
			bottom: 0;
			width: 100%;
			left: 0;
			z-index: 10000;
			a {
				border-radius: 0;
			}
		}
	}

	.summary-totalizers {
		.table td.space,
		.table td.empty,
		tbody.shipping-calculate {
			display: none;
		}
	}

	.shipping-reset {
		display:none;
	}

	.accordion-inner {
		margin-top: 10px;
	}

	tr:not(.Shipping) {
		display: flex !important;
		justify-content: space-between;
		border: none !important;

		&.CustomTax:not(.CustomTax--total) {
			display: none !important;
		}
	}

	tbody {
		border-top: 1px solid $muted4;
		border-bottom: 1px solid $muted4;
		padding: 15px 0;
		display: block;

		td {
			display: inline-block;
			text-align: left !important;
			width: auto;
			color: $muted2;
			font-size: 13px;
			padding: 0 0 3px 0 !important;
			&.monetary {
				text-align: right !important;
				margin-left: auto;
				float: right;
			}
		}
	}
	tfoot {
		tr td {
			padding: 14px 0 !important;
			color: $muted1;
			font-size: 14px;
			font-weight: bold;
			&.monetary {
				text-align: right !important;
				margin-left: auto;
				float: right;
				color: $actionPrimary;
			}
		}
	}
}

.summary-coupon {width: 100% !important;}

.cart-select-gift-placeholder {
  width: auto !important;
  display: none !important;
}

.cart-more-options {
  width:100% !important;
  margin:0 !important;
  border:$bordersContainers;
  padding:0;
  min-height:0 !important;
  display: flex !important;
  flex-wrap: wrap;

  .cart-select-gift-placeholder {
    display: block !important;
  }

  .vtex-shipping-preview-0-x-alert {
    .shp-alert-content.vtex-shipping-preview-0-x-content {
      display: flex;
      align-items:center;
    }
  }

  .srp-container {

    max-width:100% !important;

    .srp-main-title {
      @extend %steps-title;
    }

    span.error {display:none;}
    .srp-toggle__wrapper {
      label {
        background:#FFF;
        padding:10px 0;
        border-radius:$borderRadius;
      }
    }

    .srp-delivery-info {
      .b--light-gray {
        background:#FFF;
        border-radius:$borderRadius;
      }
    }
    select,
    input[type=text]:not(.pac-target-input) {
      @extend %input-style;
      outline: initial;
    }

    form.srp-postal-code__form.dib.relative {
      width: 100%;
    }
    button.shp-open-options {border-color:$actionPrimaryDarken;}
    .onda-v1 .blue {
      color:$actionPrimary;
      outline: none;
    }
    .onda-v1 .b--blue {
      border-color:$actionPrimary;
      outline: none;

    }

    .onda-v1 .bg-blue {
      background:$actionPrimary;
      outline: initial;

    }
    .vtex-shipping-preview-0-x-addressFormPart1.vtex-shipping-preview-0-x-geolocation input {
      @extend %input-style;
    }
    .vtex-shipping-preview-0-x-pc .ship-country {width:98%;}
    .vtex-shipping-preview-0-x-pc .btn {
      @extend .btn-secondary;
      height: $inputHeight;
      outline: initial;
      border-radius:$borderRadius;
    }

    .ship-postalCode {
      width: auto !important;
      max-width: 190px;
      input#ship-postalCode {width:100%;}
    }
  }

  .cart-select-gift-placeholder,
  #shipping-preview-container {
    margin:20px;
    width:100%;
  }

  .cart-select-gift-placeholder {
    @media(min-width: $mobileWidth) {margin-bottom: 0;}
    &:empty {display: none;}
  }

  #shipping-preview-container {
    width: 100% !important;
  }

  @media(max-width: $mobileWidth) {
    #shipping-preview-container {display: none !important;}
  }

  .vtex-pickup-points-modal-3-x-pickupViewMode {
    .btn {
      padding:13px 0;
    }
  }

}

.cart-select-gift-placeholder {
  .available-gift-item.active {
    background:$actionSecondary;
  }

  .label-vertical-group:hover,
  .icon-check-empty,
  .icon-check-sign {
    color: $muted2;
  }

  .label-vertical-group:hover .icon-check-empty,
  .icon-check-sign {
    color: $actionPrimary;
  }
}

// !IMPORTANT split cart in 2 columns

.body-cart-vertical {

  .cart-template-holder {
    width:calc(70% - 20px);
    @media(max-width:998px) {
      width:100%;
    }
  }

  .summary-template-holder {
    width: 30%;
    @media(max-width:998px) {
      width:100%;
      margin-top: 20px;
    }
  }

  .cart-template.full-cart.active {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: flex-start;

    .extensions-checkout-buttons-container {
      width: auto !important;
      margin:0;
    }

    .totalizers.summary-totalizers.cart-totalizers {
      width: 100%;
      padding:0;
      margin:0;
    }
  }
}

// end split cart in 2 columns

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_scss/_components/_overwriting.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss

.payment-data .gift-card-section, .payment-data .payment-discounts-alert {
  margin: 0;
  width: 100% !important;
  box-sizing: border-box;
}

.input-append, .input-prepend {
  display: flex !important;
  align-items: stretch;

  .btn,
  .add-on {
    height: $inputHeight;
    line-height:$inputHeight;
    box-sizing: border-box;
    padding: 0;
    width:20px;
  }
  .add-on {
    height: initial !important;
  }
  input {
    border-radius: 0 $borderRadius $borderRadius 0 !important;
    width:100% !important;
    max-width: 100px !important;
  }
}

.payment-discoints-table .number, .gift-card-provider-group .number, .payment-discoints-table .action, .gift-card-provider-group .action {
  text-align:right;
}

@media (max-width: $mobileWidth) {
  .orderform-template-holder .client-profile-data input[type="text"] {
    width:100% !important;
  }

}

//imported from io.vtex (just changing the @media width)
@media (max-width: $mobileWidth) {
  .item-quantity-change {
    display: inline-block;
  }
  .item-quantity-change {
    float: left;
    padding: 3px 5px 3px 0px;
  }
  .item-quantity-change-increment {
    padding-left: 5px;
    padding-right: 0;
  }
  .full-cart .cart-links-bottom .btn-success {
    width: 83%;
    display: block;
    margin-top: 10px;
  }
  .full-cart .cart table {
    display: block;
    margin-top: 0 !important;
  }
  .full-cart .cart table thead {
    display: none;
  }
  .full-cart .cart table tbody {
    display: block;
  }
  .full-cart .cart table tbody tr + tr {
    border-top: 1px dashed #ddd;
  }
  .full-cart .cart table tbody tr {
    display: block;
    margin-top: 10px;
    padding: 10px 0;
    position: relative;
  }
  .full-cart .cart table tbody tr .product-name a,
  .full-cart .cart table tbody tr .product-name .seller {
    overflow: hidden;
  }
  .full-cart .cart table tbody tr td {
    display: inline-block;
    padding: 4px 0;
  }
  .full-cart .cart table tbody tr td.product-name .seller {
    display: block;
    line-height: 120%;
    font-size: 80%;
    margin: 4px 0;
  }
  .full-cart .cart table tbody tr td.product-image,
  .full-cart .cart table tbody tr td.bundle-item-image {
    left: 0;
    position: absolute;
  }
  .full-cart .cart table tbody tr td.product-name {
    display: block;
    margin-left: 60px;
    text-align: left;
    line-height: 140%;
    width: auto;
  }
  .full-cart .cart table tbody tr td.product-name {
    padding: 0 0 10px !important;
  }
  .full-cart .cart table tbody tr td.empty,
  .full-cart .cart table tbody tr td.shipping-date,
  .full-cart .cart table tbody tr td .brand {
    display: none;
  }
  .full-cart .cart table tbody tr td.product-name a,
  .full-cart .cart table tbody tr td.bundle-item-name span {
    display: block;
    padding-right: 20px;
  }
  .full-cart .cart table tbody tr td.quantity {
    width: 81px;
    padding: 0px;
    margin-left: 60px;
  }
  .full-cart .cart table tbody tr td.quantity input {
    float: left;
    margin: 0;
    width: 25px;
  }
  .full-cart .cart table tbody tr td.product-price {
    text-align: right;
    float: right;
    margin-right: 5px;
    padding: 0;
  }
  .full-cart .cart table tbody tr td.quantity-price {
    display: none;
  }
  .full-cart .cart table tbody tr td.item-remove {
    position: absolute;
    top: 2px;
    right: 0;
    width: 24px;
  }
  .cart-links-bottom {
    float: none;
    margin-top: 5px;
    margin-bottom: 40px;
    text-align: right;
  }
  .more {
    margin-right: 0;
  }
  .full-cart .cart-links-bottom .btn-success {
    width: auto;
  }
  .full-cart .cart table tbody tr.item-attachments-head {
    border: 0;
    margin: 0;
    padding: 0;
  }
  .full-cart .cart table tbody tr.item-attachments-head .item-attachments-header {
    top: auto;
  }
  .full-cart .cart table tbody tr.item-attachments-head .item-attachments-header:after {
    content: none;
  }
  .full-cart .cart table tbody tr.item-attachments-head .item-attachments-header strong {
    box-shadow: none;
  }
  .full-cart .cart table tbody tr.item-attachments-content {
    margin: 0;
    border: 0;
    padding: 0;
  }
  .full-cart .cart table tbody tr.item-attachments-content .item-attachments-item-fields {
    margin-left: 5px;
    width: 95%;
  }
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_scss/_components/_payment.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss

@import '_card-flags.scss';

%label {
	margin:10px 0 5px 0;display:block;color:$muted3;
}
// loadin shhimer

@keyframes placeHolderShimmer{
	0%{
		background-position: -468px 0
	}
	100%{
		background-position: 468px 0
	}
}

%loading-shimmer {
	animation-duration: 1.25s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: placeHolderShimmer;
	animation-timing-function: linear;
	background: darkgray;
	background: linear-gradient(to right, #eeeeee 10%, #dddddd 18%, #eeeeee 33%);
	background-size: 800px 104px;

}
// set svgs

	svg.pickup-marker-blue,
	svg.pickup-marker-blue path,
	svg.pkpmodal-pickup-point-marker-image,
	svg.pkpmodal-pickup-point-marker-image path,
	svg.vtex-omnishipping-1-x-svg,
	svg.vtex-omnishipping-1-x-svg path,
	svg.pkpmodal-pickup-point-best-marker-image path:not([fill="white"]) {
	  fill: $actionPrimary;
	}

// -- vertical checkout

.container.container-main.container-order-form {
  @media(max-width: 768px) {
  	width: calc(100% - 20px);
  }
}

.orderform-template-holder{

	#client-profile-data {width: 100%;}
	#client-profile-data form.client-pre-email,
	#client-profile-data .step.client-profile-data,
	#shipping-data,
	#payment-data {
  	width:100% !important;
  	padding:0;
  	margin:0;
  	box-sizing: border-box;

  	background:#FFF;
		border-radius:$borderRadius;

		margin-bottom:20px !important;
		z-index: initial;

		border:$bordersContainers;

  	@if $countingSteps {
			padding:30px;
			@media(max-width: 768px) {
				padding:20px;
			}
		} @else {
			padding:4px 15px 15px 10px;
		}

		&.client-pre-email {display:block !important;padding-bottom: calc( #{$inputHeight} + 14px + 30px);}

		.link-box-edit {
	    background: none;
	    box-shadow: none;
	    border: none;
	    color: $actionPrimary;
	    outline: none;

	    position: absolute;
	    right: 0;
	    top: 50%;
	    padding: 1px;
	    font-size: 14px;
	    transform: translateY(-50%);
	    opacity: 0.7;

	    transition: all ease 0.2s;

	    &:hover {
	    	opacity: 1;
	    }

	    i.icon-spinner {
		    font-size: 17px;
		    position: absolute;
		    right: 0;
		    display: none;
		    top: -7px;
			}

			&.active {
				i.icon-edit {display: none;}
				i.icon-spinner { display: block; }
			}
		}

		.accordion-toggle {
			padding:0;
    	@extend %steps-title;
    	> i {display: none;}
    	> span {
    		line-height: 20px;
    		display: block;
    		vertical-align: middle;
    		@if $countingSteps {
    			line-height: initial;
    		}
    	}
    }

    .accordion-toggle,
    .accordion-inner {
    	padding: 0;
    }

    input[type=text],
    input[type=tel],
    input[type=email],
    select  {
    	&:not(.pac-target-input) {
	    	@extend %input-style;
	    	width: 100%;
	    	max-width: 100%;
	    	outline: initial;
    	}
    }

    &.active {

	    @if $countingSteps {

	    }
    }

  }

	#payment-data {

		p.link.link-gift-card,
		.payment-group-item {
		  box-sizing: border-box;
		  margin: 0 6px 10px 0;
		  border-radius: $borderRadius;
		  border:1px solid $muted4;
		  opacity: 1;
		  text-decoration: none;
			color: $muted1;
			transition: all ease 0.3s;

			padding: 11px;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			background: $muted6;
			float: left;
			width:100%;

			&.active {
				background:#FFF;
				span {
					color:$emphasis;

				}
			}

			&.active,
			&:hover {
				box-shadow:0 0 6px $muted4;
				border:1px solid $actionPrimary;
			}
		}

		p.link.link-gift-card,
		fieldset.payment-group {
		  width: 100%;
		  left: 0;
		  display:block;
		  background: none;
		  position: relative;
		  margin:0;
		}

		#iframe-placeholder-creditCardPaymentGroup {
			padding-top: 32px;
			> .payment-group-item-cards {
				display: block;
				overflow: hidden;
				position: absolute;
				right: 0;
				top:0;
				.card-flag {
					opacity:1;
				}
			}
		}

		p.link.link-gift-card {
			margin-bottom: 10px;
			padding:0;
		  a{
		  	padding: 10px 10px;
				display: block;
				text-align: left;
		  }
		}

		.payment-group-list-btn {
		  width: 100%;
		}

		p.link.link-gift-card *,
		.payment-group-item * {
			font-size:12px !important;
			font-weight:bold;
		}

		.payment-group-item {
			position: relative;
			height: 40px;
			span.payment-group-item-text {
				padding: 0;
				line-height: 17px;
				background: none !important;
			}

			&:first-child:nth-last-child(n + 2),
			&:first-child:nth-last-child(n + 2) ~ .payment-group-item {
				width: calc(50% - 3px);
			}
			&:first-child:nth-last-child(n + 3),
			&:first-child:nth-last-child(n + 3) ~ .payment-group-item {
				width: calc(33.3% - 4px);
			}
			&:first-child:nth-last-child(n + 4),
			&:first-child:nth-last-child(n + 4) ~ .payment-group-item {
				width: calc(25% - 4.8px);
			}
			&:first-child:nth-last-child(n + 5),
			&:first-child:nth-last-child(n + 5) ~ .payment-group-item {
				width: 100%;
				margin-right: 0;
				height: auto;
				&:after,
				&:before {
					display: none;
				}
				&:hover {
					top:0;
				}
			}
			&:last-child {
				margin-right:0;
			}
			&:hover {
				position: relative;
				background: #FFF;
				top: -2px;
			}

			&.active {

				&:after,
				&:before {
					content: '';
					display: block;
					position: absolute;
					left: 50%;
					transform:translateX(-50%);
					top:100%;
					width: 0;
					height: 0;
					border-style: solid;
				}

				&:after {
					border-color: #FFF transparent transparent transparent;
					border-width: 6px;
				}

				&:before {
					border-color: $actionPrimary transparent transparent transparent;
					border-width: 7px;
				}
			}
		}

		.gift-card-section.form-step.box-default {
			padding: 0;
			margin: 0;
			width: 100%;
			label {
			  font-weight:bold;
			  color:#000;
			  font-size:12px;
			}
		}

		p.payment-discounts-options,
		p.gift-card-provider-options {
		  display:flex;
			align-items: center;
			padding-bottom: 10px;
			input, select {margin:0 10px;}

			label {
				line-height: 12px;
    		margin: 0;
			}
		}

		.payment-discounts-list {
			margin-bottom: 10px;
			.gift-card-provider-group-loyalty-program {
				border-bottom: 1px solid $muted5;
			}
			table {
				width: 100%;

				td {padding:0;}
				tbody,
				tr {
						display:flex;
						width: 100%;
						flex-wrap: wrap;
						align-items: center;
				}
				td.code,
				td.number {
						margin-right:20px;
						flex-grow: 1;
						padding:0;
				}
				#remove-gift-card {
					text-decoration:underline;
					color:$danger;
				}

				td.action {
					a {
						@extend .btn, .btn-secondary;
					}
				}
			}

		}

		input#payment-discounts-code {
		  width:100% !important;
		}

		.gift-card-multiple-providers {

		}

		#btn-add-gift-card {
			@extend .btn-secondary;
			height: $inputHeight;
			border-radius: $borderRadius;
		}

		.steps-view {
		  width: 100% !important;
		  padding: 0;
			min-height: initial;

			iframe {
				margin:0;
			}
		}

		p.notification {
	    font-weight: bold;
	    font-weight: 400;
	    color:$muted1;
	    &:not([style="display: none;"]) + .box-step {
		    padding:0;
		    border:none;
			}
		}

		&:last-child {
			@media (min-width: 769px) {
				margin-bottom:0px !important;
			}
		}

		//custom (from js)

		.v-custom-payment-item-wrap {
			box-sizing: border-box;
		  border-radius: $borderRadius;
		  background:#FFF;
		  border:1px solid $muted4;
			color: $muted1;
			transition: all ease 0.3s;
			overflow: hidden;
			margin-bottom: 10px;

			&.active,
			&:hover {
				border-color:$actionPrimary;
				box-shadow:0 0 6px #ddd;
			}

			#iframe-placeholder-creditCardPaymentGroup {
				padding-top: 0;
			}

			.payment-group-item {
				border:none;
				border-bottom: 1px solid transparent;
				box-shadow:none;
				margin:0;
				width: 100% !important;
				height:auto;
				top:0;

				&-text {
					margin-right: auto;
					text-align: left;
					line-height: 27px !important;
					white-space: nowrap;
					&:before {
						content:"";
						width:20px;
						height:20px;
						display:inline-block;
						border:1px solid $muted3;
						border-radius:100%;
						vertical-align: middle;
						margin: -3px 10px 0 0;
					}
				}

				&-cards {
					display:flex;
					justify-content: flex-end;
    			flex-wrap: wrap;
					.card-flag {

						&:last-child {
							margin: 0;
						}
					}

					@media(max-width:360px) {
						display:none;
					}
				}

				&.active {
					background: $actionSecondary;
					border-bottom:1px solid $actionPrimary;
					.payment-group-item-text {

						&:before {
							background: $actionPrimary;
							border-color:$actionPrimary;
							box-shadow:inset 0 0 0 3px  #FFF;
						}
					}

					.payment-group-item-cards {
						span {opacity:1;}
					}
				}

				&:hover {
					.payment-group-item-text {
						&:before {
							border-color:$actionPrimary;
						}
					}
				}

				&:before,
				&:after {display: none;}

				&#payment-group-payPalPaymentGroup {
					position: relative;
					&:after {
						content:"";
						width: 50px;
						height:20px;
						display:block;
						background: url('https://io.vtex.com.br/checkout-ui/v6.18.19/img/payment-paypal-landscape.png') center no-repeat;
						background-size: contain;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						right: 12px;
						left: initial;
						border: none;
					}
				}
				&#payment-group-AffirmPaymentGroup:after {
					content: "";
					width: 65px;
					height: 25px;
					display: block;
					background: url(https://cdn-assets.affirm.com/images/black_logo-transparent_bg.png) center no-repeat;
					background-size: contain;
					position: absolute;
					top: 49%;
					transform: translateY(-50%);
					right: 3px;
					left: initial;
					border: none;
				}
			}

			.payment-group-item.active + div,
			&.active > div {
				padding:20px;
				overflow: hidden;
        box-sizing: border-box;
			}

			.SecurityEnvironmentIcon {display: none;}

		}
	}

	.step {

		border:none;
		padding:0;
		background: none;
		margin-bottom: 0;

		@media(max-width:868px) {
      width:100%;
    }

	  .box-info {
			color:$muted1;
			&[style*="display: block"] {
				margin-top: 10px;
			}
		}

    .form-step {
    	fieldset {
    		width: 100%;
				float:none;

    		p {
	    		position:relative;
	    		@media(max-width: $mobileWidth) {
	    			float:none !important;
	    		}

	    		&.client-last-name,
					&.client-first-name {
					    width: calc(50% - 5px);
					    position: relative;
					    @media(max-width: $mobileWidth) {
					    	width: 100%;
					    	input[type="text"] {width: 100% !important;}
					    }
					}
	    		span.help.error {
				    position:absolute;
				    font-size:11px;
				    margin-top: 0;
					}

	    	}

				&.box-client-info-pj {padding-top:15px;}

				&.box-payment-option {
					h3 {display:none;}
				}
    	}

			#is-corporate-client {color:$actionPrimary;}

	  }

    .input.text {
    	label {@extend %label;}
    }

    &.client-profile-data {
    	.client-notice.notice {margin: 0 0 10px 0;}
    	.box-client-info {
    		margin-bottom: 20px;
			}
			.client-document, .client-phone {
				width:calc(50% - 5px);
				@media(max-width:$mobileWidth) {
					width:100%;
				}
			}

    }

    &.shipping-data {
			.box-step {
				display: flex;
				flex-wrap: wrap;
				> * {
					width:100%;
					order: 1;

					//&:not(#postalCode-finished-loading),
					//&:not(.vtex-omnishipping-1-x-geolocation) {margin:0 0 20px 0;}

					&.vtex-omnishipping-1-x-addressFormPart1 {order: 1;}
					&.vtex-omnishipping-1-x-addressForm { order: 2; }
					&.vtex-omnishipping-1-x-addressInfo { order: 3; }
					&.vtex-omnishipping-1-x-deliveryGroup { order: 4; }
					&.vtex-omnishipping-1-x-submitPaymentButton { order: 100; }
					&.btn-link.vtex-omnishipping-1-x-btnDelivery {
						order: 5;
						margin-top: 20px;
						background: $actionPrimary;
					}

					&#postalCode-finished-loading,
					&:last-child {
						margin:0;
					}
				}
			}

			.vtex-omnishipping-1-x-address {
				margin:0;

			}

			.vtex-omnishipping-1-x-addressSummaryActive .address-summary {
				background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='24' height='24'><path fill='%23999999' d='M15.998,5.951L4,16.237V30c0,0.552,0.448,1,1,1h8v-8h6v8h8c0.552,0,1-0.448,1-1V16.238L15.998,5.951z M19,19 h-6v-5h6V19z'></path> <polygon fill='%23999999' points='15.998,0.683 9,6.682 9,3 5,3 5,10.111 0.59,13.892 1.892,15.41 15.998,3.317 30.108,15.41 31.41,13.892 '></polygon></svg>") no-repeat;
				background-position: 12px 9px;
				border:1px solid $muted4;
			}

			.vtex-omnishipping-1-x-SummaryItemGroup {}

    	.vtex-omnishipping-1-x-content {align-items: center;}
    	.vtex-omnishipping-1-x-deliveryChannelsOption {
		    background:#FFF;
			}
			.vtex-omnishipping-1-x-addressFormPart1.vtex-omnishipping-1-x-geolocation input {
				@extend %input-style;
			}
			.vtex-omnishipping-1-x-pickupButton,
			.vtex-pickup-points-modal-3-x-pickupViewOptionActive,
			.vtex-pickup-points-modal-3-x-pickupViewOptionActive:hover,
			.vtex-pickup-points-modal-3-x-pickupViewOptionActive:active,
			.vtex-pickup-points-modal-3-x-pickupViewOptionActive:focus,
			.vtex-omnishipping-1-x-deliveryChannelsTogglePickup,
			.vtex-omnishipping-1-x-deliveryChannelsOption.vtex-omnishipping-1-x-deliveryOptionActive {
		    background:$actionPrimary;
				border-color:$actionPrimary;
				border-radius: $borderRadius;
			}

			.vtex-pickup-points-modal-3-x-pickupViewOptionInctive {
				color:$actionPrimary;
				border-color:$actionPrimary;
				border-radius: $borderRadius;
			}

			.vtex-omnishipping-1-x-addressItemOption:hover,
			.vtex-omnishipping-1-x-active {
				background-color: $actionSecondary;
			}

			.shipping-method-toggle {
		    border-color:$actionPrimary;
			}

    	.vtex-omnishipping-1-x-alert {
    		border-color:$warning;
    		display: flex;
  			align-items:center;
    	}

			.vtex-omnishipping-1-x-linkEdit { text-decoration: underline; }
    	.vtex-omnishipping-1-x-deliveryChannelsWrapper,
    	.vtex-omnishipping-1-x-deliveryChannelsToggle {border-radius: $borderRadius;}
    	.vtex-omnishipping-1-x-deliveryChannelsWrapper {
				border:1px solid $muted4;
				width:100%;
				overflow: hidden;
				margin:0 0 20px 0;
			}
    	.vtex-omnishipping-1-x-summaryChange {
		    background:$actionSecondary;
		    border-color:$muted4;
		    color:$actionPrimary;
			}

			.vtex-omnishipping-1-x-leanShippingGroupList {
				border-color:$muted5;
				margin: 0;
			}

			.vtex-omnishipping-1-x-option:hover,
			.vtex-omnishipping-1-x-leanShippingOptionActive,
			.vtex-omnishipping-1-x-leanShippingOption {
				background:#FFF !important;
			}

			.vtex-pickup-points-modal-3-x-modalDetailsBackLnk svg path,
			.vtex-pickup-points-modal-3-x-modalDetailsBackLnk {
			    color: $muted2;
			    fill:$muted2;
			}

			.vtex-pickup-points-modal-3-x-primary {
			  outline:none;
			  background:$actionPrimary;
			  border-color:$actionPrimary;
			}

			.vtex-omnishipping-1-x-pickupPointChange {
				border-color:$actionPrimary;
			}

			.vtex-omnishipping-1-x-address {
				p {
					clear:both;
					float: none;
					margin: 0;
					&.input.ship-checkboxNumberLabel.text {
						width: auto;
						align-self: flex-end;
						display: flex;
						align-items: center;
						margin-left: 10px !important;
						height: $inputHeight;
					}
				}
			}

			input#ship-addressQuery {
				width: 100%;
			}

			.vtex-omnishipping-1-x-container.shp-pickup-receiver {
				display: block;
				svg.person-blue path {fill: $actionPrimary;}
				.vtex-omnishipping-1-x-btn {color: $actionPrimary;}
			}

      @media (max-width: 490px) {
        .vtex-omnishipping-1-x-dateLink {
            width: 100%;
        }
      }
    }

    .submit.btn.btn-success {
	    display:block;
			margin:20px auto 0 auto;
			min-width:55%;
		}

  }

}

.orderform-template {
	display: flex !important;

	padding-top: 0px;
	min-height: 400px !important;
	align-items:flex-start;

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

	.orderform-template-holder{
		width: 100%;

		@media(min-width: 769px) {

			width: 61% !important;
			padding-right:20px;
			max-width: calc(100% - 271px);
			float:left;
			box-sizing: border-box;
		}

	}

	@media(max-width: $mobileWidth) {
  	width:100%;
  	padding-top:0px;
  }

	.cart-template.mini-cart {
		width: 39%;
  	min-width: 255px;

		position: -webkit-sticky;
		position: -moz-sticky;
		position: -o-sticky;
		position: -ms-sticky;
  	position: sticky;
    bottom: 0px;
		top: 20px;
		right:0;
		float: right;
		margin:0;

  	@media(max-width: 768px) {
  		width:100%;
  		position: relative;
  		top:0;
		}

		.cart-items {
			> .v-custom-indexed-item {display:none !important;}
		}

  	.cart-fixed {
  		height: auto !important;
  		position: relative !important;
	    max-width: 100%;
	    width: 100% !important;
			top:0;
			min-height: initial;

  		@media(min-width: 769px) {
  			&.affix {
  			}
  			&.affix-top {position: relative !important;}
  		}
  	}

		h2 {
			@extend %steps-title;
			text-align: left;
			border-top:none;
			background:none !important;
			margin-bottom: 15px;
		}

		.quantity {
			min-width: 10px;
			width: auto;
	    height: 10px;
	    display: inline-block;
	    background:$actionSecondary;
	    color:$actionPrimary;
		}

		.summary-template-holder {
			width:100%;
			background: none;
			border: none;
			padding: 0;

			.accordion-inner {margin-top: 0px;}

			.summary > .summary-coupon-wrap,
			.summary-coupon-wrap > .summary-coupon {
				display: block !important;
			}

			.summary-coupon p {
				margin:0;
			}

			.summary > .summary-coupon-wrap {
				border-top:1px solid $muted4;
				padding:8px 0;
			}

			input[type=text],
			button[type=submit],
			p.coupon-fields span.info > span {
				line-height: 30px !important;
				height:30px !important;
			}
		}

		.item {
	    padding: 10px 0;
	    margin: 0;
	    border: none;
	    border-bottom: 1px solid $muted5;
			&:last-child {border:none;}

			ul.service-list.unstyled {
				margin: 0;
				float: none;
				width: 100%;
				background: none;
				display: inline-block;
				clear: both;
			}
			.service-item,
			&.v-custom-indexed-item {
				background:$actionSecondary;
				border:1px dashed $muted4;
				border-radius:$borderRadius;

				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				box-sizing: border-box;
				padding: 5px 10px;
				margin:10px 0 0 0;

				.description {margin-top:0;}
				> a,
				.quantity,
				.shipping-date,
				.item-subscription {display:none;}

				.price {margin:0;}

				&:last-child {margin-bottom:0;}
			}

			&.v-custom-indexed-item {
				.item-unavailable {display:none;}
			}

	    .fn { width: calc(82% - 20px); }

	    .description {
			  display: flex;
			  justify-content: space-between;
			}

			.price,
			span.shipping-date {
			  white-space: nowrap;
			}

			.url {
				border-radius: $borderRadius;
    		overflow: hidden;
			}

		}

		.summary-totalizers {
	    margin-bottom: 0;
		}

		#go-to-cart-button {
	    position: absolute;
	    top:0px;
	    right: 7px;
	    color:$actionPrimary;
	    text-decoration: underline;
	    @media (max-width: $mobileWidth) {
	    	display: none;
	    }
		}

		.summary-totalizers {
			 tbody {
		    border-top:1px solid $muted4;
		    border-bottom:1px solid $muted4;
		    padding: 14px 0;
  			display: block;

  			tr {
			    &.CustomTax:not(.CustomTax--total) {
			      display:none !important;
			    }
			  }

		    td {
		      display: inline-block;
		      text-align: left !important;
		      width: auto;
		      color:#666;
		      font-size:13px;
		      padding: 0 0 3px 0 !important;
		      &.monetary {
		        text-align: right !important;
		        margin-left: auto;
		        float: right;
		      }
		    }

		    & + tbody {
			    border-top: none;
				}
				&.shipping-reset,
				&.shipping-calculate {display: none !important;}
		  }
		  tfoot {
		    tr td {
		      padding:14px 0 !important;
		      color:#000;
		      font-size:14px;
		      font-weight:bold;
		      text-align: left;
		      &.monetary {
		        text-align: right !important;
		        margin-left: auto;
		        float: right;
		        color:$actionPrimary;
		      }
		    }
		  }
		}

		.cart {
			margin-bottom: 0;
			max-height: calc(100vh - 355px);
			overflow:auto;

			&::-webkit-scrollbar {
				width: 6px
			}

			&::-webkit-scrollbar-track {
				background: transparent;
				border-radius: $borderRadius
			}

			&::-webkit-scrollbar-thumb {
				background: $muted4;
				border-radius: 30px
			}

			&:hover::-webkit-scrollbar-thumb {
				background: $muted5;
			}

			.cart-items:not(.v-loaded) {
				max-height: 100px;
				overflow: hidden;
				li.item {
					overflow:hidden;
					position:relative;
					border: none !important;
					> * {opacity:0;}

					&:after {
						content:"";
						width:100%;
						height:100%;
						display:block;
						top:0px;
						left:0;
						position:absolute;
						@extend %loading-shimmer;
					}
				}
			}
		}

	}

	.payment-confirmation-wrap {
		border:none;
		padding:0;

		.payment-submit-wrap {
			margin:10px 0 0 0;

			@media(max-width: 768px) {
				z-index: 9999;
				position: fixed;
				bottom: 0;
				width: 100%;
    		left: 0;
				padding: 0;
				background:#FFF;
				margin: 0 !important;
				button {
					border-radius:0 !important;
				}
			}
		}
		@media(max-width: 768px) {
			border:none !important;
			.payment-submit-wrap,
			button { margin:0 !important; }
		}

		#payment-data-submit {
			&:disabled span {
				display:none;
			}
		}
	}

	.summary-note {
		display:none !important;
		p.note-data {display: none !important;}
		> div {
			display: block !important;
		}
		.note-textarea {
			@extend %input-style;
			height:50px;
			line-height: 20px;
			max-width: 100%;
			width: 100%;
			font-family:$fontFamily;
			max-height: 100px;
		}
	}

	.custom-cart-template-wrap {
		position: relative;
		background: #FFF;
	  padding: 17px 20px;
	  text-align: left;
	  box-sizing: border-box;
	  border-radius:$borderRadius;

	  border: $bordersContainers;

	  .summary-cart-template-holder {
	    height: auto !important;
		}
	  .summary-template-holder {margin-top: 0;}
	}

}

// counting steps

	@if $countingSteps {

		.step.client-profile-data.active .box-step .form-step[style*="display: block"],
		.step.shipping-data.active .accordion-inner.shipping-container,
		#payment-data .box-step form.form-step {
	    padding-top: 20px !important;
		}

		.orderform-template-holder #shipping-data .shipping-summary-info,
		.orderform-template-holder .step .accordion-body p.notification,
		.client-pre-email + .client-profile-data .accordion-body:before {
			display: none;
		}
		body.v-custom-step-shipping #shipping-data .shipping-summary-info,
		body.v-custom-step-payment #shipping-data .shipping-summary-info {
				display:block
		}
	}

// end counting steps

//iframe

.steps-view, .gift-card-section,
.App.iframe-credit-card-payment-group {
  background:#FFF;
}

#app-container {
	min-height: 100vh;
	background: #FFF;

	input[type=text],
	input[type=tel],
	input[type=email],
	select {
		@extend %input-style;
		width: 100%;
	}

	span.help.error {
		margin:0 !important;
		display:none;
	}

	.SecurityEnvironmentIcon {
		margin-bottom:20px;
		display: none;
	}

	.CardForm {
		> div {position: relative;clear: both;}
		.PaymentValue {display:none;}

		input#creditCardpayment-card-0Number[value=""] {
			background:#FFF;
			position:relative;
			z-index:1;
		}

		.SavedCardsList {
			width: calc(100% - 1px);
		}
		.SavedCard .link-delete {
			right: 8px;
			top: 50%;
			margin-top: -10px;
			border: 1px solid #ccc;
			background: #FFF;
			width: 20px;
			height: 20px;
			line-height: 17px;
		}
	}
	.FormFieldLabel {
		line-height: 30px;
	}

	.PaymentCardFlags {
		position: absolute;
    top: calc(30px + ( #{$inputHeight} - 25px )/2);
    right: 16px;
    padding: 0;
	  .card-flag-label input {
	    display:none;
		}
		.card-flag-label {width:auto;}
		.card-flag {opacity: 0.7;display: none;}
		.card-flag.card-selected {opacity: 1;display:block;}
	}

	input#creditCardpayment-card-0Code,
	input#creditCardpayment-card-1Code{
	  width: 100px !important;
	}

	.label-vertical-group {
		padding: 9px;
		&:hover {
			color:$actionPrimary;
		}
		&.active {
			color:$actionPrimary;
			background:$actionSecondary;
		}

		&:not(.SavedCard) {
			.card-flag {
				position: absolute;
				left: 5px;
				top: 8px;
			}
		}

		.icon-ok-circle, .icon-circle-blank {
			top: 9px;
		}
		&.UseAnotherCard {
			background-color: $muted5;
			padding:4px;
			font-size: 11px;
    	text-decoration: underline;

			#use-another-card {
				color:$muted2;
			}
			&:hover {
				#use-another-card {
					text-decoration: underline;
					color:$muted3;
				}
			}
		}
	}

	label.FormFieldLabel {
	  display: block;
	  clear: both;
	  width: auto;
  	margin-right: 10px;
	}

	.AddressForm {
    display:flex;
		flex-wrap:wrap;
		> * {width:100%;order:10;}
		input {
				max-width:100%;
		}

		.payment-billing-address-street {order:1;}
		.payment-billing-address-complement {order:2;}
		.payment-billing-address-city {order:3;}
		.payment-billing-address-state {order:4;}
		.PostalCode {order:5;}
	}

}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_scss/_components/_global.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss
// _global.scss

body {
  font-family:$fontFamily;
  min-width: initial !important;
  padding: 0;
  background: $base;
  padding-bottom:40px !important;

  min-height: 93vh;
  position: relative;
  font-size: $fontSize;

  overflow-x:hidden;

  a {
    color:$actionPrimary;
    &:hover {
      color:$actionPrimaryDarken;
    }
  }

  @media(max-width: 768px) {
    padding-bottom:0px !important;
  }

  //short preloader to don't show a empty cart
  .cart-template.full-cart {
    > * {
      opacity: 0;
      transition-delay:1.2s;
      transition-property: opacity;
      -webkit-transition-duration:0.5s;
    }
  }
  &.v-custom-loaded {
    .cart-template.full-cart {
      > * {opacity: initial;}
    }
  }
  //end short preloader to don't show a empty cart

  &.returningUser.v-custom-addressForm-on.v-custom-step-shipping
  .accordion-inner.shipping-container  {

    .vtex-omnishipping-1-x-addressFormPart1.vtex-omnishipping-1-x-geolocation {
      display: block;
    }

    .vtex-omnishipping-1-x-deliveryGroup {
      display: block;
    }

    .vtex-omnishipping-1-x-submitPaymentButton {
      display: block;
    }
  }
}

.onda-v1 .br-pill,
.step, .cart, .totalizers {
	border-radius:$borderRadius;
}

.container-main {
}

.loading.loading-bg {
  background:$base;
}

// containers

.container {
  max-width:$maxWrapper;
  width:calc(100% - 40px);
  @media(max-width: $mobileWidth) {
    width:calc(100% - 20px);
  }
}

.checkout-container {
  overflow: initial !important;
  z-index: 2;

  @media(max-width: 768px) {
    margin-bottom: 30px;
  }

  .orderform-template,
  .cart-template {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transition:position ease 0.8s, opacity ease 0.8s, margin ease 0.8s;
    &.inactive {
      max-height: 50vh;
      overflow:hidden;
      top:0;
      position: absolute;
    }
  }
  .full-cart {
    &.inactive {
      margin-left: -140%;;
    }
  }
  .orderform-template {
    &.inactive {
      left: 140%;
      margin: 0;
      display:none !important;
    }
  }
}

//titles

  .container-cart h1,
  h1#orderform-title {
  	font-size: 22px !important;
    font-weight: 400 !important;
    color: $muted1 !important;
  }

  h1#orderform-title {display:none !important;}

// assemblies custom vtex

  .v-custom-assemblies {
    margin: 10px 0 3px 0;
    overflow: hidden;
    border-top: 1px solid $muted4;
    padding-top: 7px;
    @media(max-width: $mobileWidth) {
      width: 100%;
      left:0;
      margin-bottom: 2px;
    }

    p {display: none;}
    &__values {
      list-style: none;
      padding: 0;
      margin: 0;

      &__item {
        strong {
          &:after {content:":";}
        }
        span, strong {line-height: 14px;}
      }
    }

  }
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_scss/_components/_jsInteractions.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss

//note field

.orderform-template .summary-note {
  &.js-active {
    display:block !important;
  }
}

// coupon field

body.js-vcustom-showNoteField {
  .orderform-template {
    .payment-confirmation-wrap {
      display:block !important;
      .payment-submit-wrap {display:none;}
    }
    .summary-note {display: block !important;}
  }
  &.v-custom-step-payment {
    .orderform-template {
      .payment-confirmation-wrap {
        .payment-submit-wrap {display:block !important;}
      }
    }
  }
}

.summary-coupon fieldset.coupon-fieldset {
  .vcustom-showCustomMsgCoupon {
    border: 1px dashed $warning;
    padding: 1px;
    font-size: 11px;
    background: $warningFaded;
    border-radius: $borderRadius;
    margin-top:4px !important;
    clear: both;
  }
}

// custom tax

.vcustom-customTax-tot {
  display: inline-block;
  position: relative;
  margin-left:5px;
  > span {
    background:$muted5;
    width:15px;
    height:15px;
    line-height:15px;
    display:inline-block;
    border-radius:100%;
    text-align:center;
    cursor: pointer;
  }

  &:hover {
    .vcustom-customTax-resume {
      display: block;
    }
  }
}

.vcustom-customTax-resume {
  position: absolute;
  left: calc(100% + 10px);
  width: 128px;
  background: $muted5;
  top: 50%;
  font-size: 11px;
  padding: 10px;
  transform: translateY(-50%);
  display: none;
  &__i {
    display: flex;
    justify-content: space-between;
    margin: 0;
  }
  &:before {
    content:"";
    display:block;
    position:absolute;
    left:-4px;
    top:calc(50% - 4px);
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-right: 4px solid $muted5;
  }
}

// custom coupon flag

.v-custom-addLabels-active-flag {
  background:#FFF;
  color: $muted1;
  padding: 1px 4px;
  border-radius: $borderRadius;
  display: inline-block;
  align-items: center;
  font-size: 11px;
  border:1px solid $muted4;

  &:before {
    content:"";
    display:inline-block;
    width: 14px;
    height: 14px;
    background:url("//io.vtex.com.br/front-libs/bootstrap/2.3.2/img/glyphicons-halflings.png");
    background-repeat: no-repeat;
    background-position: 0 -48px;
    margin-right: 4px;
    opacity: 0.9;
    vertical-align: middle;
  }
}

.table.cart-items tbody tr.product-item, .mini-cart .cart-items li {
  .v-custom-addLabels-active-flag {
  }
}

// assemblies custom vtex

  .v-custom-assemblies {
    margin: 10px 0 3px 0;
    overflow: hidden;
    border-top: 1px solid $muted4;
    padding-top: 7px;
    @media(max-width: $mobileWidth) {
      width: 100%;
      left:0;
      margin-bottom: 2px;
    }

    p {display: none;}
    &__values {
      list-style: none;
      padding: 0;
      margin: 0;

      &__item {
        strong {
          &:after {content:":";}
        }
        span, strong {line-height: 14px;}
      }
    }

	}

//js

body.v-custom-paymentBuilder-accordion .steps-view {display: none;}
body.v-custom-changeShippingTimeInfo .orderform-template .cart-template.mini-cart .item span.shipping-date {
	display: none;
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_scss/_components/_customAddressForm.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss

#shipping-data .accordion-group.shipping-data:after {
  opacity: 0;
  transition: all ease 0.3s;
}
.js-v-custom-is-loadAddress {
  .vtex-omnishipping-1-x-warning {
    display: none !important;
  }

  #shipping-data .accordion-group.shipping-data:after {
    content: "";
    display: block;
    opacity: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 20px;
    z-index: 2;
    margin:0 0 20px 0;
    border-radius: 3px;
    @extend %loading-shimmer;
  }

  #postalCode-finished-loading + .mb5 {
    display: none !important;
  }

}

.vcustom--vtex-omnishipping-1-x-address {
  display: none;
}
body.v-custom-addressForm-on {

  &.v-custom-step-shipping {
    .vcustom--vtex-omnishipping-1-x-address {
      display: block;
    }
    .v-custom-ship-info {
      display:flex;
      .ship-number {
        margin-right: 10px;
      }
    }
    .vtex-omnishipping-1-x-addressForm, .vtex-omnishipping-1-x-deliveryGroup, .vtex-omnishipping-1-x-submitPaymentButton {
      display: none;
    }
  }

}

.vtex-omnishipping-1-x-submitShippingStepButton {
  margin: 20px 0 0 0;
}

body.v-custom-googleForm-on {
  .pac-container.pac-logo {
    //display: block !important;
  }

  .vtex-omnishipping-1-x-deliveryGroup,
  .vtex-omnishipping-1-x-addressForm,
  .vtex-omnishipping-1-x-submitPaymentButton,
  .vtex-omnishipping-1-x-btnDelivery {
      display:none
  }

  .alert-noStreet {
    display: none;
  }

}

.v-custom-googleFormScript-added.v-custom-googleForm-on .accordion-inner.shipping-container  > * {
  display: none;
}

body.v-custom-fnsCustomAddressForm {

  .accordion-inner.shipping-container {
    padding-top:0 !important;
  }

  .accordion-inner.shipping-container {
    transition:all ease 0.3s;
  }

  .vtex-omnishipping-1-x-selectDeliveryText + div {margin:0 !important;}

  .orderform-template-holder p.vtex-omnishipping-1-x-submitPaymentButton.btn-submit-wrapper.btn-go-to-payment-wrapper {
    margin-bottom:0 !important;
  }

  .vtex-omnishipping-1-x-addressFormPart1 {
    .input.ship-country,
    .input.ship-addressQuery,
    .input.ship-postalCode {display: none;}
  }

  &.returningUser {
    .vtex-omnishipping-1-x-addressFormPart1 {
      .input.ship-postalCode {display: block;}
    }
  }

  .vtex-omnishipping-1-x-container.shp-pickup-receiver +
  .vtex-omnishipping-1-x-shippingSectionTitle +
  #back-to-address-list +
  .vtex-omnishipping-1-x-addressFormPart1 p.input.ship-postalCode,
  .vtex-omnishipping-1-x-container.shp-pickup-receiver +
  .vtex-omnishipping-1-x-shippingSectionTitle +
  .vtex-omnishipping-1-x-addressFormPart1 p.input.ship-postalCode {
      display:block;
  }

  .orderform-template-holder {
    .step.shipping-data .box-step {
      .vtex-omnishipping-1-x-addressFormPart1 {order: 1;}
    }
  }

  .pac-logo[style*="none"] {
    border:0;
  }
  .pac-logo[style*="none"]:after {
      display: none;
  }

  #shipping-data .accordion-inner + .vcustom--vtex-omnishipping-1-x-address {
    display: none;
  }

  div#shipping-data {
    display: flex;
    flex-wrap: wrap;
    > * {
      width:100%;
    }

    .step.accordion-group.shipping-data {order: 1;}
    .vcustom--vtex-omnishipping-1-x-address {order: 3;}
  }

}

.js-v-custom-is-loading {

  .accordion-inner.shipping-container,
  .vcustom--vtex-omnishipping-1-x-address {
    overflow: hidden;
  }

  .vcustom--vtex-omnishipping-1-x-address {
    height: 120px;
    position:relative;

    &:before {
      content:"";
      display:block;
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:100%;
      z-index:2;
      @extend %loading-shimmer;
    }
  }

  .accordion-inner.shipping-container > *,
  .vcustom--vtex-omnishipping-1-x-address > * {
    opacity:0.5
  }

}

.vcustom--vtex-omnishipping-1-x-address {
  transition:all ease 0.3s;

  p.input {
    float: none;
    width: 100%;
    margin: 0;
  }

  label {
    @extend %label;
  }

  span.help.error {display: none;}

  input {
    @extend %input-style;
    max-width: initial;
    width: 100%;

  }

  input.error + span.help.error,
  select.error + span.help.error {display: block;}

  &__state {
    display: flex;
    margin: 0 -5px;
    p.input {
      margin:0 5px;
    }
    @media (max-width:768px) {
      flex-wrap:wrap;
      margin: 0;
      p.input.ship-state {margin:0;}
    }
  }

}

//google address form

.pac-container.pac-logo {border: 1px solid $muted4; border-radius: $borderRadius;}

.pac-logo:after {
  background: #fbfbfb url(https://developers.google.com/maps/documentation/images/powered_by_google_on_white.png) no-repeat 10px center;
  padding: 14px;
  background-size: 110px;
}

.address-list.vtex-omnishipping-1-x-addressList + p.input.ship-addressQuery.text {display:none;}

.alert-noStreet {
  margin: 30px auto 0 auto;
  text-align: center;
}

.vtex-omnishipping-1-x-addressSummaryActive .address-summary.address-summary-MLT .postalCode:before {
  content:" - ";
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_scss/_components/_steps.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss
//steps

  $numberStepSize:26px;

  %countingStepsNormal {
    background: #FFF;
    border:1px solid $muted1;
    color:$muted1;

    width:$numberStepSize;
    height: $numberStepSize;
    line-height: $numberStepSize;
    font-size: 15px;

  }

  %countingStepsActive {
    background:$actionPrimary;
    border-color:$actionPrimary;
    color:#FFF
  }

  %countingStepsFilled {
    @extend %countingStepsActive;
  }

  //keep attention changing anything below

  @if $countingSteps {
    .client-pre-email h3.client-pre-email-h span:before,
    .client-profile-data .accordion-toggle > span:before,
    .shipping-data .accordion-toggle:before,
    .payment-data .accordion-toggle > span:not(.payment-edit-link):before {

      @extend %countingStepsNormal;

      text-align: center;
      margin-right:10px;
      border-radius: 100%;

      display: inline-block;

      font-weight:bold;
      vertical-align: middle;
      margin-top: -2px;
    }

    .client-pre-email h3.client-pre-email-h span:before { content: "1" }
    .client-profile-data .accordion-toggle > span:before { content: "2" }
    .shipping-data .accordion-toggle:before { content: "3" }
    .payment-data .accordion-toggle > span:not(.payment-edit-link):before { content: "4" }
  }

  //mobile
  @media(max-width: $mobileWidth) {
    body {
      &:before {
        width: 0;
        height: 4px;
        background:$actionPrimary;
        display: block;
        content:"";
        position: fixed;
        top: 0;
        transition: all ease 0.3s;
        z-index: 999;
      }
      &.v-custom-step-email:before {width: 23%;}
      &.v-custom-step-profile:before {width: 46%;}
      &.v-custom-step-shipping:before {width: 69%;}
      &.v-custom-step-payment:before {width: 92%;}
    }

  }

  %checkout-steps-active {
    color:$muted1;
    font-weight: bold;
    pointer-events: initial;
  }

  body {
    &.v-custom-step-cart .checkout-steps_item_cart {
      opacity: 1;
      .text {@extend %checkout-steps-active;pointer-events: none;}
      &:before {background: $actionPrimary;border-color: $actionPrimary;}
    }
    &.v-custom-step-email,
    &.v-custom-step-profile{

      .checkout-steps_bar_inner-active {width: 20%;}
      .checkout-steps_item_cart,
      .checkout-steps_item_identification {
        opacity: 1;
        .text {@extend %checkout-steps-active;}
        &:before {background: $actionPrimary;border-color: $actionPrimary;}
      }
      .checkout-steps_item_identification .text {pointer-events: none;}

      .client-pre-email h3.client-pre-email-h span:before {
        @extend %countingStepsActive;
      }
    }

    &.v-custom-step-shipping {
      .checkout-steps_bar_inner-active {width: 40%;}
      .checkout-steps_item_cart,
      .checkout-steps_item_identification,
      .checkout-steps_item_shipping {
        opacity: 1;
        .text {@extend %checkout-steps-active;}
        &:before {background: $actionPrimary;border-color: $actionPrimary;}
      }
      .checkout-steps_item_shipping .text {pointer-events: none;}
    }

    &.v-custom-step-payment {
      .checkout-steps_bar_inner-active {width: 60%;}
      .checkout-steps_item_cart,
      .checkout-steps_item_identification,
      .checkout-steps_item_shipping,
      .checkout-steps_item_payment {
        opacity: 1;
        .text {@extend %checkout-steps-active;}
        &:before {background: $actionPrimary;border-color: $actionPrimary;}
      }
      .checkout-steps_item_payment .text {pointer-events: none;}
    }

    &.v-custom-step-profile {
      .client-pre-email h3.client-pre-email-h span:before {
        @extend %countingStepsFilled;
      }

      .client-profile-data .accordion-toggle > span:before {@extend %countingStepsActive;}
    }
    &.v-custom-step-shipping {

      .client-pre-email h3.client-pre-email-h span:before,
      .client-profile-data .accordion-toggle > span:before {
        @extend %countingStepsFilled;
      }

      .shipping-data .accordion-toggle:before {@extend %countingStepsActive;}
    }
    &.v-custom-step-payment {

      .client-pre-email h3.client-pre-email-h span:before,
      .client-profile-data .accordion-toggle > span:before,
      .shipping-data .accordion-toggle:before {
        @extend %countingStepsFilled;
      }

      .payment-data .accordion-toggle > span:not(.payment-edit-link):before {@extend %countingStepsActive;}
    }
  }
  .checkout-steps {
    display: none;
    position: relative;
    min-width: 470px;
    width:100%;
    @if $showCheckoutSteps {
      display: block;
    }
    @media(max-width: $mobileWidth) {
      display: none !important;
    }

    &-wrap {

    }

    /*
    &_bar_inner,
    &_bar_inner-active {
      width: calc(100% - 20%);
      height: 3px;
      background: $actionSecondary;
      display: block;
      margin: 0 auto;
      position: absolute;
      left: 10%;
      top: 7px;
      transition: all ease 0.3s;
    }
    */

    &_bar_inner-active {width:0;background: $actionPrimary;}

    &_items {
      display:flex;
      justify-content: space-between;
    }

    &_item {
      position:relative;
      text-align: center;
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      opacity:0.6;

      &:after {
        content:"";
        height:2px;
        background: $actionPrimary;
        margin: 0px 5px;
        min-width: 10px;

      }

      .text {
        clear: both;
        display: flex;
        align-items: center;
        color:$muted3;
        font-weight: 500;
        cursor:pointer;
        pointer-events: none;

        &:before {
          content:  "";
          width: 7px;
          height: 7px;
          background: $actionPrimary;
          border: 2px solid $actionPrimary;
          display: inline-block;
          border-radius:100%;
          margin-right: 7px;
          transition: all ease 0.3s;
        }
      }

      &_cart:after {width: calc(100% - 50px);}
      &_identification:after {width: calc(100% - 103px);}
      &_shipping:after {width: calc(100% - 77px);}
      &_payment:after {width: calc(100% - 77px);}
      &_confirmation:after {display:none;}
    }
  }

//end steps
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_scss/_components/_titles.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss

//titles in third step checkout

%steps-title {
	font-size: calc( #{$fontSize} + 2px);
  text-transform: uppercase;
  border-bottom: 1px solid $muted5;
  font-weight: bold;
  margin-bottom: 15px;
  padding:7px 0 !important;
  color:$muted3;

  @if $countingSteps {
  	color: $muted1;
	  border: none;
	  font-size: 20px;
	  text-transform: initial;
	  margin-bottom: 0px;
  }

}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_scss/_components/_buttons.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss
// _buttons.scss

.btn {
	font-family:$fontFamily;
	text-shadow: none;
	border-radius:$btnBorderRadius;
	outline: none !important;
	text-align: center;
	font-size: $fontSize;
	padding: 5px 12px;
	box-sizing: border-box;
	display: inline-block;

	&,
	&:hover,
	&:focus {
		transition: all ease 0.3s;
	}

	@if $buttonShadow {

	} @else {
		background: none;
		box-shadow: none;
		&:hover,
		&:focus {
			background:none;
		}
	}

	&-large {
		padding:17px 19px;
	}

	&-link {
		color:$actionPrimary;
		&:hover,
		&:focus {
			color:$actionPrimaryDarken;
		}
	}

	&-success {
		background: $success;
		border:1px solid $success;
		font-size:13px;

		&:hover,
		&:focus,
		&:active {
			background:$successDarken;
			border:1px solid $successDarken;
		}

		&[disabled] {
			background: $success;
		}
	}

	&-primary {
		background: $actionPrimary;
		border:1px solid $actionPrimary;
		color:$actionSecondary;

		&:hover,
		&:focus,
		&:active {
			background:$actionPrimaryDarken;
			border:1px solid $actionPrimaryDarken;
		}
	}

	&-secondary {
		background: transparent;
		border:1px solid $actionPrimary;
		color:$actionPrimary;

		&:hover,
		&:focus,
		&:active {
			background:$actionSecondary;
			border:1px solid $actionPrimaryDarken;
			color:$actionPrimaryDarken;
		}
	}

	&-outlined {
		background: transparent;
		border:1px solid $success;
		color:$success;

		&:hover,
		&:focus,
		&:active {
			background:transparent;
			border:1px solid $successDarken;
		}
	}

	&#payment-data-submit {
		span {
			font-size: 14px;
			margin-left: 5px;
			font-weight: bold;
		}
	}
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_scss/_components/_vtexId.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss

#vtexIdContainer {
  position: fixed !important;
}

.vtexIdUI {
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%) !important;

}

#vtexIdContainer {
  position: fixed;
  a {color:$actionPrimary;}

  input {@extend %input-style;}

  .vtexIdUI {
    .modal-footer {
      background: none;
    }
    .btn {
      border-radius:$btnBorderRadius;
      height: $inputHeight;
      line-height: $inputHeight;
      box-shadow: none !important;
      font-size: $fontSize;
      padding:0 30px;
      &.btn-success {
        background: $success;
        border:1px solid $success;

        &:hover,
        &:focus,
        &:active {
          background:$successDarken;
          border:1px solid $successDarken;
        }
      }

      &#vtexIdUI-facebook {
        background: #4568ad !important;
      }
    }

  }
  @media (max-width:768px) {
    position: fixed !important;
    .vtexIdUI {
      overflow: auto;
      border-radius: 0;
      width: 100%;
      left: 0;
      margin: 0;
      top: 0;
      height: 100% !important;
      border: none;
      .modal-header .close {
        top: 0;
        right: 0;
        margin: 0;
        padding: 4px 8px;
      }
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_scss/_components/_debug.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss
body.debug-on > *:not(.container-main, .main-header, .main-footer, #vtexIdContainer,.vtex-front-messages-placeholder, .pac-container) {
  display:none;
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_scss/_components/_input.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss

input, select, button {
	outline: none !important;
}
//input

%input-style {
	height: $inputHeight;
	line-height:$inputHeight;
	max-height:initial;
	display:inline-block;
	padding:0px 10px ;
	border-radius:$borderRadius;
  border:1px solid $muted4;
	outline: initial;
	font-family:$fontFamily;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;

	&.error {
		border-color:$danger;
	}

	&:focus {
		box-shadow:inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(0,0,0,0.4);
	}
}

input#creditCardpayment-card-0Number,
input#creditCardpayment-card-0Code,
input#creditCardpayment-card-1Number,
input#creditCardpayment-card-1Code{
	font-size:18px;
}

//remove autofill from chrome

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    animation: input_background_autofill 0s forwards;
}
@keyframes input_background_autofill {
    100% { background-color: transparent }
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_scss/_components/_hide-email-step.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss

body.js-vcustom-hideEmailStep {
  .orderform-template-holder #client-profile-data form.client-pre-email.client-pre-email {
    display:none !important;
  }

  .client-profile-data .accordion-toggle>span:before {
    content:"1";
  }

  .shipping-data .accordion-toggle:before {
    content:"2";
  }

  .payment-data .accordion-toggle>span:not(.payment-edit-link):before {
    content:"3";
  }

  .client-profile-data .accordion-toggle > span:before {@extend %countingStepsActive;}

  .client-pre-email+.client-profile-data .accordion-body .accordion-inner {
    display: block;
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_scss/_components/_modals.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss
.default-modal {
  border-radius:$borderRadius;
  height:auto;
}

.modal {
  .btn {
    background: #FFF;
  }
}

.modal.guest-login-modal {}
    .modal.guest-login-modal button.btn {width:auto;}

.modal.guest-login-modal,
.modal.modal-email-template ,
.modal.modal-payment-template,
.modal.modal-masked-info-template {
    background:$success;
}

.payment-confirmation-message {
  width:100%;
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_scss/_components/_footer.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss
.main-footer {
	clear: both;
	text-align: center;
	padding: 2px 0;
	border-top:1px solid $muted4;

	position: absolute;
	bottom: 0;
	width: 100%;
	z-index:-1;

	.container {position: initial;}

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

	a.credits-vtex {
    width: 100px;
    display: block;
    margin: 0 auto;
	}
	.vtex-logo {
		display: block;
    margin: 0 auto;
	}

	svg, svg path {
		fill:$muted3;
	}
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_scss/_components/_fns.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of checkout-ui-custom/checkout-ui-custom/src/_scss/_components/_pre-email.scss from the checkout-ui-custom VTEX app.

[Assistant]
Here's the implementation:

```scss
// pre email step

.client-pre-email {
  background: none;
  width: 100%;
  border-top:none;
  position:relative;
  text-align: left;

  fieldset.pre-email {
    box-sizing: border-box;

  }

  label {
    margin: 0;
    line-height: 20px;

    small {
      font-size: $fontSize;
      padding: 0;
      margin: 0;
      color: $muted1;
      font-weight: 400;
      margin: 0;
      vertical-align: top;
      display: block;
      margin-bottom: 13px;

      margin-top: 20px;

    }
  }

  .link-cart {display: none;}

  h3.client-pre-email-h {
    margin: 0;
    span {

      display: block;
      position:relative;

      font-size: 0;

      &:after {
        content: "Email";
        @extend %steps-title;
        vertical-align: middle;
        display: inline-block;
        margin: 0;
      }

      @if $countingSteps {
        padding:7px 0 !important;
        &:after{padding: 0 !important;}
      } @else {
        &:after{width: 100%;}
      }
    }

    .link-box-edit {display: none;}
  }

  a#orderform-to-cart {
    color:$actionPrimary;
  }

  .client-email.input.text {
    margin: 0;
    width: 100%;
    position:initial;

    input[type="email"] {
      width: 100%;
      box-sizing: border-box;
    }
    .btn-success {
      width: 20%;
      margin: 0;
      height: initial;
      position: absolute;
      top: initial;
      bottom:15px;
      right: initial;
      left: 50%;
      transform: translateX(-50%);
      min-width: 55%;

      @extend .btn-large;

      @media(max-width: 768px) {
        width: calc(100% - 60px);
      }
    }

    .loading-inline {
      position: absolute;
      color: #FFF;
      font-size: 16px;
      bottom: 35px;
      top: initial;
      right: 50% !important;
      margin-right: -10px;
    }

    .loading-inline[style=""] + #btn-client-pre-email {
      font-size:0;
    }
  }

  span.help.error {
  }

  .emailInfo {
    margin-top:20px;
    width: 80%;
    box-sizing:border-box;
    .icon-ok,
    h3 {
      color:$actionPrimary;
    }

    @media(max-width: $mobileWidth) {
      width: 100%;
    }

    .icon-lock {
      color: $muted5;
    }
  }

  @media(max-width: $mobileWidth) {
    .link-cart { display: none !important;}
  }

  & + .client-profile-data {
    .accordion-body:before {
      content:"Waiting for more information";
      display:block;
    }
    .accordion-body .accordion-inner {display:none;}

    &.filled {
      .accordion-body:before {
        display: none;
      }
    }
  }

  &[style*="display: none"] {
    padding-bottom:20px !important;

    .link-box-edit {display: block !important;}
    label {
      small {display: none !important;}
    }

    input#client-pre-email {
      padding: 0 !important;
      border: none !important;
      box-shadow: none !important;
      font-size: 12px;
      font-weight: 400;
      pointer-events: none;
      cursor: text;
      background: none !important;
      color:$muted2;
    }

    .emailInfo,
    #btn-client-pre-email {
        display:none;
    }

    & + .client-profile-data {
      .accordion-body:before {
        display: none;
      }
      .accordion-inner {display:block;}
    }
  }
}

body:not(.v-custom-step-email) .client-pre-email span.help.error {
  display: none !important;
}
```