.bar { border-bottom: 1px solid var(--line); }
.bar-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; }
.bar-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-sm); font-weight: 600; text-underline-offset: 4px; }

.checkout { display: grid; gap: var(--s-6); padding-block: var(--s-6) var(--s-8); }
.checkout h1 { font-size: var(--t-4); margin-bottom: var(--s-5); }
.center { text-align: center; max-width: none; }
.pay-form { display: grid; gap: var(--s-5); }

.method { display: grid; gap: var(--s-3); margin: 0; padding: var(--s-4); min-width: 0; border: 2px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.method legend { padding-inline: var(--s-2); font-weight: 600; }
.method-note { font-size: var(--t-sm); color: var(--ink-muted); }
.method-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.method-tab { display: grid; place-items: center; min-height: 44px; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: var(--t-sm); font-weight: 600; color: var(--ink-muted); }
.method-tab.is-on { border-color: var(--ink-muted); color: var(--ink); }
.method-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.method input[disabled] { background: var(--surface-2); cursor: not-allowed; }
.method input[disabled]:hover { border-color: var(--line); }
.method input::placeholder { color: var(--ink-muted); }

.waiver { display: grid; gap: var(--s-2); }
.check { display: grid; grid-template-columns: 24px 1fr; gap: var(--s-3); padding-block: var(--s-2); cursor: pointer; }
.check input { width: 24px; height: 24px; margin: 0; accent-color: var(--campo); cursor: pointer; }
.check input[aria-invalid='true'] { outline: 2px solid var(--error); outline-offset: 2px; }

.paid { display: grid; gap: var(--s-4); align-content: start; }
.paid[hidden] { display: none; }
.paid h1 { margin-bottom: 0; }
.paid h1:focus { outline: none; }
.paid-tick { width: 64px; height: 64px; color: var(--done); }
.paid b { font-weight: 600; overflow-wrap: anywhere; }

.order { order: -1; display: grid; gap: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); background: var(--surface-2); }
.order-product { display: grid; grid-template-columns: 64px 1fr; gap: var(--s-3); align-items: center; }
.order-product b { display: block; font-weight: 600; line-height: 1.25; }
.order-product span { display: block; line-height: 1.35; }
.order-art { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-sm); background: var(--campo); color: var(--sole); font-size: var(--t-4); font-weight: 800; font-stretch: 75%; }
.order-list { display: none; }
.order-sum { display: grid; gap: var(--s-2); }
.order-sum div { display: flex; justify-content: space-between; gap: var(--s-4); }
.order-sum dt { color: var(--ink-muted); }
.order-total { padding-top: var(--s-3); border-top: 2px solid var(--ink); align-items: baseline; }
.order-total dt { color: var(--ink); font-weight: 600; }
.order-total dd { font-size: var(--t-3); font-weight: 800; font-stretch: 75%; line-height: 1; }

@media (min-width: 800px) {
  .checkout { grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-8); padding-block: var(--s-8); max-width: 960px; }
  .order { order: 0; position: sticky; top: var(--s-5); align-self: start; padding: var(--s-5); }
  .order-list { display: grid; gap: var(--s-2); padding-block: var(--s-3); border-block: 1px solid var(--line); }
}