/* ============================================================
   Reverb Presents Tickets - event page part-2 stylesheet
   Source of truth: build/event.html (carbon-copy law).
   WHY A SECOND FILE: reverb-global.css sits at 1306/1500 lines
   (Iron Rule 60 budget); this part-2 delta (~430 lines) cannot
   fit, so per the documented budget escape it lives here.
   Enqueued in functions.php AFTER reverb-global (dependency),
   same REVERB_ASSETS_VER. Tokens come from reverb-global.css
   SECTION:tokens (:root) - referenced, never redefined.
   Iron Rule 39: every section's CSS lives between SECTION
   markers and is REPLACED in place on rebuild, never appended.
   ============================================================ */

/* SECTION:event-ticket START */
/* Source: build/event.html SECTION:ticket-card (event.html:228-358),
   SECTION:attendee-form (event.html:360-393), SECTION:checkout
   (event.html:395-460), responsive (event.html:695-696). Rules copied
   verbatim per Iron Rule 51. rfmwpe_ticket_selector component_name
   'ticket-card' emits the mockup class names 1:1 (root is a div, mockup
   aside - class-driven, no mapping needed); attendee-form / checkout /
   payment-chip blocks are fixed mockup-verbatim class names.
   "base fold" = property folded in from the mockup base reset
   (event.html:18,28-31) because the live stylesheet has no global reset;
   heading/label font-family folds pin Inter against theme heading fonts.
   rgba(252, 78, 32, 0.5) stays literal: the --accent-border token is 0.45,
   not the mockup's 0.5 (event.html:239). */

.ticket-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
}
.ticket-card__header { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.ticket-card__header-icon {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(252, 78, 32, 0.5);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}
.ticket-card__header-icon svg { width: 20px; height: 20px; }
.ticket-card__heading {
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;                     /* base fold: event.html:18 */
  font-family: var(--font-body); /* base fold: h2 inherits body font (event.html:23) */
}
.ticket-card__tagline {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0 0 26px; /* margin-bottom 26px (event.html:255) + base fold (event.html:18) */
}
.ticket-card__section-label {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 16px;              /* margin-bottom 16px (event.html:262) + base fold */
  font-family: var(--font-body); /* base fold: h3 inherits body font */
}
.ticket-card__tier {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.ticket-card__tier:hover { transform: translateY(-2px); }
/* Hover and keyboard focus inside the card: white border (Jay 2026-09-21). Beats the orange selected border. */
.ticket-card__tier:hover,
.ticket-card__tier:focus-within { border-color: #fff; }
.ticket-card__tier--selected { border-color: var(--accent); }
.ticket-card__check-wrap { padding-top: 34px; }
.ticket-card__check {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border: 1.5px solid #3A3A3A;
  border-radius: 6px;
  background: #141414;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
  margin: 0; /* base fold: event.html:18 */
}
.ticket-card__check:checked { background: var(--accent); border-color: var(--accent); }
.ticket-card__check:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid var(--text);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.ticket-card__tier-body { flex: 1; min-width: 0; }
.ticket-card__tier-top {
  display: flex;
  align-items: center; /* 2026-07-15: stepper lives in this row (left of price) */
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.ticket-card__tier-main { color: var(--accent); }
.ticket-card__tier-sub { flex-basis: 100%; color: var(--text); font-size: 13px; font-weight: 700; margin-top: -4px; }
.ticket-card__tier-name {
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.ticket-card__badge {
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  white-space: nowrap;
}
.ticket-card__price { color: var(--text); font-size: 20px; font-weight: 800; white-space: nowrap; }
.ticket-card__desc {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
  margin: 0 0 8px; /* margin-bottom 8px (event.html:331) + base fold */
}
.ticket-card__features {
  list-style: none;
  margin: 0 0 12px; /* margin-bottom 12px (event.html:332) + base fold */
  padding: 0;       /* base fold: event.html:18 */
}
.ticket-card__features li { color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }
.ticket-card__features--bulleted li { padding-left: 14px; position: relative; }
.ticket-card__features--bulleted li::before { content: "\2022"; position: absolute; left: 0; color: var(--text-muted); }
.ticket-card__note { color: #8A8A8A; font-size: 12.5px; margin: 0; /* base fold */ }
.ticket-card__stepper {
  display: flex;
  align-items: center;
  border: 1px solid #333333;
  border-radius: 8px;
  background: #141414;
  overflow: hidden;
  flex-shrink: 0;
}
.ticket-card__stepper-btn {
  background: none;
  border: 0;
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  width: 34px;
  height: 34px;
  line-height: 1;
  transition: color 0.2s ease;
  cursor: pointer;               /* base fold: event.html:30 */
  font-family: var(--font-body); /* base fold: event.html:30 */
  padding: 0;                    /* base fold: event.html:18 */
}
.ticket-card__stepper-btn:hover { color: var(--accent-hover); }
.ticket-card__qty { color: var(--text); font-size: 15px; font-weight: 700; min-width: 26px; text-align: center; }

/* External ticketing mode (2026-07-17): promotion-only card, one outbound CTA.
   .ticket-card prefix beats the kit's `.elementor-kit-168 a` color rule
   (orange-on-orange invisibility - same war as .btn--solid). */
a.ticket-card__external-btn { text-decoration: none; margin-top: 24px; }
.ticket-card a.ticket-card__external-btn { color: var(--text); }
.ticket-card__external-note {
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.55;
  text-align: center;
  margin: 12px 0 0;
}

/* Running total row (2026-07-15, Jay request) */
.checkout__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #2A2A2A;
  margin-top: 18px;
  padding-top: 16px;
}
.checkout__total-label {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.checkout__total-amount { color: var(--text); font-size: 22px; font-weight: 800; }

.attendee-form { margin-top: 30px; }
.attendee-form__heading {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 18px;              /* margin-bottom 18px (event.html:368) + base fold */
  font-family: var(--font-body); /* base fold: h3 inherits body font */
}
.attendee-form__group { margin: 0 0 16px; /* margin-bottom 16px (event.html:370) + base fold */ }
.attendee-form__label {
  display: block;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 8px; /* margin-bottom 8px (event.html:378) + base fold */
}
.attendee-form__label sup { color: var(--accent); }
.attendee-form__input {
  width: 100%;
  background: #050505;
  border: 1px solid #2A2A2A;
  border-radius: 8px;
  color: var(--text);
  font-size: 14px;
  padding: 13px 14px;
  outline: none;
  transition: border-color 0.2s ease;
  font-family: var(--font-body); /* base fold: event.html:31 */
}
.attendee-form__input::placeholder { color: #6E6C6C; }
.attendee-form__input:focus { border-color: var(--accent); }

.checkout__btn {
  width: 100%;
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 18px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background 0.2s ease, transform 0.2s ease;
  cursor: pointer;               /* base fold: event.html:30 */
  font-family: var(--font-body); /* base fold: event.html:30 */
}
.checkout__btn:hover { background: var(--accent-hover); transform: translateY(-2px); }
.checkout__btn svg { width: 18px; height: 18px; }
.checkout__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 18px 0 16px;
}
.checkout__secure svg { width: 15px; height: 15px; color: var(--accent); }
.checkout__payments { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.payment-chip {
  background: #141414;
  border: 1px solid #2A2A2A;
  border-radius: 6px;
  height: 34px;
  min-width: 62px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: transform 0.2s ease;
}
.payment-chip:hover { transform: translateY(-2px); }
.payment-chip--visa { color: var(--text); font-size: 14px; font-weight: 800; font-style: italic; letter-spacing: 0.04em; }
.payment-chip--mc .mc-circles { display: flex; }
.payment-chip--mc .mc-circles i { width: 16px; height: 16px; border-radius: 50%; display: block; }
.payment-chip--mc .mc-circles i:first-child { background: #EB001B; }
.payment-chip--mc .mc-circles i:last-child { background: #F79E1B; margin-left: -6px; mix-blend-mode: screen; }
.payment-chip--amex span {
  background: #2E77BC;
  color: var(--text);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 5px;
  border-radius: 2px;
}
.payment-chip--applepay, .payment-chip--gpay { color: var(--text); font-size: 13px; font-weight: 600; }
.payment-chip svg { height: 15px; width: auto; }
.checkout__provider-note {
  color: #D24A3B;
  font-size: 13px;
  text-align: center;
  margin: 16px 0 0; /* margin-top 16px (event.html:460) + base fold */
}

@media (max-width: 760px) {
  .ticket-card { padding: 20px; }
  /* Narrow: name gets its own line; stepper left + price right below it */
  .ticket-card__tier-top { flex-wrap: wrap; }
  .ticket-card__tier-name { flex-basis: 100%; }
}
/* Tier row layout at EVERY width (Jay 2026-09-18): line 1 = title + badge,
   line 2 = stepper left / price right, then the description. The checkbox
   lines up with the title instead of the old single row. */
/* v2 same day: title + badge / description / price LEFT + stepper RIGHT /
   stock note. The name, stepper and price sit in .tier-top while the
   description is its sibling, so .tier-top is flattened (display: contents)
   and the body orders all of them as one wrapping row. */
/* v3 (same day, "fit price - qty - add to cart all on one line"): a GRID,
   price | flexible space | qty | button. A wrapping flex row dropped the
   button to a second line on any card narrower than ~325px. Full-width
   items span every column; `order` still drives the row sequence. */
/* v4 (Jay 2026-09-20): line 1 = quantity, Add to cart, cart icon; line 2 = Subtotal + price on the left and
   "Go to cart" on the right; then the "fees included" note. Columns: stepper | add | cart icon | free space. */
.ticket-card__tier-body { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); align-items: center; column-gap: 8px; container-type: inline-size; }
.ticket-card__tier-top { display: contents; }
.ticket-card__tier-name { order: 1; grid-column: 1 / -1; margin-bottom: 8px; }
.ticket-card__desc { order: 2; grid-column: 1 / -1; margin: 0 0 12px; }
.ticket-card__features { order: 3; grid-column: 1 / -1; }
.ticket-card__price { order: 5; grid-column: 1 / 4; margin-top: 14px; display: flex; align-items: baseline; gap: 8px; }
.ticket-card__price-label { color: var(--text-muted); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ticket-card__stepper { order: 4; grid-column: 1; }
/* Row Add to cart: quantity, then the button, then the cart icon, all on one line. */
.ticket-card__add { order: 4; grid-column: 2; background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 8px; padding: 0 11px; height: 34px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.ticket-card__add:hover, .ticket-card__add:focus-visible { background: var(--accent); color: #fff; }
.ticket-card__add-short { display: none; }
/* Cart icon (ghosted while the cart is empty, lit with a count once it holds tickets) and the Go to cart link. */
.ticket-card__cart { order: 4; grid-column: 3; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #333333; border-radius: 8px; background: transparent; color: var(--accent); text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease; }
.ticket-card__cart svg { width: 18px; height: 18px; display: block; }
.ticket-card__cart:hover, .ticket-card__cart:focus-visible { border-color: var(--accent); background: rgba(252, 78, 32, 0.1); }
.ticket-card__cart-count { position: absolute; top: -7px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; line-height: 17px; text-align: center; }
.ticket-card__cart-count[hidden] { display: none; }
/* Go to cart is a solid orange button with white text and a right-pointing arrow (Jay 2026-09-20). It stays ghosted while the cart is empty. */
.ticket-card__gocart { order: 5; grid-column: 4; justify-self: end; margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background 0.2s ease, opacity 0.2s ease; }
.ticket-card__gocart::after { content: "\2192"; font-size: 14px; line-height: 1; }
.ticket-card__gocart:hover, .ticket-card__gocart:focus-visible { background: #ff6a3d; color: #fff; }
.ticket-card__cart.is-empty, .ticket-card__gocart.is-empty { opacity: 0.28; pointer-events: none; }
.ticket-card__note { order: 7; grid-column: 1 / -1; margin-top: 10px; }
/* Wired rows: a slightly tighter quantity control so the trio fits. */
.ticket-card__group-body .ticket-card__stepper-btn { width: 30px; height: 32px; }
.ticket-card__group-body .ticket-card__qty { width: 24px; }
/* Win back width inside accordion groups (padding was nested four deep).
   .ticket-card__group prefix: the accordion block further down sets
   padding on .ticket-card__group-body and would otherwise win. */
.ticket-card__group .ticket-card__group-body { padding-left: 8px; padding-right: 8px; }
.ticket-card__group-body .ticket-card__tier { padding: 16px 14px; gap: 12px; }
/* Narrow cards (phones): short label + slightly smaller price. */
@container (max-width: 290px) {
  .ticket-card__add-long { display: none; }
  .ticket-card__add-short { display: inline; }
  .ticket-card__price { font-size: 18px; }
}
/* Too narrow for all three (about 320px phones): a grid cannot wrap, so the
   button takes its own full-width line instead of poking out of the row. */
/* Small phones (360px Android is the common one): compact everything a
   notch so the trio still shares a line. */
@container (max-width: 215px) {
  .ticket-card__tier-body { column-gap: 6px; }
  .ticket-card__price { font-size: 17px; }
  .ticket-card__group-body .ticket-card__stepper-btn { width: 26px; height: 30px; }
  .ticket-card__group-body .ticket-card__qty { width: 20px; }
  .ticket-card__add { padding: 0 8px; height: 32px; }
}
/* Narrow cards: the subtotal keeps its line and the Go to cart button takes the full line beneath it. */
@container (max-width: 250px) {
  .ticket-card__price { grid-column: 1 / -1; }
  .ticket-card__gocart { order: 6; grid-column: 1 / -1; justify-self: stretch; justify-content: center; margin-top: 10px; }
}
@container (max-width: 180px) {
  .ticket-card__stepper { grid-column: 1 / -1; }
  .ticket-card__add { grid-column: 1 / -1; margin-top: 10px; width: 100%; }
  .ticket-card__cart { display: none; }
  .ticket-card__add-long { display: inline; }
  .ticket-card__add-short { display: none; }
}
@media (max-width: 400px) {
  .ticket-card { padding: 18px 14px; }
}
@media (max-width: 760px) {
  .ticket-card__group .ticket-card__group-body { padding-left: 4px; padding-right: 4px; }
  .ticket-card__group-body .ticket-card__tier { padding: 14px 12px; gap: 10px; }
}
.ticket-card__desc strong { color: var(--text); font-weight: 700; }
.ticket-card__check-wrap { padding-top: 0; }

/* Sticky info panels (Jay 2026-09-18: "venue and schedule sticky till it
   reaches bottom of checkout card"). The ticket card is now taller than the
   left column, so the column stretches to the card's height and the info
   section pins inside it. js/reverb-event-sticky.js sets --reverb-info-top so
   that when the section is taller than the screen its BOTTOM (Venue +
   Schedule) is what stays in view. Two-column layout only. */
@media (min-width: 1181px) {
  #reverb-event-left { align-self: stretch; }
  #reverb-event-left #reverb-info-panels {
    position: sticky;
    top: var(--reverb-info-top, 116px);
    align-self: flex-start;
    width: 100%;
  }
}

/* On-site wired tiers (Kingdom 2026-09-18): sold-out and not-yet-open
   tiers stay visible but cannot be picked; stock warnings in accent. */
.ticket-card__tier--soldout, .ticket-card__tier--next { opacity: 0.55; cursor: default; }
.ticket-card__tier--soldout:hover, .ticket-card__tier--next:hover { transform: none; }
.ticket-card__tier--soldout .ticket-card__stepper, .ticket-card__tier--next .ticket-card__stepper { visibility: hidden; }
.ticket-card__tier--soldout .ticket-card__price { text-decoration: line-through; }
.ticket-card__state { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.25); color: #ccc; vertical-align: middle; }
.ticket-card__note--left { color: var(--accent); font-weight: 600; }
/* Ticket groups accordion (Jay 2026-09-18). */
.ticket-card__group { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 14px; background: rgba(255,255,255,0.015); }
.ticket-card__group[open] { border-color: rgba(255,255,255,0.14); }
.ticket-card__group-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; cursor: pointer; list-style: none; user-select: none; transition: background 0.2s ease; border-radius: 12px; }
.ticket-card__group-head::-webkit-details-marker { display: none; }
.ticket-card__group-head:hover { background: rgba(255,255,255,0.04); }
.ticket-card__group-head::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); transition: transform 0.2s ease; margin: -4px 4px 0 6px; flex: none; }
.ticket-card__group[open] > .ticket-card__group-head::after { transform: rotate(-135deg); margin-top: 4px; }
.ticket-card__group-title { color: var(--text); font-size: 15px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.ticket-card__group-count { color: var(--accent); font-size: 12px; font-weight: 700; }
.ticket-card__group-from { margin-left: auto; color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.ticket-card__group-body { padding: 0 14px 2px; }
.ticket-card__group-body .ticket-card__tier:last-child { margin-bottom: 14px; }

/* Floor plan under the tiers: capped height so a tall plan never buries the checkout button. */
.ticket-card__floorplan { margin: 28px 0 8px; text-align: center; }
.ticket-card__floorplan .ticket-card__section-label { text-align: left; }
.ticket-card__floorplan a { display: block; padding: 24px 0; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; overflow: hidden; background: #0b0b0b; transition: border-color .2s ease; }
.ticket-card__floorplan a:hover { border-color: var(--accent); }
.ticket-card__floorplan img { display: block; width: auto; max-width: 100%; height: auto; max-height: 520px; margin: 0 auto; }
/* SECTION:event-ticket END */

/* Mobile Buy Tickets anchor (Jay 2026-07-22): sits after the event-meta band,
   jumps to the ticket card once the rail stacks below the content (<=1180).
   Hidden on desktop where the rail is beside the content. Pair-selector beats
   .btn display rules. */
.event-layout a.event-mobile-cta { display: none; text-decoration: none; }
@media (max-width: 1180px) {
  .event-layout a.event-mobile-cta {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 24px;
  }
}
#reverb-ticket-rail,
#reverb-ev2-ticket-rail { scroll-margin-top: 20px; }
/* Sticky rail (Jay 2026-07-28: "secure your spot floats with the page on
   desktop"). Two-column layout only - below 1181px the rail stacks in flow.
   top clears the sticky header (~96px) + breathing room. Works because the
   .event-layout grid has align-items:start (rail keeps its own height). */
@media (min-width: 1181px) {
  #reverb-ticket-rail,
  #reverb-ev2-ticket-rail {
    position: sticky;
    top: 116px;
  }
}

/* SECTION:event-info-panels START */
/* Source: build/event.html SECTION:info-panels (event.html:462-523),
   responsive (event.html:668, 688). Rules copied verbatim per Iron Rule 51
   with comma-prefixed live mappings:
   - h2.panel__label = rfmwpe_section_header component 'panel-head'
     __heading ('panel' itself is unusable as component root: the widget
     root div would inherit the .panel card chrome).
   - Expect list = rfmwpe_icon_band component 'expect' (label_sub, sub
     empty): div.expect stands in for ul.expect__list, and the item text
     lands in div.expect__label instead of a bare span - both comma-mapped.
   - .venue-panel grid rides the #id comma selector (outweighs Elementor's
     .e-con flex display, same technique as #reverb-event-main).
   - Venue photo = core image widget; img fill through the widget's inner
     div (same height chain as .event-hero__art).
   - The 'View Venue' TRAILING arrow SVG (event.html:963) renders as a
     ::after currentColor mask so the hover color shift stays byte-exact
     (same technique as .back-link::before). */

.info-panels,
#reverb-info-panels {
  display: grid;
  grid-template-columns: 1fr 1.38fr 1.12fr;
  gap: 26px;
  margin-top: 56px;
}
.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px;
}
.panel__label,
.panel-head__heading {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 24px;              /* margin-bottom 24px (event.html:481) + base fold (event.html:18) */
  font-family: var(--font-body); /* base fold: h2 inherits body font (event.html:23) */
}
/* Jay 2026-09-21: What to Expect sits in one row, like the trust bar above it. The panel takes the full grid width
   and the four items share the row; on narrow screens they wrap. */
.panel:has(.expect__list, .expect) { grid-column: 1 / -1; }
/* Equal-width columns, one per item (3 or 4), never wider than the panel: long items wrap onto a second line
   instead of running off the page (Jay 2026-09-21, Pilates page). */
.expect__list,
.expect {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 24px;
  margin: 0;  /* base fold: event.html:18 */
  padding: 0; /* base fold: event.html:18 */
}
@media (max-width: 760px) {
  .expect__list,
  .expect { grid-auto-flow: row; grid-auto-columns: minmax(0, 1fr); gap: 20px; }
}
.expect__item { display: flex; gap: 12px; align-items: center; min-width: 0; }
.expect__item span,
.expect__item .expect__label { white-space: normal; overflow-wrap: anywhere; }
.expect__item svg { width: 26px; height: 26px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.expect__item span,
.expect__item .expect__label { color: #DCDCDC; font-size: 14.5px; line-height: 1.5; }
.venue-panel,
#reverb-venue-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 22px;
}
.venue-panel__name {
  color: var(--text);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0 0 4px;               /* margin-bottom 4px (event.html:495) + base fold */
  font-family: var(--font-body); /* base fold: h3 inherits body font */
}
.venue-panel__city {
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 20px; /* margin-bottom 20px (event.html:502) + base fold */
}
.venue-panel__desc {
  color: var(--text-muted);
  font-size: 14.5px;
  margin: 0 0 24px; /* margin-bottom 24px (event.html:504) + base fold */
}
.venue-panel__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 13px 20px;
  background: none;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  text-decoration: none; /* base fold: event.html:29 */
}
.venue-panel__btn:hover { color: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-2px); }
.venue-panel__btn svg { width: 14px; height: 14px; }
/* Live mapping: the mockup's TRAILING arrow SVG (event.html:963) as a
   currentColor-mask pseudo (rfmwpe_button has no SVG slot). */
.venue-panel__btn::after {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%2017L17%207M9%207h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23FFFFFF'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M7%2017L17%207M9%207h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.venue-panel__photo { border-radius: 10px; overflow: hidden; align-self: start; }
/* Live mapping: img fill through the Elementor image widget's inner div. */
.venue-panel__photo > div { height: 100%; }
.venue-panel__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 100%; /* base fold: event.html:28 */
  display: block;  /* base fold: event.html:28 */
}

@media (max-width: 1180px) {
  .info-panels,
  #reverb-info-panels { grid-template-columns: 1fr; }
  /* Mobile: Schedule reads first (Jay 2026-07-22) */
  .panel--schedule { order: -1; }
}
@media (max-width: 760px) {
  .venue-panel,
  #reverb-venue-panel { grid-template-columns: 1fr; }
}
/* SECTION:event-info-panels END */

/* SECTION:event-schedule START */
/* Source: build/event.html SECTION:schedule (event.html:525-544). Rules
   copied verbatim per Iron Rule 51. rfmwpe_schedule_timeline component
   'schedule' emits the mockup class names 1:1 (ul > li, dot col, time,
   what, sub) - zero comma-mappings; the widget already omits the rail
   line on the last row per the reference DOM (the :last-child rule below
   is kept verbatim as belt-and-braces). */

.schedule__list {
  list-style: none;
  margin: 0;  /* base fold: event.html:18 */
  padding: 0; /* base fold: event.html:18 */
}
.schedule__row { display: flex; gap: 14px; position: relative; }
.schedule__row .schedule__what { padding-bottom: 22px; }
.schedule__row:last-child .schedule__what { padding-bottom: 0; }
.schedule__dot-col { display: flex; flex-direction: column; align-items: center; width: 14px; flex-shrink: 0; }
.schedule__dot {
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--card);
  flex-shrink: 0;
  margin-top: 4px;
}
.schedule__line { width: 2px; flex: 1; background: var(--accent); opacity: 0.55; margin-top: 3px; }
.schedule__row:last-child .schedule__line { display: none; }
.schedule__time { color: var(--text); font-size: 14px; font-weight: 700; width: 68px; flex-shrink: 0; white-space: nowrap; }
.schedule__what { color: #DCDCDC; font-size: 14.5px; line-height: 1.45; }
.schedule__sub { color: #8A8A8A; font-size: 12.5px; display: block; }
/* SECTION:event-schedule END */

/* SECTION:event-experience START */
/* Source: build/event.html SECTION:experience (event.html:546-571),
   responsive (event.html:689-690). Rules copied verbatim per Iron Rule 51.
   rfmwpe_image_strip component 'experience' emits .experience__strip /
   .experience__tile 1:1; h2.experience__label = rfmwpe_section_header
   component 'experience-head' __heading, comma-mapped ('experience' itself
   is unusable as component root: the widget root div would inherit this
   section's margin rule). The container margins/paddings are ALSO set
   natively in rebuild-event-lower.php (both agree, Iron Rule 42). */

.experience { margin-top: 44px; }
.experience__inner {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 28px 30px;
}
.experience__label,
.experience-head__heading {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 20px;              /* margin-bottom 20px (event.html:560) + base fold (event.html:18) */
  font-family: var(--font-body); /* base fold: h2 inherits body font (event.html:23) */
}
.experience__strip { display: flex; gap: 18px; }
.experience__tile {
  border-radius: 10px;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  transition: transform 0.2s ease;
}
.experience__tile:hover { transform: translateY(-2px); }
.experience__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 173 / 108;
  max-width: 100%; /* base fold: event.html:28 */
  display: block;  /* base fold: event.html:28 */
}

@media (max-width: 760px) {
  .experience__strip { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .experience__tile { flex: 0 0 240px; }
}
/* SECTION:event-experience END */

/* SECTION:event-trust-band START */
/* Source: build/event.html SECTION:trust-band (event.html:573-599),
   responsive (event.html:669-671, 691-693). Rules copied verbatim per Iron
   Rule 51. rfmwpe_icon_band component 'trust-band' (cell_layout title_desc)
   emits the mockup class names 1:1 - zero comma-mappings; item SVGs are
   unclassed direct children as in the mockup ('.trust-band__item > svg').
   The 36px/64px vertical margins ride this root rule (the rule targets the
   widget's root div, not the Elementor wrapper - no specificity clash). */

.trust-band {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 36px 0 64px;
}
.trust-band__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 28px 30px;
  border-left: 1px solid var(--border);
}
.trust-band__item:first-child { border-left: 0; }
.trust-band__item > svg { width: 34px; height: 34px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.trust-band__title {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 6px;               /* margin-bottom 6px (event.html:597) + base fold (event.html:18) */
  font-family: var(--font-body); /* base fold: h3 inherits body font (event.html:23) */
}
.trust-band__desc {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0; /* base fold: event.html:18 */
}

@media (max-width: 1180px) {
  .trust-band { grid-template-columns: 1fr 1fr; }
  .trust-band__item:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .trust-band__item:nth-child(4) { border-top: 1px solid var(--border); }
}
@media (max-width: 760px) {
  .trust-band { grid-template-columns: 1fr; }
  .trust-band__item { border-left: 0; }
  .trust-band__item + .trust-band__item { border-top: 1px solid var(--border); }
}
/* SECTION:event-trust-band END */

/* SECTION:product-template START
   Single-product event template shims (SPEC-proper-events step 2). The
   hand-built pages got the About paragraph rhythm from an Elementor
   container's 20px flex gap; the rfmwpe_event_about_text widget renders the
   mockup DOM (div.about__text > p) instead, so the --product modifier
   restores the same 20px column rhythm. One concept, one rule (Iron Rule 39). */
.about__text--product {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 65px; /* Jay 2026-09-21: description indented 65px */
}
.single-product .about__label,
.single-product .about__heading { padding-left: 25px; } /* and the "About the event" header 25px */
@media (max-width: 640px) {
  /* On a phone the indents would squeeze the copy, so they shrink to the same 25px. */
  .about__text--product { padding-left: 25px; }
}
/* SECTION:product-template END */

/* SECTION:external-options START
   External multi-option ticket list (per-tier partner links, Jay 2026-07-28).
   Rendered by rfmwpe_ticket_selector when event tiers carry their own URLs. */
.ticket-card__options { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
a.ticket-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #0d0d0d;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
a.ticket-option:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--text); }
.ticket-option__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.ticket-option__name { font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--text); }
.ticket-option__desc { color: var(--muted); font-size: 12px; line-height: 1.4; }
.ticket-option__price { font-weight: 700; font-size: 14px; white-space: nowrap; color: var(--text); }
.ticket-option__btn {
  flex: none;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 7px;
  transition: background 0.15s ease;
}
a.ticket-option:hover .ticket-option__btn { background: var(--accent-hover); }
/* SECTION:external-options END */

/* SECTION:sticky-rail-panels START
   In-column info panels (sticky-rail layout, Jay 2026-07-28): the three
   panels stack vertically inside the ~800px left grid column so the ticket
   rail floats alongside them. The venue split keeps its 240px photo. */
.event-layout__main #reverb-info-panels,
.event-layout__main #reverb-ev2-info-panels {
  grid-template-columns: 1fr; /* id selectors: the base #id grid rule is (1,0,0) */
  margin-top: 48px;
}
/* SECTION:sticky-rail-panels END */

/* SECTION:after-party-addon (Jay 2026-09-20) - checkbox on each Pilates class row */
.ticket-card__addon {
  order: 3;
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px dashed #3A3A3A;
  border-radius: 8px;
  cursor: pointer;
}
.ticket-card__addon:hover { border-color: var(--accent); }
.ticket-card__addon input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border: 1.5px solid #3A3A3A;
  border-radius: 5px;
  background: #141414;
  position: relative;
  cursor: pointer;
}
.ticket-card__addon input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
.ticket-card__addon input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 1.5px;
  width: 5px;
  height: 10px;
  border: solid var(--text);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.ticket-card__addon-text { display: block; color: var(--text); font-size: 13.5px; line-height: 1.45; }
.ticket-card__addon-text strong { font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.ticket-card__addon-price { color: var(--accent); font-weight: 800; white-space: nowrap; }
.ticket-card__addon-desc { display: block; margin-top: 3px; color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }
.ticket-card__price-note { order: 7; grid-column: 1 / -1; position: relative; display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: var(--text-muted); font-size: 12px; font-weight: 500; line-height: 1.3; letter-spacing: 0; text-transform: none; }
/* "$48.84 x 2 Tickets" straight under the title, and the add-on's own line under it. */
.ticket-card__unit { order: 1; grid-column: 1 / -1; margin: -6px 0 8px; color: var(--text-muted); font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.ticket-card__unit[hidden] { display: none; }
.ticket-card__unit--addon { margin-top: -6px; }
/* "fees included" underlined with a small ? that opens a tooltip. */
.ticket-card__fees { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
/* Phones (Jay 2026-09-21): the subtotal takes its own line, "fees included" sits under it, and Go to checkout is a
   full-width button below both, so it can no longer overlap the subtotal. */
@media (max-width: 640px) {
  .ticket-card__price { grid-column: 1 / -1; }
  .ticket-card__gocart { order: 8; grid-column: 1 / -1; justify-self: stretch; justify-content: center; margin-top: 12px; }
}
.ticket-card__help {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 14px;
  cursor: help;
}
.ticket-card__help:hover, .ticket-card__help:focus-visible { color: var(--accent); }
.ticket-card__tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  width: min(270px, 72vw);
  padding: 9px 11px;
  border: 1px solid #3A3A3A;
  border-radius: 8px;
  background: #1C1C1C;
  color: #EAEAEA;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  /* display:none, not just invisible: a hidden 270px box past the screen edge still gave phones a sideways scroll. */
  display: none;
  pointer-events: none;
}
.ticket-card__help:hover + .ticket-card__tip,
.ticket-card__help:focus + .ticket-card__tip,
.ticket-card__fees:hover ~ .ticket-card__tip { display: block; }
/* SECTION:after-party-addon END */

/* The pricing status line under the ticket rows is empty unless it says "Updating total..." or shows an error. */
.ticket-card__note[data-pricing-status]:empty { display: none; }
/* Key facts under the event title (Jay 2026-09-20): Date, Address, Doors, Age. Bold white labels and values. */
.event-hero__facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.event-hero__facts li { margin: 0; color: #fff; font-size: 17px; font-weight: 500; line-height: 1.4; }
.event-hero__facts li strong { margin-right: 4px; color: #fff; font-weight: 800; letter-spacing: 0.02em; }
/* Desktop only (Jay 2026-09-20): on a phone the date, doors, venue and age strip below the hero already says this. */
@media (max-width: 760px) { .event-hero__facts { display: none; } }
/* About the Event: **bold** phrases stand out in white against the grey body text. */
.about__text--product strong { color: #fff; font-weight: 700; }
/* SECTION:sticky-checkout-bar (Jay 2026-09-20) - count, running total and Check out, pinned to the bottom of the screen */
.ticket-card__sticky[hidden] { display: none !important; }
.ticket-card__sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(14, 14, 14, 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--accent, #FC4E20);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
}
.ticket-card__sticky-info { display: flex; flex-direction: column; min-width: 0; color: var(--text-muted, #B5B5B5); font-size: 12.5px; line-height: 1.3; }
.ticket-card__sticky-info strong { color: var(--text, #fff); font-size: 20px; font-weight: 800; letter-spacing: 0.01em; }
.ticket-card__sticky-btn {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 26px;
  border: 0;
  border-radius: 10px;
  background: var(--accent, #FC4E20);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.ticket-card__sticky-btn:hover, .ticket-card__sticky-btn:focus-visible { background: #ff6a3d; transform: translateY(-1px); }
.ticket-card__sticky-total small { color: var(--text-muted, #B5B5B5); font-size: 12px; font-weight: 500; letter-spacing: 0; }
/* The pinned bar's cart button reads "Go to cart" with the same right-pointing arrow as the row buttons. */
.ticket-card__sticky-btn[data-sticky-cart]::after { content: "\2192"; margin-left: 8px; font-size: 16px; line-height: 1; }
/* Row note: "fees included ? Excludes sales tax" (Jay 2026-09-20), with room above it so it does not touch the buttons. */
/* Room between the intro note ("Ticket prices include booking...") and the first ticket (Jay 2026-09-20). */
[data-rfmwpe-ticket] > p.ticket-card__note { margin-bottom: 18px; }
a.ticket-card__sticky-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.ticket-card__sticky-btn[hidden] { display: none !important; }
@media (min-width: 900px) {
  .ticket-card__sticky { justify-content: center; gap: 28px; }
  .ticket-card__sticky-info { flex-direction: row; align-items: baseline; gap: 14px; }
}
/* The draft-preview banner (event-preview.php) rides above the pinned bar instead of hiding it. */
body:has(.ticket-card__sticky:not([hidden])) .reverb-preview-banner { bottom: 84px !important; }
/* SECTION:sticky-checkout-bar END */