/* Checkout page only: on phones the offer row stacks (badge, text, button) instead of squeezing into two columns.
   Layout only; the offer logic and payment flow are untouched. Loaded by build_checkout_page in template_library.py. */
.co-offer-meta .chip { white-space: nowrap; border-radius: 999px; }
@media (max-width: 560px) {
  .co-offer-head { flex-direction: column; align-items: stretch; gap: 12px; }
  .co-offer-head .btn { width: 100%; }
}