* {
  box-sizing: var(--air-box-sizing, border-box);
}

:host {
  display: var(--air-checkout-host-display, block);
}

.checkout {
  display: var(--air-checkout-display, grid);
  grid-template-columns: var(--air-checkout-grid-template-columns, auto auto auto);
  grid-template-areas: var(--air-checkout-grid-template-areas, "logo name payment" "logo title purchase" "divider divider divider" "cost cost cost" "fee fee fee" "total total total");
  width: var(--air-checkout-width, 100%);
  max-width: var(--air-checkout-max-width, 768px);
  padding: var(--air-checkout-padding, var(--air-spacing-05, 2rem));
  border: var(--air-checkout-border, 1px solid var(--air-color-bright-gray, #545559));
  background-color: var(--air-checkout-background-color, var(--air-color-white, #ffffff));
}
.checkout .edit {
  color: var(--air-checkout-edit-color, var(--air-link-color, var(--air-color-denim, #2e71bd)));
  text-decoration: var(--air-checkout-edit-text-decoration, var(--air-link-navigation-text-decoration, none));
}
.checkout .edit:hover {
  color: var(--air-checkout-edit-hover-color, var(--air-link-hover-color, var(--air-color-eclipse, #3a3a3a)));
}
.checkout .edit:focus {
  color: var(--air-checkout-edit-focus-color, var(--air-link-focus-color, var(--air-link-hover-color, var(--air-color-eclipse, #3a3a3a))));
}
.checkout .edit:active {
  color: var(--air-checkout-edit-active-color, var(--air-link-active-color, var(--air-color-eclipse, #3a3a3a)));
}
.checkout .edit:visited {
  color: var(--air-checkout-edit-visited-color, var(--air-link-visited-color, var(--air-color-accent, #8a2be2)));
}
.checkout .logo {
  grid-area: logo;
}
.checkout .name {
  grid-area: name;
  color: var(--air-checkout-name-color, var(--air-headline-2-color, var(--air-color-eclipse, #3a3a3a)));
  font-family: var(--air-checkout-name-font-family, var(--air-headline-2-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"));
  font-size: var(--air-checkout-name-font-size, var(--air-headline-2-font-size, 1.25rem));
  font-weight: var(--air-checkout-name-font-weight, var(--air-headline-2-font-weight, 600));
  line-height: var(--air-checkout-name-line-height, var(--air-headline-2-line-height, 1.5));
  padding-left: var(--air-checkout-name-padding-left, var(--air-spacing-03, 1rem));
  padding-right: var(--air-checkout-name-padding-right, var(--air-spacing-03, 1rem));
  margin-top: var(--air-checkout-name-margin-top, 0);
  margin-bottom: var(--air-checkout-name-margin-bottom, 0);
}
.checkout .title {
  grid-area: title;
  color: var(--air-checkout-title-color, var(--air-caption-color, var(--air-color-eclipse, #3a3a3a)));
  font-family: var(--air-checkout-title-font-family, var(--air-caption-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"));
  font-size: var(--air-checkout-title-font-size, var(--air-caption-font-size, 0.875rem));
  font-weight: var(--air-checkout-title-font-weight, var(--air-caption-font-weight, 400));
  line-height: var(--air-checkout-title-line-height, var(--air-caption-line-height, 1.5));
  padding-left: var(--air-checkout-title-padding-left, var(--air-spacing-03, 1rem));
  padding-right: var(--air-checkout-title-padding-right, var(--air-spacing-03, 1rem));
  margin-top: var(--air-checkout-title-margin-top, 0);
  margin-bottom: var(--air-checkout-title-margin-bottom, 0);
}
.checkout .payment {
  display: flex;
  justify-content: space-between;
  grid-area: payment;
}
.checkout .purchase {
  display: flex;
  justify-content: space-between;
  grid-area: purchase;
}
.checkout .divider {
  grid-area: divider;
  --air-divider-margin: var(--air-checkout-divider-margin, var(--air-spacing-05, 2rem) 0);
}
.checkout .cost {
  display: flex;
  justify-content: space-between;
  grid-area: cost;
}
.checkout .fee {
  display: flex;
  justify-content: space-between;
  grid-area: fee;
}
.checkout .total {
  display: flex;
  justify-content: space-between;
  grid-area: total;
}
.checkout p {
  color: var(--air-checkout-paragraph-color, var(--air-body-color, var(--air-color-eclipse, #3a3a3a)));
  font-family: var(--air-checkout-paragraph-font-family, var(--air-body-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"));
  font-size: var(--air-checkout-paragraph-font-size, var(--air-body-font-size, 1rem));
  font-weight: var(--air-checkout-paragraph-font-weight, var(--air-body-font-weight, 400));
  line-height: var(--air-checkout-paragraph-line-height, var(--air-body-line-height, 1.5));
  margin-top: var(--air-checkout-paragraph-margin-top, 0);
  margin-bottom: var(--air-checkout-paragraph-margin-bottom, 0);
  text-transform: var(--air-checkout-paragraph-text-transform, capitalize);
}
.checkout p + p {
  margin-top: var(--air-checkout-paragraph-divider-margin-top, var(--air-spacing-02, 0.5rem));
  padding-top: var(--air-checkout-paragraph-divider-padding-top, var(--air-spacing-02, 0.5rem));
  border-top: var(--air-checkout-paragraph-divider-border-top, 1px dashed var(--air-color-bright-gray, #545559));
}
.checkout p:last-of-type {
  font-weight: var(--air-checkout-paragraph-total-font-weight, var(--air-body-bold-font-weight, 600));
}
@media (max-width: 992px) {
  .checkout {
    grid-template-areas: var(--air-mobile-checkout-grid-template-areas, "logo name name" "logo title title" "payment payment payment" "purchase purchase purchase" "divider divider divider" "cost cost cost" "fee fee fee" "total total total");
    padding: var(--air-mobile-checkout-padding, var(--air-spacing-03, 1rem));
  }
  .checkout .divider {
    --air-divider-margin: var(--air-mobile-checkout-divider-margin, var(--air-spacing-04, 1.5rem) 0);
  }
  .checkout p:first-of-type {
    padding-top: var(--air-mobile-checkout-paragraph-divider-padding-top, var(--air-spacing-03, 1rem));
  }
}