/* Unequal Scenes checkout page. Every rule is scoped to #uschk, so this file
   does not leak into the rest of the site. The page follows the look of the
   site's own pages (site.css): page title in the heading font, round buttons
   in the button color, white form fields. Colors and fonts come from the
   site's variables, so changes made under Site styles reach this page too.
   One column, at most 560px wide. Inputs are 48px tall with 16px text, so
   phones do not zoom in on focus. Works from 320px width. */

#uschk {
  --text: var(--s-text, #000);
  --head: var(--s-heading, var(--c-dark, #222));
  --muted: #666;
  --line: #e2e2e2;
  --field: #f5f5f5;
  --border: #bdbdbd;
  --accent: #b3261e;
  --btn: var(--c-btn, #2a9d8f);
  --btn-hover: var(--c-btn-hover, rgba(33, 134, 122, .75));
  --tbc: #c99700;
  color-scheme: light;
  box-sizing: content-box;
  color: var(--text);
  font: 400 16px/1.55 var(--font-body, system-ui, sans-serif);
  text-align: left;
  max-width: 560px;
  margin: 0 auto;
  padding-bottom: 72px;
}

#uschk *, #uschk *::before, #uschk *::after { box-sizing: border-box; }
#uschk h1, #uschk h2, #uschk h3, #uschk p, #uschk ul, #uschk li, #uschk fieldset, #uschk legend, #uschk label {
  margin: 0; padding: 0; border: 0; background: none; color: inherit;
  font-family: var(--font-body, system-ui, sans-serif); font-size: inherit; font-weight: inherit; font-style: normal;
  line-height: inherit; letter-spacing: normal; text-transform: none; text-align: left;
}
#uschk ul { list-style: none; }
#uschk li { margin: 0; padding: 0; list-style: none; }
#uschk a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#uschk a:hover { color: var(--muted); }
#uschk a:focus-visible,
#uschk button:focus-visible,
#uschk input:focus-visible,
#uschk select:focus-visible {
  outline: 2px solid var(--btn); outline-offset: 2px;
}
/* Headings that receive focus from the script (for screen readers) show no frame */
#uschk [tabindex="-1"]:focus { outline: none; }
/* A value that is not confirmed yet ([[...]] in the text) carries a dotted line */
#uschk mark.uschk-tbc { font: inherit; background: none; color: inherit; padding: 0; border-bottom: 2px dotted var(--tbc); }
#uschk .uschk-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Page title, as the page titles of the site */
#uschk .uschk-h1 {
  font: 400 50px/50px var(--font-head, var(--font-body, system-ui, sans-serif)); text-transform: uppercase;
  text-align: center; color: var(--head); padding-top: 52px;
}
#uschk .uschk-back { font-size: 14px; line-height: 18px; text-align: center; color: var(--muted); margin-top: 14px; }

#uschk .uschk-noscript,
#uschk .uschk-error,
#uschk .uschk-closed,
#uschk .uschk-confirming {
  margin-top: 32px; padding: 18px 20px; background: var(--field); border-radius: 5px; font-size: 15px; line-height: 1.55;
}
#uschk .uschk-error p + p,
#uschk .uschk-closed p + p { margin-top: 10px; }

#uschk .uschk-banner {
  margin-top: 28px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 5px;
  font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center;
}

#uschk .uschk-change-note {
  margin: 20px 0 0; padding: 12px 16px; background: var(--field); border-radius: 5px; font-size: 14px; line-height: 1.5;
}

#uschk .uschk-sec { padding-top: 44px; }
#uschk .uschk-sec-h {
  font: 500 20px/20px var(--font-head, var(--font-body, system-ui, sans-serif)); text-transform: uppercase;
  color: var(--head); margin-bottom: 18px;
}

/* Editions: name and price to the left, number of copies to the right */
#uschk .uschk-ed {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center;
  grid-template-areas: "name copies" "price copies" "left left";
  padding: 18px 0;
}
#uschk .uschk-ed:first-child { padding-top: 0; }
#uschk .uschk-ed:last-child { padding-bottom: 0; }
#uschk .uschk-ed + .uschk-ed { border-top: 1px solid var(--line); }
#uschk .uschk-ed-name { grid-area: name; align-self: end; font-size: 17px; font-weight: 600; line-height: 1.35; }
#uschk .uschk-ed-price { grid-area: price; align-self: start; color: var(--muted); font-variant-numeric: tabular-nums; }
#uschk .uschk-ed-left,
#uschk .uschk-ed-soldout { grid-area: left; font-size: 14px; color: var(--muted); margin-top: 6px; }
#uschk .uschk-ed-soldout { font-weight: 600; }
#uschk .uschk-stepper { grid-area: copies; display: flex; align-items: center; gap: 10px; }
#uschk .uschk-minus,
#uschk .uschk-plus {
  width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 50%; background: #fff;
  font: 400 22px/1 var(--font-body, system-ui, sans-serif);
  color: var(--text); cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, color .15s ease;
}
#uschk .uschk-minus:hover:not(:disabled),
#uschk .uschk-plus:hover:not(:disabled) { border-color: var(--btn); color: var(--btn); }
#uschk .uschk-minus:disabled,
#uschk .uschk-plus:disabled { opacity: .35; cursor: default; }
#uschk .uschk-qty { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 600; }

/* Editions that come in several prints (the artist's edition) are one row with
   a print chooser under it. No frame, box or outline goes around the
   photographs. The chosen print shows at full strength and the circle next to
   its caption is filled; the other prints are dimmed. Options sit side by side
   in equal columns, and every picture sits in a box of the same shape. */
#uschk .uschk-ed-group { grid-template-areas: "name copies" "price copies" "left left" "prints prints"; }
#uschk .uschk-stepper[hidden] { display: none; }
#uschk .uschk-prints { grid-area: prints; min-width: 0; margin-top: 16px; }
#uschk .uschk-prints-legend { display: block; margin-bottom: 10px; font-size: 14px; line-height: 1.4; color: var(--muted); }
#uschk .uschk-prints-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; max-width: 340px; }
#uschk .uschk-print { position: relative; min-width: 0; }
#uschk .uschk-print-label { display: block; cursor: pointer; }
#uschk .uschk-print-pic { display: block; position: relative; width: 100%; opacity: .7; transition: opacity .15s ease, filter .15s ease; }
#uschk .uschk-print-pic img {
  position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: contain;
  border: 0; outline: 0; box-shadow: none; border-radius: 0; background: none;
  -webkit-touch-callout: none; -webkit-user-drag: none; user-select: none;
}
#uschk .uschk-print-text {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 8px; align-items: start;
  margin-top: 10px; font-size: 14px; line-height: 1.4;
}
#uschk .uschk-print-dot {
  grid-column: 1; width: 16px; height: 16px; margin-top: 2px; border: 1.5px solid var(--muted); border-radius: 50%; background: #fff;
  transition: background-color .15s ease, border-color .15s ease;
}
#uschk .uschk-print-caption { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
#uschk .uschk-print-soldout { grid-column: 2; color: var(--muted); }
#uschk .uschk-print-label:hover .uschk-print-pic,
#uschk .uschk-print input:checked + .uschk-print-label .uschk-print-pic { opacity: 1; }
#uschk .uschk-print-label:hover .uschk-print-dot { border-color: var(--text); }
#uschk .uschk-print input:checked + .uschk-print-label .uschk-print-dot {
  background: var(--btn); border-color: var(--btn); box-shadow: inset 0 0 0 3px #fff;
}
#uschk .uschk-print input:disabled + .uschk-print-label { cursor: default; color: var(--muted); }
#uschk .uschk-print input:disabled + .uschk-print-label .uschk-print-pic { opacity: .35; filter: grayscale(1); }
#uschk .uschk-print input:disabled + .uschk-print-label .uschk-print-dot { border-color: var(--line); background: #fff; box-shadow: none; }
#uschk .uschk-print input:focus-visible + .uschk-print-label { outline: 2px solid var(--btn); outline-offset: 4px; }

/* Fields */
#uschk .uschk-field { margin-top: 18px; }
#uschk .uschk-sec-h + .uschk-field { margin-top: 0; }
#uschk .uschk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
#uschk .uschk-row .uschk-field { margin-top: 0; }
#uschk .uschk-label { display: block; font-size: 14px; line-height: 1.4; color: var(--muted); margin-bottom: 6px; }
#uschk input[type="text"],
#uschk input[type="email"],
#uschk input[type="tel"],
#uschk select {
  display: block; width: 100%; min-height: 48px; padding: 11px 14px;
  background-color: #fff; border: 1px solid var(--border); border-radius: 5px; color: var(--text);
  font: 400 16px/1.3 var(--font-body, system-ui, sans-serif);
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease;
}
#uschk select {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
#uschk input[type="text"]:hover,
#uschk input[type="email"]:hover,
#uschk input[type="tel"]:hover,
#uschk select:hover { border-color: #8c8c8c; }
#uschk input[aria-invalid="true"],
#uschk select[aria-invalid="true"] { border-color: var(--accent); }
#uschk input[type="text"]:focus,
#uschk input[type="email"]:focus,
#uschk input[type="tel"]:focus,
#uschk select:focus { outline: 2px solid var(--btn); outline-offset: 0; border-color: var(--btn); }
#uschk input[type="radio"],
#uschk input[type="checkbox"] { accent-color: var(--btn); }
#uschk .uschk-err { display: none; margin-top: 6px; font-size: 14px; color: var(--accent); }
#uschk .uschk-err:not(:empty) { display: block; }

/* Payment: one tile per method. Three tiles (card, PayPal, bank) sit in one
   row in the 560px column. On phones the tiles are stacked (see the phone
   width rules), so a row of two with a third tile below it never appears. */
#uschk .uschk-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
#uschk .uschk-method {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: 5px; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#uschk .uschk-method[hidden] { display: none; }
#uschk .uschk-method:hover { border-color: #8c8c8c; }
#uschk .uschk-method:has(input:checked) { border-color: var(--btn); box-shadow: inset 0 0 0 1px var(--btn); }
#uschk .uschk-method input { width: 20px; height: 20px; flex: none; margin: 0; cursor: pointer; }
#uschk .uschk-method label { flex: 1; padding: 14px 0; font-weight: 600; cursor: pointer; }
#uschk-pay-field { margin-top: 14px; font-size: 14px; line-height: 1.55; }
#uschk-pay-field select { margin-top: 8px; }
#uschk .uschk-pay-note { color: var(--muted); }
#uschk .uschk-action-btn,
#uschk .uschk-copy-btn {
  min-height: 40px; padding: 0 18px; margin-top: 10px; background: var(--btn); color: #fff; border: 1px solid transparent;
  border-radius: 100px; font: 700 14px/1 var(--font-body, system-ui, sans-serif); cursor: pointer;
  -webkit-appearance: none; appearance: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
#uschk .uschk-action-btn:hover,
#uschk .uschk-copy-btn:hover { background: var(--btn-hover); }

/* Turnstile robot check, mounted by checkout-stripe.js below the payment note */
#uschk .uschk-turnstile { margin-top: 12px; max-width: 100%; overflow: hidden; }
#uschk .uschk-turnstile iframe { max-width: 100%; }

/* Stripe embedded Checkout, shown in place of the order form once a card
   order reaches its payment step. Kept to the same column width as the rest
   of the page so it never forces sideways scroll, down to 320px wide. */
#uschk .uschk-stripe-embed { margin-top: 44px; }
#uschk .uschk-stripe-embed-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
#uschk .uschk-stripe-embed-head .uschk-sec-h { margin-bottom: 0; }
#uschk .uschk-change-order {
  flex: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; font-size: 14px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; -webkit-appearance: none; appearance: none;
}
#uschk .uschk-change-order:hover { color: var(--text); }
#uschk .uschk-stripe-mount { margin-top: 18px; width: 100%; max-width: 100%; overflow: hidden; }
#uschk .uschk-stripe-mount iframe { max-width: 100%; }

/* Summary */
#uschk .uschk-sum-line { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-variant-numeric: tabular-nums; }
#uschk .uschk-sum-line.uschk-sum-total {
  font-size: 18px; font-weight: 700; border-top: 1px solid var(--head); margin-top: 10px; padding-top: 14px;
}
#uschk .uschk-note { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--muted); }
#uschk .uschk-note + .uschk-note { margin-top: 6px; }

/* Agree + submit */
#uschk .uschk-agree { display: flex; align-items: flex-start; gap: 12px; margin-top: 36px; }
#uschk .uschk-agree input { width: 20px; height: 20px; flex: none; margin: 2px 0 0; cursor: pointer; }
#uschk .uschk-agree label { font-size: 15px; line-height: 1.5; cursor: pointer; }

#uschk-submit {
  display: flex; width: 100%; align-items: center; justify-content: center; min-height: 52px; padding: 0 30px;
  margin-top: 22px; background: var(--btn); color: #fff; border: 0; border-radius: 100px;
  font: 700 18px/1 var(--font-body, system-ui, sans-serif); cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background-color .2s ease;
}
#uschk-submit:hover:not(:disabled) { background: var(--btn-hover); }
#uschk-submit:disabled { opacity: .6; cursor: default; }

#uschk-message { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--accent); text-align: center; }
#uschk-message:empty { display: none; }

/* Confirmation */
#uschk-done { margin-top: 36px; }
#uschk-done h2 {
  font: 400 30px/34px var(--font-head, var(--font-body, system-ui, sans-serif)); text-transform: uppercase;
  text-align: center; color: var(--head); margin-bottom: 16px; text-wrap: balance;
}
#uschk-done p { line-height: 1.55; }
#uschk-done > p { text-align: center; }
#uschk-done p + p { margin-top: 10px; }
#uschk-done > .uschk-sec + p { margin-top: 44px; }
#uschk-done .uschk-sum-line { padding: 5px 0; }
/* Bank transfer details: label, value and copy button in fixed columns */
#uschk-done ul.uschk-bank-lines { padding: 4px 18px; background: var(--field); border: 1px solid var(--line); border-radius: 5px; }
#uschk-done ul.uschk-bank-lines li {
  display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: 16px; align-items: center;
  min-height: 56px; padding: 10px 0; border-bottom: 1px solid var(--line);
}
#uschk-done ul.uschk-bank-lines li:last-child { border-bottom: 0; }
#uschk .uschk-bank-label { color: var(--muted); font-size: 14px; line-height: 1.35; }
#uschk .uschk-bank-value { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
#uschk .uschk-bank-text {
  min-width: 0; font-size: 16px; font-weight: 600; line-height: 1.35;
  font-variant-numeric: tabular-nums; letter-spacing: .01em; overflow-wrap: anywhere;
}
#uschk .uschk-bank-lines .uschk-copy-btn {
  flex: none; min-width: 72px; min-height: 34px; padding: 0 12px; margin-top: 0;
  background: #fff; color: var(--text); border: 1px solid var(--border); font-size: 13px; font-weight: 600;
}
#uschk .uschk-bank-lines .uschk-copy-btn:hover { background: var(--btn); color: #fff; border-color: var(--btn); }
#uschk-done .uschk-done-address p { line-height: 1.5; text-align: left; }
#uschk-done .uschk-done-address p + p { margin-top: 0; }
#uschk-done .uschk-banner { margin: 0 0 24px; }

/* Below the desktop width the site's column runs to the edge of the screen */
@media (max-width: 932px) {
  #uschk { padding-left: 20px; padding-right: 20px; }
  #uschk .uschk-h1 { font-size: 31px; line-height: 31px; padding-top: 28px; }
  #uschk .uschk-sec { padding-top: 40px; }
}
@media (max-width: 600px) {
  #uschk .uschk-methods { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  #uschk { padding-left: 16px; padding-right: 16px; }
  #uschk .uschk-h1 { font-size: 25px; line-height: 25px; }
  #uschk .uschk-row { grid-template-columns: 1fr; gap: 0; }
  #uschk .uschk-row .uschk-field { margin-top: 18px; }
  #uschk .uschk-row .uschk-field:first-child { margin-top: 0; }
  #uschk-done h2 { font-size: 25px; line-height: 29px; }
  #uschk-done ul.uschk-bank-lines { padding: 2px 14px; }
  #uschk-done ul.uschk-bank-lines li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; min-height: 0; padding: 12px 0; }
  #uschk .uschk-bank-label { font-size: 13px; }
  #uschk .uschk-bank-value { gap: 14px; min-height: 40px; }
  #uschk .uschk-bank-text { font-size: 15px; }
  #uschk .uschk-bank-lines .uschk-copy-btn { min-width: 66px; min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  #uschk * { transition: none !important; }
}