@import url("./styles.css");

:root {
  --sheet-shadow: 12px 12px 0 var(--mist);
  --soft-ink: rgba(29, 41, 35, .7);
}

body { min-width: 0; }
.order-header {
  min-height: 84px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 18px 5vw;
  border-bottom: 1px solid var(--line);
  background: rgba(244, 235, 221, .93);
}
.order-brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; text-decoration: none; }
.order-brand span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: var(--red); color: var(--card); font: 600 18px/1 var(--serif); }
.order-brand strong { font: 600 17px/1 var(--serif); letter-spacing: -.03em; }
.order-header > p { margin: 0; color: var(--soft-ink); font: 10px/1 var(--mono); letter-spacing: .12em; }
.back-link { justify-self: end; font: 11px/1 var(--mono); letter-spacing: .06em; text-underline-offset: 4px; }
.header-actions { min-width: 0; display: flex; justify-self: end; align-items: center; justify-content: flex-end; gap: 18px; }
.member-session { min-width: 0; display: flex; align-items: center; gap: 8px; font: 10px/1.3 var(--mono); }
.member-session[hidden] { display: none; }
.member-session-label { color: var(--green); letter-spacing: .08em; }
.member-session-email { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-session button { padding: 0; border: 0; background: transparent; color: var(--soft-ink); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.member-session button:hover { color: var(--red); }
.member-session button:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }

.order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(22rem, .85fr);
  max-width: 1500px;
  margin: 0 auto;
  border-left: 1px solid var(--line);
}
.order-story { min-width: 0; padding: clamp(64px, 9vw, 150px) clamp(28px, 7vw, 110px) 100px; border-right: 1px solid var(--line); }
.eyebrow, .section-label { margin: 0; color: var(--red); font: 10px/1.4 var(--mono); letter-spacing: .14em; }
.order-story h1 { max-width: 800px; margin: 28px 0 32px; font: 500 clamp(52px, 7vw, 116px)/.98 var(--serif); letter-spacing: -.065em; }
.order-intro { max-width: 590px; margin: 0; color: var(--soft-ink); font: 18px/1.85 var(--sans); }

.order-loom { width: min(100%, 690px); margin: clamp(58px, 10vw, 132px) 0; }
.order-loom-stage { position: relative; aspect-ratio: 16 / 9; isolation: isolate; border: 1px solid var(--ink); background: var(--card); box-shadow: var(--sheet-shadow); }
.order-loom-stage::before, .order-loom-stage::after { position: absolute; z-index: 2; left: 50%; top: 62%; content: ""; border: 1px solid rgba(49, 92, 69, .56); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.order-loom-stage::before { width: 40%; height: 42%; }.order-loom-stage::after { width: 31%; height: 32%; border-color: rgba(49, 92, 69, .34); }
.order-loom .dumpling-video { position: relative; z-index: 1; width: 100%; }
.order-loom-phase { position: absolute; z-index: 3; top: 18px; right: 18px; padding: 7px 9px; border: 1px solid var(--ink); background: rgba(255, 249, 239, .92); color: var(--green); font: 10px/1 var(--mono); letter-spacing: .08em; }
.order-loom-toggle { position: absolute; z-index: 3; bottom: 18px; left: 18px; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ink); background: rgba(255, 249, 239, .92); color: var(--ink); cursor: pointer; font: 11px/1 var(--mono); letter-spacing: .04em; }
.order-loom-toggle:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.order-loom figcaption { margin-top: 18px; color: var(--soft-ink); font: 10px/1.5 var(--mono); }

.product-specs, .shipping-ladder { padding-top: 62px; border-top: 1px solid var(--ink); }
.shipping-ladder { margin-top: 84px; }
.section-label span { display: inline-grid; width: 26px; height: 26px; margin-right: 10px; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.product-specs h2, .shipping-ladder h2 { max-width: 620px; margin: 26px 0 42px; font: 500 clamp(32px, 4vw, 62px)/1.12 var(--serif); letter-spacing: -.045em; }
.spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.spec-grid article { padding: 28px 26px 20px 0; border-bottom: 1px solid var(--line); }.spec-grid article + article { padding-left: 26px; border-left: 1px solid var(--line); }
.spec-grid h3 { margin: 0 0 36px; font: 500 25px/1.25 var(--serif); }.spec-grid dl { display: grid; gap: 15px; margin: 0; }.spec-grid dl div { display: flex; justify-content: space-between; gap: 10px; }.spec-grid dt { color: var(--soft-ink); font: 10px/1.4 var(--mono); }.spec-grid dd { margin: 0; font: 12px/1.4 var(--mono); }
.prototype-note, .shipping-ladder > p { max-width: 640px; margin: 24px 0 0; color: var(--soft-ink); font: 13px/1.8 var(--sans); }
.shipping-ladder ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }.shipping-ladder li { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); font: 12px/1.4 var(--mono); }.shipping-ladder li strong { color: var(--red); }

.order-sheet { align-self: start; position: sticky; top: 7rem; min-width: 0; margin: 36px clamp(20px, 3vw, 50px) 36px; padding: clamp(24px, 3vw, 42px); border: 1px solid var(--ink); background: rgba(255, 249, 239, .98); box-shadow: var(--sheet-shadow); }
.sheet-heading { padding-bottom: 28px; border-bottom: 1px solid var(--ink); }.sheet-heading h2 { margin: 19px 0 14px; font: 500 clamp(32px, 3.4vw, 49px)/1 var(--serif); letter-spacing: -.05em; }.sheet-heading > p:last-child { margin: 0; color: var(--soft-ink); font: 13px/1.65 var(--sans); }
.order-contact { margin: 22px 0 0; font: 12px/1.6 var(--sans); }.order-contact a { margin-left: 6px; color: var(--green); font-weight: 600; text-underline-offset: 4px; }
.noscript-notice { margin: 22px 0 0; padding: 14px; border-left: 4px solid var(--red); background: rgba(182, 70, 46, .08); font: 13px/1.65 var(--sans); }
.error-summary { margin-top: 24px; padding: 16px; border: 1px solid var(--red); background: rgba(182, 70, 46, .07); }.error-summary h3 { margin: 0; font: 600 15px/1.4 var(--sans); }.error-summary ul { margin: 8px 0 0; padding-left: 18px; font: 13px/1.5 var(--sans); }.error-summary a { text-underline-offset: 3px; }.error-summary .text-button { min-height: 42px; margin-top: 12px; padding: 0 14px; border: 1px solid var(--red); background: transparent; color: var(--red); cursor: pointer; font: 600 12px/1 var(--sans); }
.order-sheet form { margin-top: 30px; }.order-sheet fieldset { min-width: 0; margin: 0; padding: 0 0 28px; border: 0; border-bottom: 1px solid var(--line); }.order-sheet fieldset + fieldset { padding-top: 27px; }.order-sheet legend { padding: 0; margin-bottom: 18px; font: 600 15px/1.3 var(--serif); }
.quantity-row { display: grid; grid-template-columns: 1fr 64px; gap: 16px; align-items: center; padding: 15px 0; border-top: 1px solid var(--line); }.quantity-row:last-child { border-bottom: 1px solid var(--line); }.quantity-row label { display: grid; gap: 6px; font: 15px/1.3 var(--serif); }.quantity-row small { color: var(--soft-ink); font: 10px/1.4 var(--mono); }.quantity-row input { width: 64px; min-height: 46px; padding: 6px; border: 1px solid var(--ink); border-radius: 0; background: var(--card); color: var(--ink); font: 16px/1 var(--mono); text-align: center; }.quantity-row .field-error { grid-column: 1 / -1; }
.order-summary { margin: 27px 0; padding: 20px; background: var(--mist); }.order-summary.is-authoritative { border: 1px solid var(--green); background: rgba(49, 92, 69, .1); }.order-summary h3 { margin: 0 0 18px; font: 600 14px/1.3 var(--serif); }.order-summary dl { margin: 0; }.order-summary dl div { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; font: 11px/1.4 var(--mono); }.order-summary dt { color: var(--soft-ink); }.order-summary dd { margin: 0; }.order-summary .summary-total { margin-top: 8px; padding-top: 15px; border-top: 1px solid rgba(29, 41, 35, .4); color: var(--red); font-weight: 700; }.order-summary p { margin: 16px 0 0; font: 11px/1.5 var(--mono); }
.contact-fields > p, .consent-fields > p { margin: -4px 0 18px; color: var(--soft-ink); font: 11px/1.6 var(--sans); }.contact-fields label { display: grid; gap: 8px; margin-top: 15px; font: 12px/1.4 var(--sans); }.contact-fields input, .contact-fields textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 0; background: var(--card); color: var(--ink); font: 15px/1.5 var(--sans); resize: vertical; }.payment-fields label, .consent-fields label { display: flex; align-items: flex-start; gap: 9px; margin-top: 13px; font: 12px/1.55 var(--sans); }.payment-fields input, .consent-fields input { flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--red); }.choice-field { display: grid; gap: 5px; }
.field-error { display: block; margin-top: 3px; color: #8f2f1d; font: 600 11px/1.45 var(--sans); }.field-error[hidden] { display: none; }[aria-invalid="true"] { border-color: var(--red) !important; background: rgba(182, 70, 46, .06) !important; box-shadow: 0 0 0 2px rgba(182, 70, 46, .15); }
.static-submit, .workflow-panel button { width: 100%; min-height: 54px; margin-top: 28px; border: 1px solid var(--red); background: var(--red); color: var(--card); cursor: pointer; font: 600 14px/1 var(--sans); }.static-submit:disabled, .workflow-panel button:disabled { cursor: wait; opacity: .72; }.static-submit:hover:not(:disabled), .workflow-panel button:hover:not(:disabled) { background: #963822; }.order-status { margin: 14px 0 0; color: var(--soft-ink); font: 10px/1.6 var(--mono); }
.workflow-panel { margin-top: 30px; padding: 26px 0 0; border-top: 1px solid var(--ink); }.workflow-panel h3 { margin: 16px 0 13px; font: 500 27px/1.05 var(--serif); letter-spacing: -.04em; }.workflow-panel > p:not(.eyebrow) { margin: 0; color: var(--soft-ink); font: 13px/1.7 var(--sans); }.workflow-panel strong { color: var(--ink); font-family: var(--mono); font-size: .9em; }.workflow-link { display: inline-block; margin-top: 20px; color: var(--green); font: 600 13px/1.4 var(--sans); text-decoration-thickness: 1px; text-underline-offset: 5px; }.workflow-panel form { margin-top: 22px; }.workflow-panel label { display: grid; gap: 8px; margin-top: 15px; font: 12px/1.4 var(--sans); }.workflow-panel input, .workflow-panel textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 0; background: var(--card); color: var(--ink); font: 15px/1.5 var(--sans); resize: vertical; }.workflow-panel button { margin-top: 20px; }.workflow-panel .text-button { width: auto; min-height: 0; margin-top: 17px; padding: 0; border: 0; background: transparent; color: var(--green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }.workflow-panel .text-button:hover:not(:disabled) { background: transparent; color: var(--red); }.workflow-complete { padding: 25px; border: 1px solid var(--green); background: rgba(49, 92, 69, .08); }.workflow-complete h3 { color: var(--green); }
.order-footer { display: grid; grid-template-columns: 1fr auto; gap: 32px; padding: 34px 5vw; background: var(--ink); color: var(--card); font: 10px/1.5 var(--mono); }.order-footer p { margin: 0; }.order-footer p:last-child { max-width: 430px; color: rgba(255, 249, 239, .72); text-align: right; }

@media (max-width: 900px) { .order-header { grid-template-columns: 1fr auto; }.order-header > p { display: none; }.order-layout { border-right: 1px solid var(--line); }.order-story { padding-right: clamp(28px, 6vw, 60px); padding-left: clamp(28px, 6vw, 60px); }.order-sheet { margin-right: 24px; margin-left: 24px; padding: 28px; } }
@media (max-width: 767px) { .order-header { min-height: 68px; padding: 14px 20px; }.header-actions { gap: 10px; }.member-session-label, .back-link { display: none; }.member-session-email { max-width: min(40vw, 22ch); font-size: 9px; }.order-layout { grid-template-columns: 1fr; border-left: 0; border-right: 0; }.order-story { padding: 62px 25px 72px; border-right: 0; }.order-story h1 { font-size: clamp(48px, 15vw, 70px); }.order-intro { font-size: 16px; }.order-loom { margin: 64px 0; }.order-loom-stage { box-shadow: 8px 8px 0 var(--mist); }.spec-grid { grid-template-columns: 1fr; }.spec-grid article, .spec-grid article + article { padding: 22px 0; border-left: 0; }.spec-grid h3 { margin-bottom: 22px; }.shipping-ladder { margin-top: 64px; }.order-sheet { position: static; margin: 0; padding: 34px 25px 42px; border-right: 0; border-left: 0; box-shadow: none; }.order-footer { grid-template-columns: 1fr; gap: 12px; padding: 27px 25px; }.order-footer p:last-child { text-align: left; } }
@media (max-width: 767px), (prefers-reduced-motion: reduce) { .order-loom-phase, .order-loom-toggle { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* The order number is the only way a customer gets back into their order, so it
   is presented as something to keep rather than a detail inside a sentence. */
.order-receipt {
  margin: 0 0 24px; padding: 18px 20px;
  border: 2px dashed var(--ink, #1d2923); background: var(--mist, #eef1ea);
}
.receipt-label { margin: 0; font: 10px/1.6 var(--mono, monospace); letter-spacing: .12em; opacity: .7; }
.receipt-number { margin: 6px 0 10px; }
.receipt-number strong {
  font: 700 22px/1.2 var(--mono, monospace); letter-spacing: .06em; user-select: all;
}
.receipt-note { margin: 10px 0 0; font-size: 12px; line-height: 1.75; opacity: .8; }

/* The order total is the only amount the server accepts, so the field states it
   rather than inviting a value that would be rejected. */
#transfer-amount[readonly] { background: var(--mist, #eef1ea); cursor: not-allowed; font-weight: 700; }

/* The completion panel restates what the customer needs to keep. */
.complete-facts { margin: 14px 0 0; font-size: 13px; }
.complete-facts dt { font-weight: 700; margin-top: 8px; }
.complete-facts dd { margin: 2px 0 0; opacity: .85; line-height: 1.7; }

/* Stated before the form, not after it is filled in. */
.availability-notice {
  margin: 0 0 20px; padding: 14px 18px;
  border-left: 4px solid var(--ink, #1d2923); background: var(--mist, #eef1ea);
  font-size: 14px; line-height: 1.75;
}

/* Stated beside the field it constrains, not only in the terms further down. */
.field-note { margin: 6px 0 0; font-size: 12px; line-height: 1.7; opacity: .75; }
.privacy-summary { line-height: 1.85; }
.privacy-summary strong { display: inline-block; margin-top: 6px; }

/* Binding a notification channel is optional. Giving it the same weight as the
   order buttons made a finished order look unfinished — the selector has to be
   as specific as `.workflow-panel button`, which sets the red fill. */
.workflow-panel button.button-quiet-submit {
  border: 1px solid var(--green); background: transparent; color: var(--green);
}
.workflow-panel button.button-quiet-submit:hover:not(:disabled) {
  background: var(--green); color: var(--card);
}

.member-identity-fields > p { margin: -4px 0 18px; color: var(--soft-ink); font: 11px/1.6 var(--sans); }
.member-identity-fields > label { display: grid; gap: 8px; margin-top: 15px; font: 12px/1.4 var(--sans); }
.member-identity-fields input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 0; background: var(--card); color: var(--ink); font: 15px/1.5 var(--sans); }
.email-auth-actions, .email-code-fields { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.email-code-fields label { flex: 1 1 190px; display: grid; gap: 8px; font: 12px/1.4 var(--sans); }
.button-secondary { border: 1px solid currentColor; background: transparent; color: var(--ink); padding: 10px 14px; font: 600 12px/1.2 var(--sans); cursor: pointer; }
.button-secondary:disabled { cursor: wait; opacity: 0.55; }
.verification-status { color: var(--soft-ink); font: 11px/1.4 var(--sans); }
.verification-status.is-verified { color: #267047; font-weight: 700; }
.identity-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; color: var(--soft-ink); font: 11px/1 var(--sans); }
.identity-divider::before, .identity-divider::after { content: ""; height: 1px; background: currentColor; opacity: 0.35; flex: 1; }