.checkout-main {
  padding-bottom: var(--space-32);
}

.checkout-hero {
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
}

.checkout-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr);
  gap: var(--space-24);
  align-items: stretch;
}

.checkout-hero__subtitle {
  max-width: 38rem;
  color: var(--color-text-muted);
}

.checkout-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-16);
}

.checkout-hero__step {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.checkout-hero__security {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.checkout-hero__security-media img {
  width: 100%;
  max-width: 240px;
}

.checkout-hero__security-header h2 {
  margin-bottom: var(--space-8);
}

.checkout-hero__security-list {
  list-style: none;
  padding-left: 0;
}

.checkout-hero__security-list li {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

.checkout-breadcrumb {
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  background-color: var(--color-surface);
}

.checkout-breadcrumb__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-16);
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

.checkout-breadcrumb ol {
  display: flex;
  gap: var(--space-8);
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.checkout-breadcrumb li + li::before {
  content: "/";
  margin: 0 var(--space-4);
  color: var(--color-text-muted);
}

.checkout-breadcrumb__link {
  font-size: var(--font-size-sm);
}

.checkout-layout {
  padding-top: var(--space-32);
}

.checkout-layout__grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.2fr);
  gap: var(--space-24);
  align-items: flex-start;
}

.checkout-section {
  margin-bottom: var(--space-24);
}

.checkout-section__header {
  margin-bottom: var(--space-16);
}

.checkout-section__header p {
  margin-bottom: 0;
}

.checkout-summary__media {
  margin-bottom: var(--space-16);
}

.checkout-summary__media img {
  border-radius: var(--radius-md);
}

.checkout-summary__table {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background-color: var(--color-surface-alt);
  padding: var(--space-12);
  font-size: var(--font-size-sm);
}

.checkout-summary__header-row,
.checkout-summary__row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1.6fr 1fr auto;
  align-items: center;
  gap: var(--space-12);
}

.checkout-summary__header-row {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}

.checkout-summary__row + .checkout-summary__row {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-8);
  margin-top: var(--space-8);
}

.checkout-summary__product-name {
  font-weight: 500;
  margin-bottom: var(--space-4);
}

.checkout-summary__product-meta {
  margin-bottom: 0;
}

.checkout-summary__cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.checkout-summary__cell--actions {
  justify-content: flex-end;
}

.checkout-qty-control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}

.checkout-qty-control__btn {
  padding-inline: var(--space-12);
}

.checkout-qty-control__input {
  max-width: 72px;
  text-align: center;
}

.checkout-summary__footer {
  margin-top: var(--space-16);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-items: center;
}

.checkout-summary__link {
  font-size: var(--font-size-sm);
}

.checkout-fieldset {
  border-radius: var(--radius-md);
}

.checkout-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-16);
}

.checkout-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-12);
}

.checkout-option__control {
  display: flex;
  align-items: flex-start;
  padding-top: 0.35rem;
}

.checkout-option__control input[type="radio"] {
  width: 1rem;
  height: 1rem;
}

.checkout-option__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-8);
  margin-bottom: var(--space-4);
}

.checkout-option__price {
  font-weight: 500;
}

.checkout-option__description {
  margin-bottom: var(--space-4);
}

.checkout-option__details {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.checkout-option__badge {
  font-size: var(--font-size-xs);
  color: var(--color-primary);
}

.checkout-account-hint {
  padding: var(--space-12);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-alt);
  border: 1px dashed var(--color-border-subtle);
  margin-bottom: var(--space-16);
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.checkout-form__group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
}

.checkout-form__group-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.checkout-form__field label {
  display: block;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

.checkout-form__field--checkbox label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  font-size: var(--font-size-sm);
}

.checkout-form__field--checkbox input[type="checkbox"] {
  margin-top: 0.1rem;
}

.checkout-form__hint {
  margin-top: var(--space-4);
  margin-bottom: 0;
  font-size: var(--font-size-xs);
}

.checkout-account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
}

.checkout-account-grid__column h3 {
  margin-bottom: var(--space-8);
}

.checkout-account-list {
  padding-left: 1.1rem;
  font-size: var(--font-size-sm);
}

.checkout-account-list li {
  margin-bottom: var(--space-4);
}

.checkout-layout__aside {
  position: sticky;
  top: 5.5rem;
}

.checkout-summary-card h2 {
  margin-bottom: var(--space-12);
}

.checkout-summary-card__rows {
  font-size: var(--font-size-sm);
}

.checkout-summary-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-8);
}

.checkout-summary-card__row--discount span:last-child {
  font-weight: 500;
}

.checkout-summary-card__total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.checkout-discount {
  margin-top: var(--space-16);
}

.checkout-discount label {
  display: block;
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

.checkout-discount__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
}

.checkout-discount__hint {
  font-size: var(--font-size-xs);
  margin-bottom: 0;
}

.checkout-security-note {
  margin-top: var(--space-16);
}

.checkout-security-note h3 {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-8);
}

.checkout-security-note__list {
  padding-left: 1.1rem;
  font-size: var(--font-size-xs);
}

.checkout-security-note__list li {
  margin-bottom: var(--space-4);
}

.checkout-consents {
  margin-top: var(--space-16);
}

.checkout-consents__info {
  font-size: var(--font-size-xs);
  margin-top: var(--space-8);
}

.checkout-submit {
  width: 100%;
  margin-top: var(--space-16);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: var(--font-size-base);
}

.checkout-submit__hint {
  margin-top: var(--space-8);
  font-size: var(--font-size-xs);
}

.checkout-links-extra {
  margin-top: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  font-size: var(--font-size-xs);
}

@media (max-width: 1024px) {
  .checkout-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .checkout-layout__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

@media (max-width: 840px) {
  .checkout-layout__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .checkout-layout__aside {
    position: static;
  }

  .checkout-summary__table {
    padding: var(--space-8);
  }

  .checkout-summary__header-row,
  .checkout-summary__row {
    grid-template-columns: 1.8fr 1fr 1.4fr 1fr;
  }

  .checkout-summary__cell--actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    margin-top: var(--space-8);
  }
}

@media (max-width: 720px) {
  .checkout-hero {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }

  .checkout-breadcrumb__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .checkout-form__group-grid,
  .checkout-form__group-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .checkout-account-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .checkout-options-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .checkout-discount__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .checkout-summary__header-row {
    display: none;
  }

  .checkout-summary__row {
    grid-template-columns: minmax(0, 1fr);
    align-items: flex-start;
  }

  .checkout-summary__cell,
  .checkout-summary__cell--actions {
    justify-content: space-between;
  }

  .checkout-qty-control__input {
    max-width: 64px;
  }
}