/* HC Checkout — Blinkit-style single-page checkout for Shopify
   Mobile-first. Desktop shows the same column centred at 480px. */

.hcx, .hcx * { box-sizing: border-box; }
.hcx {
  --hcx-bg: #FBF8F3;
  --hcx-card: #FFFFFF;
  --hcx-ink: #111111;
  --hcx-muted: #6F6A62;
  --hcx-line: #ECE6DB;
  --hcx-accent: #0C831F;
  --hcx-accent-ink: #0A6A19;
  --hcx-accent-soft: #E9F6EB;
  --hcx-warn: #F8CB46;
  --hcx-warn-soft: #FFF6D6;
  --hcx-danger: #D23B3B;
  --hcx-radius: 16px;
  --hcx-font: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;

  font-family: var(--hcx-font);
  color: var(--hcx-ink);
  background: var(--hcx-bg);
  min-height: 100dvh;
  margin: 0 auto;
  max-width: 480px;
  position: relative;
  padding-bottom: 104px;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.4;
}
@media (min-width: 560px) {
  .hcx { border-left: 1px solid var(--hcx-line); border-right: 1px solid var(--hcx-line); }
}

.hcx button { font-family: inherit; cursor: pointer; }
.hcx input, .hcx select { font-family: inherit; }
.hcx svg { display: block; }
.hcx img { display: block; }

/* ---------- Top bar ---------- */
.hcx-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: rgba(251,248,243,.92);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--hcx-line);
}
.hcx-back {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--hcx-line); background: #fff;
  display: grid; place-items: center; padding: 0;
}
.hcx-top-title { flex: 1; }
.hcx-top-title h1 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.hcx-top-title p { margin: 1px 0 0; font-size: 12px; color: var(--hcx-muted); }
.hcx-eta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: var(--hcx-accent-soft); color: var(--hcx-accent-ink);
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.hcx-eta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hcx-accent); }

/* ---------- Layout ---------- */
.hcx-body { padding: 12px 12px 0; display: flex; flex-direction: column; gap: 12px; }
.hcx-card {
  background: var(--hcx-card);
  border: 1px solid var(--hcx-line);
  border-radius: var(--hcx-radius);
  overflow: hidden;
}
.hcx-card-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 10px;
}
.hcx-card-h h2 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.hcx-card-h .hcx-sub { font-size: 12px; color: var(--hcx-muted); font-weight: 600; }
.hcx-link {
  background: none; border: 0; padding: 0;
  color: var(--hcx-accent-ink); font-weight: 800; font-size: 13px;
}

/* ---------- Items ---------- */
.hcx-item {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--hcx-line);
}
.hcx-item:first-of-type { border-top: 0; }
.hcx-item-img {
  width: 56px; height: 56px; border-radius: 10px; object-fit: cover;
  border: 1px solid var(--hcx-line); background: #F3EFE7;
}
.hcx-item-name { font-weight: 700; font-size: 13.5px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hcx-item-var { color: var(--hcx-muted); font-size: 12px; margin-top: 2px; }
.hcx-item-price { font-weight: 800; font-size: 13.5px; margin-top: 4px; }
.hcx-item-price s { color: var(--hcx-muted); font-weight: 500; margin-left: 6px; font-size: 12px; }
.hcx-item-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hcx-item-total { font-size: 12.5px; color: var(--hcx-muted); font-weight: 700; text-align: right; }
.hcx-item-total s { font-weight: 500; margin-right: 5px; }
.hcx-item-total.is-free { color: var(--hcx-accent-ink); font-weight: 800; }
.hcx-free { display: inline-block; color: var(--hcx-accent-ink); font-weight: 800; letter-spacing: .04em; margin-right: 6px; }

.hcx-qty {
  display: inline-flex; align-items: center;
  height: 32px; border-radius: 9px;
  background: var(--hcx-accent); color: #fff;
  overflow: hidden;
}
.hcx-qty button {
  width: 32px; height: 32px; border: 0; background: transparent; color: #fff;
  font-size: 18px; line-height: 1; display: grid; place-items: center; padding: 0;
}
.hcx-qty button:active { background: rgba(0,0,0,.15); }
.hcx-qty span { min-width: 22px; text-align: center; font-weight: 800; font-size: 14px; }
.hcx-qty.is-one button[data-act="dec"] svg { opacity: .9; }

/* ---------- Offer strip ---------- */
.hcx-offer { padding: 12px 14px; background: linear-gradient(0deg, #FFFBEC, #FFFDF5); border-color: #F3E2A0; }
.hcx-offer-row { display: flex; align-items: center; gap: 10px; }
.hcx-offer-ico {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--hcx-warn); display: grid; place-items: center;
}
.hcx-offer-txt { flex: 1; font-size: 13px; }
.hcx-offer-txt b { font-weight: 800; }
.hcx-offer-txt small { display: block; color: var(--hcx-muted); font-size: 12px; margin-top: 1px; }
.hcx-progress { height: 6px; border-radius: 999px; background: #F1E7C7; margin-top: 10px; overflow: hidden; }
.hcx-progress i { display: block; height: 100%; background: var(--hcx-accent); border-radius: 999px; transition: width .35s ease; }
.hcx-offer.is-unlocked { background: var(--hcx-accent-soft); border-color: #BFE3C5; }
.hcx-progress { position: relative; overflow: visible; }
.hcx-progress i { position: relative; z-index: 1; }
.hcx-tick { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--hcx-ink); opacity: .3; z-index: 2; }
.hcx-tick.is-hit { opacity: .85; background: var(--hcx-accent-ink); }
.hcx-marks { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--hcx-muted); margin-top: 6px; font-weight: 600; }
.hcx-marks .is-hit { color: var(--hcx-accent-ink); font-weight: 800; }
.hcx-pick-h { margin: 12px 0 8px; font-weight: 800; font-size: 13.5px; }
.hcx-pick-row { padding: 0 0 2px; margin: 0 -2px; }
.hcx-pick { flex-basis: 108px; cursor: pointer; text-align: left; font-family: inherit; color: inherit; }
.hcx-pick:hover { border-color: var(--hcx-accent); }
.hcx-pick[disabled] { opacity: .6; }
.hcx-item.is-gift { background: #F7FCF8; }
.hcx-gift-pill { display: inline-flex; align-items: center; gap: 4px; background: var(--hcx-accent); color: #fff; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 6px; letter-spacing: .02em; }
.hcx-gift-remove { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hcx-line); background: #fff; color: var(--hcx-muted); display: grid; place-items: center; padding: 0; }
.hcx-offer.is-unlocked .hcx-offer-ico { background: var(--hcx-accent); }

/* ---------- Suggestions ---------- */
.hcx-sug-row {
  display: flex; gap: 10px; overflow-x: auto; padding: 0 14px 14px; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.hcx-sug-row::-webkit-scrollbar { display: none; }
.hcx-sug {
  flex: 0 0 132px; scroll-snap-align: start;
  border: 1px solid var(--hcx-line); border-radius: 14px; padding: 8px; background: #FFFDFA;
  display: flex; flex-direction: column; gap: 6px;
}
.hcx-sug { position: relative; }
.hcx-sug.is-free { border-color: var(--hcx-accent); background: #F7FCF8; }
.hcx-sug-tag { position: absolute; top: 12px; left: 12px; z-index: 1; background: var(--hcx-accent); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 3px 7px; border-radius: 6px; }
.hcx-sug img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: #F3EFE7; }
.hcx-sug-t { font-size: 12.5px; font-weight: 700; line-height: 1.25; min-height: 31px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hcx-sug-p { font-size: 13px; font-weight: 800; }
.hcx-sug-p s { color: var(--hcx-muted); font-weight: 500; font-size: 11px; }
.hcx-sug-add {
  height: 34px; border-radius: 9px; border: 1.5px solid var(--hcx-accent); background: #fff; color: var(--hcx-accent-ink);
  font-weight: 800; font-size: 12.5px; letter-spacing: .04em; display: flex; align-items: center; justify-content: center; gap: 4px;
}
.hcx-sug-add:active { background: var(--hcx-accent-soft); }
.hcx-sug-add .hcx-spin { border-color: rgba(12,131,31,.3); border-top-color: var(--hcx-accent); }
.hcx-sug-added { height: 34px; border-radius: 9px; background: var(--hcx-accent-soft); color: var(--hcx-accent-ink); font-weight: 800; font-size: 12.5px; display: flex; align-items: center; justify-content: center; gap: 4px; }

/* ---------- Generic row (coupon) ---------- */
.hcx-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; width: 100%; text-align: left;
  border: 1px solid var(--hcx-line); background: var(--hcx-card);
}
.hcx-row-ico {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center; background: var(--hcx-accent-soft); color: var(--hcx-accent-ink);
}
.hcx-row-txt { flex: 1; }
.hcx-row-txt b { display: block; font-weight: 800; font-size: 14px; }
.hcx-row-txt small { display: block; color: var(--hcx-muted); font-size: 12px; margin-top: 1px; }
.hcx-row-txt small.ok { color: var(--hcx-accent-ink); font-weight: 700; }
.hcx-chev { color: var(--hcx-muted); }

/* ---------- Address ---------- */
.hcx-addr { padding: 0 14px 14px; }
.hcx-addr-line { font-size: 13px; color: var(--hcx-muted); line-height: 1.45; }
.hcx-addr-name { font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.hcx-tag {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: #F3EFE7; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.hcx-addr-empty {
  width: 100%; margin: 0; padding: 12px 14px; display: flex; align-items: center; gap: 12px;
  border: 0; border-top: 1px solid var(--hcx-line); background: #fff; text-align: left;
}

/* ---------- Payment ---------- */
.hcx-pay { display: flex; flex-direction: column; }
.hcx-pay label {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-top: 1px solid var(--hcx-line); cursor: pointer;
}
.hcx-pay input { position: absolute; opacity: 0; pointer-events: none; }
.hcx-prepaid-strip { display: flex; align-items: center; gap: 10px; margin: 0 14px 10px; padding: 10px 12px; border-radius: 12px; background: var(--hcx-accent-soft); color: var(--hcx-accent-ink); }
.hcx-prepaid-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--hcx-accent); color: #fff; display: grid; place-items: center; flex: none; }
.hcx-prepaid-strip b { display: block; font-size: 13.5px; font-weight: 800; color: var(--hcx-accent-ink); }
.hcx-prepaid-strip small { display: block; font-size: 12px; font-weight: 600; color: var(--hcx-accent-ink); opacity: .9; margin-top: 1px; }
.hcx-pay label.is-on { background: #FBFDFB; }
.hcx-cod-fee { color: #8A6400; font-weight: 800; }
.hcx-cod-nudge { display: flex; align-items: center; gap: 10px; margin: 0 14px 14px; padding: 10px 12px; border-radius: 12px; background: var(--hcx-warn-soft); border: 1px solid #F3E2A0; }
.hcx-cod-nudge b { display: block; font-size: 13px; font-weight: 800; color: var(--hcx-ink); }
.hcx-cod-nudge small { display: block; font-size: 11.5px; color: #8A6400; font-weight: 600; margin-top: 1px; }
.hcx-cod-nudge > div { flex: 1; }
.hcx-nudge-btn { height: 36px; padding: 0 12px; border-radius: 9px; border: 0; background: var(--hcx-accent); color: #fff; font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.hcx-bill-line .r.warn { color: #8A6400; }
.hcx-cod-steps { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.hcx-cod-step { display: flex; gap: 12px; align-items: flex-start; }
.hcx-cod-step > span { width: 26px; height: 26px; border-radius: 50%; background: var(--hcx-ink); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; flex: none; }
.hcx-cod-step b { display: block; font-size: 14px; font-weight: 800; }
.hcx-cod-step small { display: block; font-size: 12.5px; color: var(--hcx-muted); margin-top: 2px; line-height: 1.4; }
.hcx-cod-actions { display: flex; flex-direction: column; gap: 8px; }
.hcx-cod-actions .hcx-cta { flex: none; width: 100%; height: 50px; }
.hcx-body > .hcx-cta, a.hcx-cta { flex: none; width: 100%; height: 50px; }
.hcx-cod-actions .hcx-cod-go { flex: none; width: 100%; }
.hcx-cod-go { height: 44px; border-color: var(--hcx-line); color: var(--hcx-muted); font-size: 13px; }
.hcx-wa { margin: 0 0 4px; padding: 12px 14px; border-radius: 14px; background: #E7F9EE; border: 1px solid #BFE3C5; }
.hcx-wa b { display: block; font-size: 14px; font-weight: 800; color: var(--hcx-accent-ink); }
.hcx-wa small { display: block; font-size: 12.5px; color: var(--hcx-ink); margin-top: 2px; line-height: 1.4; }
.hcx-cod-step small b, .hcx-wa small b { display: inline; font-size: inherit; color: var(--hcx-accent-ink); }
.hcx-pay-note { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-top: 1px solid var(--hcx-line); background: #FAF8F4; color: #8A6400; font-size: 12.5px; font-weight: 600; }
.hcx-pay label.is-disabled { cursor: not-allowed; background: #FAF8F4; }
.hcx-pay label.is-disabled .hcx-pay-txt b, .hcx-pay label.is-disabled .hcx-radio { opacity: .45; }
.hcx-pay label.is-disabled .hcx-pay-txt small { color: #8A6400; font-weight: 600; }
.hcx-pay label.is-disabled .hcx-pay-badge { opacity: .9; }
.hcx-radio {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid #C9C2B6; flex: none;
  display: grid; place-items: center; transition: border-color .15s;
}
.hcx-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--hcx-accent); transform: scale(0); transition: transform .15s; }
.hcx-pay input:checked + .hcx-radio { border-color: var(--hcx-accent); }
.hcx-pay input:checked + .hcx-radio::after { transform: scale(1); }
.hcx-pay-txt { flex: 1; }
.hcx-pay-txt b { display: block; font-weight: 800; font-size: 14px; }
.hcx-pay-txt small { display: block; color: var(--hcx-muted); font-size: 12px; margin-top: 1px; }
.hcx-pay-badge {
  font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px;
  background: var(--hcx-accent-soft); color: var(--hcx-accent-ink); white-space: nowrap;
}
.hcx-pay-badge.warn { background: var(--hcx-warn-soft); color: #8A6400; }
.hcx-upi { display: flex; gap: 4px; }
.hcx-upi span {
  font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 5px;
  border: 1px solid var(--hcx-line); color: var(--hcx-muted); background: #FAF8F3;
}

/* ---------- Bill ---------- */
.hcx-bill { padding: 0 14px 12px; }
.hcx-bill-line { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13.5px; }
.hcx-bill-line .l { color: var(--hcx-muted); display: flex; align-items: center; gap: 6px; }
.hcx-bill-line .r { font-weight: 700; }
.hcx-bill-line .r.green { color: var(--hcx-accent-ink); }
.hcx-bill-line .r s { color: var(--hcx-muted); font-weight: 500; margin-right: 6px; }
.hcx-bill-total { border-top: 1px dashed var(--hcx-line); margin-top: 6px; padding-top: 12px; }
.hcx-bill-total .l, .hcx-bill-total .r { color: var(--hcx-ink); font-weight: 800; font-size: 15px; }
.hcx-savings {
  margin: 10px 14px 14px; padding: 10px 12px; border-radius: 12px;
  background: var(--hcx-accent-soft); color: var(--hcx-accent-ink);
  font-weight: 800; font-size: 13px; display: flex; align-items: center; gap: 8px;
}

/* ---------- Trust ---------- */
.hcx-trust {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 4px 4px 12px; color: var(--hcx-muted); font-size: 11.5px; font-weight: 600; text-align: center;
}
.hcx-trust div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hcx-trust svg { color: var(--hcx-accent-ink); }

/* ---------- Sticky footer ---------- */
.hcx-footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  margin: 0 auto; max-width: 480px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--hcx-line);
  display: flex; align-items: center; gap: 12px;
}
.hcx-foot-total { min-width: 92px; }
.hcx-foot-total b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.hcx-foot-total button { font-size: 12px; color: var(--hcx-accent-ink); font-weight: 800; background: none; border: 0; padding: 0; }
.hcx-cta {
  flex: 1; height: 50px; border: 0; border-radius: 12px;
  background: var(--hcx-accent); color: #fff;
  font-size: 15px; font-weight: 800; letter-spacing: .01em;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .08s ease, filter .15s;
}
.hcx-cta:active { transform: scale(.985); filter: brightness(.95); }
.hcx-cta[disabled] { opacity: .6; cursor: default; }
.hcx-cta.is-busy { pointer-events: none; }

/* ---------- Bottom sheets ---------- */
.hcx-scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(17,17,17,.45);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.hcx-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  margin: 0 auto; max-width: 480px;
  background: #fff; border-radius: 20px 20px 0 0;
  max-height: 92dvh; display: flex; flex-direction: column;
  transform: translateY(105%); transition: transform .26s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,.12);
}
.hcx.sheet-open .hcx-scrim { opacity: 1; pointer-events: auto; }
.hcx-sheet.is-open { transform: translateY(0); }
.hcx-sheet-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 8px;
}
.hcx-sheet-h::before {
  content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 4px; border-radius: 999px; background: #E3DDD2;
}
.hcx-sheet-h h3 { margin: 0; font-size: 17px; font-weight: 800; }
.hcx-sheet-x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: #F3EFE7; display: grid; place-items: center; padding: 0; }
.hcx-sheet-b { padding: 4px 16px 16px; overflow: auto; }
.hcx-sheet-f { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hcx-line); }

/* ---------- Form ---------- */
.hcx-f { display: flex; flex-direction: column; gap: 10px; }
.hcx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hcx-field { position: relative; }
.hcx-field input, .hcx-field select {
  width: 100%; height: 50px; padding: 18px 12px 4px;
  border: 1.5px solid var(--hcx-line); border-radius: 12px; background: #FFFDFA;
  font-size: 15px; color: var(--hcx-ink); outline: none; appearance: none;
  transition: border-color .15s;
}
.hcx-field input:focus { border-color: var(--hcx-ink); }
.hcx-field label {
  position: absolute; left: 12px; top: 15px; font-size: 14px; color: var(--hcx-muted);
  pointer-events: none; transition: all .12s;
}
.hcx-field input:focus + label, .hcx-field input:not(:placeholder-shown) + label,
.hcx-field.has-prefix input + label { top: 7px; font-size: 11px; font-weight: 700; }
.hcx-field.has-prefix input { padding-left: 46px; }
.hcx-field.has-prefix label { left: 46px; }
.hcx-prefix { position: absolute; left: 12px; top: 0; height: 50px; display: flex; align-items: center; font-weight: 700; color: var(--hcx-ink); padding-top: 12px; }
.hcx-field.is-error input { border-color: var(--hcx-danger); }
.hcx-field .hcx-help { font-size: 11.5px; margin: 4px 2px 0; color: var(--hcx-muted); }
.hcx-field .hcx-help.ok { color: var(--hcx-accent-ink); font-weight: 700; }
.hcx-field .hcx-help.err { color: var(--hcx-danger); font-weight: 700; }
.hcx-field input[readonly] { background: #F6F3EC; color: var(--hcx-muted); }
.hcx-seg { display: flex; gap: 8px; }
.hcx-seg button {
  flex: 1; height: 40px; border-radius: 10px; border: 1.5px solid var(--hcx-line); background: #fff;
  font-weight: 800; font-size: 13px; color: var(--hcx-muted);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.hcx-seg button.is-on { border-color: var(--hcx-ink); color: var(--hcx-ink); background: #FBF8F3; }
.hcx-lbl { font-size: 12px; font-weight: 800; color: var(--hcx-muted); text-transform: uppercase; letter-spacing: .05em; margin: 4px 0 -2px; }

/* ---------- Coupon sheet ---------- */
.hcx-coupon-in { display: flex; gap: 8px; }
.hcx-coupon-in input {
  flex: 1; height: 48px; padding: 0 12px; border: 1.5px solid var(--hcx-line); border-radius: 12px;
  font-size: 15px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; outline: none;
}
.hcx-coupon-in input:focus { border-color: var(--hcx-ink); }
.hcx-btn-ghost {
  height: 48px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--hcx-ink);
  background: #fff; font-weight: 800; font-size: 14px;
}
.hcx-coupon-card {
  margin-top: 14px; border: 1.5px dashed #BFE3C5; border-radius: 14px; padding: 12px;
  display: flex; align-items: center; gap: 12px; background: #F7FCF8;
}
.hcx-coupon-code { font-weight: 800; letter-spacing: .08em; font-size: 14px; }
.hcx-coupon-card small { display: block; color: var(--hcx-muted); font-size: 12px; margin-top: 2px; }
.hcx-coupon-card .hcx-link { margin-left: auto; }

/* ---------- Misc ---------- */
.hcx-toast {
  position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 16px);
  background: var(--hcx-ink); color: #fff; padding: 10px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 700; z-index: 50; opacity: 0; transition: all .2s; pointer-events: none;
  max-width: 90vw; text-align: center;
}
.hcx-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.hcx-spin { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: hcx-spin .7s linear infinite; }
@keyframes hcx-spin { to { transform: rotate(360deg); } }
.hcx-empty { padding: 36px 16px; text-align: center; color: var(--hcx-muted); }
.hcx-empty b { display: block; color: var(--hcx-ink); font-size: 16px; margin-bottom: 4px; }

/* Demo-only: handoff preview */
.hcx-handoff pre {
  white-space: pre-wrap; word-break: break-all; font-size: 11.5px; line-height: 1.5;
  background: #F6F3EC; padding: 12px; border-radius: 12px; margin: 10px 0 0; color: #333;
}