/*! normalize.css v1.0.1 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/*
 * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/*
 * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
 * and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
  display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/*
 * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-size: 100%; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -ms-text-size-adjust: 100%; /* 2 */
}

/*
 * Addresses `font-family` inconsistency between `textarea` and other form
 * elements.
 */

html,
button,
input,
select,
textarea {
  font-family: sans-serif;
}

/*
 * Addresses margins handled incorrectly in IE 6/7.
 */

body {
  margin: 0;
  font-size: 1em;
  line-height: 1.4;
}

/* ==========================================================================
   Links
   ========================================================================== */

/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
  outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improves image quality when scaled in IE 7.
 */

img {
  border: 0; /* 1 */
  -ms-interpolation-mode: bicubic; /* 2 */
  vertical-align: middle;
}

/*
 * Corrects overflow displayed oddly in IE 9.
 */

svg:not(:root) {
  overflow: hidden;
}

/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

@font-face {
  font-family: 'Open Sans';
  src: url(/assets/open-sans/opensans-light-f728969aa4cb07d424080d6ba728c3bd095f91583d7496930bf7ba2a2acaae15.eot);
  src:
    url(/assets/open-sans/opensans-light-f728969aa4cb07d424080d6ba728c3bd095f91583d7496930bf7ba2a2acaae15.eot?#iefix) format('embedded-opentype'),
    url(/assets/open-sans/opensans-light-f3d83a9719d973ac30c86bc5e0f0d3f27b530842bc01bb8991275067703ce140.woff2) format('woff2'),
    url(/assets/open-sans/opensans-light-6aebe0bc4d960da0debab87171dbc55ec8d0938eccce947ed4064f99da3714ab.woff) format('woff'),
    url(/assets/open-sans/opensans-light-0aa987f1bc97fce237d272fb117e73597ef950037b32bf9c44b5cf21dbee201b.ttf) format('truetype'),
    url(/assets/open-sans/opensans-light-33ef08a857f5747b8f1386d10233ee490900d3a497a88f0c039fec78a3666a9a.svg#light) format('svg');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans';
  src: url(/assets/open-sans/opensans-light-italic-6b33bb8f99dba33f719f8b538411fd065694f53b88d7eda3ca5fa79f2879e76f.eot);
  src:
    url(/assets/open-sans/opensans-light-italic-6b33bb8f99dba33f719f8b538411fd065694f53b88d7eda3ca5fa79f2879e76f.eot?#iefix) format('embedded-opentype'),
    url(/assets/open-sans/opensans-light-italic-c12c67206552acbbf9cd7973e0b73e96dc2cd52c6f8a827aeed9e46285879c57.woff2) format('woff2'),
    url(/assets/open-sans/opensans-light-italic-773489e2ae1ecb8d1fecf665c05a86cc59645e39b3644cf3742e312eb16d5947.woff) format('woff'),
    url(/assets/open-sans/opensans-light-italic-67684a511c6f0fd03578ec95fd6b1623f7bd33df7fec4f5d2b92aefc7727267c.ttf) format('truetype'),
    url(/assets/open-sans/opensans-light-italic-51a87c6c6040bce8dbf1bf0004925da27b1bcc7ef464fb05799613619050b307.svg#regular) format('svg');
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: 'Open Sans';
  src: url(/assets/open-sans/opensans-regular-b3242375facd1aa320475128af454f2dabbe53e887165c77e1da46983fd74ca5.eot);
  src:
    url(/assets/open-sans/opensans-regular-b3242375facd1aa320475128af454f2dabbe53e887165c77e1da46983fd74ca5.eot?#iefix) format('embedded-opentype'),
    url(/assets/open-sans/opensans-regular-3fbda385cb40fea29191a962cfd934ebc1243a5262495f8a37480eed4dc0953e.woff2) format('woff2'),
    url(/assets/open-sans/opensans-regular-05ace240b557f7c631cc381a491a4dba52cc978bbbe8c190034c3919a7af62dd.woff) format('woff'),
    url(/assets/open-sans/opensans-regular-5cdaf5f4b04e06592d90c459db5e9c5ade424a602d002756d1d1bec2586d39f9.ttf) format('truetype'),
    url(/assets/open-sans/opensans-regular-cf2f0f95047cbe7905be9a0ccf8b55b5bf12bcde2b61d24b43bcc501d0674466.svg#regular) format('svg');
  font-weight: normal; /* same as 400 */
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans';
  src: url(/assets/open-sans/opensans-regular-italic-8c0ccd8b4745c93cd380b46c8c8b8652c0643013630b73d05133c5f2e0e6c9b1.eot);
  src:
    url(/assets/open-sans/opensans-regular-italic-8c0ccd8b4745c93cd380b46c8c8b8652c0643013630b73d05133c5f2e0e6c9b1.eot?#iefix) format('embedded-opentype'),
    url(/assets/open-sans/opensans-regular-italic-6daa9e89ee4d0ede93188219b50407f99e3f7943377483d8f41366be17d10be7.woff2) format('woff2'),
    url(/assets/open-sans/opensans-regular-italic-c4bc2c934c89a016b38d63baf5f0bdfa8d827748d81c17f454216058ac1d696b.woff) format('woff'),
    url(/assets/open-sans/opensans-regular-italic-7a6c1a992f007c7b42b8bc19358389aba5be9e2e859f2af227fffa65e8355e74.ttf) format('truetype'),
    url(/assets/open-sans/opensans-regular-italic-aef1734a88db6657a913fbf0706c4d9362cffb7ff3972f8e9e18c5f10bffe5d3.svg#regular) format('svg');
  font-weight: normal; /* same as 400 */
  font-style: italic;
}

@font-face {
  font-family: 'Open Sans';
  src: url(/assets/open-sans/opensans-semibold-500d718680c750dc9a5cbb84985680b06e485b5646d4695eaf07a3341c7e0b72.eot);
  src:
    url(/assets/open-sans/opensans-semibold-500d718680c750dc9a5cbb84985680b06e485b5646d4695eaf07a3341c7e0b72.eot?#iefix) format('embedded-opentype'),
    url(/assets/open-sans/opensans-semibold-398e963e019b067aca78ac3dcc913e9af2bb324ad7c287adae3d7a6b334b5fc9.woff2) format('woff2'),
    url(/assets/open-sans/opensans-semibold-e20769652dd9706979bea9e3b92bcb27af3d47f05e7199fac566a43ebefb291f.woff) format('woff'),
    url(/assets/open-sans/opensans-semibold-ea9af7e30261507b76a8a2d87c825716190e6d590c3ea302a2fab97417250e9c.ttf) format('truetype'),
    url(/assets/open-sans/opensans-semibold-cb8d14b175e7cbfc335f097db9bf6bb66d2762a5c71248d371ff54729ee07d35.svg#regular) format('svg');
  font-weight: 600; /* semibold */
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans';
  src: url(/assets/open-sans/opensans-bold-d67162fd2b40c73a681a7566172ba51f5507b928c9b6ee9ece13a8887f2db6eb.eot);
  src:
    url(/assets/open-sans/opensans-bold-d67162fd2b40c73a681a7566172ba51f5507b928c9b6ee9ece13a8887f2db6eb.eot?#iefix) format('embedded-opentype'),
    url(/assets/open-sans/opensans-bold-0f03116619a86e67f8fc63869cab145bdd158ddef553dc9cb05038686761258c.woff2) format('woff2'),
    url(/assets/open-sans/opensans-bold-ab7b45543bcdc40223db2b6a84f9a5b47b91a5df6754eddeab45cd3ffdb7d19b.woff) format('woff'),
    url(/assets/open-sans/opensans-bold-a292ed5baa82537cd0fcf12da0b23776dc035913aa0e598d821f5e8a9e9b742d.ttf) format('truetype'),
    url(/assets/open-sans/opensans-bold-9a864d5b2dc52e4d22dd7804b47a9e6c1f96e3dbfe8e013fe53d7ba70c19a6fb.svg#bold) format('svg');
  font-weight: bold; /* 700 */
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans';
  src: url(/assets/open-sans/opensans-extrabold-8a6eea707a67c6df1bc905621d593141e6dc964345db22a24364e73b27746099.eot);
  src:
    url(/assets/open-sans/opensans-extrabold-8a6eea707a67c6df1bc905621d593141e6dc964345db22a24364e73b27746099.eot?#iefix) format('embedded-opentype'),
    url(/assets/open-sans/opensans-extrabold-3041e7e248010ef4990013edbd1ea5f00d4cfcc397b5cbbec24c581b3232fee1.woff2) format('woff2'),
    url(/assets/open-sans/opensans-extrabold-4d600b5514211a7c2fe50ed179ec54b106705dfdbd65fcdbb0636b54d84fa5b0.woff) format('woff'),
    url(/assets/open-sans/opensans-extrabold-61acfc411689640430c30a81cbe99d0ca72438c8a0ac73202781f77fdeb7dd4c.ttf) format('truetype'),
    url(/assets/open-sans/opensans-extrabold-5934f815ca980944190b153a1ab2dabe0e9b114aad328ff041a06a3a83d9fbf8.svg#extrabold) format('svg');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'tickit-icons-frontend';
  src:
    url(/assets/icons/tickit-icons-frontend-a4ee6af48fcbddb4f478b718c803aa1eac9139460246ab03e56accb8e2c12626.eot?6cec4e453be269947e9236d9e7a4ccf8?#iefix)
      format('embedded-opentype'),
    url(/assets/icons/tickit-icons-frontend-ec0b33fa1b3e4134fed5ae8bb965d9e669b256fcdcbefbdcb2aa807761b7f71f.woff2?6cec4e453be269947e9236d9e7a4ccf8) format('woff2'),
    url(/assets/icons/tickit-icons-frontend-2636f5302a809df85c6e35e16c0f10bb9c7d4792d6289f104ca8c6ac4678c4b2.woff?6cec4e453be269947e9236d9e7a4ccf8) format('woff'),
    url(/assets/icons/tickit-icons-frontend-cad23050e50a9b961fffe21213f301626288377ebba6c4424777385b8854f1df.ttf?6cec4e453be269947e9236d9e7a4ccf8) format('truetype'),
    url(/assets/icons/tickit-icons-frontend-34c7c67591ee842ce9771d857e7ca72932ca44d28e84b673d9ec578c56d1c40b.svg?6cec4e453be269947e9236d9e7a4ccf8#tickit-icons-frontend)
      format('svg');
}

.ti-camera:before {
  content: '\f101';
}

.ti-checkmark-circle:before {
  content: '\f102';
}

.ti-checkmark:before {
  content: '\f103';
}

.ti-close-light:before {
  content: '\f104';
}

.ti-close:before {
  content: '\f105';
}

.ti-download-ticket:before {
  content: '\f106';
}

.ti-edit-ticket:before {
  content: '\f107';
}

.ti-email-ticket:before {
  content: '\f108';
}

.ti-en:before {
  content: '\f109';
}

.ti-exclamation:before {
  content: '\f10a';
}

.ti-facebook-isolated:before {
  content: '\f10b';
}

.ti-facebook:before {
  content: '\f10c';
}

.ti-fr-ca:before {
  content: '\f10d';
}

.ti-fr:before {
  content: '\f10e';
}

.ti-homepage:before {
  content: '\f10f';
}

.ti-instagram:before {
  content: '\f110';
}

.ti-left-light:before {
  content: '\f111';
}

.ti-lock:before {
  content: '\f112';
}

.ti-magnifier:before {
  content: '\f113';
}

.ti-profile:before {
  content: '\f114';
}

.ti-qr-code:before {
  content: '\f115';
}

.ti-right-light:before {
  content: '\f116';
}

.ti-thin-plus:before {
  content: '\f117';
}

.ti-tiktok:before {
  content: '\f118';
}

.ti-twitter-isolated:before {
  content: '\f119';
}

.ti-twitter:before {
  content: '\f11a';
}

.ti-upload:before {
  content: '\f11b';
}

.ti:before {
  font-family: tickit-icons-frontend !important;
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ti:before {
  position: relative;
  top: 2px;
}

:root {
  /* ============================================================
     PRIMITIVE TOKENS — raw values, not meant for direct use in
     component CSS. Reference via semantic tokens below.
     ============================================================ */

  /* Layout */
  --container-gutter: 36px;
  --container-max-width: 1200px;
  --container-max-width-m: 960px;
  --container-max-width-s: 720px;
  --container-max-width-xs: 580px;
  --container-max-width-xxs: 420px;
  --vertical-content-gap: 72px;
  --medium-container-margin-inline: auto;

  /* Spacing (legacy; prefer --v5-space-* scale) */
  --space-s: 12px;
  --space-m: 24px;
  --space-l: 48px;
  --grid-column-gap: var(--space-m);
  --grid-row-gap: var(--space-m);

  /* Brand palette */
  --tickit-store-color: #a08f68;
  --tickit-store-color-75a: rgb(from var(--tickit-store-color) r g b / 75%);
  --tickit-store-color-60a: rgb(from var(--tickit-store-color) r g b / 60%);
  --tickit-store-color-10a: rgb(from var(--tickit-store-color) r g b / 10%);
  --tickit-store-color-7a: rgb(from var(--tickit-store-color) r g b / 7%);
  --tickit-store-color-inverted: #fdfdfd;

  /* Grey palette */
  --tickit-grey-darkest: #646464;
  --tickit-grey-dark: #8c8c8c;
  --tickit-grey-medium: #c9c9c9;
  --tickit-grey-light: #e3e3e3;
  --tickit-grey-lightest: #f2f2f2;
  --tickit-offwhite: #f8f8f8;
  --tickit-white: #fdfdfd;
  --tickit-lightgrey: #f7f7f7;

  /* Derived brand colors */
  --tickit-mix-color: color-mix(
    in srgb,
    var(--tickit-store-color),
    var(--tickit-grey-lightest) 95%
  );
  --tickit-bg-mix-color: color-mix(in srgb, var(--tickit-store-color), #fff 97%);
  --tickit-border-color: var(--tickit-mix-color);
  --tickit-highlight-background-color: color-mix(in srgb, var(--tickit-store-color), #fff 70%);

  /* Status (primitive) */
  --success-color: #8ac440;
  --error-color: #c2534d;

  --v5-alert-error-bg: var(--error-color);
  --v5-alert-error-text: #fff;
  --v5-alert-default-bg: var(--v5-surface-muted);
  --v5-alert-default-text: var(--v5-text-primary);

  /* ============================================================
     V5 SCALE TOKENS — spacing, radii, control heights
     ============================================================ */

  --v5-radius-sm: 6px;
  --v5-radius-md: 10px;
  --v5-radius-lg: 12px;

  --v5-space-0: 0;
  --v5-space-2: 2px;
  --v5-space-4: 4px;
  --v5-space-6: 6px;
  --v5-space-8: 8px;
  --v5-space-9: 9px;
  --v5-space-10: 10px;
  --v5-space-12: 12px;
  --v5-space-16: 16px;
  --v5-space-17: 17px;
  --v5-space-18: 18px;
  --v5-space-22: 22px;
  --v5-space-24: 24px;
  --v5-space-30: 30px;
  --v5-space-36: 36px;
  --v5-space-48: 48px;
  --v5-space-72: 72px;
  --v5-space-120: 120px;

  --v5-control-height-xs: 24px;
  --v5-control-height-sm: 30px;
  --v5-control-height-md: 36px;
  --v5-control-height-lg: 42px;
  --v5-control-height-xl: 60px;

  /* ============================================================
     V5 SEMANTIC TOKENS — use these in component CSS
     ============================================================ */

  /* Typography */
  --v5-font-family: 'Open Sans', sans-serif;
  --v5-text-primary: var(--tickit-grey-darkest);
  --v5-text-secondary: var(--tickit-grey-dark);
  --v5-text-muted: #b4b4b4;
  --v5-text-subtle: #8b8b8b;

  /* Surfaces */
  --v5-surface-base: #fff;
  --v5-surface-muted: #f7f7f7;
  --v5-surface-quiet: rgba(235, 235, 235, 0.5);
  --v5-surface-raised: var(--tickit-lightgrey);

  /* Borders */
  --v5-border-subtle: #ebebeb;
  --v5-border-default: var(--tickit-grey-light);
  --v5-border-input: #ccc;

  /* Accent */
  --v5-accent: var(--tickit-store-color);
  --v5-accent-contrast: #fff;
  --v5-accent-hover: color-mix(in srgb, var(--v5-accent), #fff 50%);
  --v5-accent-active: color-mix(in srgb, var(--v5-accent) 92%, #000);

  /* Shadows */
  --v5-shadow-inset-soft: inset 2px 2px 0 #f7f7f7, inset -2px -2px 0 #f7f7f7;
  --v5-shadow-drop: 0 1px 0 rgba(0, 0, 0, 0.05);
  --v5-shadow-menu: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* Focus */
  --v5-focus-ring: 0 0 0 2px color-mix(in srgb, var(--v5-accent) 20%, transparent);

  /* Status */
  --v5-status-available: #6f8c3e;
  --v5-status-available-bg: rgba(127, 166, 71, 0.15);
  --v5-status-pending: #ba9345;
  --v5-status-pending-bg: rgba(212, 171, 76, 0.15);
  --v5-status-sold: #c2534d;
  --v5-status-sold-bg: rgba(194, 83, 77, 0.15);

  /* ============================================================
     COMPONENT TOKENS — derived from semantic tokens
     ============================================================ */

  /* Base typography */
  --open-sans: var(--v5-font-family);
  --base-font-size: 16px;
  --base-line-height: 1.5;
  --base-font-family: var(--v5-font-family);
  --base-font-weight: 400;
  --base-color: var(--v5-text-primary);
  --link-color: var(--v5-accent);
  --body-background: var(--tickit-white);

  --p-small-font-size: 14px;
  --p-small-font-weight: var(--base-font-weight);
  --p-small-line-height: 20px;
  --p-small-horizontal-margin: 12px;

  --p-mid-font-size: 17px;
  --p-mid-font-weight: var(--base-font-weight);
  --p-mid-line-height: 24px;
  --p-mid-horizontal-margin: 12px;

  /* Headings */
  --subhed-font-family: var(--v5-font-family);
  --subhed-font-weight: 600;
  --subhed-color: var(--v5-text-primary);

  /* Masthead */
  --masthead-font-family: var(--v5-font-family);
  --masthead-font-weight: 300;
  --masthead-title-font-style: normal;
  --masthead-title-font-size: 54px;
  --masthead-title-letter-spacing: 8px;
  --masthead-title-line-height: 1.22222;
  --masthead-title-text-transform: uppercase;
  --masthead-mobile-title-font-size: 24px;
  --masthead-mobile-title-line-height: 1.25;
  --masthead-subhed-font-size: calc(var(--masthead-title-font-size) * 0.75);
  --masthead-subhed-line-height: 1.22;
  --masthead-mobile-subhed-font-size: calc(var(--masthead-mobile-title-font-size) * 0.75);
  --masthead-mobile-subhed-line-height: calc(var(--masthead-mobile-title-line-height) * 0.75);
  --masthead-mask-background: rgba(0, 0, 0, 0.55);
  --masthead-background-color: color-mix(in srgb, var(--tickit-store-color) 25%, #000);

  /* Event TOC */
  --event-toc-title-font-weight: var(--subhed-font-weight);
  --event-toc-title-font-family: var(--subhed-font-family);
  --event-toc-title-text-transform: none;
  --event-toc-title-color: var(--subhed-color);
  --event-toc-excerpt-font-weight: var(--base-font-weight);
  --event-toc-excerpt-font-family: var(--base-font-family);
  --event-toc-color: var(--base-color);
  --event-toc-background-color: transparent;

  /* Form fields */
  --v5-input-height: var(--v5-control-height-xl);
  --v5-input-padding-block: var(--v5-space-18);
  --v5-input-padding-inline: var(--v5-space-18);
  --v5-input-font-size: 18px;
  --v5-input-line-height: 24px;
  --v5-input-font-family: var(--v5-font-family);
  --v5-input-font-weight: 400;
  --v5-input-color: var(--v5-text-primary);
  --v5-input-bg: var(--v5-surface-base);
  --v5-input-border-color: var(--v5-border-input);
  --v5-input-border-radius: var(--v5-radius-sm);
  --v5-input-shadow: var(--v5-shadow-inset-soft);
  --v5-input-placeholder-color: var(--v5-text-muted);
  --v5-input-focus-border-color: var(--v5-accent);
  --v5-input-focus-shadow: var(--v5-focus-ring);
  --v5-input-error-border-color: var(--error-color);
  --v5-label-color: var(--v5-text-primary);
  --v5-label-font-size: 18px;
  --v5-label-line-height: 1;
  --v5-label-font-weight: 600;
  --v5-label-font-family: var(--v5-font-family);
  --v5-label-gap: var(--v5-space-18);

  /* Featured form (framed container) */
  --v5-featured-form-bg: #fdfdfd;
  --v5-featured-form-border-color: var(--v5-border-subtle);
  --v5-featured-form-border-radius: var(--v5-radius-lg);
  --v5-featured-form-padding: var(--v5-space-72);
  --v5-featured-form-section-gap: var(--v5-space-48);
  --v5-featured-form-field-gap: var(--v5-space-36);

  /* Table / datagrid */
  --v5-table-cell-color: var(--v5-text-primary);
  --v5-table-cell-font-family: var(--v5-font-family);
  --v5-table-cell-font-size: 13px;
  --v5-table-cell-font-weight: 400;
  --v5-table-cell-line-height: 1.5;
  --v5-table-cell-padding-block: var(--v5-space-18);
  --v5-table-cell-padding-inline: var(--v5-space-24);
  --v5-table-border-color: var(--v5-border-subtle);
  --v5-table-header-font-weight: 700;
  --v5-table-header-height: var(--v5-control-height-xl);
  --v5-table-staff-note-color: var(--v5-text-subtle);
  --v5-table-staff-note-font-size: 11px;

  /* Dropdown */
  --v5-dropdown-bg: var(--v5-select-bg);
  --v5-dropdown-border-color: var(--v5-select-border-color);
  --v5-dropdown-border-radius: var(--v5-select-border-radius);
  --v5-dropdown-inset-shadow: var(--v5-select-inset-shadow);
  --v5-dropdown-menu-shadow: var(--v5-shadow-menu);
  --v5-dropdown-font-family: var(--v5-select-font-family);
  --v5-dropdown-font-size: var(--v5-select-font-size);
  --v5-dropdown-font-weight: var(--v5-select-font-weight);
  --v5-dropdown-color: var(--v5-select-color);
  --v5-dropdown-chevron-color: var(--v5-select-chevron-color);
  --v5-dropdown-height: var(--v5-select-height);
  --v5-dropdown-padding: var(--v5-select-padding);
  --v5-dropdown-focus-border-color: var(--v5-select-focus-border-color);

  /* Select */
  --v5-select-bg: var(--v5-surface-muted);
  --v5-select-color: var(--v5-text-primary);
  --v5-select-chevron-color: var(--v5-text-subtle);
  --v5-select-border-color: var(--v5-border-input);
  --v5-select-border-radius: var(--v5-radius-sm);
  --v5-select-font-family: var(--v5-font-family);
  --v5-select-font-size: 18px;
  --v5-select-font-weight: 400;
  --v5-select-line-height: 1;
  --v5-select-height: var(--v5-control-height-xl);
  --v5-select-padding: var(--v5-space-18);
  --v5-select-gap: var(--v5-space-12);
  --v5-select-inset-shadow: inset 2px 2px 0 #f7f7f7, inset -2px -2px 0 #f7f7f7;
  --v5-select-focus-border-color: var(--v5-text-subtle);
  --v5-select-error-border-color: #c2534d;

  /* Footer */
  --footer-nav-bar-height: 96px;
  --footer-nav-bar-padding: 36px;
  --footer-nav-bar-background-color: var(--masthead-background-color);

  /* Seatmap */
  --seatmap-header-height: 90px;
  --seatmap-gutter: 0px;
  --seatmap-tooltip-width: 380px;
  --seatmap-tooltip-background-color: var(--tickit-bg-mix-color);
  --seatmap-border-color: #d4d4d4;
  --seatmap-accent-color: #399;
  --seatmap-bright-color: color-mix(in srgb, var(--tickit-store-color) 90%, var(--tickit-white));
  --seatmap-brighter-color: var(--tickit-store-color);
  --seatmap-available-fill-color: color-mix(in srgb, var(--tickit-store-color) 25%, #000);
  --seatmap-available-stroke-color: color-mix(in srgb, var(--tickit-store-color) 25%, #000);
  --seatmap-available-hover-fill-color: var(--seatmap-bright-color);
  --seatmap-available-hover-stroke-color: var(--seatmap-bright-color);
  --seatmap-active-fill-color: var(--seatmap-bright-color);
  --seatmap-active-stroke-color: var(--seatmap-bright-color);
  --seatmap-in-cart-fill-color: var(--seatmap-bright-color);
  --seatmap-in-cart-stroke-color: var(--seatmap-bright-color);
  --seatmap-in-cart-hover-fill-color: var(--seatmap-brighter-color);
  --seatmap-in-cart-hover-stroke-color: var(--seatmap-brighter-color);
}

.clearfix::before,
.clearfix::after {
  display: table;
  content: '';
}

.clearfix::after {
  clear: both;
}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.inactive-link {
  cursor: default;
}

@media screen and (max-width: 768px) {
}

@media screen and (max-width: 620px) {
  :root {
    --vertical-content-gap: 48px;
    --container-gutter: 24px;
  }
}

@media screen and (max-width: 400px) {
  :root {
    --vertical-content-gap: 24px;
    --container-gutter: 12px;
  }
}

body {
  color: var(--v5-text-primary);
  background-color: var(--body-background);
}

.layout-container {
  margin: var(--vertical-content-gap) auto;
  padding: 0 var(--container-gutter);
}

.v5-debug .layout-container {
  outline: 1px solid red;
  background-color: rgba(255, 0, 0, 0.1);
}

.layout-container-no-gap {
  margin: auto;
}

.layout-content,
.layout-content-m,
.layout-content-s,
.layout-content-xs,
.layout-content-xxs,
.layout-content-max {
  -ms-flex: 1;
      flex: 1;
  margin: 0 auto;
  width: 100%;
  max-width: var(--container-max-width);
  box-sizing: border-box;
}

.v5-debug .layout-content,
.v5-debug .layout-content-m,
.v5-debug .layout-content-s,
.v5-debug .layout-content-xs,
.v5-debug .layout-content-xxs,
.v5-debug .layout-content-max {
  outline: 1px solid blue;
  background-color: rgba(200, 200, 200, 0.15);
}

.layout-content-m {
  max-width: var(--container-max-width-m);
}

.layout-content-s {
  max-width: var(--container-max-width-s);
}

.layout-content-xs {
  max-width: var(--container-max-width-xs);
}

.layout-content-xxs {
  max-width: var(--container-max-width-xxs);
}

.layout-content-max {
  max-width: none;
}

.grid {
  grid-column-gap: var(--grid-column-gap);
  grid-row-gap: var(--grid-row-gap);
  display: grid;
  grid-template-columns: 1fr;
}

.grid > * {
    /* HACK for childs in overflow */
    min-width: 0;
  }

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
  }
}

.grid > div {
  padding: calc(var(--grid-row-gap) / 2) 0;
  border-radius: 5px;
  font-size: 0.875rem;
}

.v5-debug .grid > div {
  outline: 1px solid rgba(100, 100, 100, 0.5);
}

p {
  color: var(--base-color);
  font: var(--base-font-weight) var(--base-font-size) / var(--base-line-height)
    var(--base-font-family);
  margin: 0 0 24px;
}

a {
  text-decoration: none;
  color: var(--link-color);
  border-bottom: 1px solid var(--tickit-mix-color);
}

a:hover,
  a:focus {
    outline: 0;
    border-color: var(--tickit-store-color);
  }

a.secondary {
  color: var(--v5-text-secondary);
}

a.secondary:hover,
  a.secondary:focus {
    color: var(--v5-text-primary);
    border-color: transparent;
  }

.store-link-color {
  color: var(--link-color);
}

h2 {
  color: var(--subhed-color);
  font: var(--subhed-font-weight) 24px / 1.5 var(--subhed-font-family);
  margin: 24px 0;
}

h2,
  h2 a {
    color: var(--subhed-color);
    border: 0;
  }

h3 {
  color: var(--subhed-color);
  font: var(--subhed-font-weight) 20px / 1.5 var(--subhed-font-family);
  margin: 24px 0;
}

h3,
  h3 a {
    color: var(--subhed-color);
    border: 0;
  }

h4 {
  color: var(--subhed-color);
  font: 700 18px / 1.5 var(--subhed-font-family);
  margin: 24px 0;
}

h4,
  h4 a {
    color: var(--subhed-color);
    border: 0;
  }

h2.h2 {
  font: var(--subhed-font-weight) 38px / 1.5 var(--subhed-font-family);
  margin: 24px 0;
}

h2.h2,
  h2.h2 a {
    color: var(--subhed-color);
    border: 0;
  }

hgroup {
  margin: 24px 0;
}

hgroup h1,
  hgroup h2,
  hgroup h3 {
    margin: 0 0 var(--v5-space-6);
  }

hgroup p {
    color: var(--v5-text-subtle);
  }

ul,
ol {
  color: var(--base-color);
  font: 600 15px / 1.5 var(--base-font-family);
  list-style: disc;
  margin: 0 0 24px;
  padding-left: 22px;
}

ul li,
ol li {
  margin-bottom: 6px;
}

ul li:last-child,
ol li:last-child {
  margin-bottom: 0;
}

ol {
  list-style: decimal;
}

figure {
  margin: 0 0 24px;
}

figure img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

.small p {
  margin: var(--p-small-horizontal-margin) 0;
  font-size: var(--p-small-font-size);
  font-weight: var(--p-small-font-weight);
  line-height: var(--p-small-line-height);
}

::-moz-selection {
  text-shadow: none;
  background-color: var(--tickit-highlight-background-color);
}

::selection {
  text-shadow: none;
  background-color: var(--tickit-highlight-background-color);
}

.heading-with-action {
  width: 100%;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1rem;
}

.heading-with-action .heading {
    -ms-flex: 1;
        flex: 1;
  }

.heading-with-action .heading > * {
    margin: 0;
  }

.heading-with-action .action {
    margin-left: var(--space-m);
    text-align: right;
  }

.section-list section {
    border-bottom: 1px solid var(--tickit-gray-6);
    margin-bottom: calc(var(--space-l) * 2);
    padding-bottom: calc(var(--space-l) * 2);
  }

.section-list section:last-child {
    border-bottom: none;
  }

.minimal-list {
  padding: 0;
  margin: 0;
}

.minimal-list li {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
  }

figure {
  display: block;
  margin: 0;
  padding: 0;
}

figure figcaption {
    padding: calc(var(--space-l) * 0.5) 0;
    color: var(--v5-text-muted);
  }

.super-admin-notice {
  font-family: monospace;
}

/* ============================================================
   v5 Forms
   Text inputs, textareas, selects, labels, and field groups.

   Works on native elements within a v5 layout — no extra
   classes needed for basic inputs.
   ============================================================ */

/* ----- Labels ----- */

label {
  color: var(--v5-label-color);
  display: block;
  font: var(--v5-label-font-weight) var(--v5-label-font-size) / var(--v5-label-line-height)
    var(--v5-label-font-family);
  margin-bottom: var(--v5-label-gap);
}

label .hint {
  color: var(--v5-text-subtle);
  font-weight: 400;
}

/* ----- Text inputs & textareas ----- */

input[type='text'],
input[type='email'],
input[type='password'],
input[type='search'],
input[type='url'],
input[type='tel'],
input[type='number'],
input[type='date'],
input[type='time'],
input[type='datetime-local'],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--v5-input-bg);
  border: 1px solid var(--v5-input-border-color);
  border-radius: var(--v5-input-border-radius);
  box-shadow: var(--v5-input-shadow);
  box-sizing: border-box;
  color: var(--v5-input-color);
  font: var(--v5-input-font-weight) var(--v5-input-font-size) / var(--v5-input-line-height)
    var(--v5-input-font-family);
  height: var(--v5-input-height);
  padding: var(--v5-input-padding-block) var(--v5-input-padding-inline);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  width: 100%;
}

textarea {
  height: auto;
  min-height: calc(var(--v5-input-height) * 2);
  resize: vertical;
}

/* Placeholder */

input::-moz-placeholder, textarea::-moz-placeholder {
  color: var(--v5-input-placeholder-color);
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: var(--v5-input-placeholder-color);
}

input::placeholder,
textarea::placeholder {
  color: var(--v5-input-placeholder-color);
}

/* Focus */

input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='search']:focus,
input[type='url']:focus,
input[type='tel']:focus,
input[type='number']:focus,
input[type='date']:focus,
input[type='time']:focus,
input[type='datetime-local']:focus,
textarea:focus {
  border-color: var(--v5-input-focus-border-color);
  box-shadow: var(--v5-input-focus-shadow);
  outline: none;
}

/* Error / invalid */

input[aria-invalid='true'],
textarea[aria-invalid='true'] {
  border-color: var(--v5-input-error-border-color);
}

input[aria-invalid='true']:focus,
textarea[aria-invalid='true']:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--v5-input-error-border-color) 20%, transparent);
}

/* Disabled */

input:disabled,
textarea:disabled {
  background-color: var(--v5-surface-muted);
  color: var(--v5-text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ============================================================
   Featured form
   A framed form container with lighter background and border.
   Wrap any form in .v5-featured-form to get the treatment.

   Styles the existing .form-wrapper / .control-group / .control
   structure produced by the checkout partials — no markup
   changes required.
   ============================================================ */

.v5-featured-form {
  background-color: var(--v5-featured-form-bg);
  border: 1px solid var(--v5-featured-form-border-color);
  border-radius: var(--v5-featured-form-border-radius);
  padding: var(--v5-featured-form-padding);
}

/* Section-level spacing (form-wrapper children) */

.v5-featured-form .form-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}

.v5-featured-form .control-group,
.v5-featured-form .form-group {
  margin-bottom: var(--v5-featured-form-field-gap);
}

/* Validation error banner */

.validation-error-notice {
  margin: 0 0 var(--v5-space-36);
  background-color: var(--v5-alert-error-bg);
  border: 1px solid var(--v5-alert-error-bg);
  border-radius: var(--v5-radius-sm);

  padding: var(--v5-space-24);
}

.validation-error-notice .text,
  .validation-error-notice p {
    color: var(--v5-alert-error-text);
  }

.validation-error-notice p:last-child {
    margin-bottom: 0;
  }

.validation-error-notice .text {
  font: 400 16px / 1.5 var(--v5-font-family);
}

/* Checkbox controls */

.v5-featured-form .checkbox-control-group label {
  -ms-flex-align: start;
      align-items: flex-start;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-weight: 400;
  gap: var(--v5-space-12);
}

.v5-featured-form .checkbox-control-group .checkbox {
  accent-color: var(--v5-accent);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 24px;
  width: 24px;
}

/* Submit button area */

.v5-featured-form .checkout-control-group .btn-lg {
  background-color: var(--v5-accent);
  border: 1px solid var(--v5-accent);
  border-radius: var(--v5-radius-sm);
  color: var(--v5-accent-contrast);
  cursor: pointer;
  font: 700 16px / 18px var(--v5-font-family);
  padding: 21px var(--v5-space-36);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
  width: 100%;
}

.v5-featured-form .checkout-control-group .btn-lg:hover {
  background-color: color-mix(in srgb, var(--v5-accent), #fff 50%);
  border-color: color-mix(in srgb, var(--v5-accent), #fff 50%);
}

/* Responsive — tighten padding on smaller screens */

@media screen and (max-width: 680px) {
  .v5-featured-form {
    padding: var(--v5-space-36);
  }
}

@media screen and (max-width: 474px) {
  .v5-featured-form {
    padding: var(--v5-space-24);
  }
}

.control-group .grid > div,
.form-group .grid > div {
  padding: 0;
}

/* ============================================================
   v5-btn
   Button component for the v5 design system.

   Variants:
     .v5-btn                          Default — neutral grey (secondary)
     .v5-btn.v5-btn-primary           Accent / store color
     .v5-btn.v5-btn-outline           Outlined, accent-tinted border
     .v5-btn.v5-btn-ghost             Transparent, accent text
     .v5-btn.v5-btn-ghost-reversed    Transparent, white text (for dark bgs)
     .v5-btn.v5-btn-global             Transparent, grey text (store-color-independent)

   Sizes:
     .v5-btn                          Default — 60px (matches form inputs)
     .v5-btn.v5-btn-md                Medium  — 36px
     .v5-btn.v5-btn-sm                Small   — 30px
     .v5-btn.v5-btn-xs                X-Small — 24px

   Modifiers:
     .v5-btn.v5-btn-block             Full width

   Works on <button>, <a>, and <input type="submit">.
   ============================================================ */

/* ----- Base (neutral grey / secondary) ----- */

.v5-btn {
  -ms-flex-align: center;
      align-items: center;
  background-color: var(--v5-border-subtle);
  border: 1px solid var(--v5-border-subtle);
  border-radius: var(--v5-radius-sm);
  box-sizing: border-box;
  color: var(--v5-text-primary);
  cursor: pointer;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-family: var(--v5-font-family);
  font-size: 16px;
  font-weight: 600;
  gap: var(--v5-space-8);
  height: var(--v5-control-height-xl);
  -ms-flex-pack: center;
      justify-content: center;
  line-height: 18px;
  padding: 0 var(--v5-space-36);
  text-align: center;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
  white-space: nowrap;
}

/* ----- States ----- */

.v5-btn:hover {
  background-color: color-mix(in srgb, var(--v5-border-subtle), #000 10%);
  border-color: color-mix(in srgb, var(--v5-border-subtle), #000 10%);
  color: var(--v5-text-primary);
  text-decoration: none;
}

.v5-btn:active {
  background-color: color-mix(in srgb, var(--v5-border-subtle), #000 25%);
  border-color: color-mix(in srgb, var(--v5-border-subtle), #000 25%);
}

.v5-btn:focus-visible {
  outline: 2px solid var(--v5-text-primary);
  outline-offset: 2px;
}

.v5-btn:disabled,
.v5-btn[disabled] {
  background-color: color-mix(in srgb, var(--v5-border-subtle), #fff 50%);
  border-color: color-mix(in srgb, var(--v5-border-subtle), #fff 50%);
  color: var(--v5-text-muted);
  cursor: default;
  pointer-events: none;
}

/* ----- Primary (accent) ----- */

.v5-btn-primary {
  background-color: var(--v5-accent);
  border-color: var(--v5-accent);
  color: var(--v5-accent-contrast);
  font-weight: 600;
}

.v5-btn-primary:hover {
  background-color: color-mix(in srgb, var(--v5-accent), #000 20%);
  border-color: color-mix(in srgb, var(--v5-accent), #000 20%);
  color: var(--v5-accent-contrast);
}

.v5-btn-primary:active {
  background-color: color-mix(in srgb, var(--v5-accent), #000 25%);
  border-color: color-mix(in srgb, var(--v5-accent), #000 25%);
}

.v5-btn-primary:focus-visible {
  outline-color: var(--v5-accent);
}

.v5-btn-primary:disabled,
.v5-btn-primary[disabled] {
  background-color: color-mix(in srgb, var(--v5-accent), #fff 50%);
  border-color: color-mix(in srgb, var(--v5-accent), #fff 50%);
  color: var(--v5-accent-contrast);
  opacity: 1;
}

/* ----- Outline (inverted) ----- */

.v5-btn-outline {
  background-color: transparent;
  border-color: color-mix(in srgb, var(--v5-accent), #fff 60%);
  color: var(--v5-accent);
}

.v5-btn-outline:hover {
  background-color: transparent;
  border-color: color-mix(in srgb, var(--v5-accent), #fff 20%);
  color: var(--v5-accent);
}

.v5-btn-outline:active {
  background-color: transparent;
  border-color: var(--v5-accent);
  color: var(--v5-accent);
}

.v5-btn-outline:disabled,
.v5-btn-outline[disabled] {
  background-color: transparent;
  border-color: color-mix(in srgb, var(--v5-accent), #fff 75%);
  color: color-mix(in srgb, var(--v5-accent), #fff 50%);
  opacity: 1;
}

/* ----- Ghost (transparent, accent text) ----- */

.v5-btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--v5-accent);
}

.v5-btn-ghost:hover {
  background-color: color-mix(in srgb, var(--v5-accent) 10%, transparent);
  border-color: transparent;
  color: var(--v5-accent);
}

.v5-btn-ghost:active {
  background-color: color-mix(in srgb, var(--v5-accent) 10%, transparent);
  border-color: transparent;
}

.v5-btn-ghost:disabled,
.v5-btn-ghost[disabled] {
  background-color: transparent;
  border-color: transparent;
  color: color-mix(in srgb, var(--v5-accent), #fff 50%);
  opacity: 1;
}

/* ----- Ghost Reversed (transparent, white text — for dark backgrounds) ----- */

.v5-btn-ghost-reversed {
  background-color: transparent;
  border-color: transparent;
  color: rgba(255, 255, 255, 0.75);
}

.v5-btn-ghost-reversed:hover {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: transparent;
  color: rgba(255, 255, 255, 0.85);
}

.v5-btn-ghost-reversed:active {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: transparent;
  color: #fff;
}

.v5-btn-ghost-reversed:disabled,
.v5-btn-ghost-reversed[disabled] {
  background-color: transparent;
  border-color: transparent;
  color: rgba(255, 255, 255, 0.4);
  opacity: 1;
}

/* ----- Global (transparent, grey text — store-color-independent) ----- */

.v5-btn-global {
  background-color: transparent;
  border-color: transparent;
  color: var(--tickit-grey-darkest);
}

.v5-btn-global:hover {
  background-color: var(--v5-surface-quiet);
  border-color: transparent;
  color: var(--v5-text-primary);
}

.v5-btn-global:active {
  background-color: var(--v5-border-subtle);
  border-color: transparent;
  color: var(--v5-text-primary);
}

.v5-btn-global:disabled,
.v5-btn-global[disabled] {
  background-color: transparent;
  border-color: transparent;
  color: var(--v5-text-muted);
  opacity: 1;
}

/* ----- Sizes ----- */

.v5-btn-md {
  font-size: 14px;
  font-weight: 600;
  height: var(--v5-control-height-md);
  padding: 0 var(--v5-space-12);
}

.v5-btn-sm {
  font-size: 12px;
  font-weight: 400;
  height: var(--v5-control-height-sm);
  padding: 0 var(--v5-space-12);
}

.v5-btn-xs {
  font-size: 11px;
  font-weight: 400;
  height: var(--v5-control-height-xs);
  padding: 0 var(--v5-space-9);
}

/* ----- Block ----- */

.v5-btn-block {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.v5-btn-block + .v5-btn-block {
  margin-top: var(--v5-space-18);
}

/* ============================================================
   v5-alert
   Alert / notice banners for the v5 design system.

   Variants:
     .v5-alert                        Default — neutral grey
     .v5-alert.v5-alert-error         Error — red
     .v5-alert.v5-alert-store         Store color — accent tint

   Based on the existing .validation-error-notice pattern.
   ============================================================ */

/* ----- Base (default / neutral) ----- */

.v5-alert {
  background-color: var(--v5-alert-default-bg);
  border: 1px solid var(--v5-alert-default-bg);
  border-radius: var(--v5-radius-sm);
  margin: 0 0 var(--v5-space-36);
  padding: var(--v5-space-24);
  text-align: center;
}

.v5-alert p,
  .v5-alert .text {
    color: var(--v5-alert-default-text);
    font: 400 16px / 1.5 var(--v5-font-family);
  }

.v5-alert p:last-child {
    margin-bottom: 0;
  }

/* ----- Error ----- */

.v5-alert-error {
  background-color: var(--v5-alert-error-bg);
  border-color: var(--v5-alert-error-bg);
}

.v5-alert-error p,
  .v5-alert-error .text {
    color: var(--v5-alert-error-text);
  }

/* ----- Store (accent tint) ----- */

.v5-alert-store {
  background-color: var(--v5-accent);
  border-color: color-mix(in srgb, var(--v5-accent), #fff 70%);
}

.v5-alert-store,
  .v5-alert-store p,
  .v5-alert-store .text {
    color: var(--v5-accent-contrast);
  }

/* ============================================================
   v5-select-input
   Native <select> with appearance: none + CSS chevron.
   Used for standalone selects that aren't wrapped by the JS
   select-box system (e.g. filter dropdowns).
   ============================================================ */

.v5-select-input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--v5-select-bg);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--v5-select-chevron-color) 50%),
    linear-gradient(135deg, var(--v5-select-chevron-color) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) center,
    calc(100% - 17px) center;
  background-repeat: no-repeat;
  background-size:
    5px 5px,
    5px 5px;
  border: 1px solid var(--v5-select-border-color);
  border-radius: var(--v5-select-border-radius);
  box-shadow: var(--v5-select-inset-shadow);
  box-sizing: border-box;
  color: var(--v5-select-color);
  cursor: pointer;
  font: var(--v5-select-font-weight) var(--v5-select-font-size) / var(--v5-select-line-height)
    var(--v5-select-font-family);
  height: var(--v5-select-height);
  padding: 0 42px 0 var(--v5-select-padding);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  width: 100%;
}

.v5-select-input:focus {
  border-color: var(--v5-select-focus-border-color);
  outline: none;
}

.v5-select-input:disabled {
  background-color: #f7f7f7;
  border-color: var(--v5-border-subtle);
  color: #ccc;
  cursor: not-allowed;
}

.v5-select-input.has-error,
.v5-select-input[aria-invalid='true'] {
  border-color: var(--v5-select-error-border-color);
}

/* ----- Medium variant (Select 36) ----- */

.v5-select-input.v5-select-input-md {
  border-radius: 3px;
  font-size: 14px;
  height: var(--v5-control-height-md);
  padding: 0 34px 0 var(--v5-space-12);
}

/* ============================================================
   JS-powered select boxes (selectBoxes.ts)

   Styles the DOM created by selectBoxes.ts:
   .select > .select-styled + .select-options
   ============================================================ */

.select-hidden {
  display: none;
  visibility: hidden;
}

.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  width: 100%;
  height: var(--v5-select-height);
}

/* Quantity selects → medium height */

.select:has(.quantity-input) {
  height: var(--v5-control-height-md);
}

/* Hide native selects initially so JS can replace them.
   Matches the selector in selectBoxes.ts */

select.quantity-input,
.form-wrapper select {
  visibility: hidden;
}

.form-wrapper select.no-select-style {
  visibility: visible;
}

.select-styled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--v5-select-bg);
  border: 1px solid var(--v5-select-border-color);
  border-radius: var(--v5-select-border-radius);
  box-shadow: var(--v5-select-inset-shadow);
  box-sizing: border-box;
  color: var(--v5-select-color);
  font-family: var(--v5-select-font-family);
  font-size: var(--v5-select-font-size);
  font-weight: var(--v5-select-font-weight);
  padding: 0 42px 0 var(--v5-select-padding);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.select-styled::after {
    content: '';
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-color: var(--v5-select-chevron-color) transparent transparent transparent;
    position: absolute;
    top: 50%;
    right: var(--v5-select-padding);
    margin-top: -2px;
  }

.select-styled:hover {
    border-color: var(--v5-select-focus-border-color);
  }

.select-styled:active::after,
  .select-styled.active::after {
    border-color: transparent transparent var(--v5-select-chevron-color) transparent;
    margin-top: -7px;
  }

/* Quantity selects → medium trigger */

.select:has(.quantity-input) .select-styled {
  font-size: 14px;
  border-radius: 3px;
  padding: 0 34px 0 var(--v5-space-12);
}

.select:has(.quantity-input) .select-styled::after {
    right: var(--v5-space-12);
  }

.select-styled-disabled {
  pointer-events: none;
  background-color: #f7f7f7;
  border-color: var(--v5-border-subtle);
  color: #ccc;
}

.select-styled-disabled,
  .select-styled-disabled:hover {
    background-color: #f7f7f7;
  }

.select-styled-disabled::after {
    border-color: #ccc transparent transparent transparent;
  }

.select-styled-highlight {
  border-color: var(--v5-accent);
  box-shadow: 0 0 4px var(--v5-accent);
}

.select-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  margin: 0;
  padding: var(--v5-space-4) 0;
  list-style: none;
  background-color: var(--v5-select-bg);
  border: 1px solid var(--v5-select-border-color);
  border-radius: var(--v5-select-border-radius);
  box-shadow: var(--v5-shadow-menu);
  max-height: 240px;
  overflow-y: auto;
  margin-top: var(--v5-space-4);
}

.select-options li {
    margin: 0;
    padding: var(--v5-space-8) var(--v5-select-padding);
    font-size: var(--v5-select-font-size);
    font-weight: var(--v5-select-font-weight);
    line-height: 1.5;
    transition: background-color 0.1s ease;
    color: var(--v5-select-color);
  }

.select-options li:hover {
    background-color: var(--v5-surface-quiet);
  }

.select-options li.selected {
    background-color: color-mix(in srgb, var(--v5-accent) 10%, transparent);
    font-weight: 400;
  }

.select-options li[rel='hide'] {
    display: none;
  }

.styled-select-item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
}

.styled-select-item .label {
    -ms-flex: 1;
        flex: 1;
  }

.styled-select-item .checked-indicator,
  .styled-select-item .soldout-indicator {
    padding-right: 0.5rem;
  }

.styled-select-item .checked-indicator {
    width: 1rem;
    text-align: right;
    font-size: 0.7rem;
  }

.styled-select-item .soldout-indicator {
    text-align: center;
    text-transform: uppercase;
    font-size: 8px;
    line-height: 1;
  }

/* ============================================================
   v5-dropdown
   A native <details>-based dropdown menu.

   Markup:
     %details.v5-dropdown
       %summary Choose…
       %ul
         %li
           %a{href: '#'} Option A
         %li
           %a{href: '#'} Option B

   Full width by default. In a <nav>, shrinks to fit content.
   ============================================================ */

/* ----- Container ----- */

.v5-dropdown {
  border-bottom: none;
  position: relative;
  width: 100%;
  text-align: left;
}

/* ----- Trigger ----- */

.v5-dropdown > summary {
  -ms-flex-align: center;
      align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--v5-dropdown-bg);
  border: 1px solid var(--v5-dropdown-border-color);
  border-radius: var(--v5-dropdown-border-radius);
  box-shadow: var(--v5-dropdown-inset-shadow);
  box-sizing: border-box;
  color: var(--v5-dropdown-color);
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  font-family: var(--v5-dropdown-font-family);
  font-size: var(--v5-dropdown-font-size);
  font-weight: var(--v5-dropdown-font-weight);
  gap: var(--v5-space-8);
  height: var(--v5-dropdown-height);
  -ms-flex-pack: justify;
      justify-content: space-between;
  line-height: 1;
  list-style: none;
  padding: 0 var(--v5-dropdown-padding);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/* Remove default marker in WebKit/Blink */

.v5-dropdown > summary::-webkit-details-marker {
  display: none;
}

/* Chevron */

.v5-dropdown > summary::after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--v5-dropdown-chevron-color);
  content: '';
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 0;
  transition: transform 0.15s ease;
  width: 0;
}

/* States */

.v5-dropdown > summary:hover {
  border-color: var(--v5-dropdown-focus-border-color);
}

.v5-dropdown > summary:focus-visible {
  border-color: var(--v5-dropdown-focus-border-color);
  outline: none;
}

/* Flip chevron when open */

.v5-dropdown[open] > summary::after {
  transform: rotate(180deg);
}

/* ----- Menu ----- */

.v5-dropdown > ul {
  background-color: var(--v5-dropdown-bg);
  border: 1px solid var(--v5-dropdown-border-color);
  border-radius: var(--v5-dropdown-border-radius);
  box-shadow: var(--v5-dropdown-menu-shadow);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  font-family: var(--v5-dropdown-font-family);
  font-size: var(--v5-dropdown-font-size);
  font-weight: var(--v5-dropdown-font-weight);
  left: 0;
  list-style: none;
  margin: var(--v5-space-4) 0 0;
  min-width: 100%;
  opacity: 0;
  padding: var(--v5-space-4) 0;
  position: absolute;
  transform: scaleY(0);
  transform-origin: top;
  transition:
    opacity 0.15s ease,
    transform 0s ease 0.15s;
  white-space: nowrap;
  z-index: 99;
}

.v5-dropdown[open] > ul {
  opacity: 1;
  transform: scaleY(1);
  transition:
    opacity 0.15s ease,
    transform 0s ease 0s;
}

/* ----- Menu items ----- */

.v5-dropdown > ul > li {
  margin: 0;
  padding: 0;
}

.v5-dropdown > ul > li > a {
  border: 0;
  color: var(--v5-dropdown-color);
  display: block;
  font-family: var(--v5-dropdown-font-family);
  line-height: 1.5;
  overflow: hidden;
  padding: var(--v5-space-8) var(--v5-dropdown-padding);
  text-decoration: none;
  text-overflow: ellipsis;
  transition: background-color 0.1s ease;
}

.v5-dropdown > ul > li > a:hover,
.v5-dropdown > ul > li > a:focus-visible {
  background-color: var(--v5-surface-quiet);
}

.v5-dropdown > ul > li > a:active {
  background-color: color-mix(in srgb, var(--v5-accent) 10%, transparent);
}

/* ----- Click-outside overlay ----- */

.v5-dropdown[open] > summary::before {
  background: none;
  content: '';
  cursor: default;
  display: block;
  height: 100vh;
  inset: 0;
  position: fixed;
  width: 100vw;
  z-index: 1;
}

/* Keep menu above overlay */

.v5-dropdown > ul {
  z-index: 99;
}

/* ----- Nav context ----- */

nav .v5-dropdown {
  display: inline-block;
  width: auto;
}

.v5-table-container {
  overflow-x: auto;
  width: 100%;
}

table {
  border-collapse: collapse;
  min-width: 980px;
  table-layout: fixed;
  width: 100%;
}

table th,
table td {
  border-bottom: 1px solid var(--v5-table-border-color);
  color: var(--v5-table-cell-color);
  font-family: var(--v5-table-cell-font-family);
  font-size: var(--v5-table-cell-font-size);
  font-weight: var(--v5-table-cell-font-weight);
  line-height: var(--v5-table-cell-line-height);
  padding: var(--v5-table-cell-padding-block) var(--v5-table-cell-padding-inline);
  text-align: left;
  vertical-align: top;
}

table thead th {
  font-weight: var(--v5-table-header-font-weight);
  height: var(--v5-table-header-height);
  padding-block: var(--v5-table-cell-padding-block);
}

.v5-table-cell-cta {
  text-align: right;
}

.v5-status-pill {
  -ms-flex-align: center;
      align-items: center;
  border-radius: var(--v5-radius-sm);
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-family: var(--v5-font-family);
  font-size: 11px;
  font-weight: 600;
  height: var(--v5-control-height-xs);
  line-height: 18px;
  padding: var(--v5-space-2) var(--v5-space-12) 1px;
  text-transform: lowercase;
}

.v5-status-pill-available {
  background: var(--v5-status-available-bg);
  color: var(--v5-status-available);
}

.v5-status-pill-pending {
  background: var(--v5-status-pending-bg);
  color: var(--v5-status-pending);
}

.v5-status-pill-sold {
  background: var(--v5-status-sold-bg);
  color: var(--v5-status-sold);
}

table-staff-note {
  color: var(--v5-table-staff-note-color);
  display: block;
  font-size: var(--v5-table-staff-note-font-size);
  margin-top: var(--v5-space-8);
}

table-cell-tight {
  width: auto;
  text-align: right;
  padding: 0;
}

/* ============================================================
   v5-datagrid
   A CSS-grid-based data grid for tabular data.
   Uses ARIA roles (role="table", "rowgroup", "row", "columnheader", "cell")
   so screen readers still announce the structure as a table.

   Set column widths via --v5-datagrid-columns on the root element.
   Fluid columns use 1fr; content-hugging columns use auto.

   Usage (HAML):
     .v5-datagrid{role: 'table', 'aria-label': 'Listings',
       style: '--v5-datagrid-columns: 1fr 1fr 1fr auto auto'}
       .v5-datagrid-header{role: 'rowgroup'}
         .v5-datagrid-row{role: 'row'}
           .v5-datagrid-cell{role: 'columnheader'} Event
           .v5-datagrid-cell{role: 'columnheader'} Status
       .v5-datagrid-body{role: 'rowgroup'}
         .v5-datagrid-row{role: 'row'}
           .v5-datagrid-cell{role: 'cell'} My Event
           .v5-datagrid-cell{role: 'cell'}
             %span.v5-status-pill …
   ============================================================ */

.v5-datagrid {
  display: grid;
  grid-template-columns: var(--v5-datagrid-columns, repeat(auto-fit, minmax(0, 1fr)));
  min-width: 0;
  width: 100%;
}

/* Flatten wrappers so all cells participate in the parent grid */

.v5-datagrid-header,
.v5-datagrid-body,
.v5-datagrid-row {
  display: contents;
}

/* Cell (shared between header and body) */

.v5-datagrid-cell {
  color: var(--v5-table-cell-color);
  font-family: var(--v5-table-cell-font-family);
  font-size: var(--v5-table-cell-font-size);
  font-weight: var(--v5-table-cell-font-weight);
  line-height: var(--v5-table-cell-line-height);
  min-width: 0;
  padding: var(--v5-table-cell-padding-block) 0;
  padding-right: var(--v5-space-12);
}

/* Header cells */

.v5-datagrid-header .v5-datagrid-cell {
  border-bottom: 1px solid var(--v5-table-border-color);
  font-weight: var(--v5-table-header-font-weight);
}

/* Body cells */

.v5-datagrid-body .v5-datagrid-cell {
  border-bottom: 1px solid var(--v5-table-border-color);
}

/* Right-align the last column (action buttons / controls) */

.v5-datagrid-col-end {
  padding-right: 0;
  text-align: right;
}

.nameplate {
  -ms-flex-align: center;
      align-items: center;
  border-radius: var(--v5-radius-sm);
  display: -ms-flexbox;
  display: flex;
  gap: var(--v5-space-12);
  -ms-flex-pack: center;
      justify-content: center;
  min-height: var(--v5-control-height-lg);
  padding: var(--v5-space-8) var(--v5-space-18);
}

.nameplate,
.nameplate * {
  color: var(--v5-accent);
  font-family: var(--v5-font-family);
  font-size: 13px;
  font-style: normal;
  font-variation-settings: 'wdth' 100;
  font-weight: 600;
  letter-spacing: 4px;
  line-height: normal;
  margin: 0;
  text-align: center;
  text-decoration: none;
  border: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.common-frontend-page-intro {
  text-align: center;
}

.common-frontend-page-intro-title {
  color: var(--v5-text-primary);
  font-family: var(--v5-font-family);
  font-size: 54px;
  font-style: normal;
  font-variation-settings: 'wdth' 100;
  font-weight: 200;
  line-height: 1.4;
  margin: 0 0 var(--vertical-content-gap);
}

.v5-lede,
.v5-lede p {
  color: var(--v5-text-primary);
  font-family: var(--v5-font-family);
  font-size: 22px;
  font-style: normal;
  font-variation-settings: 'wdth' 100;
  font-weight: 200;
  line-height: 32px;
}

.v5-lede {
  margin-inline: auto;
  max-width: var(--container-max-width-s);
}

.v5-lede p:last-child {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .common-frontend-page-intro-title {
    font-size: 44px;
  }
}

@media (max-width: 768px) {
  .common-frontend-page-intro-title {
    font-size: 34px;
  }

  .v5-lede,
  .v5-lede p {
    font-size: 18px;
    line-height: 28px;
  }
}

.v5-debug .v5-lede {
  outline: 1px solid green;
}

.v5-subnav ul {
    display: -ms-flexbox;
    display: flex;
    gap: var(--v5-space-12);
    margin: 0;
    padding: 0;
    list-style: none;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: start;
        align-items: flex-start;
  }

.v5-subnav li {
    margin: 0;
  }

.common-frontend-footer {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: var(--v5-space-72);
  padding: var(--v5-space-72) 0;
}

.v5-help-footer {
  -ms-flex-align: center;
      align-items: center;
  background: var(--v5-surface-muted);
  border-radius: var(--v5-radius-lg);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: var(--v5-space-48);
  padding: var(--v5-space-120) 18px;
}

@media (max-width: 768px) {
  .v5-help-footer {
    padding-left: var(--v5-space-24);
    padding-right: var(--v5-space-24);
  }
}

.v5-debug .v5-help-footer {
  outline: 1px solid red;
}

.common-frontend-footer-contact,
.common-frontend-footer-resend {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: var(--v5-space-30);
  -ms-flex-pack: center;
      justify-content: center;
  width: 100%;
}

.common-frontend-footer-resend .result-message {
    margin-top: var(--v5-space-48);
  }

.common-frontend-footer-resend .hidden {
    display: none;
  }

.common-frontend-footer-contact h2 {
  color: var(--v5-text-primary);
  font-family: var(--v5-font-family);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
  text-align: center;
}

.common-frontend-footer-contact p,
.common-frontend-footer-resend p {
  color: var(--v5-text-primary);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: var(--base-line-height);
  margin: 0;
  text-align: center;
}

.common-frontend-footer-contact p a,
.common-frontend-footer-resend p a {
  color: var(--v5-accent);
  text-decoration: none;
}

.common-frontend-footer-social .links {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  gap: var(--v5-space-36);
  -ms-flex-pack: center;
      justify-content: center;
}

.common-frontend-footer-social a {
  color: var(--v5-text-muted);
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 30px;
  line-height: 1;
  text-decoration: none;
  border: none;
}

.common-frontend-footer-form {
  -ms-flex-align: start;
      align-items: flex-start;
  display: -ms-flexbox;
  display: flex;
  gap: var(--v5-space-24);
  -ms-flex-pack: center;
      justify-content: center;
  width: 100%;
}

.common-frontend-footer-email {
  background: var(--v5-surface-base);
  border: 1px solid var(--v5-border-input);
  border-radius: var(--v5-radius-sm);
  box-shadow: var(--v5-shadow-inset-soft);
  color: var(--v5-text-primary);
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  font-family: var(--v5-font-family);
  font-size: 18px;
  height: var(--v5-control-height-xl);
  min-width: 200px;
  padding: var(--v5-space-18);
  box-sizing: border-box;
}

.common-frontend-footer-email::-moz-placeholder {
  color: var(--v5-text-muted);
}

.common-frontend-footer-email:-ms-input-placeholder {
  color: var(--v5-text-muted);
}

.common-frontend-footer-email::placeholder {
  color: var(--v5-text-muted);
}

.common-frontend-footer-submit {
  -ms-flex-align: center;
      align-items: center;
  background: var(--v5-accent);
  border: 1px solid var(--v5-accent);
  border-radius: var(--v5-radius-sm);
  color: var(--v5-accent-contrast);
  cursor: pointer;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-family: var(--v5-font-family);
  font-size: 16px;
  font-weight: 700;
  height: var(--v5-control-height-xl);
  -ms-flex-pack: center;
      justify-content: center;
  padding: 0 var(--v5-space-36);
  white-space: nowrap;
}

.common-frontend-footer-nav {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--v5-space-24);
  -ms-flex-pack: center;
      justify-content: center;
  width: 100%;
}

.common-frontend-footer-credit {
  -ms-flex-align: center;
      align-items: center;
  border-radius: var(--v5-radius-md);
  display: -ms-flexbox;
  display: flex;
  gap: var(--v5-space-6);
  -ms-flex-pack: center;
      justify-content: center;
  padding: var(--v5-space-12);
  width: 100%;
}

.common-frontend-footer-credit a {
    border: none;
    outline: none;
  }

.common-frontend-footer-credit img {
    display: inline-block;
  }

.common-frontend-footer-credit span {
  color: var(--v5-text-secondary);
  font-family: var(--v5-font-family);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

.common-frontend-footer-credit a {
  display: -ms-inline-flexbox;
  display: inline-flex;
}

@media (max-width: 900px) {
  .v5-help-footer {
    padding: var(--v5-space-48) var(--v5-space-24);
  }

  .common-frontend-footer-form {
    -ms-flex-align: stretch;
        align-items: stretch;
    -ms-flex-direction: column;
        flex-direction: column;
  }

  .common-frontend-footer-submit {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .common-frontend-footer {
    gap: var(--v5-space-48);
    padding: var(--v5-space-48) var(--v5-space-16);
  }

  .v5-help-footer {
    padding: var(--v5-space-36) var(--v5-space-16);
  }
}

.page-header {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  padding: var(--v5-space-36) 0;
  gap: var(--v5-space-36);
}

.v5-debug .page-header-nav-group {
  background-color: rgba(255, 0, 0, 0.1);
}

.page-header-nav-group {
  -ms-flex: 1 1 0px;
      flex: 1 1 0;
  min-width: 0;
  /* max-width: 300px; */
  -ms-flex-pack: start;
      justify-content: flex-start;
  -ms-flex-align: center;
      align-items: center;
  gap: var(--v5-space-36);
  display: -ms-flexbox;
  display: flex;
  min-height: var(--v5-control-height-md);
}

.page-header-nav-group ul {
    list-style: none;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: end;
        justify-content: flex-end;
    gap: var(--v5-space-12);
    margin: 0;
    padding: 0;
  }

.page-header-nav-group li {
    margin: 0;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
        align-items: center;
  }

.page-header-nav-group:last-child {
  -ms-flex-pack: end;
      justify-content: flex-end;
}

.page-header .nameplate {
  -ms-flex: 1 1 0px;
      flex: 1 1 0;
  min-width: 0;
  padding: 0;
}

.page-header .nameplate,
.page-header .nameplate * {
  line-height: 1;
}

.v5-debug .page-header .nameplate {
  background-color: rgba(0, 255, 0, 0.1);
}

.page-header-link {
  font-variation-settings: 'wdth' 100;
  gap: var(--v5-space-6);
}

.page-header .cart-countdown {
  color: currentColor;
  font: inherit;
}

@media (max-width: 768px) {
  .page-header {
    display: grid;
    gap: var(--v5-space-12);
    grid-template-columns: 1fr;
    justify-items: center;
    padding: var(--v5-space-18) var(--v5-space-16);
  }

  .page-header-nav-group,
  .page-header .nameplate,
  .page-header-nav {
    max-width: none;
    width: 100%;
  }

  .page-header-nav-group,
  .page-header-nav-group:last-child {
    -ms-flex-pack: center;
        justify-content: center;
  }

  .page-header-nav-group.browse-events {
    display: none;
  }

  .page-header-nav ul {
    -ms-flex-pack: center;
        justify-content: center;
    width: 100%;
  }
}

.v5-marketplace-listings-for-event {
  --v5-datagrid-columns: 3fr 1fr 1fr auto;
}

@media (max-width: 768px) {
  .v5-marketplace-listings-for-event {
    display: block;
  }

  .v5-marketplace-listings-for-event .v5-datagrid-header {
    display: none;
  }

  .v5-marketplace-listings-for-event .v5-datagrid-body {
    display: block;
  }

  .v5-marketplace-listings-for-event .marketplace-listing {
    display: grid;
    gap: 0 var(--v5-space-12);
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    border-bottom: 1px solid var(--v5-table-border-color);
  }

  .v5-marketplace-listings-for-event .marketplace-listing > .v5-datagrid-cell {
    border-bottom: 0;
  }

  .v5-marketplace-listings-for-event .marketplace-listing > .tickets {
    grid-column: 1;
    grid-row: 1;
  }

  .v5-marketplace-listings-for-event .marketplace-listing > .date {
    grid-column: 1;
    grid-row: 2;
  }

  .v5-marketplace-listings-for-event .marketplace-listing > .status {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    align-self: start;
  }

  .v5-marketplace-listings-for-event .marketplace-listing > .actions {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
    align-self: start;
  }
}

img {
  display: block;
  max-width: 100%;
}

/* TODO */

.pgm-wrapper {
  display: none;
}

.expandable-v5 .expandable-hidden {
  display: none;
}

.expandable-v5.expanded .expandable-hidden {
  display: block;
}