@layer components {
  .order__main {
    background: var(--color-ink);
    color: var(--color-canvas);

    padding: var(--inline-space);
  }
  
  .order__form {
    --input-background: var(--color-ink);
    --input-radius: var(--radius-sm);
    --input-border: var(--color-ink-weak) 1px solid;
    --form-group-gap: var(--block-space-half);

    display: flex;
    flex-direction: column;
    row-gap: var(--block-space);
    max-width: 90ch;
    margin: auto;

  }

  .order__shipping {
    input:not(:first-of-type) {
      border-start-start-radius: 0;
      border-start-end-radius: 0;
    }
    
    input:not(:last-of-type) {
      border-end-start-radius: 0;
      border-end-end-radius: 0;
      border-bottom: none;
    }
  }
}