body {
  background: var(--custom-background-color);
  background-attachment: fixed;
  background-size: cover;
  color: var(--custom-text-color);
  font-family: var(--theme-font-body);
  line-height: 1.5;
}
.pro-shell { display: flex; flex-direction: column; min-height: 100dvh; position: relative; }
.pro-main { display: flex; flex: 1; justify-content: center; }
.pro-card {
  background: var(--custom-text-background-color);
  color: var(--custom-text-color);
  container-type: inline-size;
  max-width: 640px;
  overflow: clip;
  width: 100%;
}
.pro-card[data-priced] { max-width: 1020px; }
.pro-banner { max-height: calc(100cqi / 3); object-fit: cover; }
.pro-content { padding: 1rem; }
.pro-header { align-items: flex-start; display: flex; gap: 1rem; }
.pro-card h1 {
  color: var(--custom-heading-color);
  font-family: var(--theme-font-heading);
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1.15;
  margin: 0;
}
.pro-content h2,.schedule-group h3,.step-heading { font-family: var(--theme-font-heading); }
.pro-content h2 { color: var(--custom-heading-color); font-size: 1.125rem; }
.pro-meta { color: var(--custom-text-color-muted); margin: 1rem 0 2rem; }
.pro-meta .meta-icon { margin-right: .15rem; vertical-align: -.125em; width: 1.125em; }
.pro-description { margin-bottom: 2rem; max-width: 72ch; }
event-description a,
venue-links a,
[data-ticket-description] a { color: var(--custom-link-color); }
ticket-list {
  display: block;

  &[hidden] { display: none; }

  > ul { list-style: none; margin: 0; padding: 0; }

  > ul > li {
    border-bottom: 1px solid var(--divider-color);
    padding: 1rem 0;

    &:last-child { border-bottom: 0; }
    &[data-addon-for] {
      border-left: 2px solid var(--divider-color);
      margin-left: .2rem;
      padding: .6rem 0 .6rem 1rem;
    }
    &:has(+ li[data-addon-for]) { border-bottom: 0; }

    .js & { border-bottom: 0; }
    .js &:has(~ li:is(:not([data-addon-for]):not([data-asked-elsewhere]), [data-addon-for].addon-on)) {
      border-bottom: 1px solid var(--divider-color);
    }
    .js &:has(+ li[data-addon-for].addon-on) { border-bottom: 0; }
  }
}
:where(ticket-row .grow > span:first-child) { font-size: 1rem; font-weight: 500; }
ticket-row {
  justify-content: space-between;

  & label { font-size: 1rem; font-weight: 500; }
  & .muted, & .grow .muted { font-size: .875rem; }
  & .price { color: var(--custom-text-color-muted); }
  & input:not([type="checkbox"]) {
    background: transparent;
    border: 1px solid var(--custom-control-border);
    border-radius: 4px;
    box-shadow: var(--custom-control-shadow);
    color: var(--custom-text-color);
    padding: .45rem;
  }
  & .qty button.step {
    background: color-mix(in srgb, var(--custom-text-color) 13%, var(--custom-text-background-color));
    border: 0;
    color: var(--custom-text-color);
  }
  & .qty button.step:disabled { opacity: .45; }
  & .qty button.step:hover:not(:disabled) {
    background: var(--custom-text-color);
    color: var(--custom-text-background-color);
  }
}
.pro-card .checkout-fields input:not([type="checkbox"], [type="radio"]),.pro-card .checkout-fields select,.pro-card .checkout-fields textarea {
  background: transparent;
  border: 1px solid var(--custom-control-border);
  border-radius: 4px;
  box-shadow: var(--custom-control-shadow);
  color: var(--custom-text-color);
  padding: .6rem;
}
:where(.pro-card, body[data-embed-sheet]) .checkout-button {
  background: var(--custom-button-background-color);
  color: var(--custom-button-text-color);
  width: 100%;
}
.pro-card .sp-button-row > a.button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--custom-button-radius);
  box-sizing: border-box;
  display: flex;
  font-size: .95rem;
  font-weight: 600;
  justify-content: center;
  line-height: 1.4;
  margin-top: 0;
  padding: .7rem 1.2rem;
  text-decoration: none;
  width: 100%;
}
.pro-card .sp-button-row > a.button.primary {
  background: var(--custom-button-background-color);
  border-color: transparent;
  color: var(--custom-button-text-color);
}
.pro-card .sp-button-row > a.button.primary:hover { filter: brightness(1.07); }
.pro-card .sp-button-row > a.button:not(.primary) {
  background: transparent;
  border-color: var(--custom-outlined-button-color, var(--custom-control-border));
  color: var(--custom-outlined-button-color, var(--custom-text-color));
}
.pro-card .sp-button-row > a.button:not(.primary):hover {
  background: transparent;
  border-color: var(--custom-button-background-color);
  color: var(--custom-button-background-color);
}
.pro-form-footer {
  margin: 1rem -1rem -1rem;
  padding: 1rem;
}
:is(.pro-content, card-body) > [data-block="tickets"]:not(:last-child) .pro-form-footer { margin-bottom: 0; }
.pro-footer { color: var(--custom-page-ink); padding: 1rem; text-align: center; }
.pro-footer a { color: inherit; }
body:has(> .pro-shell):has(> account-footer) { display: flex; flex-direction: column; min-height: 100dvh; }
body:has(> account-footer) > .pro-shell { flex: 1 0 auto; min-height: 0; }
body:has(> .pro-shell) > account-footer { --muted: var(--custom-page-ink); padding-inline: 1rem; }
body:has(> .pro-shell) > account-footer > :is(footer-inner, footer-links) { box-sizing: border-box; }
body:has(.pro-card[data-priced]) > account-footer > :is(footer-inner, footer-links) { max-width: 1020px; }
@media (min-width:600px) {
  body:has(> .pro-shell) > account-footer { padding-inline: 3rem; }
  body:has(> .pro-shell) > account-footer > :is(footer-inner, footer-links) { padding-inline: 2rem; }
}
@media (min-width:600px) {
  .pro-main { flex: none; padding: 3rem 3rem 1.5rem; }
  .pro-card {
    border-radius: var(--custom-card-border-radius);
    box-shadow: var(--custom-card-shadow);
  }
  .pro-content { padding: 2rem; }
  .pro-form-footer { margin: 1rem -2rem -2rem; padding: 1rem 2rem; }
}
.checkout-steps {
  --step-accent: var(--custom-button-background-color);
  --step-accent-ink: var(--custom-button-text-color);
  --step-danger: var(--danger-ink);
  --step-heading-ink: var(--custom-heading-color);
  --step-ink: var(--custom-text-color);
  --step-ink-muted: var(--custom-text-color-muted);
  --step-line: var(--custom-control-border);
  --step-link: var(--custom-link-color);
  --step-surface: var(--custom-text-background-color);
}

.pro-meta .pro-summary { color: var(--custom-text-color-muted); font-size: .95rem; margin: .35rem 0 0; }

@media (pointer: coarse), (max-width: 40rem) {
  ticket-row .qty button.step {
    border-radius: calc(var(--custom-button-radius, min(var(--custom-card-border-radius, 8px), 8px)) + .375rem);
    box-sizing: content-box;
    margin: -.375rem;
    padding: .375rem;
  }
  ticket-row .qty button.step,
  ticket-row .qty button.step:hover:not(:disabled) { background-clip: content-box; }
  ticket-row .qty button.step:focus-visible { outline-offset: calc(2px - .375rem); }
}