/* ═══════════════════════════════ YOUR ORDER (Oct 9) ═══════════════════════════════
   The website's "Create your order" / "Request a quote" screen (js/order-page.js):
   what was picked, the artwork, what it should say, who it is from. Tokens are
   app.css's own, so the website's look (css/site-look.css) dresses it too. */

.flowcol--order { max-width: 720px; gap: 18px; }

/* the website's kicker over the title: the four dots, then the product's category
   (css/brand-mark.css draws the dots; js/order-page.js builds it) */
.flowcol--order .kicker { align-self: flex-start; margin: 4px 0 -8px; color: var(--ink); }

/* what they picked on the website */
.osum {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background: var(--paper);
}
.osum__name { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.osum__opts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 18px; }
.osum__opt dt { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.osum__opt dd { margin: 2px 0 0; font-size: var(--fs-body); font-weight: 600; color: var(--ink); }
.osum__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.osum__pricelabel { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); width: 100%; }
.osum__price strong { font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.osum__pricenote { font-size: var(--fs-small); color: var(--muted); }
.osum__rush { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: 600; color: var(--ink); cursor: pointer; }
.osum__rush input { width: 18px; height: 18px; accent-color: var(--accent); }
.osum__change { align-self: flex-start; font-size: var(--fs-small); font-weight: 600; color: var(--accent); }

/* a section of the form */
.osec { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.osec__title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.ofields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.ofields .ofield--wide, .ofields .ofield--other, .ofields .ofield--notes, .ofields .ofield--address { grid-column: 1 / -1; }

/* the artwork: upload in place, "Your file's been uploaded" */
.oupload {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid var(--accent-line);
  background: var(--paper); color: var(--ink);
  font-size: var(--fs-body); font-weight: 600;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.oupload:hover { border-color: var(--accent); background: var(--accent-soft); }
.oupload__icon { display: inline-flex; color: var(--accent); }
.ofiles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ofiles[hidden] { display: none; }
.ofile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line-soft); background: var(--paper);
}
.ofile__tick { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); }
.ofile__name { font-size: var(--fs-small); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ofile__size { font-size: var(--fs-micro); color: var(--muted); }
.ofile__remove { font-size: var(--fs-micro); font-weight: 600; color: var(--muted); padding: 6px 8px; border-radius: 8px; }
.ofile__remove:hover { color: var(--ink); background: var(--accent-soft); }
.ofiles__msg { margin: 0; min-height: 1.4em; font-size: var(--fs-small); font-weight: 600; color: var(--accent); }

.osend { align-self: flex-start; margin-top: 6px; }
.osend.is-working { opacity: .7; cursor: progress; }

/* "Send order" and "Add to cart" side by side (Oct 10: one cart, throughout) */
.osendrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 6px; }
.osendrow .osend { margin-top: 0; align-self: auto; }
.osend--cart { min-height: 52px; }
.osend__bag { display: inline-flex; flex: 0 0 auto; }

@media (max-width: 640px) {
  .ofields { grid-template-columns: 1fr; }
  .osendrow { flex-direction: column; align-items: stretch; }
  .osend { align-self: stretch; }
  .osum__price strong { font-size: 26px; }
}

/* in the website's look - the page itself is the website's paper (#F4F3EF, --sl-paper),
   set for every .page--flow in css/site-look.css */
:root[data-look="site"] .page--flow .flowcol--order .kicker { font-family: var(--sl-body); color: var(--sl-ink); }
:root[data-look="site"] .page--flow .osum { border: 0; border-radius: 18px; background: #fff; }
:root[data-look="site"] .page--flow .osum__name, :root[data-look="site"] .page--flow .osec__title { font-family: var(--sl-display); }
:root[data-look="site"] .page--flow .osum__price strong { font-family: var(--sl-display); }
:root[data-look="site"] .page--flow .osum__opt dt, :root[data-look="site"] .page--flow .osum__pricelabel { font-family: var(--sl-mono); letter-spacing: 1.1px; font-size: 11.5px; }
:root[data-look="site"] .page--flow .ofile { border: 0; box-shadow: inset 0 0 0 1px var(--sl-line); }
:root[data-look="site"] .page--flow .oupload { border: 0; box-shadow: inset 0 0 0 1.5px var(--sl-ink); }
:root[data-look="site"] .page--flow .oupload:hover { background: var(--sl-ink); color: #fff; }
:root[data-look="site"] .page--flow .oupload:hover .oupload__icon { color: #fff; }
/* "Add to cart" next to "Send order": the website's outline pill */
:root[data-look="site"] .page--flow .osend--cart { border: 0; box-shadow: inset 0 0 0 1.5px var(--sl-ink); background: transparent; color: var(--sl-ink); font: 600 16px var(--sl-body); padding: 0 24px; }
:root[data-look="site"] .page--flow .osend--cart:hover:not(:disabled) { background: var(--sl-ink); color: #fff; }