/*
 * Normalise focus treatment across the Studio app. Pointer clicks do not
 * receive a decorative outline; keyboard focus keeps a visible brand-colour
 * indicator. This complements the bundle's optional focus-highlight mode.
 */
#vora-studio-root button,
#vora-studio-root a {
  outline: none;
}
#vora-studio-root button:focus-visible,
#vora-studio-root a:focus-visible {
  outline: 2px solid var(--accent-color, #C5A059);
  outline-offset: 2px;
}

/* Tickets are admission products, not photographic gift-voucher cards. */
#vora-studio-root .vora-ticket-art {
  --ticket-ink: #f8f1eb;
  --ticket-ground: #241b25;
  --ticket-accent: var(--accent-color, #b8872a);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26%;
  width: 100%;
  height: 100%;
  color: var(--ticket-ink);
  background: radial-gradient(circle at 10% 0%, #54323d, transparent 58%), var(--ticket-ground);
}
#vora-studio-root .vora-ticket-art--heritage { --ticket-ink: #35221c; --ticket-ground: #ead9b9; --ticket-accent: #8d572e; background: #ead9b9; }
#vora-studio-root .vora-ticket-art--perforated { --ticket-ink: #132033; --ticket-ground: #eee9e0; --ticket-accent: #9b623d; background: #eee9e0; }
#vora-studio-root .vora-ticket-art__main { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .55rem; padding: 8% 7%; overflow: hidden; }
#vora-studio-root .vora-ticket-art__main--image::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,10,14,.84) 0%, rgba(8,10,14,.64) 58%, rgba(8,10,14,.32) 100%); pointer-events: none; }
#vora-studio-root .vora-ticket-art__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
#vora-studio-root .group:hover .vora-ticket-art__image { transform: scale(1.04); }
#vora-studio-root .vora-ticket-art__main--image > :not(.vora-ticket-art__image) { position: relative; z-index: 2; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.72); }
#vora-studio-root .vora-ticket-art__main--image .vora-ticket-art__eyebrow,
#vora-studio-root .vora-ticket-art__main--image .vora-ticket-art__date { color: #fff; }
#vora-studio-root .vora-ticket-art__eyebrow { color: var(--ticket-accent); font-size: .72rem; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
#vora-studio-root .vora-ticket-art__title { font: normal clamp(1.4rem, 3vw, 2.5rem)/1.05 Georgia, serif; overflow-wrap: anywhere; }
#vora-studio-root .vora-ticket-art__date { color: var(--ticket-accent); font-size: .85rem; font-weight: 700; }
#vora-studio-root .vora-ticket-art__venue { font-size: .8rem; opacity: .76; }
#vora-studio-root .vora-ticket-art__stub { display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding: 15%; border-left: 2px dashed var(--ticket-accent); background: #100e12; color: #f8f1eb; text-align: center; writing-mode: vertical-rl; font-size: .7rem; font-weight: 700; letter-spacing: .1em; }
#vora-studio-root .vora-ticket-art__stub strong { font: normal 1rem Georgia, serif; color: #e6aa9a; }
#vora-studio-root .vora-ticket-art--heritage .vora-ticket-art__stub,
#vora-studio-root .vora-ticket-art--perforated .vora-ticket-art__stub { background: rgba(85, 58, 36, .11); color: var(--ticket-ink); }

#vora-studio-root .vora-ticket-preview { max-width: 760px; margin: 0 auto; color: #f8f1eb; }
#vora-studio-root .vora-ticket-preview__note { margin: 0 0 12px; color: #59616d; font-size: .8rem; text-align: center; }
#vora-studio-root .vora-ticket-preview__ticket,
#vora-studio-root .vora-ticket-preview__seal { overflow: hidden; border: 1px solid var(--accent-color, #b8872a); border-radius: 18px; background: radial-gradient(circle at top left,#4f3039,transparent 50%),#1b171e; box-shadow: 0 18px 45px rgba(15,11,18,.16); }
#vora-studio-root .vora-ticket-preview__ticket { display: grid; grid-template-columns: minmax(0,1fr) 27%; min-height: 300px; }
#vora-studio-root .vora-ticket-preview__main { padding: clamp(22px,5vw,44px); min-width: 0; }
#vora-studio-root .vora-ticket-preview__eyebrow { color: #e7ad9f; text-transform: uppercase; letter-spacing: .2em; font-size: .75rem; font-weight: 800; }
#vora-studio-root .vora-ticket-preview h3 { margin: 18px 0; color: inherit; font: normal clamp(2rem,5vw,3.5rem)/1.05 Georgia,serif; overflow-wrap: anywhere; }
#vora-studio-root .vora-ticket-preview p { line-height: 1.5; }
#vora-studio-root .vora-ticket-preview dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 28px 0 0; }
#vora-studio-root .vora-ticket-preview dt { color: #bbadba; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
#vora-studio-root .vora-ticket-preview dd { margin: 3px 0 0; font-size: .95rem; font-weight: 700; overflow-wrap: anywhere; }
#vora-studio-root .vora-ticket-preview__stub { display: flex; flex-direction: column; justify-content: space-around; align-items: center; gap: 12px; border-left: 2px dashed var(--accent-color, #b8872a); padding: 20px; text-align: center; background: #100e12; }
#vora-studio-root .vora-ticket-preview__stub strong { color: #e7ad9f; font: normal 1.6rem Georgia,serif; }
#vora-studio-root .vora-ticket-preview__stub small { color: #c8bcc5; }
#vora-studio-root .vora-ticket-preview__seal { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 330px; padding: 35px; text-align: center; }
#vora-studio-root .vora-ticket-preview__seal button { margin-top: 20px; border-radius: 10px; background: #c47767; color: white; padding: 14px 22px; font-weight: 700; }
#vora-studio-root .vora-ticket-preview__replay { display: block; margin: 12px auto; color: #593d61; text-decoration: underline; }
#vora-studio-root .vora-ticket-event-details { display: grid; gap: 6px; padding: 18px 20px; border: 1px solid #d9c2a8; border-radius: 14px; background: #faf6ef; color: #192233; }
#vora-studio-root .vora-ticket-event-details strong { color: #975d49; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; }
#vora-studio-root .vora-ticket-event-details span { font-size: 1rem; font-weight: 700; }
#vora-studio-root .vora-ticket-event-details small { margin-top: 5px; color: #5d6268; font-size: .8rem; line-height: 1.5; }
#vora-studio-root .vora-ticket-preview__ticket--revealed { animation: vora-ticket-reveal .7s cubic-bezier(.16,1,.3,1) both; }
#vora-studio-root .vora-ticket-preview--heritage .vora-ticket-preview__ticket,
#vora-studio-root .vora-ticket-preview--perforated .vora-ticket-preview__ticket { color: #192233; background: #f6f1e8; border-color: #bd9d71; }
#vora-studio-root .vora-ticket-preview--heritage .vora-ticket-preview__stub,
#vora-studio-root .vora-ticket-preview--perforated .vora-ticket-preview__stub { background: #e9dfcc; color: #192233; border-color: #bd9d71; }
#vora-studio-root .vora-ticket-preview--heritage dt,
#vora-studio-root .vora-ticket-preview--perforated dt { color: #685b50; }
@keyframes vora-ticket-reveal { from { opacity: 0; transform: translateY(22px) rotate(-1deg) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 620px) {
  #vora-studio-root .vora-ticket-preview__ticket { grid-template-columns: 1fr; }
  #vora-studio-root .vora-ticket-preview__stub { border-left: 0; border-top: 2px dashed var(--accent-color, #b8872a); flex-direction: row; }
  #vora-studio-root .vora-ticket-preview dl { grid-template-columns: 1fr; }
  #vora-studio-root .vora-ticket-art__title { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) { #vora-studio-root .vora-ticket-preview__ticket--revealed { animation: none; } }

/* Catalogue controls: one aligned row on desktop, readable stacked fields on
   smaller screens. Category and sort are explicit selects; the old duplicate
   category pills and unexplained sliders icon are intentionally removed. */
#vora-studio-root #vora-catalog-controls {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 230px) minmax(210px, 250px) auto !important;
  align-items: end !important;
  gap: 16px !important;
}
#vora-studio-root #vora-catalog-controls:not(:has(#vora-category-filter)) {
  grid-template-columns: minmax(260px, 1fr) minmax(210px, 250px) auto !important;
}
#vora-studio-root #vora-catalog-controls > div:first-child {
  width: 100% !important;
  max-width: none !important;
}
#vora-studio-root #vora-category-filter,
#vora-studio-root #vora-sort-filter {
  display: grid !important;
  min-width: 0 !important;
  gap: 7px !important;
  align-items: stretch !important;
}
#vora-studio-root #vora-category-filter > span,
#vora-studio-root #vora-sort-filter > span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
}
#vora-studio-root #vora-category-filter select,
#vora-studio-root #vora-sort-filter select {
  width: 100% !important;
  min-height: 42px !important;
  padding: 8px 34px 8px 12px !important;
  border-width: 1px !important;
}
#vora-studio-root #vora-catalog-count {
  align-self: center !important;
  white-space: nowrap !important;
}
@media (max-width: 980px) {
  #vora-studio-root #vora-catalog-controls {
    grid-template-columns: minmax(0, 1fr) minmax(180px, .65fr) !important;
  }
  #vora-studio-root #vora-sort-filter { grid-column: 1; }
  #vora-studio-root #vora-catalog-count { grid-column: 2; grid-row: 2; justify-self: end; }
}
@media (max-width: 640px) {
  #vora-studio-root #vora-catalog-controls { grid-template-columns: 1fr !important; }
  #vora-studio-root #vora-sort-filter,
  #vora-studio-root #vora-catalog-count { grid-column: auto; grid-row: auto; justify-self: stretch; }
}

/*
 * The WordPress theme and legacy plugin styles are unlayered, while the
 * Tailwind bundle originally placed its utilities inside @layer. Unlayered
 * rules therefore won the cascade even when Studio loaded later. The bundle
 * now emits its utilities unlayered; these exact selectors retain the agreed
 * pill shape, weight, and brand colours as a narrow compatibility guard.
 */
#vora-studio-root [class="flex-1 py-2.5 px-3 text-xs tracking-wider uppercase font-medium rounded-lg transition-all duration-300 border flex items-center justify-center gap-1.5 group/btn"] {
  color: var(--accent-color, #C5A059) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}
#vora-studio-root [class="flex-1 py-2.5 px-3 text-xs tracking-wider uppercase font-medium rounded-lg transition-all duration-300 border flex items-center justify-center gap-1.5 group/btn"]:hover {
  color: var(--accent-color, #C5A059) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
#vora-studio-root [class="flex-1 py-2.5 px-3 text-xs tracking-wider uppercase font-medium rounded-lg transition-all duration-300 shadow-sm flex items-center justify-center gap-1.5 text-white"] {
  border-color: var(--accent-color, #C5A059) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  color: #fff !important;
}
#vora-studio-root [class="flex-1 py-2.5 px-3 text-xs tracking-wider uppercase font-medium rounded-lg transition-all duration-300 shadow-sm flex items-center justify-center gap-1.5 text-white"]:hover {
  border-color: var(--accent-color, #C5A059) !important;
  color: #fff !important;
}

/*
 * Defensive variable fallback. A live audit confirmed that 111 is the
 * expected number of top-level rules: the browser parsed 1,017 rules when
 * nested @layer/@media contents were counted. The stylesheet was complete,
 * not truncated. These values remain explicit to make legacy integrations
 * deterministic.
 */
#vora-studio-root {
  --color-neutral-300: #d4d4d4;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-white: #ffffff;
  overflow-x: clip;
}

/* The search icon is absolutely centred by the source design. Some host
   themes reset the positioning utilities, so pin its geometry explicitly. */
#vora-studio-root #input-search-experiences {
  padding-left: 40px !important;
}
#vora-studio-root #input-search-experiences + * { pointer-events: none; }
#vora-studio-root #input-search-experiences ~ svg,
#vora-studio-root #input-search-experiences svg { pointer-events: none; }
#vora-studio-root #input-search-experiences {
  min-height: 40px;
}
#vora-studio-root #input-search-experiences:where(input) {
  line-height: 20px;
}
#vora-studio-root #input-search-experiences:where(input) + svg { display: none; }
#vora-studio-root div:has(> #input-search-experiences) > svg {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 1;
}

/* Source Studio primary actions use the merchant's global button palette.
   This also removes the prototype magenta/purple from the Gift Bag and
   detail actions without forcing a palette that conflicts with the portal. */
#vora-studio-root button[id^="btn-select-"],
#vora-studio-root #btn-add-to-order-modal,
#vora-studio-root #btn-checkout,
#vora-studio-root [role="dialog"] button[class*="text-white"][class*="shadow"],
#vora-studio-root [role="dialog"] a[class*="text-white"] {
  background: var(--vora-button-bg, #000000) !important;
  background-image: none !important;
  border-color: var(--vora-button-bg, #000000) !important;
  color: var(--vora-button-text, #ffffff) !important;
}
#vora-studio-root button[id^="btn-select-"]:hover,
#vora-studio-root #btn-add-to-order-modal:hover,
#vora-studio-root #btn-checkout:hover {
  background: var(--vora-button-hover-bg, #000000) !important;
  color: var(--vora-button-hover-text, #ffffff) !important;
}
#vora-studio-root [role="dialog"] button.underline,
#vora-studio-root [role="dialog"] button[class*="underline"],
#vora-studio-root [role="dialog"] a[class*="underline"] {
  color: var(--vora-button-bg, #000000) !important;
}

/* Decorative symbols are merchant controlled. Labelled actions remain fully
   understandable as text; essential icon-only controls are deliberately not
   marked by the bridge and therefore stay visible. */
#vora-studio-root.vora-button-icons-disabled button.vora-labelled-button svg,
.sdgv-button-icons-disabled .sdgv-gift-concierge button.vora-labelled-button svg {
  display: none !important;
}

/* "More Info" wasn't laying out as a single row (icon dropped to its own
   line below the text) — the Tailwind "flex" utility wasn't taking
   effect. Forced explicitly rather than relying on that class. */
#vora-studio-root [class="flex-1 py-2.5 px-3 text-xs tracking-wider uppercase font-medium rounded-lg transition-all duration-300 border flex items-center justify-center gap-1.5 group/btn"],
#vora-studio-root [class="flex-1 py-2.5 px-3 text-xs tracking-wider uppercase font-medium rounded-lg transition-all duration-300 shadow-sm flex items-center justify-center gap-1.5 text-white"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

/* Keep modal accent and neutral-border utilities deterministic alongside
   WordPress theme CSS. */
#vora-studio-root [class*="border-\[var\(--accent-color\)\]"],
#vora-studio-root [class*="text-\[var\(--accent-color\)\]"] {
  border-color: var(--accent-color, #C5A059) !important;
  color: var(--accent-color, #C5A059) !important;
}
#vora-studio-root [class*="border-neutral-300"] {
  border-color: #d4d4d4 !important;
}
#vora-studio-root [class*="border-neutral-700"] {
  border-color: #404040 !important;
}

/* Merchant palette wins over compiled inline gradients on every primary
   Studio action, including category filters and Concierge entry points. */
#vora-studio-root button.vora-merchant-action,
#vora-studio-root a.vora-merchant-action {
  background: var(--vora-button-bg, #000000) !important;
  background-image: none !important;
  border-color: var(--vora-button-bg, #000000) !important;
  color: var(--vora-button-text, #ffffff) !important;
}
#vora-studio-root button.vora-merchant-action:hover,
#vora-studio-root button.vora-merchant-action:focus-visible,
#vora-studio-root a.vora-merchant-action:hover,
#vora-studio-root a.vora-merchant-action:focus-visible {
  background: var(--vora-button-hover-bg, var(--vora-button-bg, #000000)) !important;
  color: var(--vora-button-hover-text, var(--vora-button-text, #ffffff)) !important;
}
#vora-studio-root button[id^="btn-details-"]:hover,
#vora-studio-root button[id^="btn-details-"]:focus-visible {
  background: transparent !important;
  border-color: var(--vora-button-bg, #000000) !important;
  color: var(--vora-button-bg, #000000) !important;
}

/* Remove host-theme pink fills and the prototype purple palette from modal
   tabs, format switches and the neutral Cancel action. */
#vora-studio-root button.vora-detail-tab {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #737373 !important;
}
#vora-studio-root button.vora-detail-tab.is-merchant-selected {
  border-bottom-color: var(--accent-color, #C5A059) !important;
  color: var(--accent-color, #C5A059) !important;
}
#vora-studio-root button.vora-format-choice {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #737373 !important;
}
#vora-studio-root button.vora-format-choice.is-merchant-selected {
  background: var(--vora-button-bg, #000000) !important;
  border-color: var(--vora-button-bg, #000000) !important;
  color: var(--vora-button-text, #ffffff) !important;
}
#vora-studio-root button.vora-format-choice:hover,
#vora-studio-root button.vora-format-choice:focus-visible {
  color: var(--vora-button-bg, #000000) !important;
}
#vora-studio-root button.vora-format-choice.is-merchant-selected:hover,
#vora-studio-root button.vora-format-choice.is-merchant-selected:focus-visible {
  background: var(--vora-button-hover-bg, var(--vora-button-bg, #000000)) !important;
  color: var(--vora-button-hover-text, var(--vora-button-text, #ffffff)) !important;
}
#vora-studio-root button.vora-modal-cancel {
  background: transparent !important;
  background-image: none !important;
  border-color: #a3a3a3 !important;
  box-shadow: none !important;
  color: #404040 !important;
}
#vora-studio-root button.vora-modal-cancel:hover,
#vora-studio-root button.vora-modal-cancel:focus-visible {
  background: rgba(0,0,0,.05) !important;
  border-color: var(--accent-color, #C5A059) !important;
  color: #171717 !important;
}
.dark #vora-studio-root button.vora-detail-tab:not(.is-merchant-selected),
.dark #vora-studio-root button.vora-format-choice:not(.is-merchant-selected) {
  color: #a3a3a3 !important;
}
.dark #vora-studio-root button.vora-modal-cancel {
  border-color: #525252 !important;
  color: #e5e5e5 !important;
}
.dark #vora-studio-root button.vora-modal-cancel:hover,
.dark #vora-studio-root button.vora-modal-cancel:focus-visible {
  background: rgba(255,255,255,.07) !important;
  color: #ffffff !important;
}

/*
 * Preserve transparent and neutral utility semantics if a host theme applies
 * broad button/link rules.
 */
#vora-studio-root [class*="border-transparent"] {
  border-color: transparent !important;
}
#vora-studio-root [class*="text-neutral-400"] {
  color: #a3a3a3 !important;
}
#vora-studio-root [class*="text-neutral-500"] {
  color: #737373 !important;
}

/*
 * Reset icon-only modal controls that can inherit a border from the host
 * theme. Explicitly bordered actions are excluded.
 */
#vora-studio-root [role="dialog"] button:not([class*="border"]):not([class*="Select"]) {
  border: none !important;
  border-radius: 999px !important;
}

/* "Add to Order" / primary modal actions: pill shape, no stray border
   ring around the fill — the gold fill itself is the button, it
   doesn't also need a border around it. Excludes the tab row (which
   uses an underline style, not a pill) via its border-b-2 class. */
#vora-studio-root [role="dialog"] button:not([class*="border-b"]) {
  border-radius: 999px !important;
}

/*
 * The modal's scrollable content area sits above a sticky footer (Order
 * Summary / Cancel / Add to Order), but had no bottom padding to clear
 * it — content near the bottom (like the "Read Personal Message"
 * button inside the animated preview) was rendering underneath the
 * fixed footer, hidden from view even though it scrolled correctly.
 */
#vora-studio-root [role="dialog"] .overflow-y-auto.flex-1 {
  padding-bottom: 132px !important;
  overscroll-behavior: contain;
  overflow-x: hidden !important;
}

/* Tighten and align the personalisation controls highlighted in the supplied
   review capture while preserving the source hierarchy. */
#vora-studio-root [role="dialog"] .vora-format-section,
#vora-studio-root [role="dialog"] .vora-photo-section,
#vora-studio-root [role="dialog"] .vora-dedication-section {
  margin-top: 16px !important;
}
#vora-studio-root [role="dialog"] .vora-format-section [role="radio"] {
  padding: 14px !important;
}
#vora-studio-root [role="dialog"] .vora-format-section [role="radio"] > p {
  min-height: 48px;
}
#vora-studio-root [role="dialog"] .vora-photo-section {
  padding: 14px !important;
}

/* On phones the Concierge/detail/bag overlay is a fixed viewport surface.
   Only its inner content scrolls vertically: no horizontal panning, dragging,
   or page movement behind the modal. */
@media (max-width: 767px) {
  #vora-studio-root > div:has(> [role="dialog"]),
  #vora-studio-root div.fixed.inset-0:has(> [role="dialog"]) {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
    touch-action: pan-y !important;
  }
  #vora-studio-root [role="dialog"] {
    position: relative !important;
    inset: auto !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    overflow: hidden !important;
    touch-action: pan-y !important;
  }
  #vora-studio-root [role="dialog"] .overflow-y-auto.flex-1 {
    padding: 18px 16px 150px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important;
  }
  #vora-studio-root [role="dialog"] .vora-format-section [role="radio"] > p {
    min-height: 0;
  }
  #vora-studio-root [role="dialog"] :is(input, textarea, select) {
    font-size: 16px !important;
  }
}

#vora-studio-root :is(.vora-detail-dialog, .vora-bag-dialog) button[aria-label*="Close" i] {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: #111 !important;
  box-shadow: none !important;
}
.dark #vora-studio-root :is(.vora-detail-dialog, .vora-bag-dialog) button[aria-label*="Close" i] {
  color: #fff !important;
}

/*
 * Tabs use a bottom-only underline. Force that geometry so broad host-theme
 * border rules cannot turn them into four-sided boxes.
 */
#vora-studio-root [class*="border-b-2"] {
  border-width: 0 0 2px 0 !important;
}

/* Patron Services is intentionally removed. Collapse the desktop footer grid
   to three real columns so hiding it does not leave an empty quarter-width
   gap. Mobile remains a normal single-column stack. */
@media (min-width: 48rem) {
  #storefront-footer .vora-footer-three-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Recipient identity must not disappear merely because the optional portrait
   was left blank. The compatibility script inserts this compact name block. */
#vora-studio-root .vora-recipient-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 8px 0;
}
#vora-studio-root .vora-recipient-copy span {
  color: #a3a3a3;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
}
#vora-studio-root .vora-recipient-copy strong {
  color: inherit;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
}

/* Text-only footer links use the merchant's saved link colour, never button styling. */
#storefront-footer .vora-footer-link,#storefront-footer .vora-footer-link:hover,#storefront-footer .vora-footer-link:visited{display:inline!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;color:var(--vora-footer-link-color)!important;text-decoration:none!important;font-size:var(--vora-footer-link-size,12px)!important;line-height:1.5!important;white-space:normal!important;overflow-wrap:anywhere!important}
#storefront-footer .vora-footer-link:hover,#storefront-footer .vora-footer-link:focus-visible{text-decoration:underline!important;text-underline-offset:3px}
#storefront-footer .vora-footer-link:focus-visible{outline:2px solid var(--vora-footer-link-color);outline-offset:3px}

/* Modal dismissal controls are icon buttons, not theme-coloured action buttons. */
#vora-studio-root button:is([aria-label="Close dialog"],[aria-label="Close modal"]){
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-width:44px!important;min-height:44px!important;padding:0!important;
  background:transparent!important;background-image:none!important;
  border:0!important;box-shadow:none!important;
  color:var(--sdgv-body-text-color,#334155)!important;
}
#vora-studio-root button:is([aria-label="Close dialog"],[aria-label="Close modal"]):is(:hover,:focus,:focus-visible,:active){
  background:rgba(35,49,65,.08)!important;
  color:var(--sdgv-body-text-color,#17253a)!important;
}
#vora-studio-root button:is([aria-label="Close dialog"],[aria-label="Close modal"]) svg{color:inherit!important;stroke:currentColor!important}
.dark #vora-studio-root button:is([aria-label="Close dialog"],[aria-label="Close modal"]){color:#e5e5e5!important}
.dark #vora-studio-root button:is([aria-label="Close dialog"],[aria-label="Close modal"]):is(:hover,:focus,:focus-visible,:active){background:rgba(255,255,255,.12)!important;color:#fff!important}

/* Preview controls must not inherit a host theme's pink button treatment. */
#vora-studio-root .vora-preview-open,
#vora-studio-root .vora-ticket-preview__seal button {
  background:var(--vora-button-bg,#17253a)!important;
  background-image:none!important;
  border:1px solid var(--vora-button-bg,#17253a)!important;
  color:var(--vora-button-text,#fff)!important;
  box-shadow:none!important;
}
#vora-studio-root .vora-preview-open:is(:hover,:focus-visible),
#vora-studio-root .vora-ticket-preview__seal button:is(:hover,:focus-visible) {
  background:var(--vora-button-hover-bg,var(--vora-button-bg,#17253a))!important;
  border-color:var(--vora-button-hover-bg,var(--vora-button-bg,#17253a))!important;
  color:var(--vora-button-hover-text,var(--vora-button-text,#fff))!important;
}
#vora-studio-root .vora-preview-replay,
#vora-studio-root .vora-ticket-preview__replay {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:44px!important;
  padding:8px 12px!important;
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  color:var(--sdgv-body-text-color,#17253a)!important;
  text-decoration:underline!important;
  text-underline-offset:3px;
}
#vora-studio-root .vora-preview-replay:is(:hover,:focus-visible),
#vora-studio-root .vora-ticket-preview__replay:is(:hover,:focus-visible) {
  background:transparent!important;
  color:var(--vora-button-bg,#17253a)!important;
}

#vora-studio-root .vora-ticket-audience{margin:0;padding:16px;border:1px solid #d4d4d4;border-radius:12px}
#vora-studio-root .vora-ticket-audience legend{padding:0 5px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
#vora-studio-root .vora-ticket-audience__choices{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
#vora-studio-root .vora-ticket-audience__choices label{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 12px;border:1px solid #bdbdbd;border-radius:8px;cursor:pointer;font-size:12px}
#vora-studio-root .vora-ticket-audience__choices label:has(input:checked){border-color:var(--vora-button-bg,#17253a);box-shadow:inset 0 0 0 1px var(--vora-button-bg,#17253a)}
#vora-studio-root .vora-ticket-audience__choices input{accent-color:var(--vora-button-bg,#17253a)}
#vora-studio-root .vora-ticket-audience__quantity{display:grid;gap:6px;max-width:250px;font-size:12px;font-weight:600}
#vora-studio-root .vora-ticket-audience__quantity input{min-height:44px;padding:8px 10px;border:1px solid #bdbdbd;border-radius:8px;background:transparent;color:inherit}
#vora-studio-root .vora-ticket-audience p{margin:0;color:#666;font-size:12px;line-height:1.5}

/* Restore readable More Info text when a modal closes and focus returns here. */
#vora-studio-root button[id^="btn-details-"]{
  background:#f9f9f8!important;background-image:none!important;
  border-color:rgba(0,0,0,.2)!important;box-shadow:none!important;
  color:var(--sdgv-body-text-color,#17253a)!important;
}
#vora-studio-root button[id^="btn-details-"]:is(:hover,:focus,:focus-visible,:active){
  background:#f9f9f8!important;
  border-color:var(--vora-button-bg,#17253a)!important;
  color:var(--sdgv-body-text-color,#17253a)!important;
}
#vora-studio-root button[id^="btn-details-"] :is(span,svg){color:inherit!important;stroke:currentColor!important}
.dark #vora-studio-root button[id^="btn-details-"]{background:#1f1f1f!important;border-color:#525252!important;color:#f5f5f5!important}
.dark #vora-studio-root button[id^="btn-details-"]:is(:hover,:focus,:focus-visible,:active){background:#262626!important;color:#fff!important}