/* ============================================================
   VORTEX ERU CHECKOUT — full-width registration checkout.
   Self-contained: design tokens are scoped under .vortex-eru-checkout
   so nothing leaks into the surrounding WordPress theme.
   Heraldic system: crimson · gilt · parchment · Inknut/Spectral.
   ============================================================ */

.vortex-eru-checkout {
  /* Brand */
  --va-crest: #6E0808;
  --va-crimson: #930000;
  --va-crimson-hover: #760000;
  --va-crimson-tint: #F3DEDE;
  --gilt: #9A7726;
  --gilt-light: #C2A24E;
  --gilt-wash: #EFE3C4;

  /* Parchment surfaces */
  --paper: #FBF5E9;
  --paper-raised: #FFFDF6;
  --paper-sunken: #F1E7D2;
  --vellum-line: #E2D5B8;
  --vellum-line-2: #D3C2A0;

  /* Ink */
  --ink: #221C14;
  --ink-2: #4A3E2D;
  --ink-3: #6B5C46;
  --ink-faint: #B9A988;

  /* Functional */
  --success: #3C6B2A;
  --warning: #8A5E12;
  --error: #930000;
  --notice-bg: #EFD9C2;
  --notice-border: #D5AE84;

  /* Radius / shadow */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 10px;
  --r-seal: 999px;
  --sh-sm: 0 1px 2px rgba(50, 34, 12, .10);
  --sh-md: 0 4px 14px rgba(50, 34, 12, .12);
  --sh-lg: 0 14px 36px rgba(50, 34, 12, .16);

  /* Type families */
  --f-display: "Inknut Antiqua", Georgia, serif;
  --f-text: "Spectral", Georgia, serif;
  --f-mono: "Spline Sans Mono", ui-monospace, monospace;

  /* Spacing scale (4-based) */
  --s-1: 2px;  --s-2: 4px;  --s-3: 8px;  --s-4: 12px; --s-5: 16px;
  --s-6: 20px; --s-7: 24px; --s-8: 32px; --s-9: 40px; --s-10: 48px; --s-11: 64px;

  /* Checkout-local */
  --co-accent: var(--va-crimson);
  --co-accent-hover: var(--va-crimson-hover);
  --co-accent-tint: var(--va-crimson-tint);
  --co-radius: 10px;
  --co-gap: 18px;
  --co-cardpad: 26px;
  --co-maxw: 1180px;

  font-family: var(--f-text);
  color: var(--ink);
  line-height: 1.5;
  margin: 1.5rem 0;
}
.vortex-eru-checkout *,
.vortex-eru-checkout *::before,
.vortex-eru-checkout *::after { box-sizing: border-box; }

/* ---------- LAYOUT ---------- */
.co-shell { max-width: var(--co-maxw); margin: 0 auto; }
.co-title-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4) var(--s-6); flex-wrap: wrap;
  margin: 0 0 var(--s-4);
}
.co-title-row .co-title { margin: 0; flex: 1 1 12rem; min-width: 0; }
.co-title-row .co-title.is-empty { flex: 1 1 auto; min-height: 0; font-size: 0; }
.co-lang {
  display: inline-flex; align-items: baseline; gap: 0;
  flex: 0 0 auto; margin: 0 0 0 auto;
  font-family: var(--f-text); font-size: 13px; line-height: 1.2;
}
.co-lang-sep { color: var(--ink-faint); padding: 0 5px; user-select: none; }
.co-lang-btn {
  font: inherit; font-weight: 650; letter-spacing: .04em;
  min-height: 0; padding: 0; border: none; border-radius: 0;
  background: none; color: var(--ink-faint); cursor: pointer;
}
.co-lang-btn:hover { background: none; color: var(--ink-2); }
.co-lang-btn.on { background: none; color: var(--va-crimson); border: none; }
.co-layout { display: flex; flex-direction: column; gap: var(--s-6); }
.co-main { min-width: 0; display: flex; flex-direction: column; gap: var(--s-6); width: 100%; }

/* test-mode strip (moderator) */
.co-testbar {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; color: #5A3A1B; font-weight: 600;
  background: var(--notice-bg); border: 1px solid var(--notice-border);
  border-radius: var(--r-md); padding: 9px var(--s-5); margin-bottom: var(--s-5);
}
.co-testbar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--warning); }

.co-title {
  font-family: var(--f-display); font-weight: 700; font-size: 28px;
  letter-spacing: -.01em; word-spacing: -.1em; color: var(--ink);
  margin: 0 0 var(--s-4); line-height: 1.2;
}
.co-intro { font-size: 16px; color: var(--ink-2); max-width: 70ch; margin: 0 0 var(--s-5); }
.co-intro p { margin: 0 0 0.85em; }
.co-intro p:last-child { margin-bottom: 0; }
.co-notice {
  background: var(--notice-bg, #FFF7E6);
  border: 1.5px solid var(--notice-border, #E2D5B8);
  border-left: 4px solid var(--gilt, #9A7726);
  border-radius: var(--r-md);
  padding: 12px 16px;
}
.co-notice .co-hint {
  margin: 0;
  font-size: 15px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.45;
}

/* ---------- SECTION CARD ---------- */
.co-card {
  background: var(--paper-raised); border: 1px solid var(--vellum-line);
  border-radius: var(--co-radius); box-shadow: var(--sh-sm); overflow: hidden;
}
.co-card-head {
  display: flex; align-items: center; gap: var(--s-4);
  padding: 17px var(--co-cardpad);
  border-bottom: 1px solid var(--vellum-line);
  background: linear-gradient(180deg, #FFFDF7, var(--paper-raised));
}
.co-card-head .ch-num {
  font-family: var(--f-mono); font-size: 12px; font-weight: 600; color: #fff;
  background: var(--co-accent); width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  box-shadow: inset 0 0 0 2px var(--gilt-light);
}
.co-card-head h2 { font-family: var(--f-display); font-weight: 700; font-size: 20px; letter-spacing: -.01em; word-spacing: -.1em; margin: 0; }
.co-card-head .ch-note { margin-left: auto; font-size: 12.5px; color: var(--ink-3); font-style: italic; }
.co-card-body { padding: var(--co-cardpad); display: flex; flex-direction: column; gap: var(--co-gap); }

/* ---------- FIELDS ---------- */
.co-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--co-gap) var(--s-6); }
.co-grid3 { display: grid; grid-template-columns: 1.4fr .8fr 1fr; gap: var(--co-gap) var(--s-6); }
.co-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.co-field.span2 { grid-column: 1 / -1; }
.co-label { font-family: var(--f-text); font-weight: 600; font-size: 14px; color: var(--ink-2); }
.co-label .req { color: var(--co-accent); margin-left: 2px; }
.co-ctl {
  width: 100%; font-family: var(--f-text); font-size: 16px; color: var(--ink);
  background: var(--paper-raised); border: 1.5px solid var(--ink-faint);
  border-radius: var(--r-md); padding: 12px var(--s-5); min-height: 48px;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.co-ctl::placeholder { color: var(--ink-faint); }
.co-ctl:focus { border-color: var(--va-crest); box-shadow: 0 0 0 3px rgba(110, 8, 8, .12); }
.co-ctl.mono { font-family: var(--f-mono); letter-spacing: .1em; }
textarea.co-ctl { resize: vertical; min-height: 92px; line-height: 1.5; }
select.co-ctl {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B5C46' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px;
}
.co-hint { font-size: 13px; color: var(--ink-3); line-height: 1.5; margin: 0; }
.co-hint a { color: var(--va-crimson); font-weight: 600; }
.co-hint-toggle {
  display: inline; appearance: none; -webkit-appearance: none; width: auto; height: auto;
  font-family: inherit; font-size: inherit; font-weight: 600; line-height: inherit; letter-spacing: normal;
  text-transform: none; text-align: left; color: var(--va-crimson);
  background: none; border: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0;
  cursor: pointer; text-decoration: underline;
}
.co-hint-toggle:hover { color: var(--va-crimson-hover); }
.co-hint-more { display: block; margin-top: 4px; color: var(--ink-3); }
.co-hint-more[hidden] { display: none; }

/* ---------- TICKET CARDS (the centerpiece) ---------- */
.co-pricewindow {
  display: flex; align-items: flex-start; gap: 11px;
  background: var(--gilt-wash); border: 1px solid var(--notice-border);
  border-radius: var(--r-md); padding: 11px var(--s-5); margin-bottom: var(--s-4);
}
.co-pricewindow .pw-ic { color: var(--gilt); font-size: 16px; line-height: 1.4; flex: 0 0 auto; }
.co-pricewindow .pw-text { font-size: 13.5px; color: #5A3A1B; line-height: 1.45; }
.co-pricewindow .pw-text b { color: var(--ink); font-weight: 600; }

.co-tickets { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.co-ticket {
  position: relative; text-align: left; cursor: pointer;
  background: var(--paper-raised); border: 1.5px solid var(--vellum-line-2);
  border-radius: var(--r-md); padding: 15px 16px 14px;
  display: flex; flex-direction: column; gap: 5px;
  transition: border-color .14s, box-shadow .14s, background .14s; min-height: 104px;
}
.co-ticket:hover { border-color: var(--ink-faint); box-shadow: var(--sh-sm); }
.co-ticket .t-tier { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gilt); }
.co-ticket .t-info { display: flex; flex-direction: column; gap: 2px; }
.co-ticket .t-name { font-family: var(--f-text); font-weight: 600; font-size: 15px; color: var(--ink); line-height: 1.25; }
.co-ticket .t-desc { font-size: 12px; color: var(--ink-3); line-height: 1.4; }
.co-ticket .t-price { margin-top: auto; font-family: var(--f-display); font-weight: 700; font-size: 22px; color: var(--ink); letter-spacing: -.01em; }
.co-ticket .t-tick {
  position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--vellum-line-2); background: var(--paper);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px;
  transition: background .14s, border-color .14s;
}
.co-ticket.sel { border-color: var(--co-accent); background: var(--co-accent-tint); box-shadow: 0 0 0 1px var(--co-accent); }
.co-ticket.sel .t-price { color: var(--co-accent-hover); }
.co-ticket.sel .t-tick { background: var(--co-accent); border-color: var(--co-accent); }

/* ---------- CHOICE CHIPS (radio, no price) ---------- */
.co-choices { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.co-choice {
  position: relative;
  font-family: var(--f-text); font-weight: 600; font-size: 15px; padding: 10px 20px; min-height: 46px;
  border-radius: var(--r-md); border: 1.5px solid var(--ink-faint); background: var(--paper-raised);
  color: var(--ink-2); cursor: pointer; transition: all .12s; display: inline-flex; align-items: center; gap: 8px;
}
.co-choice:hover { border-color: var(--ink-3); }
.co-choice.on { background: var(--co-accent); color: #fff; border-color: var(--co-accent); }
/* Keep the native control over the chip so focus doesn't jump the page to (0,0). */
.co-choice > input.co-sr-input,
.co-toggle > input.co-sr-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

/* ---------- TOGGLE / ADDON ROWS (checkbox/radio with price) ---------- */
.co-toggles {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid var(--vellum-line); border-radius: var(--r-md); overflow: hidden;
}
.co-toggle {
  position: relative;
  display: flex; align-items: center; gap: var(--s-4); cursor: pointer;
  padding: 14px var(--s-5); border-bottom: 1px solid var(--vellum-line); background: var(--paper-raised);
  transition: background .12s;
}
.co-toggle:last-child { border-bottom: none; }
.co-toggle:hover { background: #FFFBF0; }
/* Visual chrome stays under the transparent hit target. */
.co-toggle > .co-box,
.co-toggle > .tg-main,
.co-toggle > .tg-price { position: relative; z-index: 0; pointer-events: none; }
.co-box {
  width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto;
  border: 1.5px solid var(--ink-faint); background: var(--paper);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px;
  transition: background .14s, border-color .14s;
}
.co-toggle.on .co-box { background: var(--co-accent); border-color: var(--co-accent); }
.co-toggle .tg-main { flex: 1; min-width: 0; }
.co-toggle .tg-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.co-toggle .tg-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; }
.co-toggle .tg-price { font-family: var(--f-display); font-weight: 700; font-size: 16px; color: var(--ink-2); flex: 0 0 auto; }
.co-toggle.on .tg-price { color: var(--co-accent-hover); }
.co-toggle .co-box.radio { border-radius: 50%; }
.co-toggle.on .co-box.radio { box-shadow: inset 0 0 0 4px var(--paper-raised); }

/* ---------- TABLE ADDON PANEL (tafels en banken huren) ---------- */
.co-tablepanel {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap;
  border: 1px solid var(--vellum-line); border-radius: var(--r-md);
  background: var(--paper-raised); padding: 14px var(--s-5);
}
.co-tablepanel .tp-text { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 3px; }
.co-tablepanel .tp-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.co-tablepanel .tp-hint { margin: 0; }
.co-tablepanel .tp-qty { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.co-tablepanel .tp-qty-label { font-family: var(--f-text); font-weight: 600; font-size: 12.5px; color: var(--ink-3); }

/* ---------- QUANTITY STEPPER ---------- */
.co-qtyrow { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.co-stepper { display: inline-flex; align-items: stretch; border: 1.5px solid var(--ink-faint); border-radius: var(--r-md); overflow: hidden; }
.co-stepper button {
  width: 46px; min-height: 46px; border: none; background: var(--paper-raised); color: var(--ink-2);
  font-size: 22px; cursor: pointer; font-family: var(--f-text); line-height: 1; transition: background .12s;
}
.co-stepper button:hover { background: var(--paper-sunken); }
.co-stepper button:disabled { color: var(--ink-faint); cursor: not-allowed; }
.co-stepper input {
  width: 56px; border: none; border-left: 1.5px solid var(--vellum-line); border-right: 1.5px solid var(--vellum-line);
  text-align: center; font-family: var(--f-mono); font-size: 17px; color: var(--ink); background: var(--paper); outline: none;
}
.co-qtyrow .qty-meta { font-size: 13px; color: var(--ink-3); }
.co-qtyrow .qty-meta b { font-family: var(--f-display); color: var(--ink); }

/* ---------- CONSENT / TERMS ---------- */
.co-consent-input { display: none; }
.co-consents {
  display: flex; flex-direction: column; gap: var(--s-3);
  border: 1px solid var(--vellum-line); border-radius: var(--r-md); overflow: hidden;
}
.co-consent {
  display: flex; gap: var(--s-4); align-items: flex-start; cursor: pointer;
  padding: 14px var(--s-5); outline: none; background: var(--paper-raised);
  transition: background .12s;
}
.co-consents .co-consent + .co-consent { border-top: 1px solid var(--vellum-line); }
.co-consent:hover { background: #FFFBF0; }
.co-consent .co-box { flex: 0 0 22px; margin-top: 0.15em; }
.co-consent.on .co-box { background: var(--co-accent); border-color: var(--co-accent); color: #fff; }
.co-consent .cs-text { flex: 1; min-width: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.co-consent .cs-text a { color: var(--va-crimson); font-weight: 600; }
.co-consent .cs-text .req { color: var(--co-accent); font-weight: 700; }
.co-consent.required-on { background: var(--gilt-wash); }
.co-consents .co-consent.required-on { border-left: 3px solid var(--gilt); padding-left: calc(var(--s-5) - 3px); }
.co-req-highlight {
  outline: 2px solid var(--co-accent); outline-offset: 3px;
  border-radius: var(--r-md);
  animation: co-req-pulse 1.8s ease;
}
@keyframes co-req-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(147, 0, 0, 0); }
  35% { box-shadow: 0 0 0 6px rgba(147, 0, 0, .14); }
}

/* ---------- DISCOUNT CODE ---------- */
.co-codefield { display: flex; flex-direction: column; gap: 7px; min-width: 0; width: 100%; }
.co-codepanel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: stretch; }
.co-codepanel .co-ctl { width: 100%; min-width: 0; }
.co-hint { font-size: 13px; color: var(--ink-3); line-height: 1.45; margin: 0; }
.co-applybtn {
  font-family: var(--f-text); font-weight: 600; font-size: 14px; padding: 0 var(--s-5); min-height: 48px;
  border-radius: var(--r-md); border: 1.5px solid var(--co-accent); background: transparent; color: var(--co-accent);
  cursor: pointer; transition: background .14s, border-color .14s; white-space: nowrap;
}
.co-applybtn:hover { background: var(--co-accent-tint); border-color: var(--co-accent-hover); }

/* ---------- ORDER SUMMARY (footer card) ---------- */
.co-checkout-footer { gap: var(--s-6); }
.co-checkout-footer .co-sum-lines {
  display: flex; flex-direction: column; gap: 0;
  background: var(--paper-sunken); border: 1px solid var(--vellum-line); border-radius: var(--r-md);
  padding: 4px var(--s-5); overflow: hidden;
}
.co-checkout-footer .co-sum-line { padding: 10px 0; border-bottom: 1px solid var(--vellum-line); }
.co-checkout-footer .co-sum-line:last-child { border-bottom: none; }
.co-checkout-footer .co-sum-empty { padding: var(--s-5) 0; }
.co-checkout-footer__bar {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.9fr);
  gap: var(--s-6); align-items: stretch;
}
.co-checkout-footer__bar--checkout-only {
  grid-template-columns: minmax(260px, 360px);
  justify-content: end;
}
.co-checkout-actions {
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-4);
  padding: var(--s-5) var(--s-6); min-height: 100%;
  background: linear-gradient(165deg, #FFFDF7 0%, var(--paper-sunken) 100%);
  border: 1px solid var(--vellum-line); border-top: 2px solid var(--gilt); border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
}
.co-sum-lines { display: flex; flex-direction: column; gap: 2px; }
.co-sum-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5); font-size: 14px; }
.co-sum-line .sl-label { flex: 1; min-width: 0; color: var(--ink-2); }
.co-sum-line .sl-label small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.co-sum-line .sl-amt { font-family: var(--f-mono); font-size: 14px; color: var(--ink); font-weight: 500; flex: 0 0 auto; text-align: right; }
.co-sum-line .sl-amt.minus { color: var(--success); }
.co-sum-line.is-deferred .sl-amt { color: var(--ink-2); }
.co-sum-line.is-deferred .sl-label small { color: #7A5A14; font-style: italic; }
.co-sum-empty { font-size: 13.5px; color: var(--ink-3); font-style: italic; }
.co-quote-error {
  margin: var(--s-3) 0 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--co-accent-tint);
  border: 1px solid var(--va-crimson-tint);
  color: var(--error);
  font-size: 13.5px;
  line-height: 1.45;
}
.co-quote-error[hidden] { display: none !important; }
.co-consent-wrap { display: flex; flex-direction: column; gap: var(--s-2); }
.co-consent-wrap > .co-hint { margin: 0 0 var(--s-2); padding-left: calc(22px + var(--s-4)); }
.co-sum-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  margin: 0; padding: 0 0 var(--s-4); border-bottom: 1px dashed var(--vellum-line-2);
}
.co-sum-total[hidden] { display: none !important; }
.co-sum-total .tl-label { font-family: var(--f-display); font-weight: 700; font-size: 17px; color: var(--ink-2); }
.co-sum-total .tl-amt { font-family: var(--f-display); font-weight: 700; font-size: 30px; color: var(--co-accent); letter-spacing: -.01em; line-height: 1; }
.co-paybtn {
  width: 100%; min-height: 52px; margin: 0; border: none; cursor: pointer;
  background: var(--co-accent); color: #fff; font-family: var(--f-text); font-weight: 600; font-size: 17px;
  border-radius: var(--r-md); box-shadow: var(--sh-sm); transition: background .15s, transform .05s;
  display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; overflow: hidden;
  padding: 0 var(--s-6);
}
.co-paybtn::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r-sm); pointer-events: none; }
.co-paybtn:hover { background: var(--co-accent-hover); }
.co-paybtn:active { transform: translateY(1px); }
.co-paybtn.is-disabled,
.co-paybtn:disabled { background: var(--paper-sunken); color: var(--ink-faint); box-shadow: none; cursor: not-allowed; }
.co-paybtn.is-disabled::before,
.co-paybtn:disabled::before { border-color: transparent; }
.co-paybtn.is-disabled:hover,
.co-paybtn:disabled:hover { background: var(--paper-sunken); }
.co-checkout-footer__meta {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding-top: var(--s-5); border-top: 1px solid var(--vellum-line);
}
.co-checkout-footer .sm-foot { font-size: 12px; color: var(--ink-3); margin: 0; line-height: 1.5; }
.co-checkout-footer .sm-foot .lock { color: var(--gilt); }
.co-footnote { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; margin: 0; }
.co-footnote b { color: var(--ink-2); }

/* ---------- STATUS / MESSAGE ---------- */
.vortex-eru-checkout__message {
  max-width: var(--co-maxw); margin: 0 auto; padding: var(--s-7);
  background: var(--paper-raised); border: 1px solid var(--vellum-line); border-radius: var(--co-radius);
  color: var(--ink-2); box-shadow: var(--sh-sm);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .co-tickets { grid-template-columns: repeat(2, 1fr); }
  .co-checkout-footer__bar { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .co-grid2, .co-grid3 { grid-template-columns: 1fr; }
  .co-tickets { grid-template-columns: 1fr; }
  .co-card-body { padding: 18px; }
  .co-card-head { padding: 14px 18px; }
  .co-checkout-actions { padding: var(--s-5); }
  .co-sum-total .tl-amt { font-size: 26px; }
}