/* The platform's checkout, order and account pages, rendered inside any theme's
   layout. Colours, fonts, radius and widths come from the theme's tokens (the
   ouse names, which the bare fallback page defines too); every variable has a
   plain fallback so an unknown theme still gets a legible page. No inline
   styles anywhere (PRD §10 strict CSP). */

.ck { color: var(--t-hi, #f7f3ee); font-family: var(--f-body, system-ui, sans-serif); }
.ck *, .ck *::before, .ck *::after { box-sizing: border-box; }
.ck .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ck [hidden], .ck .is-hidden { display: none !important; }
.ck-wrap { display: grid; gap: 32px; }
.ck-narrow { max-width: 720px; }

.ck-head { display: grid; gap: 12px; }
.ck-title { font-family: var(--f-display, inherit); font-weight: 300; font-size: clamp(30px, 4vw, 44px); letter-spacing: .03em; margin: 0; }
.ck-lede { margin: 0; max-width: 60ch; font-size: 16px; line-height: 1.7; color: var(--t-lede, #d6cdc1); }
.ck-small { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--t-lo, #a59c91); }
.ck-small + .ck-small { margin-top: 8px; }
.ck-muted { color: var(--t-faint, #6f675e); }
.ck-hint { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--t-lo, #a59c91); font-size: 12px; margin-left: 6px; }
.ck a { color: var(--gold, #c79a44); }
.ck a:hover { color: var(--gold-hi, #e0bd6e); }

.ck-alert {
  margin: 0; padding: 12px 14px; border-radius: var(--radius, 4px);
  border: 1px solid var(--chilli, #b8402f); background: rgba(184, 64, 47, .12);
  font-size: 14px; line-height: 1.55; color: var(--t-hi, #f7f3ee);
}
.ck-alert-ok { border-color: var(--green, #1f7a5a); background: rgba(31, 122, 90, .14); }

.ck-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
@media (max-width: 960px) { .ck-grid { grid-template-columns: 1fr; } .ck-summary { order: -1; } }

.ck-block {
  display: grid; gap: 16px; padding: 22px; margin: 0 0 18px; border: 1px solid var(--line-dark, #3a352f);
  border-radius: var(--radius, 4px); background: var(--ink-2, #211e1b); min-width: 0;
}
.ck-block:last-child { margin-bottom: 0; }
fieldset.ck-block { border: 1px solid var(--line-dark, #3a352f); }
.ck-legend {
  font-family: var(--f-display, inherit); font-weight: 400; font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold, #c79a44); margin: 0; padding: 0;
}
legend.ck-legend { float: left; width: 100%; margin-bottom: 4px; }
legend.ck-legend + * { clear: both; }

.ck-field { display: grid; gap: 7px; }
.ck-field label { font-family: var(--f-display, inherit); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--t-lo, #a59c91); }
.ck-field input, .ck-field textarea {
  width: 100%; padding: 12px 13px; border-radius: var(--radius, 4px);
  border: 1px solid var(--line-dark, #3a352f); background: var(--ink, #161412); color: var(--t-hi, #f7f3ee);
  font-family: var(--f-body, inherit); font-size: 15.5px; line-height: 1.4;
}
.ck-field textarea { resize: vertical; min-height: 64px; }
.ck-field input::placeholder, .ck-field textarea::placeholder { color: var(--t-faint, #6f675e); }
.ck-field input:focus-visible, .ck-field textarea:focus-visible { outline: 2px solid var(--gold, #c79a44); outline-offset: 2px; }
.ck-field.is-invalid input, .ck-field.is-invalid textarea { border-color: var(--chilli, #b8402f); }
.ck-field-error { margin: 0; font-size: 13px; color: var(--chilli, #b8402f); }
.ck-field-row { display: grid; grid-template-columns: 1fr 160px; gap: 14px; }
@media (max-width: 560px) { .ck-field-row { grid-template-columns: 1fr; } }

.ck-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-chip { position: relative; }
.ck-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.ck-chip span {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--line-dark, #3a352f); cursor: pointer;
  font-family: var(--f-display, inherit); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
}
.ck-chip small { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--t-lo, #a59c91); }
.ck-chip input:checked + span { background: var(--green, #1f7a5a); border-color: var(--green, #1f7a5a); color: #fff; }
.ck-chip input:checked + span small { color: rgba(255, 255, 255, .8); }
.ck-chip input:focus-visible + span { outline: 2px solid var(--gold, #c79a44); outline-offset: 2px; }

.ck-check { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.55; cursor: pointer; }
.ck-check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--green, #1f7a5a); }
.ck-check + .ck-check { margin-top: 4px; }

.ck-pay { gap: 14px; }
/* Pay now / pay later: each pane spaces its own children as the block does. */
.ck-pay [data-ck-cardpane], .ck-pay [data-ck-laterpane] { display: grid; gap: 14px; }
.ck-express { min-height: 0; }
.ck-or { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-lo, #a59c91); }
.ck-or::before, .ck-or::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line-dark, #3a352f); }
.ck-card { min-height: 0; }
.ck-error { margin: 0; font-size: 14px; color: var(--chilli, #b8402f); }
.ck-paybtn { width: 100%; padding: 16px 20px; }
.ck-paybtn[disabled] { opacity: .55; cursor: not-allowed; }
.ck-legal { text-align: center; }
.ck-unavailable { margin: 0; font-size: 15px; line-height: 1.65; color: var(--t-lede, #d6cdc1); }
.ck-notice { text-align: center; }

.ck-summary {
  position: sticky; top: 104px; display: grid; gap: 16px; padding: 22px;
  border: 1px solid var(--line-dark, #3a352f); border-radius: var(--radius, 4px); background: var(--ink-2, #211e1b);
}
@media (max-width: 960px) { .ck-summary { position: static; } }
.ck-items { list-style: none; margin: 0; padding: 0; }
.ck-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--hair-soft, rgba(58, 53, 47, .55)); }
.ck-item-name { margin: 0; font-size: 15px; line-height: 1.4; }
.ck-item-qty { font-family: var(--f-display, inherit); color: var(--gold, #c79a44); }
.ck-item-opts { margin: 4px 0 0; font-size: 13px; color: var(--t-lo, #a59c91); }
.ck-item-note { margin: 4px 0 0; font-size: 13px; font-style: italic; color: var(--gold, #c79a44); }
.ck-item-off { margin: 4px 0 0; font-size: 12.5px; color: var(--chilli, #b8402f); }
.ck-item.is-off .ck-item-name, .ck-item.is-off .ck-item-price { color: var(--t-faint, #6f675e); text-decoration: line-through; }
.ck-item-price { font-family: var(--f-display, inherit); font-size: 15px; white-space: nowrap; }
.ck-totals { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0; padding-top: 6px; }
.ck-totals dt { margin: 0; font-size: 14px; color: var(--t-lo, #a59c91); }
.ck-totals dd { margin: 0; font-size: 14px; text-align: right; }
.ck-totals .is-total { font-family: var(--f-display, inherit); font-size: 18px; color: var(--gold, #c79a44); padding-top: 6px; border-top: 1px solid var(--line-dark, #3a352f); }
.ck-vat-line { display: block; }

.ck-steps { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.ck-step {
  flex: 1 1 0; padding: 12px 10px; border-top: 3px solid var(--line-dark, #3a352f);
  font-family: var(--f-display, inherit); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-faint, #6f675e);
}
.ck-step.is-done { border-top-color: var(--green, #1f7a5a); color: var(--t-lo, #a59c91); }
.ck-step.is-now { color: var(--t-hi, #f7f3ee); border-top-color: var(--gold, #c79a44); }
@media (max-width: 560px) { .ck-steps { flex-wrap: wrap; } .ck-step { flex-basis: 45%; } }

.ck-offer { border-color: var(--gold, #c79a44); }
.ck-orders { list-style: none; margin: 0; padding: 0; }
.ck-order-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 12px 0; border-bottom: 1px solid var(--hair-soft, rgba(58, 53, 47, .55)); font-size: 14.5px; }
.ck-order-row span { color: var(--t-lo, #a59c91); }
.ck-inline-form { margin-top: 6px; }

.ck-receipt { gap: 20px; }
.ck-receipt-meta { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; margin: 0; font-size: 14.5px; }
.ck-receipt-meta dt { color: var(--t-lo, #a59c91); }
.ck-receipt-meta dd { margin: 0; }
@media (max-width: 560px) { .ck-receipt-meta { grid-template-columns: 1fr; } }
.ck-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ck-table th, .ck-table td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--hair-soft, rgba(58, 53, 47, .55)); vertical-align: top; }
.ck-table thead th { font-family: var(--f-display, inherit); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold, #c79a44); font-weight: 400; }
.ck-table tfoot th, .ck-table tfoot td { border-bottom: 0; font-weight: 600; color: var(--t-hi, #f7f3ee); }

/* Stripe's Elements are iframes; give them room and the same rhythm as the fields. */
.ck-card iframe, .ck-express iframe { max-width: 100%; }

/* "Have a code?" on the summary (PRD §5.1; docs/phase3-design.md §1). */
.ck-code { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair-soft, rgba(58, 53, 47, .55)); }
.ck-code label { display: block; margin-bottom: 6px; }
.ck-code-row { display: flex; gap: 8px; align-items: stretch; }
.ck-code-row input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.ck-code-row button { flex: 0 0 auto; }
.ck-code .ck-field-error { margin-top: 6px; }
.ck-code.is-on .ck-code-row input { color: var(--t-lo, #a59c91); }