/* Checkout layout. Former inline styles in app/checkout/CheckoutView.tsx. */

.panel.empty.co-empty { padding: 64px 24px; }
.co-empty-title { font-size: calc(36px * var(--cc-h-scale, 1)); text-transform: var(--cc-h-transform, none); }
.co-empty p { margin: 8px 0 20px; color: var(--ink2); }
.btn.co-empty-btn { height: 48px; }
.step-sep { color: var(--line2); margin-left: 4px; }
.panel.co-main { flex: 1 1 440px; min-width: 0; padding: 26px; }
.co-panel { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.co-h1 { font-size: calc(34px * var(--cc-h-scale, 1)); margin: 0; text-transform: var(--cc-h-transform, none); }
.btn.co-btn-50 { height: 50px; }
.btn.co-back { padding: 0 24px; }
.btn.co-continue { align-self: flex-start; }
.co-methods { display: flex; flex-direction: column; gap: 12px; }
.co-method-body { flex: 1; min-width: 0; }
.co-method-label { font-size: 15px; font-weight: 700; }
.co-method-eta { font-size: 13px; color: var(--ink2); }
.co-method-price { font-size: 16px; font-weight: 700; }
.co-fees { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.co-fee-line { font-size: 14px; color: var(--ink2); }
.co-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.co-final { padding: 18px; display: flex; flex-direction: column; gap: 8px; border: 1.5px solid var(--ink); }
.total-row.co-final-total { padding-top: 10px; }
.co-final-k { font-size: 15px; font-weight: 700; }
.price.co-final-amount { font-size: 36px; }
.co-final-note { font-size: 12.5px; color: var(--ink2); }
.co-side { flex: 0 1 360px; min-width: 300px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.co-side-title { font-size: calc(26px * var(--cc-h-scale, 1)); text-transform: var(--cc-h-transform, none); }
.co-side-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.co-side-line-k { color: var(--ink2); }
.co-side-line-v { font-weight: 700; }
/* 1.21.21: product image and title in each "In this order" line. */
.co-side-line { align-items: flex-start; }
.co-side-thumb { width: 56px; height: 56px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--white); }
.co-side-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.co-side-box { display: flex; flex-direction: column; height: 100%; color: var(--ink); }
.co-side-box-b { padding: 3px 5px; font-size: 7px; font-weight: 700; letter-spacing: 0.08em; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-side-box-c { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2px 3px; text-align: center; font-family: var(--display); font-size: 12px; line-height: 1; overflow: hidden; }
.co-side-line-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.co-side-line-title { color: var(--ink); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.co-side-line-v { white-space: nowrap; }
.co-side-total { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 700; }
.link.co-edit { font-size: 13px; }
.co-lines { display: contents; }