/* Order confirmation: centred intro, a white "what you ordered" panel, info cards, an optional
   accent note and centred pill CTAs. Surfaces and pills are the shared theme primitives; only the
   rhythm, the order lines and the grand-total row are section-owned. */
.order-confirmation {
  display: block;
  background: rgba(var(--color-background));
  color: rgba(var(--color-text));
  padding-top: var(--oc-pad-top, 80px);
  padding-bottom: var(--oc-pad-bottom, 0px);
}
/* The contract keys the inner container, so the page rhythm stays on the section root. */
.order-confirmation__wrap { max-width: var(--oc-wrap, 720px); }

.order-confirmation__heading { margin-top: var(--oc-heading-gap, 18px); }
.order-confirmation__lede { margin-top: var(--oc-lede-gap, 20px); }

/* ---------- Order panel ---------- */
.order-confirmation__panel { margin-top: var(--oc-panel-gap, 34px); }
.order-confirmation__panel-label { color: var(--theme-text-mono); }
.order-confirmation__lines { gap: var(--oc-lines-gap, 14px); margin-top: var(--oc-lines-offset, 18px); }

.order-confirmation__line { display: flex; gap: 14px; align-items: center; }
.order-confirmation__line-img {
  width: var(--oc-media-size, 56px); height: var(--oc-media-size, 56px);
  object-fit: cover; border-radius: 10px;
  background: rgba(var(--color-media-background)); flex: 0 0 auto;
}
.order-confirmation__line-main { flex: 1; min-width: 0; }
.order-confirmation__line-title { font: 600 14px/1.3 var(--font-body); }
.order-confirmation__line-meta { font: 500 11px/1.3 var(--font-mono); color: var(--theme-text-mono); margin-top: 5px; }
.order-confirmation__line-price { font: 700 14px/1 var(--font-body); margin-left: auto; }

.order-confirmation__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 12px; margin-top: 4px; border-top: 1px solid #0B0B0B18;
}
.order-confirmation__total-price { font-size: var(--oc-total-size, 26px); }

/* ---------- Info cards ---------- */
.order-confirmation__cards { margin-top: var(--oc-cards-gap, 18px); }
.order-confirmation__card-label { color: var(--theme-text-mono); margin-bottom: var(--oc-card-label-gap, 10px); }
.order-confirmation__card-body {
  font-size: var(--oc-card-body-size, 15px); line-height: 1.6;
  color: rgba(var(--color-light-text)); text-wrap: pretty; white-space: pre-line;
}

/* ---------- Optional accent note (gift message, delivery caveat…) ---------- */
.order-confirmation__note {
  margin-top: var(--oc-note-gap, 18px);
  background: var(--theme-accent); color: var(--theme-ink);
  border-radius: var(--radius); padding: 26px;
}
.order-confirmation__note-text { margin-top: 8px; }

/* ---------- CTAs ----------
   Inline (not flex) on purpose: the source wraps the second pill onto its own line on narrow
   screens with no row gap, which only inline line-boxes reproduce. */
.order-confirmation__actions { margin-top: var(--oc-actions-gap, 30px); }
.order-confirmation__action + .order-confirmation__action { margin-left: var(--oc-actions-space, 8px); }

@media (max-width: 620px) {
  .order-confirmation__line-img { width: var(--oc-media-size-narrow, 48px); height: var(--oc-media-size-narrow, 48px); }
  .order-confirmation__total-price { font-size: var(--oc-total-size-narrow, 22px); }
}