/* Checkout (vision §E13): reduced chrome, one form, the order beside it. The shared print preview and
   summary panel come from cart.css (linked first). No grain, no pools, nothing that moves. */
@layer pages {
  /* ---------- reduced header: the wordmark, the Lamp switch and the way back to the cart only ----- */
  :root[data-page="checkout"] .masthead__nav,
  :root[data-page="checkout"] .masthead__tools .cart-link,
  :root[data-page="checkout"] .masthead__tools .menu-button,
  :root[data-page="checkout"] .masthead__tools .menu-fallback { display: none; }
  :root[data-page="checkout"] .masthead__tools .masthead__lamp { display: inline-flex; }

  .checkout { min-block-size: calc(100svh - var(--header-h)); }
  .checkout__wrap { padding-block: clamp(20px, 3vw, 44px) 0; }

  /* ---------- head ------------------------------------------------------------------------------ */
  .checkout__head {
    display: grid;
    justify-items: start;
    margin-block-end: clamp(32px, 4vw, 56px);
  }
  .checkout__back { margin: 0 0 clamp(20px, 3vw, 36px); }
  .checkout__back a {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    min-block-size: 44px;
    color: var(--ink-2);
    font: 500 var(--step--1)/1.3 var(--font-ui);
    text-decoration-color: transparent;
    text-underline-offset: 0.3em;
  }
  .checkout__back a:is(:hover, :focus-visible) { color: var(--ink); text-decoration-color: var(--accent); }
  .checkout__back a > span { transition: translate var(--dur-quick) var(--ease-set); }
  .checkout__back a:hover > span { translate: -0.2em 0; }

  .checkout__eyebrow {
    --icon-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5a3.25 3.25 0 0 0-3.25 3.25V6.5H4A1.25 1.25 0 0 0 2.75 7.75v5.5A1.25 1.25 0 0 0 4 14.5h8a1.25 1.25 0 0 0 1.25-1.25v-5.5A1.25 1.25 0 0 0 12 6.5h-.75V4.75A3.25 3.25 0 0 0 8 1.5zm0 1.3a1.95 1.95 0 0 1 1.95 1.95V6.5h-3.9V4.75A1.95 1.95 0 0 1 8 2.8z'/%3E%3C/svg%3E");
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin: 0 0 var(--space-3);
  }
  .checkout__eyebrow::before {
    content: "";
    inline-size: 1.05em;
    block-size: 1.05em;
    background: currentColor;
    -webkit-mask: var(--icon-lock) center / contain no-repeat;
    mask: var(--icon-lock) center / contain no-repeat;
  }
  .checkout__title { margin: 0 0 var(--space-5); }
  .checkout__steps { margin: 0; }

  /* ---------- body ------------------------------------------------------------------------------ */
  .checkout__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7) var(--gutter);
    align-items: start;
  }
  .checkout:not([data-ready]) .checkout__body { visibility: hidden; }
  .checkout[data-cart="empty"] .checkout__body,
  .checkout[data-cart="empty"] .checkout__steps { display: none; }
  .checkout:not([data-cart="empty"]) .checkout__empty { display: none; }
  :root:not(.js) .checkout__body,
  :root:not(.js) .checkout__empty,
  :root:not(.js) .checkout__steps { display: none; }
  .checkout__nojs { max-inline-size: 46rem; color: var(--ink-2); }
  .checkout__nojs a { color: var(--ink); }

  /* ---------- the form ---------------------------------------------------------------------------- */
  .checkout__form { display: grid; gap: clamp(32px, 3.4vw, 48px); min-inline-size: 0; }
  .checkout__errors:empty { display: none; }
  .checkout__errors .error-summary { scroll-margin-block: var(--space-6); }

  .form-group {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .form-group__title {
    float: left; /* lets the legend sit in flow like a heading (and not in the fieldset border) */
    inline-size: 100%;
    margin: 0 0 var(--space-5);
    padding: 0 0 var(--space-3);
    border-block-end: 1px solid var(--rule);
    font: 420 var(--step-2)/1.15 var(--font-display);
    letter-spacing: -0.005em;
  }
  .form-group__fields {
    clear: both;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5) var(--space-5);
  }
  .form-group__fields .field { min-inline-size: 0; }
  .field__error[hidden] { display: none; }
  .field__input[aria-invalid="true"] { border-color: var(--alert); }

  /* "Add a note", collapsed */
  .checkout__note { border-block-start: 0; }
  .checkout__note > summary { font-weight: 500; }
  .checkout__note > .field { margin-inline-start: 0; max-inline-size: none; }
  .checkout__note textarea.field__input { min-block-size: 7.5rem; }

  /* ---------- pay ----------------------------------------------------------------------------------- */
  .checkout__submit {
    display: grid;
    gap: var(--space-4);
    padding-block-start: var(--space-2);
  }
  .checkout__pay { min-block-size: 56px; font-size: 1rem; }
  .checkout__next {
    max-inline-size: 58ch;
    color: var(--ink-2);
    font-size: var(--step--1);
    line-height: 1.55;
  }
  .checkout__next .draft-note { margin-block-start: var(--space-2); }

  /* A price changed, a line can't be made, or Stripe couldn't be reached: said here, with an icon. */
  .checkout__message {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--raised);
    box-shadow: var(--e1);
    font: 500 var(--step-0)/1.5 var(--font-ui);
  }
  .checkout__message[hidden] { display: none; }
  .checkout__message::before {
    content: "";
    flex: none;
    inline-size: 1.15em;
    block-size: 1.15em;
    margin-block-start: 0.2em;
    background: var(--ink-2);
    -webkit-mask: var(--icon-alert) center / contain no-repeat;
    mask: var(--icon-alert) center / contain no-repeat;
  }
  .checkout__message[data-tone="alert"] { color: var(--alert); }
  .checkout__message[data-tone="alert"]::before { background: currentColor; }
  .checkout__message:focus { outline: none; }
  .checkout__message:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; }

  /* ---------- the order: a panel beside the form; on phones a bar that opens ------------------------ */
  .summary__details { display: grid; gap: var(--space-5); }
  .summary__toggle { display: none; }
  @media (max-width: 1023.98px) {
    :root.js .checkout .summary__title {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      margin: -1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    :root.js .checkout .summary__toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      inline-size: 100%;
      min-block-size: 48px;
      margin: calc(var(--space-2) * -1) 0;
      padding: 0;
      border: 0;
      border-radius: var(--radius-1);
      background: none;
      color: var(--ink);
      font: inherit;
      text-align: start;
      cursor: pointer;
    }
    :root.js .checkout .summary[data-collapsed] .summary__details { display: none; }
  }
  .summary__toggle-label {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.6em;
    font: 420 var(--step-2)/1.15 var(--font-display);
  }
  .summary__toggle-count {
    color: var(--ink-2);
    font: 450 var(--step--1)/1 var(--font-mono);
  }
  .summary__toggle-total {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    font: 600 var(--step-1)/1.2 var(--font-ui);
    font-variant-numeric: lining-nums tabular-nums;
    white-space: nowrap;
  }
  .summary__toggle-total::after {
    content: "";
    inline-size: 16px;
    block-size: 16px;
    background: var(--ink-2);
    -webkit-mask: var(--icon-chevron) center / contain no-repeat;
    mask: var(--icon-chevron) center / contain no-repeat;
    rotate: 90deg;
    transition: rotate var(--dur-quick) var(--ease-set);
  }
  .summary__toggle[aria-expanded="true"] .summary__toggle-total::after { rotate: -90deg; }

  /* ---------- the order (summary panel lines) ------------------------------------------------------- */
  .order-lines {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .order-line {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: start;
    padding-block: var(--space-4);
    border-block-start: 1px solid var(--rule);
  }
  .order-line:first-child { border-block-start: 0; padding-block-start: 0; }
  .order-line__art .print-thumb { --pad: 7%; }
  /* Too small for words: the hatching alone says "no preview"; the line's message says why. */
  .order-line__art .print-thumb__none { display: none; }
  .order-line__art:empty {
    display: block;
    aspect-ratio: 1;
    background: var(--proof);
  }
  /* minmax(0, 1fr): the column, not its longest unbreakable word, sets the width. */
  .order-line__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-inline-size: 0; }
  .order-line__title {
    font: 400 var(--step-0)/1.3 var(--font-display);
    text-wrap: pretty;
  }
  .order-line__variant {
    color: var(--ink-2);
    font: 400 var(--step--2)/1.45 var(--font-mono);
    letter-spacing: 0.01em;
  }
  .order-line__qty {
    color: var(--ink-2);
    font: 400 var(--step--2)/1.45 var(--font-mono);
    letter-spacing: 0.01em;
  }
  .order-line__price {
    font: 600 var(--step-0)/1.3 var(--font-ui);
    font-variant-numeric: lining-nums tabular-nums;
    text-align: end;
  }
  .order-line__note {
    margin-block-start: var(--space-1);
    color: var(--ink);
    font: 500 var(--step--1)/1.4 var(--font-ui);
  }
  .order-line__note[hidden] { display: none; }
  .order-line__problem {
    display: grid;
    justify-items: start;
    gap: var(--space-1);
    margin-block-start: var(--space-2);
  }
  .order-line__problem[hidden] { display: none; }
  .order-line__problem-text {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    color: var(--alert);
    font: 500 var(--step--1)/1.45 var(--font-ui);
  }
  .order-line__problem-text::before {
    content: "";
    flex: none;
    inline-size: 1.05em;
    block-size: 1.05em;
    margin-block-start: 0.15em;
    background: currentColor;
    -webkit-mask: var(--icon-alert) center / contain no-repeat;
    mask: var(--icon-alert) center / contain no-repeat;
  }
  .order-line__remove { min-block-size: 44px; color: var(--ink); text-decoration-color: var(--alert); }

  /* ---------- empty ------------------------------------------------------------------------------- */
  .checkout__empty .empty { padding-block: 0 var(--space-7); }

  /* ---------- wider screens ------------------------------------------------------------------------- */
  @media (min-width: 600px) {
    /* Two columns whose labels, hints, inputs and errors share rows (subgrid), so an input beside a
       field with a hint ("Province or state") still lines up. */
    .form-group__fields {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      row-gap: 0;
      margin-block-end: calc(var(--space-5) * -1); /* the last row's field margin */
    }
    .form-group__fields .field--wide { grid-column: 1 / -1; }
    .form-group__fields > .field {
      grid-row: span 4;
      grid-template-rows: subgrid;
      row-gap: 0;
      margin-block-end: var(--space-5);
    }
    .form-group__fields > .field > .field__label { grid-row: 1; margin-block-end: var(--space-2); }
    .form-group__fields > .field > .field__hint { grid-row: 2; margin-block-end: var(--space-2); }
    .form-group__fields > .field > .field__input { grid-row: 3; align-self: end; }
    .form-group__fields > .field > .field__error { grid-row: 4; margin-block-start: var(--space-2); }
    .checkout__pay { justify-self: start; inline-size: auto; min-inline-size: 18rem; padding-inline: var(--space-7); }
  }
  @media (min-width: 1024px) {
    .checkout__body { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    /* 1024–1279: the order takes five columns so its titles, labels and prices have room. */
    .checkout__form { grid-column: 1 / span 6; grid-row: 1; }
    .checkout__summary {
      grid-column: 8 / -1;
      grid-row: 1;
      position: sticky;
      inset-block-start: var(--space-6);
    }
  }
  @media (min-width: 1280px) {
    .checkout__form { grid-column: 1 / span 7; }
    .checkout__summary { grid-column: 9 / -1; }
  }

  @media (forced-colors: active) {
    .checkout__eyebrow::before,
    .checkout__message::before,
    .order-line__problem-text::before { forced-color-adjust: none; background: CanvasText; }
    .checkout__message { border: 1px solid CanvasText; }
  }
}