/* Numerical output and large-screen layout. Mobile retains the vertical card flow. */
.rbe-counter output{display:flex;align-items:center;justify-content:center;height:31px;box-sizing:border-box;line-height:1;font-variant-numeric:tabular-nums}
.rbe-shell{font-family:var(--rbe-font,inherit)}

@media (min-width:900px){
  .rbe-shell{max-width:1120px;margin:44px auto}
  .rbe-hero{display:grid;grid-template-columns:1fr 2fr;column-gap:38px;align-items:center;padding:27px 0 23px}
  .rbe-logo{grid-row:1 / span 2;justify-self:start;transform:scale(1.16);transform-origin:right center}
  .rbe-hero p{margin:0;font-size:16px}
  .rbe-event-meta{margin-top:12px;font-size:12px}
  /* Desktop checkout: buyer fields at right, order total and payment as a compact left sidebar. */
  .rbe-form{display:grid;direction:ltr;grid-template-columns:minmax(330px,.78fr) minmax(0,1.22fr);grid-template-areas:"tickets tickets" "summary quantity" "summary coupon" "summary buyer" "summary submit" "notice notice";gap:12px 18px;align-items:start}
  .rbe-form>*{direction:rtl}
  .rbe-step,.rbe-summary{margin:0}
  /* :first-of-type also matched the quantity div and made it overlap the ticket cards. */
  fieldset.rbe-step{grid-area:tickets}
  .rbe-tickets{grid-template-columns:repeat(2,1fr);gap:15px}
  .rbe-ticket{min-height:150px}
  .rbe-quantity{grid-area:quantity}
  .rbe-coupon{grid-area:coupon}
  .rbe-buyer{grid-area:buyer}
  .rbe-summary{grid-area:summary;position:sticky;top:24px}
  .rbe-submit{grid-area:submit;min-height:54px}
  .rbe-notice{grid-area:notice;margin:0}
  .rbe-step small{font-size:11px}
}