/* ─────────────────────────────────────────────────────────────────────────────
   Cart, checkout, order and rewards.

   The design has no drawings for these four pages, so they are built out of
   what it does establish elsewhere: the ivory ground and centred rule of the
   shop head, the gold uppercase button and specification grid of a piece's
   page, Cormorant for anything a person reads and Inter for anything a person
   only scans. Nothing new is invented — no new colour, no new type size that
   is not already in site.css.

   Everything is namespaced under .commerce so it cannot reach the pages that
   were transcribed from the design and must stay exactly as they are.
   ───────────────────────────────────────────────────────────────────────────── */

.commerce {
  max-width: 1100px;
  margin-inline: auto;
  padding: clamp(48px, 7vw, 96px) var(--gutter) clamp(72px, 10vw, 130px);
}

/* ─── heads, matching .shop-head ─────────────────────────────────────────── */
.commerce .c-head {
  text-align: center;
  padding-bottom: clamp(32px, 5vw, 56px);
}
.commerce .c-head .rule {
  color: var(--gold);
}
.commerce .c-head h1 {
  margin-top: 18px;
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  font-weight: 300;
  color: var(--emerald);
}
.commerce .c-head .lede {
  max-width: 34rem;
  margin: 16px auto 0;
  font-size: 1.2rem;
  color: var(--ink-soft);
}

/* A small uppercase label, as .specs dt and .count already set it. */
.commerce .lbl {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ─── the lines of a cart ────────────────────────────────────────────────── */
.commerce .c-lines {
  list-style: none;
  border-top: 1px solid rgba(182, 139, 58, 0.26);
}
.commerce .c-line {
  display: grid;
  grid-template-columns: 128px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid rgba(182, 139, 58, 0.26);
}
.commerce .c-line figure {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ivory-deep);
}
.commerce .c-line figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.commerce .c-line .t {
  display: block;
  font-size: 1.45rem;
  color: var(--emerald);
}
.commerce .c-line .k {
  display: block;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.commerce .c-line .each {
  display: block;
  margin-top: 8px;
  color: var(--ink-soft);
}
.commerce .c-line .right {
  display: flex;
  align-items: center;
  gap: 26px;
}
.commerce .c-line .amount {
  min-width: 7rem;
  text-align: right;
  font-size: 1.35rem;
  color: var(--emerald);
  font-variant-numeric: tabular-nums;
}

/* The stepper. Hidden for one-of-a-kind pieces, which cannot go above one. */
.commerce .c-step {
  display: flex;
  align-items: center;
  border: 1px solid rgba(182, 139, 58, 0.4);
}
.commerce .c-step button {
  padding: 7px 14px;
  color: var(--ink-soft);
  transition: background 0.3s, color 0.3s;
}
.commerce .c-step button:hover:not(:disabled) {
  background: var(--emerald);
  color: var(--gold-soft);
}
.commerce .c-step button:disabled {
  opacity: 0.32;
  cursor: not-allowed;
}
.commerce .c-step span {
  min-width: 2.4rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.commerce .c-remove {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid rgba(182, 139, 58, 0.4);
  transition: color 0.3s;
}
.commerce .c-remove:hover {
  color: var(--bronze);
}

/* ─── totals ─────────────────────────────────────────────────────────────── */
.commerce .c-totals {
  margin-top: 34px;
  margin-left: auto;
  max-width: 26rem;
  display: grid;
  gap: 10px;
}
.commerce .c-totals div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.commerce .c-totals .sum {
  padding-top: 14px;
  border-top: 1px solid rgba(182, 139, 58, 0.26);
}
.commerce .c-totals .sum b {
  font-weight: 400;
  font-size: 1.8rem;
  color: var(--emerald);
  font-variant-numeric: tabular-nums;
}
.commerce .c-totals .val {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.commerce .c-totals .off {
  color: var(--bronze);
}
.commerce .c-note {
  margin-top: 12px;
  margin-left: auto;
  max-width: 26rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ─── buttons, taken from .cart on a piece's page ────────────────────────── */
.commerce .c-btn {
  display: inline-grid;
  place-items: center;
  min-height: 52px;
  padding: 0 42px;
  background: var(--gold);
  color: var(--emerald);
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background 0.4s, transform 0.4s var(--ease);
}
.commerce .c-btn:hover {
  background: var(--gold-soft);
  transform: translateY(-1px);
}
.commerce .c-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.commerce .c-btn.ghost {
  background: none;
  border: 1px solid var(--gold);
  color: var(--emerald);
}
.commerce .c-btn.ghost:hover {
  background: var(--emerald);
  color: var(--gold-soft);
}
.commerce .c-actions {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
}

/* ─── an empty cart ──────────────────────────────────────────────────────── */
.commerce .c-empty {
  text-align: center;
  padding: clamp(48px, 8vw, 96px) 0;
}
.commerce .c-empty p {
  max-width: 30rem;
  margin: 0 auto;
  color: var(--ink-soft);
}
.commerce .c-empty .c-btn {
  margin-top: 36px;
}

/* ─── checkout: the form beside the order ────────────────────────────────── */
.commerce .c-split {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
@media (min-width: 900px) {
  .commerce .c-split {
    grid-template-columns: 1.15fr 0.85fr;
  }
}
.commerce .c-panel {
  background: var(--ivory-deep);
  padding: clamp(24px, 3.5vw, 40px);
}
.commerce .c-panel h2 {
  font-size: 1.6rem;
  color: var(--emerald);
  font-weight: 400;
}
.commerce .c-panel .hair {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--gold);
  margin: 16px 0 22px;
}

.commerce .c-field {
  display: grid;
  gap: 7px;
  margin-bottom: 18px;
}
.commerce .c-field.pair {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.commerce .c-field input,
.commerce .c-field textarea,
.commerce .c-field select {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
  background: var(--ivory);
  border: 1px solid rgba(182, 139, 58, 0.4);
  transition: border-color 0.3s;
}
.commerce .c-field input:focus,
.commerce .c-field textarea:focus {
  outline: none;
  border-color: var(--gold);
}
.commerce .c-field textarea {
  min-height: 84px;
  resize: vertical;
}

.commerce .c-error {
  margin-top: 16px;
  padding: 12px 16px;
  border-left: 2px solid var(--bronze);
  background: rgba(185, 106, 47, 0.08);
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--bronze);
}

/* The order, restated beside the form. */
.commerce .c-mini {
  list-style: none;
  display: grid;
  gap: 14px;
}
.commerce .c-mini li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}
.commerce .c-mini .n {
  color: var(--ink);
}
.commerce .c-mini .q {
  color: var(--ink-soft);
}
.commerce .c-mini .p {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ─── order confirmation, and rewards ───────────────────────────────────── */
.commerce .c-seal {
  text-align: center;
}
.commerce .c-seal .seal {
  margin-inline: auto;
}
.commerce .c-ref {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.commerce .c-status {
  display: inline-block;
  margin-top: 18px;
  padding: 6px 16px;
  border: 1px solid rgba(182, 139, 58, 0.4);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .commerce .c-line {
    grid-template-columns: 96px 1fr;
  }
  .commerce .c-line .right {
    grid-column: 1 / -1;
    justify-content: space-between;
    gap: 14px;
  }
  .commerce .c-line .amount {
    min-width: 0;
  }
  .commerce .c-field.pair {
    grid-template-columns: 1fr;
  }
  .commerce .c-totals,
  .commerce .c-note {
    max-width: none;
  }
  .commerce .c-actions {
    justify-content: stretch;
  }
  .commerce .c-actions .c-btn {
    flex: 1;
  }
}

/* ─── ordering by message, while the gateway is in sandbox ──────────────── */
.commerce .c-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(10, 31, 25, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.commerce .c-modal-card {
  position: relative;
  width: min(34rem, 100%);
  max-height: 88svh;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 40px);
  background: var(--ivory);
  border: 1px solid rgba(182, 139, 58, 0.4);
  text-align: center;
}
.commerce .c-modal-card .rule {
  color: var(--gold);
}
.commerce .c-modal-card h2 {
  margin-top: 16px;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  font-weight: 300;
  color: var(--emerald);
}
.commerce .c-modal-lede {
  margin-top: 12px;
  color: var(--ink-soft);
}
.commerce .c-modal-lede b {
  font-weight: 400;
  color: var(--emerald);
  white-space: nowrap;
}
.commerce .c-modal-close {
  position: absolute;
  top: 8px;
  right: 14px;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--ink-soft);
  transition: color 0.3s;
}
.commerce .c-modal-close:hover {
  color: var(--bronze);
}

/* The message itself: shown, not just sent. */
.commerce .c-message {
  margin-top: 22px;
  padding: 18px;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--sans);
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--ivory-deep);
  border-left: 2px solid var(--gold);
  max-height: 34svh;
  overflow-y: auto;
}
.commerce .c-modal-actions {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
@media (max-width: 560px) {
  .commerce .c-modal-actions {
    flex-direction: column;
  }
  .commerce .c-modal-actions .c-btn {
    width: 100%;
  }
}

/* ─── quantity, on a piece's own page ───────────────────────────────────── */
/* Deliberately outside .commerce: the buy row lives on the product page,
   which is transcribed from the design. This adds a control the design never
   drew, in the same border and colour as its own .wish button beside it. */
.buy .qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--gold);
  color: var(--gold-soft);
  flex: 0 0 auto;
  /* Exactly the height of the button beside it, border included, so adding
     this control does not make the row — or the page — any taller. */
  height: 52px;
}
.buy .qty button {
  min-width: 40px;
  height: 100%;
  font-size: 1.1rem;
  color: var(--gold-soft);
  transition: background 0.3s, color 0.3s;
}
.buy .qty button:hover:not(:disabled) {
  background: var(--gold);
  color: var(--emerald);
}
.buy .qty button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.buy .qty span {
  min-width: 2.2rem;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}