/* STORE TWENTY-ONE · bag (cart/) and checkout (checkout/) pages (owner: checkout).
 * Loaded on every shop page, so every class here is prefixed ck-. Builds on .line-item, .summary, .radio-card from style.css.
 */

.ck-head { margin-bottom: 24px; min-width: 0; }
.ck-head .pay-row { margin-top: 12px; }
.ck-layout { min-width: 0; }
.ck-main, .ck-aside { min-width: 0; }

/* Bag lines */
.ck-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ck-line-media { display: block; width: 72px; }
.ck-line { display: grid; gap: 6px; align-content: start; min-width: 0; }
.ck-line-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; min-width: 0; }
.ck-line-name { font-weight: 600; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; min-width: 0; }
.ck-line-total { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--gold); font-weight: 700; white-space: nowrap; }
.ck-line-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ck-qty-form { display: flex; align-items: center; gap: 8px; margin: 0; }
.ck-qty-form .qty { width: 64px; }

/* Empty bag */
.ck-empty { text-align: center; padding: 40px 20px; }
.ck-empty-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 999px; border: 1px solid rgba(212, 175, 55, 0.4); color: var(--gold); }
.ck-empty-icon .icon { width: 28px; height: 28px; }
.ck-empty .title-md { margin-bottom: 0; }
.ck-empty p { margin: 0; }

/* Coupon */
.ck-coupon-form { margin: 0; }
.ck-coupon-row { display: flex; gap: 8px; min-width: 0; }
.ck-coupon-row .input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.ck-coupon-row .btn { flex: none; }
.ck-coupon-applied {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border: 1px dashed rgba(74, 222, 128, 0.5); border-radius: 12px; background: rgba(74, 222, 128, 0.06);
}
.ck-coupon-code { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.ck-coupon-code .icon { color: var(--ok); flex: none; }

/* Summary extras */
.summary .ck-note { flex-direction: column; gap: 4px; }
.summary .ck-note dd { font-family: var(--font); text-align: left; color: var(--muted); font-size: 14px; line-height: 1.5; white-space: normal; }
.ck-free-hint { display: block; margin-top: 4px; color: var(--gold); }
.ck-aside .summary dt { min-width: 0; overflow-wrap: anywhere; }
.ck-aside .summary > div:not(.ck-note) dd { white-space: nowrap; }
.ck-aside .btn .icon { flex: none; }
.ck-aside .pay-row { margin-top: 8px; }
.ck-sum-lines { list-style: none; margin: 0; padding: 0 0 12px; display: grid; gap: 8px; border-bottom: 1px solid var(--line); font-size: 14px; }
.ck-sum-lines li { display: flex; justify-content: space-between; gap: 12px; }
.ck-sum-lines li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ck-sum-lines .mono { white-space: nowrap; color: var(--muted); }

/* Checkout form */
.ck-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ck-legend { display: block; padding: 0; margin: 0 0 4px; font-family: var(--display); font-weight: 700; font-size: 1.2rem; line-height: 1.2; }
.ck-options { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .ck-options { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
.ck-opt .radio-body { flex-direction: column; align-items: flex-start; gap: 2px; }
.ck-opt-title { font-weight: 600; }
.ck-pay .radio-body { row-gap: 4px; }
.ck-pay-name { font-weight: 600; }
.ck-pay-hint { flex-basis: 100%; }
.ck-options .radio-card:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.ck-fieldset .pay-warning { margin-top: 16px; }

@media (max-width: 380px) {
  .ck-page .card { padding: 16px; }
  .ck-coupon-row .btn { padding: 10px 14px; }
}

/* Premium payment cards */
@media (min-width: 600px) { .ck-pay-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ck-pay-cards .radio-card { padding: 16px; border-radius: 14px; align-items: flex-start; }
.ck-pay-cards .radio-body { flex-wrap: nowrap; align-items: flex-start; gap: 14px; }
.ck-pay-cards .pay-icon { border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.ck-pay-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ck-pay-num { font-size: 18px; font-weight: 700; color: var(--gold); letter-spacing: .04em; }