.checkout { padding-bottom: var(--section-y); }

html.js .checkout { min-height: calc(100vh - var(--header-h)); }

.checkout__layout { display: grid; gap: var(--space-5); }

.checkout__layout > * { min-width: 0; }

.checkout__main { display: grid; gap: var(--space-5); }

.checkout-summary {
  border: var(--border-w) solid var(--rule);
  background: var(--color-surface);
}

.checkout-summary__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--control);
  padding: var(--space-3) var(--space-4);
  list-style: none;
}

.checkout-summary__bar::-webkit-details-marker { display: none; }

.checkout-summary__bar:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-inset); }

.checkout-summary__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.checkout-summary__chevron { flex: none; color: var(--color-muted); }

.checkout-summary[open] .checkout-summary__chevron { transform: rotate(180deg); }

.checkout-summary__total {
  font-size: var(--text-price);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.checkout-summary__panel {
  padding: var(--space-4);
  border: 0;
  border-top: var(--border-w) solid var(--rule);
}

.checkout-summary__title {
  position: absolute;
  width: var(--border-w);
  height: var(--border-w);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.checkout-summary__mode {
  display: grid;
  justify-items: start;
  gap: var(--space-1);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-w) solid var(--rule);
  font-size: var(--text-label);
  line-height: var(--leading-snug);
  color: var(--color-muted);
}

.checkout-summary__mode .link { display: inline-flex; align-items: center; min-height: var(--tap); }

.checkout-summary__left-out { font-size: var(--text-label); line-height: var(--leading-snug); color: var(--color-muted); }

.checkout-summary .order-item { padding-top: var(--space-3); }

.checkout-summary .order-item:first-child { padding-top: 0; }

.checkout-summary .summary__row dd { white-space: nowrap; }

.checkout-summary .summary__row dt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; }

.checkout-form { gap: var(--space-7); }

.checkout__main > * { max-width: var(--measure-form); }

.checkout-form__alert { scroll-margin-top: var(--space-2); }

.checkout-form .field__control { scroll-margin-top: calc(var(--header-h) + var(--space-8)); }

.checkout-form .field:has([aria-invalid="true"]) .field__hint { display: none; }

.checkout [data-cancelled-notice]:focus { outline: none; }

.checkout-step { display: grid; }

.checkout-step__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  width: 100%;
  padding-block: var(--space-3) var(--space-5);
  border-top: var(--border-w) solid var(--rule);
}

.checkout-step__title { display: inline-flex; gap: var(--space-3); }

.checkout-step__num { font-variant-numeric: tabular-nums; }

.checkout-step__fields { display: grid; gap: var(--space-5); }

.checkout-form__submit { display: grid; gap: var(--space-3); }

.checkout-form__note { font-size: var(--text-label); line-height: var(--leading-snug); color: var(--color-muted); }

.checkout-methods-error { display: grid; justify-items: start; gap: var(--space-3); }

@media (prefers-reduced-motion: no-preference) {
  .checkout-summary__chevron { transition: transform var(--dur-fast) var(--ease-out); }
}

@media (min-width: 1024px) {
  .checkout__layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    gap: var(--space-6) var(--grid-gap);
  }

  .checkout__demo { grid-column: 1 / 8; grid-row: 1; max-width: var(--measure-form); }

  .checkout__main { grid-column: 1 / 8; grid-row: 2; }

  .checkout-summary {
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
    grid-column: 8 / 13;
    grid-row: 1 / span 2;
    border: 0;
    background: none;
  }

  .checkout-summary.is-tall { position: static; }

  .checkout-summary__bar { display: none; }

  .checkout-summary__panel { padding: var(--space-5); border: var(--border-w) solid var(--rule); }

  .checkout-summary__title {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}

@media (min-width: 1280px) {
  .checkout-summary__panel { padding: var(--space-6); }
}

html.js .checkout:not([data-checkout-ready]) > .checkout__pending {
  display: block;
  height: 0;
  overflow: visible;
  visibility: hidden;
  animation: boot-fallback-show 0s 8s forwards !important;
}

html.js .checkout:not([data-checkout-ready]) > .checkout__layout { animation: boot-fallback-hide 0s 8s forwards !important; }

html.js .checkout[data-checkout-failed] > .checkout__pending { height: auto; visibility: visible; animation: none !important; }

html.js .checkout[data-checkout-failed] > .checkout__layout { display: none; }