/* The Kiln 2: pretix shop and checkout theme (https://tickets.thekiln.net/kiln/kiln2/).
 *
 * Paste into pretix: event Settings → "Event-CSS & JS" (pretix-event-css-js plugin).
 * It applies to every page of the event shop: products, cart, checkout steps, order
 * pages, and the shop inside the site's checkout overlay.
 *
 * Constraints:
 * - The shop's Content-Security-Policy only allows fonts and stylesheets from
 *   tickets.thekiln.net, so this file cannot load the brand fonts. The stacks name them
 *   first and fall back to the same stacks as the website's tokens.
 * - Tokens are copied from src/styles/tokens.css. Keep them in sync.
 * - Overrides use `html:root` / doubled selectors so they win regardless of whether this
 *   file loads before or after pretix's own presale.css and theme.css.
 */

/* Big Shoulders Display (no italics) */
@font-face {
  font-family: "Big Shoulders Display";
  src: url("/static/pretix_kilnfonts/BigShouldersDisplay-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Big Shoulders Display";
  src: url("/static/pretix_kilnfonts/BigShouldersDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Archivo */
@font-face {
  font-family: "Archivo";
  src: url("/static/pretix_kilnfonts/Archivo-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/static/pretix_kilnfonts/Archivo-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/static/pretix_kilnfonts/Archivo-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/static/pretix_kilnfonts/Archivo-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* JetBrains Mono */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/pretix_kilnfonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/pretix_kilnfonts/JetBrainsMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/pretix_kilnfonts/JetBrainsMono-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/pretix_kilnfonts/JetBrainsMono-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Kiln tokens ---------- */
html:root {
  --ash-950: #0d0b0a;
  --ash-900: #17120f;
  --ash-800: #231b17;
  --line: #3a2e27;
  --line-strong: #76665a;
  --bone: #f5efe6;
  --smoke: #b3a597;
  --ember: #ff5a1f;
  --ember-hot: #ff7a45;
  --on-ember: #0d0b0a;
  --heat: #ffd23f;
  --kiln-red: #b8321a;
  --clay: #e9c9a6;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-0: 0px;
  --radius-sm: 2px;
  --radius-pill: 999px;
  --cut-sm: 10px;
  --cut-lg: 28px;
  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

/* ---------- pretix theme variables → tokens ----------
 * pretix derives shades from each brand colour. On its light theme, lighten-/tint- shades
 * are backgrounds and darken-/shade- shades are text on those backgrounds. On this dark
 * theme, backgrounds map to the ash steps and text maps to the bright tones. */
html:root {
  --pretix-font-family-sans-serif: var(--font-sans);
  --pretix-body-bg: var(--ash-950);
  /* lay the shop out as one continuous page, not a white box on a coloured ground */
  --pretix-body-bg-white-0: 0;
  --pretix-body-bg-white-1: 1;
  --pretix-border-radius-base: var(--radius-0);
  --pretix-border-radius-large: var(--radius-0);
  --pretix-border-radius-small: var(--radius-0);
  --pretix-link-contrast-color: var(--ember);
  --pretix-link-hover-contrast-color: var(--ember-hot);

  --pretix-brand-primary: var(--ember);
  --pretix-brand-primary-lighten-5: var(--ember-hot);
  --pretix-brand-primary-lighten-20: var(--ember-hot);
  --pretix-brand-primary-lighten-23-saturate-2: var(--ember-hot);
  --pretix-brand-primary-lighten-28-saturate-20: var(--ember-hot);
  --pretix-brand-primary-lighten-30: var(--line-strong);
  --pretix-brand-primary-lighten-40: var(--ash-800);
  --pretix-brand-primary-lighten-48: var(--ash-800);
  --pretix-brand-primary-lighten-50: var(--ash-900);
  --pretix-brand-primary-lighten-53: var(--ash-900);
  --pretix-brand-primary-lighten-55: var(--ash-900);
  --pretix-brand-primary-tint-90: var(--ash-800);
  --pretix-brand-primary-darken-5: var(--ember-hot);
  --pretix-brand-primary-darken-10: var(--ember-hot);
  --pretix-brand-primary-darken-15: var(--ember-hot);
  --pretix-brand-primary-darken-17: var(--ember-hot);
  --pretix-brand-primary-darken-20: var(--ember-hot);
  --pretix-brand-primary-darken-30: var(--ember-hot);
  --pretix-brand-primary-shade-25: var(--ember-hot);
  --pretix-brand-primary-shade-42: var(--ember-hot);

  --pretix-brand-success: var(--clay);
  --pretix-brand-success-lighten-10: var(--clay);
  --pretix-brand-success-lighten-20: var(--clay);
  --pretix-brand-success-lighten-30: var(--clay);
  --pretix-brand-success-lighten-35: var(--ash-800);
  --pretix-brand-success-lighten-38: var(--ash-800);
  --pretix-brand-success-lighten-40: var(--ash-800);
  --pretix-brand-success-lighten-48: var(--ash-900);
  --pretix-brand-success-lighten-50: var(--ash-900);
  --pretix-brand-success-tint-50: var(--line-strong);
  --pretix-brand-success-tint-85: var(--ash-900);
  --pretix-brand-success-darken-5: var(--clay);
  --pretix-brand-success-darken-10: var(--clay);
  --pretix-brand-success-darken-12: var(--clay);
  --pretix-brand-success-darken-15: var(--clay);
  --pretix-brand-success-darken-17: var(--clay);
  --pretix-brand-success-darken-20: var(--clay);
  --pretix-brand-success-darken-30: var(--clay);
  --pretix-brand-success-shade-25: var(--clay);
  --pretix-brand-success-shade-42: var(--clay);

  --pretix-brand-info: var(--smoke);
  --pretix-brand-info-lighten-23: var(--ash-800);
  --pretix-brand-info-lighten-25: var(--ash-800);
  --pretix-brand-info-lighten-30: var(--ash-800);
  --pretix-brand-info-lighten-33: var(--ash-900);
  --pretix-brand-info-tint-85: var(--ash-900);
  --pretix-brand-info-darken-5: var(--bone);
  --pretix-brand-info-darken-10: var(--bone);
  --pretix-brand-info-darken-17: var(--bone);
  --pretix-brand-info-darken-20: var(--bone);
  --pretix-brand-info-darken-30: var(--bone);
  --pretix-brand-info-shade-25: var(--bone);
  --pretix-brand-info-shade-42: var(--bone);

  --pretix-brand-warning: var(--heat);
  --pretix-brand-warning-lighten-12: var(--heat);
  --pretix-brand-warning-lighten-31: var(--ash-800);
  --pretix-brand-warning-lighten-35: var(--ash-800);
  --pretix-brand-warning-lighten-40: var(--ash-800);
  --pretix-brand-warning-lighten-41: var(--ash-900);
  --pretix-brand-warning-lighten-43: var(--ash-900);
  --pretix-brand-warning-tint-50: var(--line-strong);
  --pretix-brand-warning-tint-85: var(--ash-900);
  --pretix-brand-warning-transparent-60: color-mix(in srgb, var(--heat) 40%, transparent);
  --pretix-brand-warning-darken-5: var(--heat);
  --pretix-brand-warning-darken-10: var(--heat);
  --pretix-brand-warning-darken-15: var(--heat);
  --pretix-brand-warning-darken-17: var(--heat);
  --pretix-brand-warning-darken-20: var(--heat);
  --pretix-brand-warning-darken-25: var(--heat);
  --pretix-brand-warning-darken-30: var(--heat);
  --pretix-brand-warning-darken-35: var(--heat);
  --pretix-brand-warning-shade-25: var(--heat);
  --pretix-brand-warning-shade-42: var(--heat);

  /* kiln-red is too dark for small text on ash, so danger text uses ember-hot */
  --pretix-brand-danger: var(--ember-hot);
  --pretix-brand-danger-lighten-5: var(--ember-hot);
  --pretix-brand-danger-lighten-15: var(--ember-hot);
  --pretix-brand-danger-lighten-25: var(--ash-800);
  --pretix-brand-danger-lighten-30: var(--ash-800);
  --pretix-brand-danger-lighten-33: var(--ash-800);
  --pretix-brand-danger-lighten-43: var(--ash-900);
  --pretix-brand-danger-lighten-45: var(--ash-900);
  --pretix-brand-danger-tint-50: var(--kiln-red);
  --pretix-brand-danger-tint-85: var(--ash-900);
  --pretix-brand-danger-darken-5: var(--ember-hot);
  --pretix-brand-danger-darken-10: var(--ember-hot);
  --pretix-brand-danger-darken-15: var(--ember-hot);
  --pretix-brand-danger-darken-17: var(--ember-hot);
  --pretix-brand-danger-darken-20: var(--ember-hot);
  --pretix-brand-danger-darken-30: var(--ember-hot);
  --pretix-brand-danger-shade-25: var(--ember-hot);
  --pretix-brand-danger-shade-42: var(--ember-hot);
}

/* ---------- page ---------- */
/* dark native controls: radios, checkboxes, select menus, date pickers, scrollbars */
html:root {
  color-scheme: dark;
}
html body {
  background: var(--ash-950);
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* pretix forces a white page inside iframes (our site's checkout overlay) */
html.in-iframe body {
  background: var(--ash-950) !important;
  /* on top of the container's own 15px, so the shop doesn't run to the overlay's edges */
  padding-inline: var(--space-1);
}
html .main-box {
  background: transparent;
}
a,
.btn-link {
  color: var(--ember);
}
a:hover,
a:focus,
.btn-link:hover,
.btn-link:focus {
  color: var(--ember-hot);
}
html :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible,
html .btn:focus-visible,
html .btn:active:focus {
  outline: 2px solid var(--heat);
  outline-offset: 3px;
}
hr {
  border-top-color: var(--line);
}
::selection {
  background: var(--ember);
  color: var(--on-ember);
}
.text-muted,
.help-block,
small,
.small,
blockquote footer {
  color: var(--smoke);
}
.text-primary { color: var(--ember); }
.text-success { color: var(--clay); }
.text-info { color: var(--smoke); }
.text-warning { color: var(--heat); }
.text-danger { color: var(--ember-hot); }
code {
  background: var(--ash-800);
  color: var(--heat);
  border-radius: var(--radius-0);
}
html .cart-row-giftcard code {
  color: var(--heat);
}

/* ---------- type ---------- */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--bone);
}
h4, h5, h6, .h4, .h5, .h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--bone);
}
/* pretix hides the page header inside the checkout overlay, so this only spaces standalone pages */
html .page-header {
  margin-top: var(--space-6);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-5);
}
html .page-header h1 {
  font-size: clamp(40px, 7vw, 88px);
  line-height: 0.82;
}
html .page-header h1 a {
  color: var(--bone);
}
html .page-header h1 a:hover {
  color: var(--ember);
}
/* the date / location line under the event name */
html .page-header small,
html .page-header .text-muted {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke);
}
html .info-row-icon,
html .info-row .fa {
  color: var(--ember);
}
html .item-category > h3,
html .item-category > .h3 {
  font-size: clamp(36px, 4vw, 48px);
  color: var(--smoke);
}

/* ---------- buttons ---------- */
html .btn {
  --cut: var(--cut-sm);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: var(--radius-0);
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: none;
  background-image: none;
  transition: background-color 0.12s, color 0.12s, box-shadow 0.12s;
}
html .btn-lg {
  min-height: 60px;
  padding: 20px var(--space-6);
  font-size: 14px;
}
html .btn-sm,
html .btn-xs,
html .btn-mini {
  padding: var(--space-2) var(--space-3);
  font-size: 12px;
}
html .btn-primary,
html .btn-success {
  background: var(--ember);
  color: var(--on-ember);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
html .btn-primary:hover,
html .btn-primary:focus,
html .btn-primary:active,
html .btn-primary.active,
html .btn-success:hover,
html .btn-success:focus,
html .btn-success:active {
  background: var(--ember-hot);
  color: var(--on-ember);
  box-shadow: none;
}
html .btn-default,
html .btn-info,
html .btn-warning {
  background: transparent;
  color: var(--bone);
  box-shadow: inset 0 0 0 2px var(--line-strong);
}
html .btn-default:hover,
html .btn-default:focus,
html .btn-default:active,
html .btn-default.active,
html .btn-info:hover,
html .btn-warning:hover {
  background: var(--ash-800);
  color: var(--bone);
  box-shadow: inset 0 0 0 2px var(--bone);
}
html .btn-danger {
  background: transparent;
  color: var(--ember-hot);
  box-shadow: inset 0 0 0 2px var(--kiln-red);
}
html .btn-danger:hover,
html .btn-danger:focus,
html .btn-danger:active {
  background: var(--kiln-red);
  color: var(--bone);
  box-shadow: inset 0 0 0 2px var(--kiln-red);
}
html .btn-link {
  min-height: 0;
  padding-inline: 0;
  background: transparent;
  box-shadow: none;
}
/* Bootstrap recolours disabled buttons on hover and focus (`.btn-primary[disabled]:hover`
 * turns ember, `.btn-default` white), which outranks a plain disabled rule, so the
 * interactive states are listed too */
html .btn:is([disabled], .disabled),
html .btn:is([disabled], .disabled):is(:hover, :focus, :active, .focus),
html fieldset[disabled] .btn,
html fieldset[disabled] .btn:is(:hover, :focus, :active, .focus) {
  background: var(--ash-800);
  color: var(--smoke);
  box-shadow: none;
  opacity: 1;
  cursor: not-allowed;
}

/* ---------- forms ---------- */
html .form-control {
  min-height: 48px;
  height: auto;
  padding: var(--space-3) 14px;
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 2px var(--line-strong);
  background: var(--ash-950);
  color: var(--bone);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
}
html .form-control:hover {
  box-shadow: inset 0 0 0 2px var(--smoke);
}
html .form-control:focus {
  outline: 2px solid var(--heat);
  outline-offset: 3px;
  box-shadow: inset 0 0 0 2px var(--bone);
}
html .form-control::placeholder {
  color: var(--smoke);
  opacity: 0.75;
}
html .form-control[disabled],
html .form-control[readonly],
html fieldset[disabled] .form-control {
  background: var(--ash-800);
  color: var(--smoke);
  box-shadow: inset 0 0 0 2px var(--line);
}
html select.form-control option {
  background: var(--ash-900);
  color: var(--bone);
}
html .control-label,
html .form-group > label,
html legend:not(.sr-only):not(.accordion-radio) {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  border-bottom-color: var(--line);
}
html .checkbox label,
html .radio label {
  font-family: var(--font-sans);
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--bone);
}
html input[type="checkbox"],
html input[type="radio"] {
  accent-color: var(--ember);
}
html .checkbox-group-legend > span {
  background: var(--ash-950);
}
html .input-group-addon {
  border: 0;
  border-radius: var(--radius-0);
  background: var(--ash-800);
  color: var(--smoke);
  box-shadow: inset 0 0 0 2px var(--line-strong);
}
html .has-error .form-control {
  box-shadow: inset 0 0 0 2px var(--ember-hot);
}
html .has-error .control-label,
html .has-error .help-block,
html .has-error .checkbox,
html .has-error .radio {
  color: var(--ember-hot);
}
html .has-success .form-control {
  box-shadow: inset 0 0 0 2px var(--clay);
}

/* ---------- panels ---------- */
html .panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-0);
  background: var(--ash-900);
  box-shadow: none;
}
html .panel > .panel-heading,
html .panel > legend > .panel-heading {
  border-color: var(--line);
  border-radius: var(--radius-0);
  background: var(--ash-800);
  color: var(--bone);
}
html .panel-primary {
  border-color: var(--ember);
}
html .panel-primary > .panel-heading,
html .panel-primary > legend > .panel-heading,
html .panel-primary .panel-heading,
html .panel-primary .panel-heading a {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--on-ember);
}
html .panel-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html .panel-title strong {
  font-weight: 600;
}
/* panel titles are often h2/h3, whose 0.9 display line-height is too tight for mono caps */
html .panel-title {
  line-height: 1.4;
}
/* review step: the cart heading is a flex row of title, spacer and countdown. Centre them,
 * and let the title wrap rather than pushing the countdown onto its own line. */
html .panel-heading-flex {
  flex-wrap: nowrap;
  align-items: center;
}
html .panel-heading-flex > .panel-title {
  flex: 0 1 auto;
  min-width: 0;
}
html .panel-title a.h6 {
  font: inherit;
  letter-spacing: inherit;
}
html .panel-heading #cart-deadline-short {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
}
html .panel-footer {
  border-top-color: var(--line);
  border-radius: var(--radius-0);
  background: var(--ash-800);
}
html .panel-group .panel-heading + .panel-collapse > .panel-body,
html .panel-default > .panel-heading + .panel-collapse > .panel-body,
html .panel-default > legend > .panel-heading + .panel-collapse > .panel-body,
html .panel-default > .accordion-radio + .panel-collapse > .panel-body,
html .panel > .panel-body + .table,
html .panel > .table + .panel-body {
  border-top-color: var(--line);
}
/* payment method chooser: one selectable panel per provider */
html fieldset.accordion-panel > legend > .panel-heading,
html .panel-default > .accordion-radio > .panel-heading {
  font-size: 16px;
  cursor: pointer;
}
html fieldset.accordion-panel:has(input[type="radio"]:checked) {
  border-color: var(--ember);
}
html .well {
  border: 1px solid var(--line);
  border-radius: var(--radius-0);
  background: var(--ash-900);
  box-shadow: none;
}

/* ---------- lists & tables ---------- */
html .list-group-item {
  border-color: var(--line);
  border-radius: var(--radius-0) !important;
  background: var(--ash-900);
  color: var(--bone);
}
html a.list-group-item:hover,
html button.list-group-item:hover {
  background: var(--ash-800);
  color: var(--bone);
}
html .list-group-item.active,
html .list-group-item.active:hover {
  border-color: var(--ember);
  background: var(--ember);
  color: var(--on-ember);
}
html .table > thead > tr > th,
html .table > thead > tr > td,
html .table > tbody > tr > th,
html .table > tbody > tr > td,
html .table > tfoot > tr > th,
html .table > tfoot > tr > td,
html .table > tbody + tbody,
html .table-bordered,
html .table-bordered > tbody > tr > td,
html .table-bordered > thead > tr > th {
  border-color: var(--line);
}
html .table > thead > tr > th {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke);
}
html .table-striped > tbody > tr:nth-of-type(odd) {
  background: var(--ash-900);
}
html .table-hover > tbody > tr:hover,
html .table > tbody > tr.active > td {
  background: var(--ash-800);
}
html .nav-tabs {
  border-bottom-color: var(--line);
}
html .nav-tabs > li > a:hover {
  border-color: var(--line);
  background: var(--ash-800);
}
html .nav-tabs > li.active > a,
html .nav-tabs > li.active > a:hover,
html .nav-tabs > li.active > a:focus {
  border-color: var(--line);
  border-bottom-color: transparent;
  background: var(--ash-950);
  color: var(--bone);
}
html .dropdown-menu,
html .popover,
html .tooltip-inner {
  border: 1px solid var(--line);
  border-radius: var(--radius-0);
  background: var(--ash-900);
  color: var(--bone);
  box-shadow: none;
}
html .dropdown-menu > li > a {
  color: var(--bone);
}
html .dropdown-menu > li > a:hover,
html .dropdown-menu > li > a:focus {
  background: var(--ash-800);
  color: var(--ember);
}

/* ---------- product list ---------- */
html .product-row::before,
html .product-row.headline::before,
html .product-row.simple::before {
  border-top-color: var(--line);
}
html article.item-with-variations:last-child::after,
html .product-row:last-child::after {
  border-bottom-color: var(--line);
}
html .product-row.total {
  border-top-color: var(--line);
}
html .product-row .price,
html .cart-row .price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.1;
}
html .product-row .price del {
  color: var(--smoke);
}
html .product-row .price ins {
  color: var(--clay);
}
html .availability-box {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--smoke);
}
html .sneak-peek-trigger {
  background: linear-gradient(0deg, var(--ash-950) 44%, transparent 100%);
}
/* pretix floats name, price and quantity side by side but top-aligns them; centre them */
html .product-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--space-2);
}
html .product-row > .clearfix {
  display: none;
}
@media (max-width: 767px) {
  /* give the stepper its full width rather than half the row; the price takes the rest */
  html .product-row > .price {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  html .product-row > .availability-box {
    flex: 0 1 auto;
    width: auto;
  }
  html .product-row .input-item-count-group {
    width: 168px;
    max-width: 100%;
  }
}

/* ---------- quantity stepper (product list) ----------
 * One joined control: −, count, +. pretix lays each part out with its own border, which
 * doubles up into thick seams, and gives the buttons 2.5em (32px) of width. */
html .input-item-count-group {
  max-width: 168px;
  margin-left: auto;
}
html .input-item-count-dec,
html .input-item-count-inc {
  flex: 0 0 48px;
  width: 48px;
  min-height: 48px;
  padding: 0;
  /* pretix's labels are an ASCII "-" and "+", which sit at different sizes and heights;
     draw matching glyphs instead (the buttons keep their aria-labels) */
  font-size: 0;
  letter-spacing: 0;
}
html .input-item-count-dec::before,
html .input-item-count-inc::before {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
html .input-item-count-dec::before {
  content: "\2212";
}
html .input-item-count-inc::before {
  content: "+";
}
html .input-item-count-dec[disabled],
html .input-item-count-inc[disabled],
html .input-item-count-dec[disabled]:hover,
html .input-item-count-inc[disabled]:hover {
  background: var(--ash-800);
  color: var(--smoke);
  box-shadow: inset 0 0 0 2px var(--line);
}
/* the buttons' own borders form the sides, so the count only draws top and bottom */
html .input-item-count-group .form-control {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding-inline: 0;
  border-radius: var(--radius-0);
  box-shadow: inset 0 2px var(--line-strong), inset 0 -2px var(--line-strong);
  font-family: var(--font-mono);
  font-weight: 600;
  text-align: center;
}
html .input-item-count-group .form-control:hover {
  box-shadow: inset 0 2px var(--smoke), inset 0 -2px var(--smoke);
}
html .input-item-count-group .form-control:focus {
  outline: none;
  box-shadow: inset 0 2px var(--bone), inset 0 -2px var(--bone);
}
html .input-item-count-group .form-control::placeholder {
  font-style: normal;
}
html .input-item-count-group:has(input:focus) {
  outline: 2px solid var(--heat);
  outline-offset: 3px;
}

/* ---------- cart ---------- */
html .cart-row {
  border-color: var(--line);
}
html .cart .cart-rowgroup-total,
html .cart-row.subtotal,
html .cart-row.total {
  border-top-color: var(--line);
}
html .cart-row.total .price,
html .cart-row.total .totalprice {
  font-size: 32px;
  color: var(--bone);
}
/* pretix's `.cart .total strong` shrinks the total to 17.5px, below the line totals */
html .cart .cart-row.total .price strong {
  font-size: inherit;
}
html .cart-row .count,
html .cart-row .singleprice {
  color: var(--smoke);
}
/* the cart's −/+ (or remove) buttons either side of the count: pretix's are bare icons
 * with no tap area. The count is a bare text node between two forms, so the cell is a
 * flex row and the gap spaces it. */
html .cart-row.editable .count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--bone);
}
html .cart-row .count form {
  display: block;
}
html .cart-row .count .btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  color: var(--bone);
  font-size: 14px;
  box-shadow: inset 0 0 0 2px var(--line-strong);
}
html .cart-row .count .btn-link:hover,
html .cart-row .count .btn-link:focus {
  background: var(--ash-800);
  color: var(--bone);
  box-shadow: inset 0 0 0 2px var(--bone);
  /* Bootstrap underlines .btn-link on hover, which reads as a stray rule under the icon */
  text-decoration: none;
}
/* pretix floats editable lines into fixed columns (product a third, count a sixth), which
 * leaves the stepper stranded mid-row and top-aligned against taller text. Lay each line
 * out as a grid instead, with the stepper beside the prices:
 *   Player ticket            [−] 2 [+]   £15.00   £30.00 */
html .cart-row.editable {
  display: grid;
  grid-template-columns: 1fr auto minmax(120px, auto) minmax(140px, auto);
  grid-template-areas: "product count single total";
  align-items: center;
}
html .cart-row.editable::before,
html .cart-row.editable::after,
html .cart-row.editable > .clearfix {
  display: none;
}
/* pretix sets these widths with `.cart-row.editable .x`, so each needs its own reset */
html .cart-row.editable > .product,
html .cart-row.editable > .count,
html .cart-row.editable > .singleprice,
html .cart-row.editable > .totalprice {
  width: auto;
  float: none;
}
html .cart-row.editable .product { grid-area: product; }
html .cart-row.editable .count { grid-area: count; }
html .cart-row.editable .singleprice { grid-area: single; text-align: right; }
html .cart-row.editable .totalprice { grid-area: total; }
/* the total row: label and amount centred on one line, without the empty middle cells */
html .cart .cart-row.subtotal,
html .cart .cart-row.total {
  display: flex;
  align-items: center;
}
html .cart .cart-row.subtotal::before,
html .cart .cart-row.subtotal::after,
html .cart .cart-row.total::before,
html .cart .cart-row.total::after,
html .cart .cart-row.subtotal > :not(.product, .totalprice),
html .cart .cart-row.total > :not(.product, .totalprice) {
  display: none;
}
html .cart .cart-row.subtotal > .product,
html .cart .cart-row.total > .product {
  flex: 1 1 auto;
  width: auto;
}
html .cart .cart-row.subtotal > .totalprice,
html .cart .cart-row.total > .totalprice {
  width: auto;
}
/* phones, two rows (the checkout overlay is 80vw, so tablets and laptops stay on one line):
 *   Player ticket            £15.00
 *   [−] 2 [+]                £30.00 */
@media (max-width: 599px) {
  html .cart-row.editable .singleprice {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  html .cart-row.editable {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "product single"
      "count total";
    row-gap: var(--space-3);
  }
  html .cart-row.editable .count {
    justify-content: flex-start;
  }
}
/* pretix sets the cart's buttons to nowrap; "Proceed with checkout" overflows at 320px.
 * Phones only: from 768px pretix sizes these buttons to their unwrapped text. */
@media (max-width: 767px) {
  html .cart .checkout-button-row .btn {
    white-space: normal;
  }
}
html .cart-row-giftcard {
  border-radius: var(--radius-0);
  background: var(--ash-800);
}

/* ---------- checkout steps ---------- */
html .checkout-flow .checkout-step::before,
html .checkout-flow .checkout-step::after {
  background: var(--line);
}
html .checkout-flow .checkout-step.step-done::before,
html .checkout-flow .checkout-step.step-done::after,
html .checkout-flow .checkout-step.step-current::before {
  background: var(--ember);
}
html .checkout-flow .checkout-step .checkout-step-icon {
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-0);
  background: var(--ash-950);
  color: var(--smoke);
}
html .checkout-flow .checkout-step.step-done .checkout-step-icon,
html .checkout-flow .checkout-step.step-current .checkout-step-icon {
  border-color: var(--ember);
  background: var(--ember);
  color: var(--on-ember);
}
html .checkout-flow .checkout-step .checkout-step-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke);
}
html .checkout-flow .checkout-step.step-current .checkout-step-label {
  color: var(--bone);
}
html .checkout-flow .checkout-step a .checkout-step-label,
html .checkout-flow .checkout-step.step-done .checkout-step-label a {
  color: var(--ember);
}

/* ---------- alerts ---------- */
/* pretix draws a 51px coloured icon bar; the brand uses no icons, so it becomes a 4px rule */
html .alert {
  border: 0;
  border-radius: var(--radius-0);
  background: var(--ash-900);
  color: var(--bone);
}
html .alert-success,
html .alert-danger,
html .alert-info,
html .alert-warning,
html .alert-legal {
  padding-left: calc(var(--space-5) + 4px);
}
html .alert-success::before,
html .alert-danger::before,
html .alert-info::before,
html .alert-warning::before,
html .alert-legal::before {
  width: 4px;
  background-image: none;
}
html .alert-success::before { background-color: var(--clay); }
html .alert-info::before,
html .alert-legal::before { background-color: var(--smoke); }
html .alert-warning::before { background-color: var(--heat); }
html .alert-danger::before { background-color: var(--kiln-red); }
html .alert a,
html .alert .alert-link {
  color: var(--ember);
}
html .alert strong {
  color: var(--bone);
}
html .alert-testmode strong:first-child {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--heat);
}
html .close {
  color: var(--bone);
  text-shadow: none;
  opacity: 0.7;
}

/* ---------- labels, badges, progress ---------- */
html .label {
  border-radius: var(--radius-0);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
html .label-default,
html .label-info { background: var(--ash-800); color: var(--bone); }
html .label-primary { background: var(--ember); color: var(--on-ember); }
html .label-success { background: var(--clay); color: var(--on-ember); }
html .label-warning { background: var(--heat); color: var(--on-ember); }
html .label-danger { background: var(--kiln-red); color: var(--bone); }
html .badge {
  background: var(--ember);
  color: var(--on-ember);
}
html .progress {
  border-radius: var(--radius-0);
  background: var(--ash-800);
  box-shadow: none;
}
html .progress-bar,
html .progress-bar-success {
  background-color: var(--ember);
}

/* ---------- modals (cart creation, iframe notice) ---------- */
html dialog.modal-card,
html .modal-wrapper .modal-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-0);
  background: var(--ash-900);
  color: var(--bone);
  box-shadow: none;
}
html dialog.modal-card::backdrop {
  background: color-mix(in srgb, var(--ash-950) 88%, transparent);
}
html dialog.modal-card .modal-card-icon {
  background: var(--ember);
  color: var(--on-ember);
}
html .modal-wrapper {
  background: color-mix(in srgb, var(--ash-950) 88%, transparent);
}
html .modal-wrapper .modal-card .modal-card-icon .big-icon {
  color: var(--ember);
}

/* ---------- footer ---------- */
/* the shop footer also holds the test-mode alert, so only its link list is restyled */
html footer > nav a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--smoke);
}
html footer > nav a:hover,
html footer > nav a:focus {
  color: var(--ember);
}
/* inside the site's checkout overlay the website's own footer covers contact, so drop the
 * link list (Contact, "ticketing powered by pretix"). The test-mode alert stays. */
html.in-iframe footer > nav {
  display: none;
}

/* ---------- cart update (checkout.js) ----------
 * While checkout.js swaps the cart's contents for the website's chosen quantity, hide the
 * shop page and show a status line in its place. */
html.kiln-cart-busy body {
  visibility: hidden;
}
html.kiln-cart-busy::after {
  content: "Updating your cart\2026"; /* escaped "…" in case the file is served without a charset */
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke);
  background: var(--ash-950);
}

/* ---------- seat selection (pretix_seating2 plugin) ----------
 * The plugin's seating2.css wraps every selector in :where(), so plain `html .x` rules win,
 * and it takes its colours from --seating2-* properties. Pages: the seat map (seats/ and
 * seats/change/), the "Change seat" link in the cart and the seat list on order pages. */
html:root {
  --seating2-accent: var(--ember);
  --seating2-accent-dark: var(--bone);
  --seating2-taken: var(--line);
  --seating2-taken-border: var(--line);
  --seating2-taken-glyph: var(--line-strong);
  --seating2-mine: var(--ash-950);
  --seating2-mine-border: var(--clay);
  --seating2-seat-border: var(--ash-950);
  --seating2-glyph: var(--ash-950);
  --seating2-row-number: var(--smoke);
  --seating2-map-background: var(--ash-950);
  --seating2-box-fill: color-mix(in srgb, var(--ember) 15%, transparent);
  --seating2-success: var(--clay);
  --seating2-danger: var(--ember-hot);
  --seating2-divider: var(--line);
  --seating2-count-background: var(--ash-800);
  --seating2-count-color: var(--bone);
  --seating2-confirm-background: var(--ash-800);
}
html .seating2-title {
  margin: var(--space-6) 0 var(--space-3);
  font-size: clamp(36px, 5vw, 56px);
}
html .seating2-title small {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke);
}
html .seating2-intro {
  max-width: 60ch;
  margin-bottom: var(--space-5);
  color: var(--smoke);
}

/* map toolbar: arrangement tabs (only with more than one) and zoom buttons */
html .seating2-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
html .seating2-tabs > li {
  float: none;
}
html .seating2-tabs > li + li {
  margin-left: 0;
}
html .seating2-tabs > li > a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-0);
  box-shadow: inset 0 0 0 2px var(--line-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  text-decoration: none;
}
html .seating2-tabs > li > a:hover,
html .seating2-tabs > li > a:focus {
  background: var(--ash-900);
  box-shadow: inset 0 0 0 2px var(--bone);
  text-decoration: none;
}
html .seating2-tabs > li.active > a,
html .seating2-tabs > li.active > a:hover,
html .seating2-tabs > li.active > a:focus {
  background: var(--ember);
  color: var(--on-ember);
  box-shadow: none;
}
html .seating2-tabs > li.active > a .badge {
  background: var(--ash-950);
  color: var(--bone);
}
html .seating2-zoom .btn {
  width: 44px;
  padding: 0;
  font-size: 15px;
}
/* each button draws its own 2px frame, so overlap them to keep the seams 2px */
html .seating2-zoom .btn + .btn {
  margin-left: -2px;
}

/* the map: ash ground, plan areas (the screen) in ash with mono labels */
html .seating2-map .s2-area:not([fill="none"]) {
  fill: var(--ash-800);
}
html .seating2-map .s2-area[stroke] {
  stroke: var(--line-strong);
}
html .seating2-map .s2-area-text {
  fill: var(--smoke);
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.3em;
}
html .seating2-map .s2-rownum {
  font-family: var(--font-mono);
  font-weight: 600;
}
/* Seat categories take their colour from the plan, and the plan's greys and near-black
 * disappear on ash. These match the plan's current category colours (Standard #666666,
 * Wheelchair #1f3fd1, Companion #1c1c1c). If a colour changes in the plan, update it here,
 * or that category shows in the plan's colour. Only free seats: the other states keep the
 * plugin's colours above. Legend swatches use the same markup. */
html .s2-seat.s2-free circle[fill="#666666" i] {
  fill: var(--smoke);
}
html .s2-seat.s2-free circle[fill="#1f3fd1" i] {
  fill: var(--heat);
}
html .s2-seat.s2-free circle[fill="#1c1c1c" i] {
  fill: var(--clay);
}
html .s2-seat.s2-mine circle {
  stroke-width: 2;
}
/* the site's square heat outline doesn't fit a round seat: ring the seat itself */
html .seating2-map .s2-seat:focus-visible {
  outline: none;
}
html .seating2-map .s2-seat:focus-visible circle {
  stroke: var(--heat);
  stroke-width: 3;
}
/* hover/focus help line under the map */
html .seating2-info {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--smoke);
}
html .seating2-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-4) 0 var(--space-5);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--smoke);
}
html .seating2-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  white-space: normal;
}
html .seating2-legend .s2-swatch {
  flex: none;
}

/* "Your tickets" panel: one line per ticket type with a chosen/needed count, then the seats */
html .seating2-line-count {
  margin-left: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-0);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
html .seating2-line-done .seating2-line-count {
  color: var(--on-ember);
  box-shadow: none;
}
html .seating2-line-over .seating2-line-count {
  background-color: var(--kiln-red);
  color: var(--bone);
  box-shadow: none;
}
html .seating2-subheading {
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
}
html .seating2-selected {
  margin-bottom: 0;
}
html .seating2-selected-seat {
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}
/* seat notice icons (wheelchair space etc.) follow the seat name with no space between */
html .seating2-selected-main > .fa {
  margin-left: var(--space-2);
}
html .seating2-selected-main .small {
  margin-top: 2px;
}
html .seating2-selected-main .form-control {
  margin-top: var(--space-2);
}
/* the remove button is a bare 12px icon; give it the cart's 44px square */
html .seating2-remove {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 14px;
  box-shadow: inset 0 0 0 2px var(--line-strong);
}
html .seating2-remove:hover,
html .seating2-remove:focus-visible {
  background: var(--kiln-red);
  box-shadow: inset 0 0 0 2px var(--kiln-red);
}
html .seating2-remove:hover .fa,
html .seating2-remove:focus-visible .fa {
  color: var(--bone);
}
html .seating2-remove:disabled {
  opacity: 1;
  background: var(--ash-800);
  box-shadow: none;
}
html .seating2-remove:disabled .fa {
  color: var(--smoke);
}
/* seat notices that need a tick (e.g. a wheelchair space): marked like a warning alert */
html .seating2-confirm {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 4px);
  border-left: 4px solid var(--heat);
}
html .seating2-confirm .fa {
  color: var(--heat);
}
html .seating2-actions {
  display: grid;
  gap: var(--space-3);
}
html .seating2-actions .btn-block + .btn-block {
  margin-top: 0;
}

/* cart and order pages */
/* pretix's seat icon (in the cart, the per-ticket forms and the membership step) is an SVG
 * with no fill, so it draws black. It's the only `svg-icon` in the shop. */
html svg.svg-icon path {
  fill: var(--smoke);
}
/* the plugin appends the link to the seat line, but pretix's product column (a third of
 * the row) rarely fits both, so it always gets its own line under the seat. Its icon goes
 * in pretix's icon gutter, centred under the 18px seat icon, like the other detail lines. */
html .seating2-change-link {
  display: block;
  width: fit-content;
  margin-top: 2px;
  padding-block: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
html .cart-icon-details .seating2-change-link .fa {
  position: absolute;
  left: 0;
  width: 18px;
  margin-top: 2px;
  text-align: center;
}
/* phones stack the product cell above the count and prices; keep the link off that row */
@media (max-width: 767px) {
  html .cart-row:has(.seating2-change-link) > .product {
    margin-bottom: var(--space-3);
  }
}
html .seating2-order-notice {
  margin-top: var(--space-1);
  color: var(--smoke);
}
html .seating2-order-notice .fa {
  color: var(--heat);
}

@media (prefers-reduced-motion: reduce) {
  html *,
  html *::before,
  html *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}