/* Guest checkout page (Shopify-style split layout) */
.checkout-page { background: linear-gradient(90deg, var(--paper) 55%, #f4f2ed 55%); min-height: 100vh; }

.co-container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.co-header { background: var(--paper); border-bottom: 1px solid var(--line); }
.co-header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.co-brand { display: flex; align-items: center; gap: 12px; }
.co-brand .brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--accent); border-radius: 50%; font-family: var(--font-serif); color: var(--accent); }
.co-brand-name { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; color: var(--ink); }
.co-brand-name span { color: var(--accent); }
.co-back { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--accent-dark); }
.co-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }

.co-layout { display: grid; grid-template-columns: 1fr 0.82fr; gap: 0 40px; }
.co-form-col { grid-column: 1; grid-row: 1; padding: 36px 0 56px; }
.co-summary { grid-column: 2; grid-row: 1; padding: 40px 0 40px 36px; }
.co-summary-body { position: sticky; top: 24px; }

.co-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; font-size: 0.85rem; color: var(--muted); }
.co-steps a { color: var(--accent-dark); }
.co-steps strong { color: var(--ink); font-weight: 600; }

.co-form fieldset { margin: 0 0 30px; padding: 0; border: 0; }
.co-form legend { margin-bottom: 14px; padding: 0; font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; color: var(--ink); }
.co-form legend small, .co-field small { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 400; color: var(--muted); }
.co-guest { margin: -6px 0 12px; font-size: 0.88rem; color: var(--muted); }

.co-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-row-3 { grid-template-columns: 1fr 2fr; }
.co-field { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 5px; margin-bottom: 12px; font-size: 0.85rem; font-weight: 500; color: var(--ink); }

.co-field input, .co-field select, .co-field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #d6d2c8;
  border-radius: 8px;
  background: var(--paper);
  font: inherit;
  font-size: 0.98rem;
  font-weight: 400;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.co-field input:focus, .co-field select:focus, .co-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(184, 137, 74, 0.18);
}

.co-field.has-error input, .co-field.has-error select { border-color: #b3412e; }
.co-field textarea { resize: vertical; }
.co-field > input, .co-field > select, .co-field > textarea { flex-basis: 100%; }

.co-payments { border: 1px solid #d6d2c8; border-radius: 8px; overflow: hidden; }
.co-pay { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 16px; cursor: pointer; }
.co-pay + .co-pay { border-top: 1px solid #d6d2c8; }
.co-pay.is-selected { background: #fbf8f2; box-shadow: inset 0 0 0 1px var(--accent); }
.co-pay input { margin-top: 3px; accent-color: var(--accent); }
.co-pay-title { font-weight: 600; color: var(--ink); }
.co-pay-note { grid-column: 2; font-size: 0.86rem; color: var(--muted); }

.co-terms { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 20px; font-size: 0.88rem; color: var(--muted); }
.co-terms input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); }
.co-terms a, .co-legal a { color: var(--accent-dark); text-decoration: underline; }

.co-submit { padding: 18px; font-size: 1.05rem; border-radius: 8px; }
.form-status { min-height: 1.4em; margin: 12px 0 0; font-size: 0.9rem; }
.form-status.is-error { color: #b3412e; }

.co-items { margin: 0 0 20px; }
.co-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; }
.co-thumb { position: relative; }
.co-thumb img { width: 64px; height: 64px; border-radius: 8px; border: 1px solid var(--line); object-fit: cover; background: var(--paper); }
.co-qty { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #6b6f78; color: #fff; font-size: 0.72rem; font-weight: 600; }
.co-item-name { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.co-item-meta { font-size: 0.8rem; color: var(--muted); }
.co-item-price { font-size: 0.95rem; font-weight: 500; color: var(--ink); white-space: nowrap; }

.co-totals { margin: 0; padding-top: 16px; border-top: 1px solid #e2ded5; }
.co-totals div { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px; font-size: 0.92rem; }
.co-totals dt { color: var(--text); }
.co-totals dd { margin: 0; text-align: right; }
.co-grand { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e2ded5; font-size: 1.15rem !important; }
.co-grand dt, .co-grand dd span { font-weight: 600; color: var(--ink); }
.co-grand small { font-size: 0.75rem; color: var(--muted); }
.co-muted { color: var(--muted); }
.co-small { margin: -6px 0 12px; font-size: 0.85rem; }
.co-guarantee { margin-top: 18px; padding: 14px 16px; border-radius: 8px; background: #fbf8f2; border: 1px solid #ebe3d4; font-size: 0.85rem; color: var(--text); }

.co-summary-toggle { display: none; }

.co-empty, .co-done { padding: 24px 0 40px; }
.co-done-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border: 2px solid var(--accent); border-radius: 50%; font-size: 1.5rem; color: var(--accent); }
.co-done h1 { font-size: 2rem; }
.co-next { margin: 20px 0 28px; padding-left: 20px; list-style: decimal; color: var(--text); }
.co-next li { margin-bottom: 8px; }

.co-legal { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.8rem; }
.co-legal p { width: 100%; margin: 4px 0 0; color: var(--muted); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.btn-block { display: block; width: 100%; text-align: center; cursor: pointer; font-family: inherit; }
.btn:disabled { opacity: 0.6; cursor: wait; }

@media (max-width: 900px) {
  .checkout-page { background: var(--paper); }
  .co-layout { grid-template-columns: 1fr; }
  .co-summary { grid-column: 1; grid-row: 1; margin: 0 -24px; padding: 0 24px !important; background: #f4f2ed; border-bottom: 1px solid var(--line); }
  .co-form-col { grid-row: 2; padding-top: 24px; }
  .co-summary-toggle {
    display: flex; justify-content: space-between; width: 100%; padding: 16px 0;
    border: 0; background: none; font: inherit; color: var(--accent-dark); cursor: pointer;
  }
  .co-summary-toggle strong { color: var(--ink); }
  .co-summary-body { display: none; position: static; padding-bottom: 20px; }
  .co-summary.is-open .co-summary-body { display: block; }
}

@media (max-width: 560px) {
  .co-row, .co-row-3 { grid-template-columns: 1fr; gap: 0; }
  .co-back span { display: none; }
}