*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul[role=list],
ol[role=list] {
  list-style: none;
  margin: 0;
  padding: 0;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
:root {
  --bp-tablet: 740px;
  --bp-desktop: 980px;
  --z-base: 1;
  --z-dropdown: 10;
  --z-filter-bar: 900;
  --z-sticky-nav: 1000;
  --z-search-widget: 1020;
  --z-overlay: 1099;
  --z-drawer: 1100;
  --z-modal: 1200;
  --z-toast: 1300;
  --z-tooltip: 1400;
  --page-min-width: 20rem;
  --page-max-width: 80rem;
  --content-width-wide: 75rem;
  --content-width-default: 61.25rem;
  --content-width-narrow: 55rem;
  --content-width-narrower: 48.75rem;
  --content-width-text: 35rem;
  --content-width-banner-mobile: 31.25rem;
  --content-width-card: 28.75rem;
  --card-horizontal-max-width: 35rem;
}
@media only screen and (min-width: 740px) {
  :root {
    --card-horizontal-max-width: var(--content-width-default);
  }
}
:root {
  --font-heading: "Inter", sans-serif;
  --font-body: "Inter", sans-serif;
  --text-8: 0.5rem;
  --text-9: 0.563rem;
  --text-10: 0.625rem;
  --text-11: 0.688rem;
  --text-12: 0.75rem;
  --text-13: 0.813rem;
  --text-14: 0.875rem;
  --text-15: 0.9375rem;
  --text-16: 1rem;
  --text-18: 1.125rem;
  --text-20: 1.25rem;
  --text-22: 1.375rem;
  --text-24: 1.5rem;
  --text-28: 1.75rem;
  --text-32: 2rem;
  --text-40: 2.5rem;
  --text-paragraph: var(--text-15);
  --color-primary: #01285E;
  --color-primary-rgb: 1, 40, 94;
  --color-secondary: #e21e30;
  --color-secondary-rgb: 226, 30, 48;
  --color-success: #058c25;
  --color-success-rgb: 5, 140, 37;
  --color-accent: #004099;
  --color-accent-rgb: 0, 64, 153;
  --color-accent-hover: rgb(6, 96, 186);
  --color-accent-hover-rgb: 6, 96, 186;
  --color-page: #ECEFF3;
  --color-surface: #FAFBFC;
  --color-surface-white: #ffffff;
  --color-surface-muted: #EBF0F7;
  --color-surface-muted-rgb: 235, 240, 247;
  --color-surface-muted-hover: rgb(241, 245, 250);
  --color-surface-dark: #031745;
  --color-surface-dark-rgb: 3, 23, 69;
  --color-on-surface: #031745;
  --color-on-surface-muted: #a4a7ae;
  --color-on-surface-dark: #ffffff;
  --color-on-primary: #ffffff;
  --color-on-secondary: #ffffff;
  --color-on-success: #ffffff;
  --color-primary-on-dark: #046FD9;
  --color-primary-on-dark-rgb: 4, 111, 217;
  --color-border-rgb: 194, 207, 222;
  --color-border: rgb(var(--color-border-rgb));
  --color-border-faint: rgba(var(--color-border-rgb), 0.3);
  --color-border-subtle: rgb(214, 223, 234);
  --color-border-strong: rgb(178, 193, 213);
  --shadow-opacity-verylow: 0.05;
  --shadow-opacity-low: 0.12;
  --shadow-opacity-medium: 0.16;
  --shadow-opacity-high: 0.24;
  --shadow-opacity-veryhigh: 0.32;
  --shadow-blur-low: 6px;
  --shadow-blur-medium: 16px;
  --shadow-blur-high: 28px;
  --shadow-blur-veryhigh: 40px;
  --shadow-y-low: 1px;
  --shadow-y-medium: 4px;
  --shadow-y-high: 8px;
  --shadow-y-veryhigh: 12px;
  --shadow-verylow: 0 0 var(--shadow-blur-low) 0 rgba(0, 0, 0, var(--shadow-opacity-verylow));
  --shadow-low: 0 var(--shadow-y-low) var(--shadow-blur-low) 0 rgba(0, 0, 0, var(--shadow-opacity-low));
  --shadow-medium: 0 var(--shadow-y-medium) var(--shadow-blur-medium) 0 rgba(0, 0, 0, var(--shadow-opacity-medium));
  --shadow-high: 0 var(--shadow-y-high) var(--shadow-blur-high) 0 rgba(0, 0, 0, var(--shadow-opacity-high));
  --shadow-veryhigh: 0 var(--shadow-y-veryhigh) var(--shadow-blur-veryhigh) 0 rgba(0, 0, 0, var(--shadow-opacity-veryhigh));
  --shadow-card: var(--shadow-medium);
  --shadow-outline: 0 0 0 6px rgba(255, 255, 255, 0.2);
  --shadow-outline-thin: 0 0 0 4px rgba(255, 255, 255, 0.2);
  --shdow-outline-light: 0 0 0 4px rgba(255, 255, 255, 0.8);
  --shdow-outline-white: 0 0 0 4px rgba(255, 255, 255, 1);
  --space-base: 1rem;
  --space-4: calc(var(--space-base) * 0.25);
  --space-6: calc(var(--space-base) * 0.375);
  --space-8: calc(var(--space-base) * 0.5);
  --space-10: calc(var(--space-base) * 0.625);
  --space-12: calc(var(--space-base) * 0.75);
  --space-14: calc(var(--space-base) * 0.875);
  --space-16: var(--space-base);
  --space-20: calc(var(--space-base) * 1.25);
  --space-24: calc(var(--space-base) * 1.5);
  --space-28: calc(var(--space-base) * 1.75);
  --space-32: calc(var(--space-base) * 2);
  --space-36: calc(var(--space-base) * 2.25);
  --space-40: calc(var(--space-base) * 2.5);
  --space-44: calc(var(--space-base) * 2.75);
  --space-48: calc(var(--space-base) * 3);
  --space-56: calc(var(--space-base) * 3.5);
  --space-64: calc(var(--space-base) * 4);
  --space-72: calc(var(--space-base) * 4.5);
  --space-80: calc(var(--space-base) * 5);
  --space-96: calc(var(--space-base) * 6);
  --space-112: calc(var(--space-base) * 7);
  --space-128: calc(var(--space-base) * 8);
  --space-144: calc(var(--space-base) * 9);
  --border-radius-2: 0.15rem;
  --border-radius-4: 0.25rem;
  --border-radius-8: 0.5rem;
  --border-radius-12: 0.75rem;
  --border-radius-16: 1rem;
  --border-radius-20: 1.25rem;
  --border-radius-32: 2rem;
  --card-border-radius: var(--border-radius-8);
  --field-border-radius: var(--border-radius-2);
}
@media only screen and (min-width: 640px) {
  :root {
    --card-border-radius: var(--border-radius-12);
  }
}
:root {
  --close-button-size: 1.75rem;
  --grid-padding-inline: var(--space-12);
}
@media only screen and (min-width: 400px) {
  :root {
    --grid-padding-inline: var(--space-16);
  }
}
@media only screen and (min-width: 500px) {
  :root {
    --grid-padding-inline: var(--space-20);
  }
}
@media only screen and (min-width: 740px) {
  :root {
    --grid-padding-inline: var(--space-24);
  }
}
@media only screen and (min-width: 840px) {
  :root {
    --grid-padding-inline: var(--space-28);
  }
}
@media only screen and (min-width: 980px) {
  :root {
    --grid-padding-inline: var(--space-32);
  }
}
:root {
  --section-padding-block: var(--space-16);
}
@media only screen and (min-width: 740px) {
  :root {
    --section-padding-block: var(--space-20);
  }
}
@media only screen and (min-width: 980px) {
  :root {
    --section-padding-block: var(--space-24);
  }
}
@media only screen and (min-width: 1024px) {
  :root {
    --section-padding-block: var(--space-28);
  }
}
:root {
  --header-content-padding-inline: var(--space-16);
}
@media only screen and (min-width: 640px) {
  :root {
    --header-content-padding-inline: var(--space-20);
  }
}
@media only screen and (min-width: 740px) {
  :root {
    --header-content-padding-inline: var(--space-24);
  }
}
@media only screen and (min-width: 840px) {
  :root {
    --header-content-padding-inline: var(--space-28);
  }
}
@media only screen and (min-width: 980px) {
  :root {
    --header-content-padding-inline: var(--space-32);
  }
}
@media only screen and (min-width: 1024px) {
  :root {
    --header-content-padding-inline: var(--space-36);
  }
}
:root {
  --panel-padding-inline: var(--space-12);
  --panel-padding-block: var(--space-12);
  --card-padding-inline: var(--space-12);
  --card-padding-block: var(--space-12);
  --banner-padding-inline: var(--space-12);
  --card-horizontal-padding-inline: var(--space-8);
}
@media only screen and (min-width: 375px) {
  :root {
    --panel-padding-inline: var(--space-16);
    --panel-padding-block: var(--space-16);
    --card-padding-inline: var(--space-16);
    --card-padding-block: var(--space-16);
    --card-horizontal-padding-inline: var(--space-12);
  }
}
@media only screen and (min-width: 500px) {
  :root {
    --panel-padding-inline: var(--space-20);
    --panel-padding-block: var(--space-20);
    --banner-padding-inline: var(--space-20);
  }
}
@media only screen and (min-width: 640px) {
  :root {
    --card-horizontal-padding-inline: var(--space-16);
  }
}
@media only screen and (min-width: 740px) {
  :root {
    --panel-padding-inline: var(--space-24);
  }
}
@media only screen and (min-width: 980px) {
  :root {
    --card-padding-inline: var(--space-20);
    --card-padding-block: var(--space-20);
    --panel-padding-inline: var(--space-28);
    --panel-padding-block: var(--space-24);
  }
}
@media only screen and (min-width: 1024px) {
  :root {
    --card-padding-inline: var(--space-24);
    --panel-padding-inline: var(--space-32);
  }
}
@media only screen and (min-width: 1200px) {
  :root {
    --card-padding-inline: var(--space-28);
  }
}
:root {
  --drawer-padding-inline: var(--space-16);
  --drawer-padding-bottom: var(--space-20);
  --drawer-padding-top: var(--space-20);
  --drawer-header-padding-block: var(--space-16);
  --drawer-footer-padding-block: var(--space-12);
  --popover-padding-inline: var(--space-16);
  --popover-padding-block: var(--space-12);
}
@media only screen and (min-width: 400px) {
  :root {
    --drawer-padding-inline: var(--space-20);
    --drawer-padding-bottom: var(--space-24);
  }
}
@media only screen and (min-width: 500px) {
  :root {
    --drawer-padding-inline: var(--space-28);
    --drawer-padding-bottom: var(--space-28);
    --drawer-padding-top: var(--space-24);
  }
}
@media only screen and (min-width: 640px) {
  :root {
    --drawer-padding-inline: var(--space-32);
    --drawer-padding-bottom: var(--space-32);
  }
}
@media only screen and (min-width: 740px) {
  :root {
    --drawer-padding-top: var(--space-28);
  }
}
@media only screen and (min-width: 840px) {
  :root {
    --drawer-padding-top: var(--space-28);
    --drawer-padding-bottom: var(--space-48);
  }
}
@media only screen and (min-width: 1024px) {
  :root {
    --drawer-padding-top: var(--space-32);
  }
}
:root {
  --step-badge-column-gap: var(--space-8);
  --step-badge-size: 1.75rem;
}
@media only screen and (min-width: 400px) {
  :root {
    --step-badge-column-gap: var(--space-12);
    --step-badge-size: 2rem;
  }
}
@media only screen and (min-width: 640px) {
  :root {
    --step-badge-size: 2.25rem;
  }
}
@media only screen and (min-width: 980px) {
  :root {
    --step-badge-column-gap: var(--space-16);
  }
}
:root {
  --site-header-min-height: 3.75rem;
}
@media only screen and (min-width: 640px) {
  :root {
    --site-header-min-height: 4rem;
  }
}
@media only screen and (min-width: 840px) {
  :root {
    --site-header-min-height: 5rem;
  }
}
@media only screen and (min-width: 980px) {
  :root {
    --site-header-min-height: 5.25rem;
  }
}
@media only screen and (min-width: 1024px) {
  :root {
    --site-header-min-height: 5.5rem;
  }
}
@media only screen and (min-width: 1200px) {
  :root {
    --site-header-min-height: 5.75rem;
  }
}
:root {
  --site-tab-nav-item-height: 2.75rem;
  --site-tab-nav-list-padding: 0.3125rem;
}
@media only screen and (min-width: 840px) {
  :root {
    --site-tab-nav-item-height: 2.75rem;
  }
}
@media only screen and (min-width: 980px) {
  :root {
    --site-tab-nav-item-height: 3rem;
  }
}
@media only screen and (min-width: 1024px) {
  :root {
    --site-tab-nav-item-height: 3.25rem;
  }
}

@media only screen and (max-width: 374px) {
  .visually-hidden-until-mobile-sm {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media only screen and (max-width: 399px) {
  .visually-hidden-until-mobile {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media only screen and (max-width: 499px) {
  .visually-hidden-until-mobile-md {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media only screen and (max-width: 639px) {
  .visually-hidden-until-mobile-lg {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media only screen and (max-width: 739px) {
  .visually-hidden-until-tablet {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media only screen and (max-width: 839px) {
  .visually-hidden-until-tablet-lg {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media only screen and (max-width: 979px) {
  .visually-hidden-until-desktop {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media only screen and (max-width: 1023px) {
  .visually-hidden-until-desktop-lg {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media only screen and (max-width: 1199px) {
  .visually-hidden-until-desktop-xl {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media only screen and (min-width: 375px) {
  .visually-hidden-from-mobile-sm {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media only screen and (min-width: 400px) {
  .visually-hidden-from-mobile {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media only screen and (min-width: 500px) {
  .visually-hidden-from-mobile-md {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media only screen and (min-width: 640px) {
  .visually-hidden-from-mobile-lg {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media only screen and (min-width: 740px) {
  .visually-hidden-from-tablet {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media only screen and (min-width: 840px) {
  .visually-hidden-from-tablet-lg {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media only screen and (min-width: 980px) {
  .visually-hidden-from-desktop {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media only screen and (min-width: 1024px) {
  .visually-hidden-from-desktop-lg {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media only screen and (min-width: 1200px) {
  .visually-hidden-from-desktop-xl {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

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

html,
body,
.page {
  min-width: var(--page-min-width, 322px);
}

html {
  height: 100%;
  height: 100vh;
  height: 100dvh;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background-color: var(--color-page);
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

img {
  font-size: var(--text-12);
  color: inherit;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-16);
  color: var(--color-on-surface);
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-weight: 400;
  text-wrap: pretty;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: var(--space-4);
}

h1,
.h1 {
  font-size: var(--text-28);
  line-height: 1.15;
}
@media only screen and (min-width: 980px) {
  h1,
  .h1 {
    font-size: var(--text-32);
  }
}

h2,
.h2 {
  font-size: var(--text-24);
  line-height: 1.15;
}
@media only screen and (min-width: 640px) {
  h2,
  .h2 {
    font-size: var(--text-28);
  }
}

h3,
.h3 {
  font-size: var(--text-20);
  line-height: 1.15;
}
@media only screen and (min-width: 640px) {
  h3,
  .h3 {
    font-size: var(--text-22);
  }
}

h4,
.h4 {
  font-size: var(--text-18);
  line-height: 1.2;
}

h5,
.h5 {
  font-size: var(--text-16);
  line-height: 1.2;
}

h6,
.h6 {
  font-size: var(--text-14);
  line-height: 1.2;
}

p {
  font-size: var(--text-16);
  line-height: 1.6;
  margin-bottom: var(--space-20);
  margin-top: 0;
}

table,
ul,
ol {
  font-size: var(--text-16);
  line-height: 1.6;
  margin-bottom: var(--space-20);
  margin-top: 0;
}

ul,
ol {
  padding: 0 0 0 var(--space-20);
}
ul.has-icn,
ol.has-icn {
  list-style: none;
  padding: 0;
}
ul.has-icn li,
ol.has-icn li {
  margin-bottom: var(--space-8);
}

.note {
  font-size: var(--text-14);
}

em {
  font-weight: 600;
  font-style: normal;
}

b {
  font-weight: 700;
}

strong {
  font-weight: 800;
}

.black {
  font-weight: 900;
}

.ucase {
  text-transform: uppercase;
}

.nowrap {
  white-space: nowrap;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

a,
button {
  cursor: pointer;
}
a:focus,
button:focus {
  outline: none;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid rgba(var(--color-accent-rgb), 0.5);
  outline-offset: 2px;
}
a:active,
button:active {
  outline: none;
}

.center {
  text-align: center;
}
.center img {
  margin-left: auto;
  margin-right: auto;
}

.text-15 {
  font-size: var(--text-15);
}

.text-14 {
  font-size: var(--text-14);
}

p + ul,
p + ol {
  margin-top: -1rem;
}

.icon {
  display: inline-block;
  width: var(--icon-size, 1.25rem);
  height: var(--icon-size, 1.25rem);
  background-color: var(--icon-color, currentColor);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: var(--icon-mask-size, contain);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: var(--icon-mask-size, contain);
  flex-shrink: 0;
}

.chip {
  background-color: var(--chip-background-color, var(--color-surface-dark));
  color: var(--color-on-surface-dark);
  border-radius: 99rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--chip-padding-inline, var(--space-10));
  padding-block: var(--chip-padding-block, var(--space-6));
  font-size: var(--chip-font-size, var(--text-12));
  font-weight: var(--chip-font-weight, 400);
  line-height: 1;
  text-transform: uppercase;
}

.step-badge {
  border-radius: 100%;
  background: var(--step-badge-background, var(--color-surface-dark));
  color: var(--step-badge-color, var(--color-on-surface-dark));
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--step-badge-size, 1.75rem);
  height: var(--step-badge-size, 1.75rem);
}

.badge {
  background: var(--badge-background, var(--color-secondary));
  color: var(--badge-color, var(--color-on-secondary));
  font-size: var(--badge-font-size, var(--text-8));
  font-weight: 500;
  padding: 2px 3px;
  border-radius: 3px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  opacity: var(--badge-count-opacity, 0.95);
}
@media only screen and (max-width: 739px) {
  .badge--new {
    font-size: 0;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 100%;
  }
}
.badge--count {
  --badge-font-size: var(--text-12);
  --badge-background: var(--color-surface-muted);
  --badge-color: var(--color-on-surface);
  --badge-count-opacity: 1;
  border-radius: 100%;
  width: 1.25rem;
  height: 1.25rem;
  font-weight: 700;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--button-gap, var(--space-8));
  font-size: var(--button-font-size, var(--text-14));
  font-weight: var(--button-font-weight, 700);
  line-height: 1.1;
  padding-inline: var(--button-padding-inline, var(--space-12));
  padding-top: var(--button-padding-top, var(--space-8));
  padding-bottom: var(--button-padding-bottom, var(--space-8));
  border-radius: var(--button-border-radius, var(--border-radius-4));
  background: var(--button-background, var(--color-accent));
  border: var(--button-border, var(--button-border-width, 1.5px) solid var(--button-border-color, var(--color-accent)));
  color: var(--button-color, var(--color-on-primary));
  box-shadow: none;
  text-decoration: none;
  width: var(--button-width, auto);
  max-width: var(--button-max-width, none);
  height: var(--button-height, auto);
  min-height: var(--button-min-height, 2.5rem);
  min-width: var(--button-min-width, auto);
  text-align: center;
  text-transform: var(--button-text-transform, none);
  cursor: pointer;
}
.btn:hover {
  --button-background: var(--button-hover-background, var(--color-accent-hover));
  --button-border-color: var(--button-hover-border-color, var(--color-accent-hover));
  --button-color: var(--button-hover-color, var(--color-on-primary));
  opacity: var(--button-hover-opacity, 1);
  text-decoration: none;
}
.btn--flat {
  --button-background: var(--color-surface);
  --button-border-color: var(--color-border-faint);
  --button-color: var(--color-primary);
  --button-border-width: 1.5px;
  --button-min-height: 2.375rem;
  --button-padding-inline: var(--space-14);
  --button-font-weight: 600;
  --button-hover-background: var(--color-surface-white);
  --button-hover-border-color: rgba(var(--color-primary-rgb), .15);
  --button-hover-color: var(--color-primary);
}
.btn--muted {
  --button-background: var(--color-surface-muted);
  --button-border-color: var(--color-border-faint);
  --button-border-width: 1px;
  --button-color: var(--color-accent);
  --button-min-height: 2.375rem;
  --button-padding-inline: var(--space-14);
  --button-font-weight: 600;
  --button-hover-background: var(--color-surface-muted-hover);
  --button-hover-border-color: var(--color-border-faint);
  --button-hover-color: var(--color-accent);
}
.btn--outline {
  --button-background: none;
  --button-border-width: 2px;
  --button-border-color: var(--color-accent);
  --button-color: var(--color-accent);
  --button-hover-background: none;
  --button-hover-color: var(--color-accent-hover);
}
.btn--outline-white {
  --button-background: none;
  --button-border-width: 2px;
  --button-border-color: rgba(255,255,255, .8);
  --button-color: var(--color-on-surface-dark);
  --button-hover-opacity: 0.75;
  --button-hover-background: transparent;
  --button-hover-border-color: rgba(255,255,255, .8);
  --button-hover-color: var(--color-on-surface-dark);
}
.btn--small {
  --button-font-size: var(--text-14);
  --button-padding-inline: var(--space-8);
  --button-min-height: 2rem;
  --button-min-width: auto;
}
.btn--small .icon {
  --icon-size: var(--text-12);
}
.btn--medium {
  --button-font-size: var(--text-15);
  --button-padding-inline: var(--space-12);
  --button-min-height: 2.75rem;
  --button-min-width: 6.25rem;
  --button-gap: var(--space-6);
}
.btn--medium .icon {
  --icon-size: 0.75rem;
}
.btn--big {
  --button-font-size: var(--text-16);
  --button-padding-inline: var(--space-24);
  --button-min-height: 3rem;
  --button-min-width: 8.75rem;
}
.btn--wide {
  --button-width: 100%;
  --button-font-size: var(--text-16);
  --button-font-weight: 700;
  --button-min-height: 3.5rem;
}
.btn--wide .icon {
  --icon-size: 0.875rem;
}
.btn--round {
  --button-border-radius: 100%;
  --button-padding-inline: 0;
  --button-padding-top: 0;
  --button-padding-bottom: 0;
  --button-min-width: 2.25rem;
  --button-max-width: 2.25rem;
  --button-min-height: 2.25rem;
}
.btn--text {
  --button-background: none;
  --button-border: none;
  --button-color: var(--color-accent);
  --button-hover-opacity: 0.75;
  --button-min-height: auto;
  --button-font-weight: 500;
  --button-font-size: var(--text-paragraph);
  --button-padding-top: 0;
  --button-padding-bottom: 0;
  --button-padding-inline: 0;
  --button-hover-color: var(--color-accent-hover);
  --button-hover-background: none;
  --button-hover-border-color: none;
}
.btn--nav {
  --button-padding-inline: 0.25rem;
  --button-padding-top: 0;
  --button-padding-bottom: 0;
  --button-height: 2.5rem;
  --button-width: 2.5rem;
  --button-min-width: 2.5rem;
  --button-background: none;
  --button-border-color: transparent;
  --button-gap: 0.25rem;
  --button-border-radius: 100%;
  --button-hover-background: rgba(var(--color-accent-hover-rgb), 0.2);
  --button-hover-border-color: transparent;
}
.btn--nav.is-hover {
  --button-background: rgba(var(--color-accent-hover-rgb), 0.2);
  --button-border-color: transparent;
}
.btn--nav.is-hover, .btn--nav:hover {
  box-shadow: 0 0 0 2px rgba(var(--color-accent-hover-rgb), 0.2);
}
.btn--chip {
  --button-border-radius: 99rem;
  --button-min-width: 4rem;
}
.btn--close {
  --button-min-width: var(--close-button-size);
  --button-min-height: var(--close-button-size);
  --button-padding-inline: 0;
}
.btn--info {
  --button-min-height: 1.625rem;
  --button-border-color: var(--color-border-faint);
  --button-gap: pxToRem(2px);
  --button-font-size: var(--text-12);
  --button-font-weight: 500;
  --button-color: var(--color-on-surface);
  --button-padding-inline: var(--space-4);
  --button-padding-top: 0.125rem;
  --button-padding-bottom: 0.125rem;
  --button-hover-border-color: var(--color-border-faint);
  --button-hover-color: var(--color-on-surface);
  --button-hover-opacity: 0.8;
  --button-background: var(--color-surface-muted);
  --button-hover-background: var(--color-surface-muted);
}
.btn--info .icon {
  --icon-size: 1rem;
  margin-left: -0.125rem;
}
.btn--sold-out {
  --button-padding-inline: var(--space-8);
  --button-font-size: var(--text-14);
}
.btn--sold-out, .btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  --button-hover-opacity: 0.3;
}
.btn[hidden] {
  display: none;
}
.btn[data-action=load-more] {
  padding-right: var(--space-20);
  padding-left: var(--space-16);
}

button > *,
a > * {
  pointer-events: none;
}

.pretitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--space-4);
  column-gap: var(--pretitle-gap, var(--space-8));
  margin-bottom: var(--pretitle-margin-bottom, var(--space-4));
}
.pretitle__text {
  font-size: var(--pretitle-label-font-size, var(--text-14));
  font-weight: var(--pretitle-label-font-weight, 700);
  line-height: 1.15;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.pretitle .chip {
  margin-left: -0.09375rem;
}

.title {
  font-weight: var(--title-font-weight, 700);
  letter-spacing: -0.03125rem;
  margin-bottom: var(--title-margin-bottom, var(--space-8));
  text-wrap: balance;
  color: inherit;
  text-decoration: none;
  overflow-wrap: break-word;
}
.title small {
  font-size: 80%;
  position: relative;
  top: -0.05em;
}
.title--no-margin {
  margin-bottom: 0;
}
.title:has(.icon) {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.subtitle {
  font-weight: var(--subtitle-font-weight, 700);
  text-transform: var(--subtitle-text-transform, uppercase);
  margin-bottom: var(--space-8);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.subtitle .icon {
  position: relative;
}
.subtitle__text {
  text-transform: none;
  display: inline-flex;
}
.subtitle__text .icon {
  --icon-size: var(--text-18);
}
.subtitle:has(.icon) {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.title + .subtitle {
  margin-top: -2px;
}

.intro {
  line-height: 1.35;
  margin-bottom: var(--intro-margin-bottom, var(--space-20));
  font-weight: var(--intro-font-weight, 700);
}

.price {
  --price-was-grid-template-tight-space: "was was"
      "from amount"
      "per per";
  --price-was-grid-template: "from was amount"
      "per per per";
  display: inline-grid;
  grid-template-columns: auto auto;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  line-height: 1;
  grid-template-areas: "from amount" "per per";
}
.price:has(.price__was) {
  grid-template-areas: var(--price-was-grid-template-tight-space);
}
@media only screen and (min-width: 400px) {
  .price:has(.price__was) {
    grid-template-areas: var(--price-was-grid-template);
  }
}
@media only screen and (min-width: 740px) {
  .price:has(.price__was) {
    grid-template-areas: var(--price-was-grid-template-tight-space);
  }
}
@media only screen and (min-width: 840px) {
  .price:has(.price__was) {
    grid-template-areas: var(--price-was-grid-template);
  }
}
.price__from {
  grid-area: from;
  font-size: var(--text-12);
  align-self: center;
  justify-self: end;
}
.price__was {
  grid-area: was;
  font-size: var(--price-was-font-size, var(--text-15));
  font-weight: var(--price-was-font-weight, 500);
  text-decoration: line-through;
  align-self: center;
  justify-self: end;
  opacity: 0.5;
}
.price__amount {
  grid-area: amount;
  font-size: var(--price-amount-font-size, var(--text-24));
  font-weight: var(--price-amount-font-weight, 700);
  letter-spacing: var(--price-amount-letter-spacing, -0.01em);
}
.price__currency {
  font-size: 80%;
  position: relative;
  top: -0.1em;
}
.price__unit {
  grid-area: per;
  font-size: var(--text-12);
  justify-self: end;
}

.amount-list {
  width: 100%;
  justify-self: end;
  display: grid;
}
@media only screen and (min-width: 640px) {
  .amount-list {
    max-width: 21.25rem;
  }
}
.amount-list > .amount:last-child .amount__value {
  margin-bottom: 0;
}
@media only screen and (min-width: 375px) {
  .amount-list > .amount:last-child {
    margin-bottom: 0;
  }
  .amount-list > .amount:last-child .amount__value,
  .amount-list > .amount:last-child .amount__label {
    margin-bottom: 0;
  }
}

.amount {
  --amount-label-width: 9.25rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
  line-height: 1;
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}
@media only screen and (min-width: 375px) {
  .amount {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: var(--space-12);
    row-gap: 0;
  }
}
@media only screen and (min-width: 640px) {
  .amount {
    margin-left: auto;
    margin-right: 0;
    padding-left: 0;
  }
}
.amount[hidden] {
  display: none;
}
.amount__label {
  font-size: var(--text-12);
  font-weight: 500;
  margin-bottom: var(--space-4);
}
@media only screen and (min-width: 375px) {
  .amount__label {
    font-size: var(--text-15);
    flex: 0 0 var(--amount-label-width);
    align-self: center;
    margin-bottom: var(--space-12);
  }
}
.amount__value {
  font-size: var(--text-16);
  font-weight: 500;
  margin-bottom: var(--space-16);
}
@media only screen and (min-width: 375px) {
  .amount__value {
    flex: 1 1 auto;
    align-self: center;
    margin-bottom: var(--space-12);
    text-align: right;
  }
}
.amount--big .amount__label {
  font-weight: 700;
  font-size: var(--text-18);
}
.amount--big .amount__value {
  font-weight: 700;
  font-size: var(--text-20);
}
.amount--bold .amount__label, .amount--bold .amount__value {
  font-weight: 700;
}
.amount--big + .amount {
  margin-top: -0.125rem;
}
.amount__gst {
  font-size: var(--text-13);
  flex: 1 0 100%;
  margin-bottom: var(--space-4);
  margin-top: -0.125rem;
  line-height: 1.2;
}
@media only screen and (min-width: 375px) {
  .amount__gst {
    margin-bottom: var(--space-8);
    display: block;
    text-align: right;
  }
}

.meta {
  --icon-size: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: var(--meta-flex-direction, row);
  row-gap: var(--meta-row-gap, 0.25rem);
  column-gap: var(--space-20);
  margin-left: -0.125rem;
}
@media only screen and (min-width: 640px) {
  .meta {
    --meta-text-font-size: var(--text-15);
  }
}
@media only screen and (min-width: 1024px) {
  .meta {
    --meta-flex-direction: column;
  }
}
.meta__item {
  display: grid;
  grid-template-columns: var(--icon-size) 1fr;
  align-items: start;
  column-gap: var(--space-6);
}
.meta__text {
  font-size: var(--meta-text-font-size, var(--text-14));
  font-weight: var(--meta-text-font-weight, 400);
  line-height: 1.2;
  padding-top: 0.1em;
}
.meta__text--list {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--space-8);
  column-gap: var(--space-20);
}

.highlight {
  border: 3px solid var(--color-primary);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  line-height: 1;
  border-radius: var(--border-radius-8);
}
.highlight > *:last-child {
  margin-bottom: 0;
}
.highlight a:hover {
  text-decoration: none;
  opacity: 0.8;
}

.term-list {
  text-align: left;
  display: grid;
  gap: var(--space-12);
}

.term {
  display: grid;
  grid-template-columns: clamp(86px, 20%, 200px) 1fr;
  border-radius: var(--border-radius-4);
  border: 1px solid var(--color-border-subtle);
}
.term.is-active {
  box-shadow: 0 0 0 1.5px rgba(var(--color-success-rgb), 0.6), var(--shadow-low);
  position: relative;
}
.term.is-active::before {
  content: "";
  position: absolute;
  top: -0.375rem;
  left: -0.375rem;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--color-success);
  mask-image: url("../images/icons/check-invert.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  z-index: 2;
}
.term.is-active::after {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: -0.5rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 100%;
  background: var(--color-surface-white);
  z-index: 1;
}
.term__label {
  background: var(--term-label-background, var(--color-surface-muted));
  font-weight: 700;
  padding: var(--space-8) var(--space-8);
  padding-right: var(--space-12);
  font-size: var(--term-label-font-size, var(--text-15));
  display: flex;
  align-items: center;
  justify-content: end;
  border-radius: var(--border-radius-4) 0 0 var(--border-radius-4);
  line-height: 1.2;
  text-align: right;
  min-height: var(--term-label-min-height, auto);
}
.term__description {
  background: var(--color-surface);
  padding: var(--space-4) var(--space-8);
  font-size: var(--term-description-font-size, var(--text-15));
  display: flex;
  align-items: center;
  border-radius: 0 var(--border-radius-4) var(--border-radius-4) 0;
}

.team-logo-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: var(--team-logo-list-justify, center);
  gap: var(--team-logo-list-gap, var(--space-8));
}

.team-logo {
  --_team-logo-size: var(--team-logo-size, 1.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.team-logo::before {
  content: "";
  display: inline-flex;
  width: var(--_team-logo-size);
  height: var(--_team-logo-size);
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.team-logo[data-team=tbc]::before {
  content: "TBC";
  font-size: var(--text-12);
  font-weight: 700;
  background: var(--color-surface-muted);
  mask-image: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  color: rgba(var(--color-primary-rgb), 0.7);
}

.card__team-image-set {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  position: relative;
  background: linear-gradient(to right, var(--team-color-a) 0%, var(--team-color-a) 15%, var(--team-color-b) 85%, var(--team-color-b) 100%);
}
.card__team-image-set::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  background-image: var(--premiership-logo, url(../images/card/card-afl-premiership-logo.png));
  background-size: auto 70%;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.9;
}

.card__team-image {
  position: relative;
  overflow: hidden;
}
.card__team-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.form-section {
  margin-bottom: var(--space-24);
}
.form-section__header {
  padding-inline: var(--space-8);
  margin-bottom: var(--space-12);
}

.form-action {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-20);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-20);
}
.form-action--no-border {
  border-top: none;
}
@media only screen and (min-width: 640px) {
  .form-action {
    justify-content: end;
  }
}
.form-action--spread {
  flex-direction: column;
}
@media only screen and (min-width: 640px) {
  .form-action--spread {
    flex-direction: row;
    justify-content: space-between;
  }
}
.form-action--center {
  justify-content: center;
}
.form-action__primary {
  order: 1;
}
@media only screen and (min-width: 640px) {
  .form-action__primary {
    order: 2;
    max-width: 21.25rem;
  }
}
.form-action__secondary {
  margin: 0 auto;
  min-width: 10rem;
  order: 2;
}
@media only screen and (min-width: 640px) {
  .form-action__secondary {
    order: 1;
    margin: auto auto auto 0;
    min-width: auto;
  }
}
.form-action__additional {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: start;
}
.form-action__additional.fieldset {
  margin-bottom: var(--space-16);
}
.form-action__additional--tc {
  justify-content: end;
}
.form-action__additional--tc .checkbox {
  display: inline-grid;
}
.form-action__alt {
  flex: 1 0 100%;
  margin-top: var(--space-16);
}

.fieldset {
  --field-mobile-min-width: 100%;
}
@media only screen and (min-width: 500px) {
  .fieldset {
    --field-mobile-min-width: 20rem;
  }
}
.fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-16);
  column-gap: 0;
}
.fieldset:last-child {
  margin-bottom: 0;
}
.fieldset__header {
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding-block: var(--space-8);
  padding-inline: var(--space-12);
  border-radius: var(--border-radius-4);
}
.fieldset__header > :last-child {
  margin-bottom: 0;
}
.fieldset__row {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-16);
  row-gap: var(--space-16);
}
@media only screen and (min-width: 400px) {
  .fieldset__row {
    padding-left: var(--space-4);
  }
}
.fieldset [hidden] {
  display: none !important;
}

.panel > .fieldset + .fieldset {
  margin-top: var(--space-36);
}

.field__row-break {
  flex-basis: 100%;
  height: 0px;
}

label {
  display: block;
  font-size: var(--text-15);
  margin-bottom: var(--label-margin-bottom, var(--space-4));
  line-height: 1.2;
  padding: 0;
  text-align: left;
  color: var(--color-on-surface);
}

.label {
  font-size: var(--label-font-size, var(--text-13));
  font-weight: var(--label-font-weight, 600);
  margin-bottom: var(--label-margin-bottom, var(--space-4));
  padding-left: 0.125rem;
}
.label--with-badge {
  --title-margin-bottom: 0;
  --step-badge-column-gap: var(--space-8);
  --step-badge-align-self: center;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "badge heading";
  column-gap: var(--step-badge-column-gap, var(--space-8));
}
.label--with-badge .step-badge {
  grid-area: badge;
  align-self: var(--step-badge-align-self, start);
}
.label--with-badge > .title, .label--with-badge > .text {
  grid-area: heading;
  align-self: center;
}
.label--with-badge .label__text {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-2);
}
.label--with-badge .label__price {
  font-size: var(--text-14);
  font-weight: 400;
}

.mandatory::after {
  content: " *";
  color: var(--color-secondary);
}

input[type=number],
input[type=text],
input[type=email],
input[type=tel],
input[type=password],
input[type=date],
input[type=search],
select,
.field--radio > label,
.field--checkbox > label {
  appearance: none;
  background: var(--input-background, var(--color-surface-white));
  border: none;
  font-size: var(--input-font-size, var(--text-16));
  font-weight: var(--input-font-weight, 400);
  line-height: var(--input-line-height, 1.1);
  padding: var(--input-padding, var(--space-12));
  border: var(--input-border, 1px solid var(--color-border));
  color: var(--input-color, var(--color-on-surface));
  outline: none;
  width: 100%;
  max-width: var(--input-max-width, none);
  min-width: var(--input-min-width, auto);
  height: var(--input-height, 2.75rem);
  border-radius: var(--input-border-radius, var(--field-border-radius));
  text-align: var(--input-text-align, left);
}
input[type=number][readonly], input[type=number][disabled],
input[type=text][readonly],
input[type=text][disabled],
input[type=email][readonly],
input[type=email][disabled],
input[type=tel][readonly],
input[type=tel][disabled],
input[type=password][readonly],
input[type=password][disabled],
input[type=date][readonly],
input[type=date][disabled],
input[type=search][readonly],
input[type=search][disabled],
select[readonly],
select[disabled],
.field--radio > label[readonly],
.field--radio > label[disabled],
.field--checkbox > label[readonly],
.field--checkbox > label[disabled] {
  --input-background: var(--color-page);
  --input-border: 1px solid var(--color-border-subtle);
}

input[type=search] {
  padding-right: 0;
}
input[type=search]::-webkit-search-cancel-button {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  background-color: currentColor;
  mask-image: url("../images/icons/remove.svg");
  -webkit-mask-image: url("../images/icons/remove.svg");
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
  margin-inline-start: var(--space-8, 0.5rem);
  opacity: 0.5;
}
input[type=search]::-webkit-search-cancel-button:hover {
  opacity: 1;
}

::placeholder {
  color: var(--placeholder-color, var(--color-on-surface-muted));
}

.disabled {
  opacity: 0.4;
}

.field {
  min-width: var(--field-min-width, auto);
  max-width: var(--field-max-width, none);
  flex: var(--field-flex, auto);
}
.field--select select {
  appearance: none;
  padding-right: var(--space-32);
  background-image: url("../images/icons/chevron-down.svg");
  background-size: 0.75rem;
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
}
.field--select select:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.field--title {
  --field-min-width: 5.25rem;
  --field-flex: 1 1 5.25rem;
  --field-max-width: 5.25rem;
}
.field--name, .field--company, .field--phone, .field--state, .field--suburb, .field--city, .field--country {
  --field-min-width: 12.5rem;
  --field-flex: 1 1 12.5rem;
  --field-max-width: 18.75rem;
}
.field--suite, .field--guest {
  --field-min-width: 12.5rem;
  --field-max-width: 12.5rem;
}
.field--email {
  --field-min-width: var(--field-mobile-min-width);
  --field-flex: 2 1 var(--field-mobile-min-width);
  --field-max-width: 25rem;
}
.field--address {
  --field-flex: 100%;
  --field-max-width: 38.5rem ;
}
.field--postcode {
  --field-min-width: 6.25rem;
  --field-flex: 1 1 6.25rem;
  --field-max-width: 6.25rem;
}
.field--quantity {
  --input-min-width: 2.75rem;
  --input-max-width: 2.75rem;
  --input-text-align: center;
  display: flex;
  align-items: center;
  column-gap: var(--space-6);
}
.field--quantity input[type=number] {
  --input-padding: var(--space-4);
  --input-font-weight: 700;
  -moz-appearance: textfield;
}
.field--quantity input[type=number]::-webkit-outer-spin-button, .field--quantity input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.field--card-number {
  --field-max-width: 16.25rem;
  flex-grow: 1;
  flex-shrink: 0;
}
.field--card-name, .field--card-type {
  --field-max-width: 14.375rem;
  flex-grow: 1;
  flex-shrink: 0;
}
.field--card-expiry {
  --field-max-width: 8.125rem;
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
}
.field--card-expiry label {
  flex: 1 0 100%;
}
.field--card-expiry input {
  flex: 1 1 45%;
}
.field--card-expiry span {
  flex: 1 1 10%;
  line-height: 2.5rem;
  padding-left: var(--space-4);
}
.field--card-csv {
  --field-max-width: 6rem;
  --field-min-width: 6rem;
  flex-grow: 0;
  flex-shrink: 0;
}
.field--card-csv input {
  max-width: 4.75rem;
}
.field--with-icon {
  position: relative;
}
.field--with-icon input {
  padding-inline-start: 3.375rem;
}
.field--with-icon .field--icon {
  position: absolute;
  top: 1.25rem;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-12);
  pointer-events: none;
  height: 2.75rem;
}
.field--verify input {
  max-width: 7.5rem;
}

.checkbox-group {
  display: grid;
}

.checkbox {
  --label-margin-bottom: 0;
  position: relative;
  display: grid;
}
.checkbox__ui {
  display: flex;
  align-items: center;
  justify-content: start;
  column-gap: var(--space-8);
  padding-block: var(--space-10);
  padding-inline: var(--checkbox-ui-padding-inline, var(--space-12));
  cursor: pointer;
}
@media only screen and (min-width: 400px) {
  .checkbox__ui {
    column-gap: var(--space-12);
  }
}
.checkbox__ui-w-link {
  position: relative;
  padding-left: calc(1.25rem + var(--space-8));
  white-space: normal;
  display: inline-block;
  font-size: var(--text-paragraph);
}
.checkbox__ui-w-link > * {
  padding: 0;
  display: inline;
  cursor: pointer;
}
.checkbox__ui-w-link > .checkbox__label {
  font-weight: normal;
}
.checkbox__ui-w-link > .checkbox__label:first-child::before {
  position: absolute;
  top: 0;
  left: 0;
}
.checkbox__ui::before, .checkbox__ui-w-link > .checkbox__label:first-child::before {
  content: "";
  order: 1;
  width: 1.25rem;
  height: 1.25rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--field-border-radius);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.875rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10.5L8 14.5L16 6' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, background-size 0.15s ease;
}
.checkbox__label {
  font-size: var(--text-15);
  font-weight: var(--checkbox-label-font-weight, 400);
  text-align: left;
  line-height: 1.2;
  order: 2;
  text-align: left;
}
.checkbox__logo {
  order: 3;
  margin-left: auto;
  margin-right: 0;
}
.checkbox input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.checkbox input[type=checkbox]:disabled + .checkbox__ui {
  --checkbox-label-font-weight: 400;
  opacity: 0.3;
}
.checkbox input[type=checkbox]:checked + .checkbox__ui::before, .checkbox input[type=checkbox]:checked + .checkbox__ui-w-link .checkbox__label:first-child::before {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  background-size: 0.875rem;
}
.checkbox input[type=checkbox]:checked + .checkbox__ui {
  color: var(--color-accent);
}
.checkbox input[type=checkbox]:checked + .checkbox__ui::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--field-border-radius);
  background-color: var(--color-surface-muted);
  z-index: -1;
}
label > .checkbox__label {
  pointer-events: none;
}
.checkbox--sentence .checkbox__ui,
.checkbox--sentence .checkbox__ui-w-link {
  line-height: 1.4;
}

.field--radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.field--radio {
  width: auto;
  --input-min-height: pxToRem(44px);
}
.field--radio input {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.field--radio label {
  position: relative;
  padding-block: var(--space-4);
  padding-left: 2.25rem;
  padding-right: var(--space-16);
  align-items: center;
  display: flex;
}
.field--radio label[data-team] {
  gap: var(--space-8);
}
.field--radio label[data-team] .text {
  white-space: nowrap;
}
.field--radio label[data-team]::before {
  order: 2;
}
.field--radio input:checked ~ label {
  box-shadow: var(--shadow-low);
}
.field--radio label::before {
  content: "";
  position: absolute;
  left: var(--space-12);
  top: 0;
  bottom: 0;
  margin: auto 0;
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid var(--color-border-subtle);
  border-radius: 100%;
}
.field--radio input:checked ~ label::before {
  border: 1.5px solid var(--color-accent);
}
.field--radio input:checked ~ label::after {
  content: "";
  position: absolute;
  left: calc(var(--space-12) + 4px);
  top: 0;
  bottom: 0;
  margin: auto 0;
  display: inline-flex;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 100%;
  background: var(--color-accent);
}
.field--radio__icon {
  max-height: 1.5rem;
}

.field__error,
.field-group__error,
.field-group__note,
.field__success {
  display: inline-block;
  color: rgba(var(--color-secondary-rgb), 0.8);
  font-size: var(--text-12);
  border: 1px solid rgba(var(--color-secondary-rgb), 0.05);
  background: rgba(var(--color-secondary-rgb), 0.03);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--border-radius-4);
  margin-top: var(--space-8);
  line-height: 1.2;
  width: fit-content;
}
.field__error[hidden],
.field-group__error[hidden],
.field-group__note[hidden],
.field__success[hidden] {
  display: none;
}
.field__error--checkbox,
.field-group__error--checkbox,
.field-group__note--checkbox,
.field__success--checkbox {
  margin-left: var(--space-28);
}

.field--radio-group::after {
  content: "";
  flex-basis: 100%;
  height: 0px;
  order: 99;
}
.field--radio-group .field__error {
  order: 100;
  margin-top: -0.5rem;
}

.field__success {
  color: var(--color-success);
  border-color: rgba(var(--color-success-rgb), 0.2);
  background: rgba(var(--color-success-rgb), 0.05);
}

.field-group__note {
  color: var(--color-on-surface);
  border-color: var(--color-border-subtle);
}

.form__error p {
  font-size: var(--text-14);
  line-height: 1.35;
  border: 1px solid var(--color-secondary);
  padding: var(--space-4);
  border-radius: var(--border-radius-4);
  margin-top: var(--space-16);
  margin-bottom: var(--space-12);
  text-align: left;
}

.input--error,
.field--card-expiry.input--error input[type=tel],
.input--error[type=checkbox] + .checkbox__ui::before,
.input--error[type=checkbox] + .checkbox__ui-w-link > .checkbox__label:first-child::before {
  border-color: rgba(var(--color-secondary-rgb), 0.5) !important;
}
.input--error:focus,
.field--card-expiry.input--error input[type=tel]:focus,
.input--error[type=checkbox] + .checkbox__ui::before:focus,
.input--error[type=checkbox] + .checkbox__ui-w-link > .checkbox__label:first-child::before:focus {
  border-color: rgba(var(--color-secondary-rgb), 0.5) !important;
}

@keyframes flash-once {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
.flash-once {
  animation: flash-once 0.6s ease;
}

.breadcrumb {
  --title-margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--space-4);
  column-gap: var(--space-8);
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 840px) {
  .breadcrumb {
    justify-content: flex-start;
  }
}
.breadcrumb.has-tag .breadcrumb__all {
  display: inline-flex;
}

.breadcrumb__all {
  display: none;
  color: inherit;
  cursor: pointer;
  width: 100%;
}
.breadcrumb__all:hover, .breadcrumb__all:focus-visible {
  text-decoration: underline;
}
@media only screen and (min-width: 640px) {
  .breadcrumb__all {
    width: auto;
  }
}
@media only screen and (min-width: 640px) {
  .breadcrumb__all::after {
    content: "|";
    display: inline-block;
    margin-left: var(--space-4);
    opacity: 0.5;
  }
}

.inclusion {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: var(--inclusion-columns, 2);
  column-gap: var(--inclusion-column-gap, 0.125rem);
  --icon-size: 1.25rem;
}
.inclusion__item {
  padding: 0;
  margin: 0;
  break-inside: avoid;
  display: grid;
  grid-template-columns: var(--icon-size) 1fr;
  align-items: start;
  column-gap: var(--space-6);
}
.inclusion__text {
  font-size: var(--inclusion-text-font-size, var(--text-14));
  font-weight: 400;
  line-height: 1.2;
  padding-top: 0.1em;
  margin-bottom: var(--inclusion-row-gap, var(--space-8));
}

.gallery {
  position: relative;
  --swiper-theme-color: var(--color-primary);
  --icon-size: 1.5rem;
}
.gallery .swiper-button-next,
.gallery .swiper-button-prev {
  --button-background: rgba(var(--color-primary-rgb), 0.7);
  --button-border: none;
  --button-min-width: 2.5rem;
  --button-height: 2.5rem;
  position: absolute;
  top: 50%;
  transform: translateY(50%);
}
.gallery .swiper-button-next svg,
.gallery .swiper-button-prev svg {
  display: none;
}
.gallery .swiper-button-next.swiper-button-disabled,
.gallery .swiper-button-prev.swiper-button-disabled {
  opacity: 0;
}
.gallery .swiper-button-prev {
  left: -1.25rem;
}
.gallery .swiper-button-next {
  right: -1.25rem;
}

.video-embed {
  align-self: stretch;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}
.video-embed iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 177.78vh;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
}
.video-embed__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.video-embed__play:hover {
  background: rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -50%) scale(1.05);
}
.video-embed__play .icon {
  --icon-size: 1.5rem;
  color: var(--color-on-primary);
}

.message {
  border: 2px solid var(--color-border-faint);
  border-radius: var(--border-radius-8);
  padding-block: var(--space-16);
  padding-inline: var(--panel-padding-inline);
  margin-bottom: var(--space-20);
  text-align: left;
  font-size: var(--text-15);
  background-color: rgba(6, 96, 186, 0.03);
  color: rgba(var(--color-primary-rgb), 0.6);
}
.message__body > :last-child {
  margin-bottom: 0;
}
.message p,
.message ul {
  font-size: inherit;
}
.message--error, .message--form-error {
  background-color: rgba(var(--color-secondary-rgb), 0.03);
  border-color: rgba(var(--color-secondary-rgb), 0.5);
  color: var(--color-secondary);
  padding-block: var(--space-8);
  padding-inline: var(--card-padding-inline);
}
.message--form-error {
  margin-top: var(--space-12);
  margin-bottom: 0;
}
.message--no-items {
  --title-margin-bottom: var(--space-16);
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding-block: var(--space-28);
  padding-inline: var(--panel-padding-inline);
  color: var(--color-on-surface);
  border-radius: var(--card-border-radius);
}
.message > *:last-child {
  margin-bottom: 0;
}

.package-tile-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-8);
  row-gap: var(--space-16);
}

.package-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  border: 2px solid var(--color-border);
  border-color: var(--package-tile-border-color, var(--color-border));
  border-radius: var(--border-radius-8);
  padding: var(--space-8);
  padding-top: var(--space-12);
  gap: var(--space-8);
  width: 94%;
  background: rgba(255, 255, 255, 0.5);
}
@media only screen and (min-width: 500px) {
  .package-tile {
    width: calc(50% - var(--space-4));
    min-width: 9.25rem;
  }
}
@media only screen and (min-width: 640px) {
  .package-tile {
    padding-inline: var(--space-16);
  }
}
@media only screen and (min-width: 980px) {
  .package-tile {
    padding-inline: var(--space-12);
  }
}
.package-tile__title {
  --subtitle-font-weight: 700;
  margin-bottom: var(--space-4);
  text-align: center;
}
.package-tile__title .subtitle + .title {
  margin-top: -0.25rem;
}
.package-tile__title > :last-child {
  margin-bottom: 0;
}
.package-tile__cta {
  text-align: center;
  width: 100%;
  padding: 0.125rem var(--space-8);
}
.package-tile__cta .btn {
  --button-width: 100%;
  --button-max-width: 8.75rem;
  --button-background: var(--package-tile-button-background, var(--color-primary));
  --button-border-color: var(--package-tile-button-border-color, var(--color-primary));
  --button-color: var(--package-tile-button-color, var(--color-on-primary));
}

.panel {
  padding-block: var(--panel-padding-block);
  padding-inline: var(--panel-padding-inline);
  border: 1px solid var(--color-border-faint);
  box-shadow: var(--shadow-verylow);
  border-radius: var(--border-radius-8);
  overflow: hidden;
  position: relative;
  background: var(--color-surface-white);
}
.panel--strong {
  border: 1px solid var(--color-border-subtle);
  padding-top: calc(var(--panel-padding-block) + var(--space-8));
  box-shadow: var(--shadow-low);
}
.panel .form-action {
  margin-left: calc(var(--panel-padding-inline) * -1);
  margin-right: calc(var(--panel-padding-inline) * -1);
  margin-top: var(--panel-padding-block);
  width: calc(100% + var(--panel-padding-inline) * 2);
  padding-inline: calc(var(--panel-padding-inline) + var(--space-4));
}
.panel .form-action--no-border {
  padding-top: 0;
}
.panel > :last-child {
  margin-bottom: 0;
}
.panel--article {
  --panel-padding-inline: var(--space-16);
  --panel-padding-block: var(--space-20);
  border-radius: var(--border-radius-20);
  background: rgba(255, 255, 255, 0.95);
  padding-bottom: calc(var(--panel-padding-block) + var(--space-8));
}
@media only screen and (min-width: 375px) {
  .panel--article {
    --panel-padding-inline: var(--space-20);
    --panel-padding-block: var(--space-24);
  }
}
@media only screen and (min-width: 500px) {
  .panel--article {
    --panel-padding-inline: var(--space-28);
    --panel-padding-block: var(--space-28);
  }
}
@media only screen and (min-width: 740px) {
  .panel--article {
    --panel-padding-inline: var(--space-32);
    --panel-padding-block: var(--space-32);
  }
}
@media only screen and (min-width: 980px) {
  .panel--article {
    --panel-padding-inline: var(--space-40);
    --panel-padding-block: var(--space-40);
  }
}
@media only screen and (min-width: 1024px) {
  .panel--article {
    --panel-padding-inline: var(--space-48);
    --panel-padding-block: var(--space-48);
  }
}

.card-list {
  display: inline-grid;
  column-gap: var(--card-list-column-gap, var(--space-12));
  row-gap: var(--card-list-row-gap, var(--space-12));
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
@media only screen and (min-width: 740px) {
  .card-list {
    --card-list-column-gap: var(--space-12);
    --card-list-row-gap: var(--space-16);
    grid-template-columns: 1fr 1fr;
  }
}
@media only screen and (min-width: 840px) {
  .card-list {
    --card-list-column-gap: var(--space-16);
  }
}
@media only screen and (min-width: 980px) {
  .card-list {
    --card-list-column-gap: var(--space-20);
    --card-list-row-gap: var(--space-20);
  }
}
@media only screen and (min-width: 1024px) {
  .card-list {
    --card-list-column-gap: var(--space-24);
    --card-list-row-gap: var(--space-24);
  }
}

.card-horizontal-list {
  display: grid;
  gap: var(--space-12);
}
@media only screen and (min-width: 740px) {
  .card-horizontal-list {
    gap: var(--space-16);
  }
}
@media only screen and (min-width: 980px) {
  .card-horizontal-list {
    gap: var(--space-20);
  }
}

.card {
  position: relative;
  border-radius: var(--card-border-radius);
  background: var(--card-background-color, var(--color-surface-white));
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: grid;
  align-content: start;
  max-width: var(--card-max-width, 26.25rem);
  margin-left: auto;
  margin-right: auto;
}
.card__media {
  position: relative;
  aspect-ratio: var(--card-media-aspect-ratio, 320/160);
  max-width: 100%;
  overflow: hidden;
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__heading {
  --pretitle-margin-bottom: var(--space-8);
  padding-inline: var(--card-padding-inline);
  padding-block: var(--card-padding-block);
  display: grid;
  align-content: center;
  text-align: left;
}
.card__description > :last-child {
  margin-bottom: 0;
}
.card__inclusions {
  position: relative;
  z-index: 1;
  padding-inline: var(--space-8);
  padding-top: var(--space-12);
  padding-bottom: var(--space-4);
  background: var(--color-page);
}
@media only screen and (min-width: 400px) {
  .card__inclusions {
    padding-inline: var(--space-12);
    padding-top: var(--space-16);
    padding-bottom: var(--space-8);
    margin-left: var(--space-8);
    margin-right: var(--space-8);
  }
}
@media only screen and (min-width: 740px) {
  .card__inclusions {
    padding-inline: var(--space-8);
    margin-left: 2px;
    margin-right: 2px;
  }
}
@media only screen and (min-width: 980px) {
  .card__inclusions {
    padding-inline: var(--space-12);
    margin-left: var(--space-8);
    margin-right: var(--space-8);
  }
}
@media only screen and (min-width: 1024px) {
  .card__inclusions {
    padding-inline: var(--space-16);
    margin-left: var(--space-12);
    margin-right: var(--space-12);
  }
}
.card__cta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: end;
  align-items: end;
  column-gap: var(--space-8);
  row-gap: var(--space-4);
  padding-inline: var(--card-padding-inline);
  padding-block: var(--card-padding-block);
  margin-bottom: var(--space-4);
}
@media only screen and (min-width: 400px) {
  .card__cta {
    column-gap: var(--space-16);
  }
}
@media only screen and (min-width: 740px) {
  .card__cta {
    column-gap: var(--space-12);
  }
}
.card__cta .price {
  padding-bottom: var(--space-4);
}
.card__cta .price + .btn {
  flex: 0 0 auto;
}
.card:not(.card--horizontal) {
  --card-title-margin-bottom: var(--space-12);
  --description-height: 0px;
}
.card:not(.card--horizontal) .card__heading-wrapper {
  position: relative;
  overflow: visible;
  height: var(--caption-height, auto);
  margin-bottom: var(--card-padding-block);
}
.card:not(.card--horizontal) .card__heading {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  transition: transform 0.35s ease;
}
.card:not(.card--horizontal) .card__caption {
  padding-bottom: var(--card-title-margin-bottom);
}
.card:not(.card--horizontal) .card__caption > :last-child {
  margin-bottom: 0;
}
.card:not(.card--horizontal) .card__caption .pretitle .chip {
  margin-left: -0.25rem;
}
.card:not(.card--horizontal) .card__description {
  padding-bottom: var(--card-padding-block);
  margin-top: calc((var(--card-title-margin-bottom) - var(--space-8)) * -1);
  max-height: 10.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.card:not(.card--horizontal) .card__description > :last-child {
  margin-bottom: 0;
}
.card:not(.card--horizontal) .card__description::-webkit-scrollbar {
  width: 4px;
}
.card:not(.card--horizontal) .card__description::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}
.card:not(.card--horizontal) .card__description {
  scrollbar-width: thin;
}
.card:not(.card--horizontal) .card__cta {
  background: var(--card-background-color, var(--color-surface-white));
}
.card:not(.card--horizontal) .card__heading-wrapper:hover .card__heading,
.card:not(.card--horizontal) .card__heading-wrapper:focus-within .card__heading {
  transform: translateY(calc(-1 * var(--description-height)));
}
.card:not(.card--horizontal) .card__heading-wrapper:hover .card__description,
.card:not(.card--horizontal) .card__heading-wrapper:focus-within .card__description {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .card:not(.card--horizontal) .card__heading,
  .card:not(.card--horizontal) .card__description {
    transition-duration: 0.01ms;
  }
}

.card--horizontal {
  --card-max-width: var(--card-horizontal-max-width);
  --meta-flex-direction: column;
  border: var(--card-border, none);
  align-content: stretch;
  grid-template-columns: minmax(0, min(30%, 200px)) 1fr;
  grid-template-rows: auto 1fr;
  row-gap: var(--space-8);
  column-gap: var(--space-12);
  grid-template-areas: "media heading" "logos heading";
  padding-inline: var(--card-horizontal-padding-inline);
  padding-block: var(--card-padding-block);
  width: 100%;
}
@media only screen and (min-width: 400px) {
  .card--horizontal {
    column-gap: var(--space-16);
  }
}
@media only screen and (min-width: 640px) {
  .card--horizontal {
    column-gap: var(--space-20);
  }
}
@media only screen and (min-width: 740px) {
  .card--horizontal {
    min-height: 10rem;
    padding-left: 0;
    padding-right: var(--card-padding-inline);
    padding-block: 0;
    grid-template-columns: minmax(0, min(40%, 280px)) 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas: "media heading logos" "media heading cta";
    column-gap: 0;
    row-gap: var(--space-8);
  }
}
@media only screen and (min-width: 980px) {
  .card--horizontal {
    grid-template-columns: minmax(0, min(35%, 300px)) 1fr auto auto;
    grid-template-rows: auto;
    grid-template-areas: "media heading logos cta";
  }
}
.card--horizontal .card__media {
  grid-area: media;
  border-radius: var(--border-radius-4);
  max-width: 20rem;
  overflow: hidden;
  width: 100%;
  margin-top: -0.25rem;
}
@media only screen and (min-width: 740px) {
  .card--horizontal .card__media {
    border-radius: 0;
    min-height: 0;
    align-self: stretch;
  }
}
.card--horizontal .card__heading {
  grid-area: heading;
  align-self: center;
  padding-block: 0;
  padding-inline: 0;
}
@media only screen and (min-width: 740px) {
  .card--horizontal .card__heading {
    padding-block: var(--card-padding-block);
    padding-inline: var(--card-padding-inline);
  }
}
.card--horizontal .card__team-logos {
  --team-logo-size: 2rem;
  --team-logo-list-gap: var(--space-4);
  grid-area: logos;
  justify-self: center;
  align-self: start;
  display: grid;
  align-items: center;
  justify-content: center;
}
@media only screen and (min-width: 375px) {
  .card--horizontal .card__team-logos {
    --team-logo-size: 2.25rem;
  }
}
@media only screen and (min-width: 400px) {
  .card--horizontal .card__team-logos {
    --team-logo-size: 2.5rem;
  }
}
@media only screen and (min-width: 740px) {
  .card--horizontal .card__team-logos {
    align-self: end;
    justify-self: center;
  }
}
@media only screen and (min-width: 980px) {
  .card--horizontal .card__team-logos {
    --team-logo-list-justify: end;
    --team-logo-list-gap: var(--space-6);
    padding-right: var(--space-12);
    align-self: center;
  }
}
@media only screen and (min-width: 1024px) {
  .card--horizontal .card__team-logos {
    padding-right: var(--space-16);
    --team-logo-size: 3rem;
  }
}
.card--horizontal .card__team-logos[data-total-teams="3"], .card--horizontal .card__team-logos[data-total-teams="4"] {
  --team-logo-size: 2rem;
}
@media only screen and (min-width: 400px) {
  .card--horizontal .card__team-logos[data-total-teams="3"], .card--horizontal .card__team-logos[data-total-teams="4"] {
    --team-logo-size: 2.375rem;
  }
}
.card--horizontal .card__team-logos .team-logo-list {
  max-width: 5.375rem;
}
@media only screen and (min-width: 740px) {
  .card--horizontal .card__team-logos .team-logo-list {
    max-width: 6.25rem;
  }
}
@media only screen and (min-width: 1024px) {
  .card--horizontal .card__team-logos .team-logo-list {
    max-width: 6.75rem;
  }
}
.card--horizontal .card__cta {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding-inline: 0;
  padding-block: 0;
}
@media only screen and (min-width: 740px) {
  .card--horizontal .card__cta {
    position: static;
    display: grid;
    align-items: start;
    justify-content: center;
    margin-right: var(--space-4);
  }
  .card--horizontal .card__cta .btn {
    position: static;
    width: auto;
    height: auto;
    opacity: 1;
  }
}
@media only screen and (max-width: 739px) {
  .card--horizontal .card__cta::after {
    content: "";
    display: block;
    width: 3.375rem;
    height: 3.375rem;
    background: var(--color-accent);
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
    filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.4));
    position: absolute;
    bottom: -1px;
    right: -1px;
  }
  .card--horizontal .card__cta .btn {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    max-width: 100%;
    height: 100%;
    background: transparent;
    color: transparent;
    border-color: transparent;
    z-index: 1;
  }
  .card--horizontal .card__cta .icon--arrow-right {
    position: absolute;
    right: 0.375rem;
    bottom: 0.375rem;
    z-index: 2;
    color: #fff;
    transform: scale(0.9);
  }
}
@media only screen and (min-width: 980px) {
  .card--horizontal .card__cta {
    align-items: center;
  }
}
@media only screen and (min-width: 840px) {
  .card--horizontal .card__team-logos + .card__cta {
    grid-row: cta;
    align-self: start;
  }
}
@media only screen and (min-width: 980px) {
  .card--horizontal .card__team-logos + .card__cta {
    align-self: center;
  }
}
.card--horizontal:not(:has(.card__team-logos)) .card__media {
  grid-row: 1/-1;
  align-self: start;
}
@media only screen and (min-width: 740px) {
  .card--horizontal:not(:has(.card__team-logos)) .card__media {
    align-self: stretch;
  }
}
@media only screen and (min-width: 740px) {
  .card--horizontal:not(:has(.card__team-logos)) .card__cta {
    grid-row: 1/-1;
    align-items: center;
  }
}

.card.is-hidden {
  display: none;
}
.card.is-revealing {
  animation: card-fade-in 0.35s ease forwards;
}
.card.is-filtered-out {
  display: none;
}

@keyframes card-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*
.tile-scroller {
  display: flex;
  gap: var(--tile-grid-gap, var(--space-16));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-8); // room for scrollbar if visible, prevents clipping

  .tile {
    flex: 0 0 var(--tile-max-width, 250px); // fixed width, doesn't grow/shrink
    scroll-snap-align: start;
  }
}
*/
.tile-grid {
  --tile-grid-gap: var(--space-12);
  --tile-max-width: 14.25rem;
  --title-font-weight: 800;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tile-grid-gap);
}
@media only screen and (min-width: 400px) {
  .tile-grid {
    --tile-grid-gap: var(--space-16);
  }
}
@media only screen and (min-width: 980px) {
  .tile-grid {
    --tile-max-width: 15rem;
  }
}
.tile-grid--force-2col {
  max-width: 37.5rem;
  margin-inline: auto;
}
@media only screen and (min-width: 980px) {
  .tile-grid--force-2col {
    max-width: none;
  }
}

.tile {
  flex: 0 0 min(var(--tile-max-width), (100% - var(--space-12)) / 2);
}
@media only screen and (min-width: 400px) {
  .tile {
    flex: 0 0 min(var(--tile-max-width), (100% - var(--space-16)) / 2);
  }
}
.tile {
  max-width: var(--tile-max-width);
  overflow: hidden;
  color: var(--color-on-primary);
  text-decoration: none;
  text-align: center;
  display: grid;
  grid-template-rows: auto 1fr;
  padding-bottom: var(--space-12);
  background: var(--tile-background, var(--color-surface-dark));
  border-radius: var(--card-border-radius, 0.5rem);
  box-shadow: var(--shadow-outline-thin), var(--shadow-card);
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, z-index 0.2s ease;
}
.tile:hover {
  box-shadow: var(--shadow-outline-thin), var(--shadow-high);
  opacity: 1;
  transform: scale(1.15);
  transform-origin: center;
  z-index: 2;
  text-decoration: none;
}
.tile > :last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 980px) {
  .tile {
    flex-basis: calc((100% - var(--tile-grid-gap) * 3) / 4);
  }
}
.tile__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3/2;
}
.tile__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.tile__media::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  display: block;
  width: 100%;
  height: 40%;
  background: linear-gradient(180deg, var(--tile-overlay-start-color, rgba(0, 17, 40, 0)) 0%, var(--tile-overlay-end-color, var(--color-surface-dark)) 92%);
}
.tile__title {
  padding-inline: var(--space-8);
  width: 100%;
  align-self: center;
}

.banner {
  --meta-flex-direction: column;
  --team-logo-list-justify: end;
  width: 100%;
  border-radius: var(--card-border-radius);
  box-shadow: var(--shadow-card);
  padding: 0;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  max-width: var(--content-width-default);
  background: var(--color-surface-white);
}
.banner__body {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "badge heading";
  align-items: center;
  padding-inline: var(--header-content-padding-inline);
  padding-block: var(--panel-padding-block);
}
.banner__body > :last-child {
  margin-bottom: 0;
}
.banner__body .step-badge {
  grid-area: badge;
  align-self: start;
  margin-left: -2px;
  margin-right: var(--space-8);
}
@media only screen and (min-width: 400px) {
  .banner__body .step-badge {
    margin-right: var(--space-12);
  }
}
@media only screen and (min-width: 640px) {
  .banner__body .step-badge {
    margin-right: var(--space-16);
    margin-left: 0;
  }
}
.banner__body--team-logos {
  grid-template-areas: "badge heading" "logos logos";
}
@media only screen and (min-width: 640px) {
  .banner__body--team-logos {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "badge heading logos";
  }
}
.banner__body--description {
  grid-template-areas: "badge heading" "badge description";
}
@media only screen and (min-width: 980px) {
  .banner__body--description {
    grid-template-columns: auto 1fr 50%;
    grid-template-areas: "badge heading description";
  }
}
.banner__heading {
  grid-area: heading;
  align-self: start;
}
.banner__heading > :last-child {
  margin-bottom: 0;
}
.banner__heading .pretitle {
  padding-top: 0.125rem;
}
.banner__heading .copy {
  max-width: var(--content-width-text);
  padding-right: var(--space-8);
  margin-top: var(--space-20);
}
@media only screen and (min-width: 400px) {
  .banner__heading .copy {
    padding-right: var(--space-16);
  }
}
@media only screen and (min-width: 500px) {
  .banner__heading .copy {
    padding-right: var(--space-20);
  }
}
@media only screen and (min-width: 640px) {
  .banner__heading .copy {
    padding-right: var(--space-24);
  }
}
.banner__team-logos {
  --team-logo-size: var(--banner-team-logo-size, 2.75rem);
  grid-area: logos;
  align-self: end;
  margin-top: var(--space-12);
}
@media only screen and (min-width: 400px) {
  .banner__team-logos {
    --banner-team-logo-size: 3rem;
  }
}
@media only screen and (min-width: 640px) {
  .banner__team-logos {
    --banner-team-logo-size: 3.25rem;
  }
}
@media only screen and (min-width: 640px) {
  .banner__team-logos {
    margin-top: var(--space-4);
  }
  .banner__team-logos .team-logo-list {
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    margin-left: var(--space-20);
    row-gap: var(--space-12);
  }
}
@media only screen and (min-width: 840px) {
  .banner__team-logos {
    --banner-team-logo-size: 3.75rem;
  }
}
.banner__description {
  grid-area: description;
  align-self: start;
  margin-top: var(--space-16);
  margin-bottom: var(--space-8);
}
.banner__description > :last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 980px) {
  .banner__description {
    margin-top: 0;
    margin-bottom: 0;
  }
}

.hero-banner {
  --hero-banner-background-color: rgba(0, 0, 0, 0.7);
  --pretitle-label-font-size: var(--text-16);
  --chip-font-size: var(--text-14);
  --chip-font-weight: 700;
  --button-text-transform: uppercase;
  --button-background: var(--hero-banner-button-background-color, var(--color-accent));
  --button-border-color: var(--hero-banner-button-background-color, var(--color-accent));
  --button-hover-background: var(--hero-banner-button-background-color, var(--color-accent-hover));
  --button-hover-border-color: var(--hero-banner-button-background-color, var(--color-accent-hover));
  --button-hover-opacity: 0.7;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  border-radius: var(--card-border-radius);
  box-shadow: var(--shadow-outline), var(--shadow-card);
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  color: var(--color-on-primary);
  position: relative;
  max-width: var(--content-width-banner-mobile);
}
@media only screen and (min-width: 740px) {
  .hero-banner {
    flex-direction: row;
    max-width: var(--content-width-default);
  }
}
@media only screen and (min-width: 980px) {
  .hero-banner {
    --title-margin-bottom: var(--space-12);
  }
}
.hero-banner__media {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/9;
}
.hero-banner__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-banner__media::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 40%;
  bottom: 0;
  right: 0;
  background: linear-gradient(90deg, transparent 20%, var(--hero-banner-background-color) 100%);
  z-index: 1;
}
@media only screen and (max-width: 739px) {
  .hero-banner__media {
    flex: 0 1 auto;
    height: auto;
    min-height: 17.5rem;
  }
  .hero-banner__media::before {
    height: 40%;
    width: 100%;
    left: 0;
    background: linear-gradient(180deg, transparent 20%, var(--hero-banner-background-color) 100%);
  }
}
.hero-banner__body {
  max-width: 100%;
  min-width: 260px;
  width: 100%;
  flex-shrink: 0;
  background-color: var(--hero-banner-background-color);
  padding-inline: var(--banner-padding-inline);
  padding-top: var(--space-16);
  padding-bottom: var(--space-20);
  display: grid;
  align-content: center;
  position: relative;
}
@media only screen and (min-width: 740px) {
  .hero-banner__body {
    width: 42%;
    max-width: 23.75rem;
    min-height: 17.5rem;
    padding-top: var(--space-24);
  }
}
.hero-banner__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero-banner__heading > :last-child {
  margin-bottom: 0;
}
@media only screen and (max-width: 739px) {
  .hero-banner__heading > :last-child {
    padding-inline: var(--space-16);
  }
}
.hero-banner__pic {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
  max-width: 240px;
}
.hero-banner__pic img {
  height: auto;
}
.hero-banner__cta {
  text-align: center;
  margin-top: 0.625rem;
}
@media only screen and (max-width: 739px) {
  .hero-banner__cta::after {
    content: "";
    display: block;
    width: 3.75rem;
    height: 3.75rem;
    background: var(--color-accent);
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
    filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.4));
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .hero-banner__cta .btn {
    position: absolute;
    bottom: 0;
    right: 0;
    min-width: 100%;
    max-width: 100%;
    height: 100%;
    background: transparent;
    color: transparent;
    border-color: transparent;
    z-index: 1;
  }
  .hero-banner__cta .icon--arrow-right {
    --icon-size: 1.15rem;
    position: absolute;
    right: 0.375rem;
    bottom: 0.375rem;
    z-index: 2;
    color: #fff;
    transform: scale(0.9);
  }
}
@media only screen and (min-width: 980px) {
  .hero-banner__cta {
    margin-top: var(--space-16);
  }
}

.hero-banner-carousel {
  --swiper-nav-color: var(--color-surface-white);
}
.hero-banner-carousel.swiper {
  overflow: visible;
}
.hero-banner-carousel .swiper-slide {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hero-banner-carousel .swiper-slide.swiper-slide-active, .hero-banner-carousel .swiper-slide.swiper-slide-duplicate-active {
  opacity: 1;
}
.hero-banner-carousel__pagination {
  --swiper-pagination-bullet-horizontal-gap: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--space-16);
  height: 1.25rem;
  gap: var(--space-8);
}
.hero-banner-carousel .swiper-pagination-bullet {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 99rem;
  opacity: 0.4;
  border: 1px solid var(--swiper-nav-color);
  background-color: var(--swiper-nav-color);
  transition: all 0.3s ease-in;
  margin: 0;
  padding: 0;
}
.hero-banner-carousel .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
  height: 0.5rem;
  width: 2rem;
  transition: all 0.3s ease-out;
}

.promo-banner {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 26.25rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: var(--shadow-outline-light), var(--shadow-medium);
}
.promo-banner__media {
  width: 100%;
  max-height: 5.25rem;
}
.promo-banner__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promo-banner__body {
  width: 100%;
  max-height: 6.25rem;
}
.promo-banner__body img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promo-banner--leaderboard {
  box-shadow: var(--shadow-outline-white), var(--shadow-card);
}
@media only screen and (min-width: 740px) {
  .promo-banner--leaderboard {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    max-width: calc(100% - var(--space-8));
  }
  .promo-banner--leaderboard .promo-banner__media {
    flex: 0 1 40%;
    max-height: 7.75rem;
  }
  .promo-banner--leaderboard .promo-banner__body {
    flex: 0 1 60%;
    max-width: 100%;
    max-height: 7.75rem;
  }
}

.section--wallpaper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
  min-height: 100%;
  background: var(--wallpaper-background);
  z-index: -1;
}

.wallpaper {
  display: flex;
  justify-content: space-between;
  align-items: start;
  min-width: 100rem;
  width: 100%;
  flex-shrink: 0;
}
.wallpaper__hotspot {
  flex-basis: 50%;
  max-width: 50rem;
  opacity: 0.75;
  position: relative;
}
.wallpaper__hotspot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  width: clamp(655px, 655px + (100vw - 1600px) * 1.2083333333, 800px);
}
.wallpaper__cta {
  position: absolute;
  bottom: var(--wallpaper-cta-bottom, 40px);
  left: 0;
  width: clamp(270px, 270px + (100vw - 1600px) * 0.5, 330px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.wallpaper__hotspot--right img {
  margin-right: 0;
  margin-left: auto;
}
.wallpaper__hotspot--right .wallpaper__cta {
  left: auto;
  right: 0;
}

.section--wallpaper[data-hide-when-not-fully-visible] {
  opacity: 0;
  transition: opacity 0.8s ease;
}
@media only screen and (min-width: 1600px) {
  .section--wallpaper[data-hide-when-not-fully-visible] {
    opacity: 1;
  }
}
.section--wallpaper[data-hide-when-not-fully-visible] + .main__bg-wrap {
  opacity: 1;
  transition: opacity 0.6s ease;
}
@media only screen and (min-width: 1600px) {
  .section--wallpaper[data-hide-when-not-fully-visible] + .main__bg-wrap {
    opacity: 0;
  }
}

.header-bar {
  padding-block: var(--space-8);
  padding-inline: var(--panel-padding-inline);
  background: var(--color-surface-dark);
  color: var(--color-on-surface-dark);
  border-radius: var(--border-radius-4);
  font-size: var(--text-14);
  font-weight: 700;
}

[data-availability="last remaining"] .card,
[data-availability="allocation exhausted"] .card {
  position: relative;
}
[data-availability="last remaining"] .card::before,
[data-availability="allocation exhausted"] .card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding-inline: var(--space-12);
  padding-block: var(--space-8);
  color: var(--color-surface-white);
  font-size: var(--text-12);
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom-left-radius: var(--border-radius-4);
  z-index: 1;
  box-shadow: var(--shadow-medium);
  text-align: center;
}

[data-availability="last remaining"] .card::before {
  content: "Last remaining";
  background-color: rgba(var(--color-secondary-rgb), 0.85);
}

[data-availability="allocation exhausted"] .card::before {
  content: "Allocation exhausted";
  background-color: rgba(var(--color-surface-dark-rgb), 0.85);
}

.accordion {
  border-top: 1px solid var(--color-border-subtle);
  padding-inline: var(--space-4);
}
.accordion + .accordion {
  margin-top: calc(-1 * var(--accordion-gap-overwrite, 0px));
}
.accordion:last-child {
  border-bottom: 1px solid var(--color-border-subtle);
}
.accordion__heading {
  margin: 0;
}
.accordion__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  padding: var(--space-16) 0;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.accordion__icon {
  --icon-color: var(--color-accent);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.accordion__body {
  display: grid;
  grid-template-rows: minmax(0, 0fr);
  overflow: hidden;
  transition: grid-template-rows 0.3s ease;
}
.accordion .frame {
  min-height: 0;
  width: 100%;
  overflow: hidden;
}
.accordion .frame p {
  padding-bottom: var(--space-16);
  margin: 0;
}
.accordion .frame ul,
.accordion .frame ol {
  padding-bottom: var(--space-16);
}
.accordion.accordion--open .accordion__body {
  grid-template-rows: minmax(0, 1fr);
}
.accordion.accordion--open .accordion__icon {
  transform: rotate(180deg);
}

.expandable {
  --expandable-border-color: var(--color-border-faint);
  border-radius: var(--border-radius-20) var(--border-radius-20) 0 0;
  position: relative;
  text-align: center;
  border: 1px solid var(--expandable-border-color);
  border-bottom: none;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}
.expandable__toggle-button {
  max-width: 21.25rem;
}
.expandable__toggle {
  --toggle-min-height: 1rem;
  position: absolute;
  top: calc(var(--toggle-min-height) * -1);
  left: 0;
  right: 0;
  margin: 0 auto;
  background: var(--color-surface-muted);
  display: flex;
  width: 80%;
  max-width: 3.75rem;
  height: var(--toggle-min-height);
  border: none;
  border-radius: 0.375rem 0.375rem 0 0;
  justify-content: center;
  align-items: center;
  color: var(--color-accent);
  border: 1px solid var(--expandable-border-color);
  border-bottom: none;
  z-index: 1;
}
.expandable__toggle .icon--arrow-open-up {
  transform: rotate(180deg);
  transition: transform 0.6s ease;
}
.expandable__panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.expandable__panel > * {
  min-height: 0;
}
.expandable__body {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.3s ease;
}
.expandable.is-expanded .expandable__panel {
  grid-template-rows: 1fr;
}
.expandable.is-expanded .expandable__body {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}
.expandable.is-expanded .expandable__toggle .icon--arrow-open-up {
  transform: rotate(0deg);
}
.expandable.is-expanded .expandable__toggle-button {
  display: none;
}
@media (min-height: 800px) and (min-width: 740px) {
  .expandable[data-expandable-open-breakpoint=tablet] .expandable__panel {
    grid-template-rows: 1fr;
  }
  .expandable[data-expandable-open-breakpoint=tablet] .expandable__body {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
  }
  .expandable[data-expandable-open-breakpoint=tablet] .expandable__toggle {
    display: none;
  }
  .expandable[data-expandable-open-breakpoint=tablet] .expandable__toggle-button {
    display: none;
  }
}

.expandable,
.expandable.drawer__footer {
  padding-block: var(--panel-padding-block);
}
.expandable.is-expanded,
.expandable.drawer__footer.is-expanded {
  padding-bottom: calc(var(--panel-padding-block) + var(--space-4));
}

@media only screen and (max-width: 739px) {
  .floater {
    min-height: var(--floater-group-height, 3.5rem);
  }
}
.floater[data-floater-scope=always] {
  min-height: var(--floater-group-height, 3.5rem);
}
.floater__sentinel {
  height: 0;
}
.floater__group {
  transition: opacity 0.2s ease, position 0.2s ease;
}
@media only screen and (max-width: 739px) {
  .floater__group.is-floating {
    position: fixed;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    bottom: var(--space-16);
    width: auto;
    max-width: max-content;
    z-index: var(--z-filter-bar, 900);
    opacity: 1;
    will-change: transform, opacity;
    pointer-events: auto;
    box-shadow: var(--shadow-veryhigh);
  }
  .floater__group.is-floating.is-hidden-by-footer {
    opacity: 0;
    pointer-events: none;
  }
}
.floater[data-floater-scope=always] .floater__group.is-floating {
  position: fixed;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  bottom: var(--space-16);
  width: auto;
  max-width: max-content;
  z-index: var(--z-filter-bar, 900);
  opacity: 1;
  will-change: transform, opacity;
  pointer-events: auto;
  box-shadow: var(--shadow-veryhigh);
}
.floater[data-floater-scope=always] .floater__group.is-floating.is-hidden-by-footer {
  opacity: 0;
  pointer-events: none;
}

.filter .floater__group.is-floating,
.filter[data-floater-scope=always] .floater__group.is-floating {
  padding-inline: 0;
  pointer-events: none;
  box-shadow: none;
}
.filter .floater__group.is-floating .filter__item,
.filter[data-floater-scope=always] .floater__group.is-floating .filter__item {
  pointer-events: auto;
  box-shadow: var(--shadow-veryhigh);
}

.overlay {
  background: rgba(var(--color-surface-dark-rgb), 0.85);
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  display: flex;
  justify-content: center;
}
.overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}
@media only screen and (min-width: 740px) {
  .overlay[data-overlay-mode=popover-desktop].is-open {
    opacity: 0;
    z-index: -1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .overlay {
    transition-delay: 0s;
  }
}

/*
html {
  scrollbar-gutter: stable both-edges;
}
*/
body.drawer-open {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0);
}
@media only screen and (min-width: 740px) {
  body.drawer-open.popover-open {
    overflow: auto;
    padding-right: 0;
  }
}

.drawer {
  --checkbox-ui-padding-inline: var(--drawer-padding-inline);
  position: fixed;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  background: var(--color-surface-white);
  box-shadow: var(--shadow-drawer);
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 0.35s, transform 0.35s ease;
  color: var(--color-on-surface);
}
.drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.drawer--right {
  inset: 0 0 0 auto;
  height: 100%;
  height: 100dvh;
  width: var(--drawer-width, 98%);
  max-width: 46.25rem;
  transform: translateX(100%);
}
@media only screen and (min-width: 400px) {
  .drawer--right {
    --drawer-width: 90%;
  }
}
.drawer--right.is-open {
  transform: translateX(0);
}
.drawer--right .drawer__body {
  padding-bottom: 18.75rem;
  padding-top: calc(var(--drawer-padding-top) + var(--space-16));
}
.drawer--right .drawer__footer {
  position: absolute;
  left: 0;
  bottom: 0;
  right: var(--scrollbar-width, 0.9375rem);
}
.drawer--right .drawer__close {
  padding-inline: var(--drawer-close-padding, 0);
}
@media only screen and (min-width: 740px) {
  .drawer--right[data-drawer-mode=inline-desktop] {
    position: static;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    max-height: none;
    width: auto;
    box-shadow: none;
  }
  .drawer--right[data-drawer-mode=inline-desktop] .drawer__close {
    display: none;
  }
  .drawer--right[data-drawer-mode=inline-desktop] .drawer__body {
    overflow: visible;
  }
}
.drawer--bottom {
  inset: auto 0 0 0;
  width: 100%;
  max-height: 85vh;
  border-radius: var(--radius-drawer-bottom, var(--border-radius-20) var(--border-radius-20) 0 0);
  transform: translateY(100%);
}
.drawer--bottom.is-open {
  transform: translateY(0);
}
@media only screen and (min-width: 740px) {
  .drawer--bottom[data-drawer-mode=popover-desktop] {
    --drawer-padding-inline: var(--popover-padding-inline);
    --drawer-padding-top: var(--popover-padding-block);
    --drawer-padding-bottom: var(--popover-padding-block);
    --drawer-header-padding-block: var(--popover-padding-block);
    --drawer-footer-padding-block: var(--popover-padding-block);
    position: absolute;
    top: 100%;
    left: auto;
    right: 0;
    bottom: auto;
    margin-top: var(--space-8);
    width: var(--drawer-popover-width, 17.5rem);
    max-height: 25rem;
    max-width: none;
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow-2);
    transform: translateY(-8px);
    opacity: 0;
    transition: visibility 0s linear 0.15s, transform 0.15s ease, opacity 0.4s ease;
    box-shadow: var(--shadow-medium);
  }
  .drawer--bottom[data-drawer-mode=popover-desktop].is-open {
    transform: translateY(0);
    opacity: 1;
  }
  .drawer--bottom[data-drawer-mode=popover-desktop] .drawer__close {
    display: none;
  }
}
@media only screen and (min-width: 740px) {
  .drawer--bottom[data-drawer-mode=inline-desktop] {
    position: static;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    max-height: none;
    width: auto;
    box-shadow: none;
    border-radius: 0;
    background: transparent;
  }
  .drawer--bottom[data-drawer-mode=inline-desktop] .drawer__header,
  .drawer--bottom[data-drawer-mode=inline-desktop] .drawer__close,
  .drawer--bottom[data-drawer-mode=inline-desktop] .drawer__footer {
    display: none;
  }
  .drawer--bottom[data-drawer-mode=inline-desktop] .drawer__body {
    padding: 0;
    overflow: visible;
  }
}
.drawer__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 20;
  opacity: 0.95;
}
.drawer--bottom .drawer__close {
  position: static;
}
.drawer--right .drawer__close {
  --drawer-button-height: calc(var(--close-button-size) + var(--space-8));
  --button-width: calc(var(--close-button-size) + var(--space-8));
  min-height: var(--drawer-button-height);
  max-height: var(--drawer-button-height);
  border-radius: 100%;
  top: var(--space-10);
  right: var(--space-10);
}
@media only screen and (min-width: 400px) {
  .drawer--right .drawer__close {
    --drawer-button-height: 2.25rem;
    --drawer-close-padding: var(--space-24);
    --button-width: auto;
    top: 56%;
    left: calc(var(--drawer-button-height) * -1);
    right: auto;
    transform: rotate(-90deg);
    transform-origin: left top;
    border-radius: var(--border-radius-4) var(--border-radius-4) 0 0;
    opacity: 1;
  }
}
@media only screen and (min-width: 500px) {
  .drawer--right .drawer__close {
    --drawer-button-height: 2.75rem;
  }
}
.drawer__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border-subtle);
  padding-inline: var(--drawer-padding-inline);
  padding-block: var(--drawer-header-padding-block);
}
.drawer__header .title {
  margin-bottom: 0;
}
.drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding-inline: var(--drawer-padding-inline);
  padding-top: var(--drawer-padding-top);
  padding-bottom: var(--drawer-padding-bottom);
}
.drawer__body > .frame {
  --drawer-body-row-gap: var(--space-16);
  --accordion-gap-overwrite: var(--drawer-body-row-gap);
  max-width: var(--drawer-max-width, 37.5rem);
  margin-left: auto;
  margin-right: auto;
  display: grid;
  gap: var(--drawer-body-row-gap);
}
.drawer__body > .frame > * {
  min-width: 0;
}
.drawer__body > .frame > * > :last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 640px) {
  .drawer__body > .frame {
    --drawer-body-row-gap: var(--space-20);
  }
}
.drawer__footer {
  flex-shrink: 0;
  border-top: 1px solid var(--color-border-subtle);
  padding-inline: var(--drawer-padding-inline);
  padding-block: var(--drawer-footer-padding-block);
  padding-bottom: max(var(--drawer-footer-padding-block), env(safe-area-inset-bottom));
  z-index: 1;
}
.drawer__footer--spread {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (prefers-reduced-motion: reduce) {
  .drawer {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}

.drawer--account .drawer__body {
  scrollbar-gutter: auto;
}
@media only screen and (max-width: 739px) {
  .drawer--account {
    top: var(--site-header-min-height, 4rem);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    transform: none;
    opacity: 0;
    transition: visibility 0s linear 0.2s, opacity 0.2s ease;
  }
  .drawer--account.is-open {
    opacity: 1;
    transition-delay: 0s;
  }
  .drawer--account .drawer__close {
    top: var(--space-16);
    right: calc(var(--scrollbar-width, 0) + var(--space-16));
  }
}
@media only screen and (min-width: 740px) {
  .drawer--account {
    --drawer-padding-inline: var(--space-8);
    --drawer-padding-top: var(--space-8);
    --drawer-padding-bottom: var(--space-8);
    position: absolute;
    top: 100%;
    left: auto;
    right: -2.5rem;
    bottom: auto;
    margin-top: var(--space-8);
    width: 13.75rem;
    max-width: none;
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow-medium);
    transform: translateY(-8px);
    opacity: 0;
    transition: visibility 0s linear 0.15s, transform 0.15s ease, opacity 0.2s ease;
  }
  .drawer--account.is-open {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 0s;
  }
  .drawer--account .drawer__close {
    display: none;
  }
}

body.modal-open {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0);
}

.modal {
  --modal-padding-inline: var(--space-24);
  --modal-padding-block: var(--space-20);
  opacity: 0;
  transform: scale(0.75);
  transition: opacity 0.2s ease, transform 0.2s ease;
  position: fixed;
  inset: 0;
  background: none;
  width: 100vw;
  height: 100vh;
  max-height: none;
  max-width: none;
  overflow-y: auto;
  justify-content: center;
  margin: 0;
  padding-block: var(--space-40);
  padding-inline: 0;
  color: var(--color-on-surface);
  border: none;
}
.modal[open] {
  display: flex;
}
.modal__frame {
  position: relative;
  width: 90%;
  max-width: 30rem;
  margin-block: auto;
}
.modal__body {
  border-radius: var(--card-border-radius);
  padding-block: var(--modal-padding-block);
  padding-inline: var(--modal-padding-inline);
  text-align: center;
  overflow: hidden;
  background: var(--color-surface-white);
}
.modal__body--full-width {
  padding-inline: 0;
  padding-block: 0;
}
.modal--medium .modal__frame {
  max-width: 40rem;
}
.modal--big .modal__frame {
  max-width: 60rem;
}
.modal--xlarge .modal__frame {
  max-width: 80rem;
}
.modal--full .modal__frame {
  width: calc(100% - var(--space-32));
  max-width: none;
}
.modal--promo .modal__body {
  box-shadow: var(--shadow-outline-thin), var(--shadow-card);
}
.modal--promo.modal--medium .modal__body {
  box-shadow: var(--shadow-outline), var(--shadow-card);
}
@media only screen and (min-width: 740px) {
  .modal {
    --modal-padding-inline: var(--space-32);
    --modal-padding-block: var(--space-28);
  }
}
.modal.is-visible {
  opacity: 1;
  transform: scale(1);
}
.modal::backdrop {
  background: rgba(var(--color-surface-dark-rgb), 0.85);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.modal.is-visible::backdrop {
  opacity: 1;
}
.modal__title {
  margin-bottom: var(--space-16);
}
.modal__loading, .modal__error {
  text-align: center;
  padding: var(--space-24) 0;
}
.modal__icon.icon {
  --icon-size: 2rem;
  display: block;
  margin: var(--space-4) auto var(--space-16) auto;
}
.modal__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: var(--space-20);
  row-gap: var(--space-8);
  flex-wrap: wrap;
  padding-block: var(--space-4);
}
.modal__body--full-width .modal__footer {
  padding-block: var(--modal-padding-block);
  padding-inline: var(--modal-padding-inline);
}
.modal__close {
  background: var(--color-surface);
  border: none;
  color: var(--color-on-surface);
  cursor: pointer;
  border-radius: 100%;
  box-shadow: var(--shadow-veryhigh);
  background: rgba(255, 255, 255, 0.7);
  height: 2.5rem;
  min-width: 2.5rem;
  position: sticky;
  top: -2rem;
  margin-top: -3.375rem;
  float: right;
  margin-right: -0.5rem;
  margin-bottom: -3rem;
  z-index: 2;
}
.modal__media--full {
  margin-left: calc(var(--modal-padding-inline) * -1);
  width: calc(100% + var(--modal-padding-inline) * 2);
  margin-top: calc(var(--modal-padding-block) * -1);
}
.modal__media--full img {
  display: block;
  width: 100%;
  height: auto;
}
.modal__media--full iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
}
.modal__media--full:last-child {
  margin-bottom: calc(var(--modal-padding-block) * -1);
}
.modal__media--full:last-child img,
.modal__media--full:last-child iframe {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.modal__text {
  text-align: center;
}
.modal__text > *:last-child {
  margin-bottom: 0;
}
.modal__content .modal__media--full {
  margin-top: var(--modal-padding-block);
}
.modal__content .modal__media--full:not(:last-child) {
  margin-bottom: var(--modal-padding-block);
}
.modal__title {
  text-align: left;
}
.modal__title.center {
  text-align: center;
}
.modal__title {
  margin-bottom: var(--space-24);
}
.modal__title > *:last-child {
  margin-bottom: 0;
}

.checkout-stepper {
  margin-top: var(--space-16);
}
@media only screen and (min-width: 740px) {
  .checkout-stepper {
    margin-top: var(--space-24);
  }
}
.checkout-stepper__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
  padding-inline: var(--space-4);
}
.checkout-stepper__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}
.checkout-stepper__item:not(:last-child)[data-state=active] {
  flex: 1 0 auto;
}
@media only screen and (min-width: 740px) {
  .checkout-stepper__item:not(:last-child) {
    flex: 1 0 auto;
  }
}
.checkout-stepper__node {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}
.checkout-stepper__item:not(:last-child) .checkout-stepper__node::after {
  content: "";
  flex: 1 1 auto;
  height: 0.125rem;
  background: var(--color-border);
  margin-inline: var(--space-4);
  transition: background 0.2s ease;
  order: 1;
}
.checkout-stepper__item[data-state=complete]:not(:last-child) .checkout-stepper__node::after {
  background: var(--color-primary);
}
.checkout-stepper__circle {
  position: relative;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-border);
  color: var(--color-border);
  font-weight: 600;
  font-size: var(--text-14);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
@media only screen and (min-width: 740px) {
  .checkout-stepper__circle {
    width: 2rem;
    height: 2rem;
  }
}
[data-state=complete] .checkout-stepper__circle {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
[data-state=active] .checkout-stepper__circle {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.checkout-stepper__check-bg {
  display: none;
}
[data-state=complete] .checkout-stepper__check-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -0.09375rem;
  right: -0.25rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--color-page);
}
[data-state=complete] .checkout-stepper__check {
  color: var(--color-primary);
}
@media only screen and (min-width: 740px) {
  [data-state=complete] .checkout-stepper__number {
    display: none;
  }
  [data-state=complete] .checkout-stepper__check-bg {
    width: 28px;
    height: 28px;
    position: static;
  }
  [data-state=complete] .checkout-stepper__check {
    --icon-size: 0.875rem;
  }
}
.checkout-stepper__label {
  display: none;
  white-space: nowrap;
  margin-left: var(--space-8);
  margin-right: var(--space-4);
  font-size: var(--text-14);
  font-weight: 700;
  color: var(--color-border);
}
@media only screen and (min-width: 740px) {
  .checkout-stepper__label {
    display: inline-block;
  }
}
[data-state=active] .checkout-stepper__label {
  display: inline-block;
  color: var(--color-primary);
}
@media only screen and (min-width: 740px) {
  [data-state=complete] .checkout-stepper__label {
    color: var(--color-primary);
  }
}

@media only screen and (max-width: 739px) {
  .filter {
    min-height: var(--filter-group-height, 3.5rem);
  }
}
.filter__group-sentinel {
  height: 0;
}
.filter__group {
  display: inline-flex;
  gap: var(--space-8);
  transition: opacity 0.2s ease, position 0.2s ease;
}
@media only screen and (min-width: 375px) {
  .filter__group {
    gap: var(--space-12);
  }
}
@media only screen and (min-width: 740px) {
  .filter__group {
    gap: var(--space-8);
  }
}
.filter__item {
  --filter-item-padding-left: var(--space-14);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  background: var(--color-surface-white);
  border-radius: 99rem;
}
@media only screen and (min-width: 400px) {
  .filter__item {
    --filter-item-padding-left: var(--space-16);
  }
}
@media only screen and (min-width: 840px) {
  .filter__item {
    --filter-item-padding-left: var(--space-20);
  }
}
.filter__trigger {
  --button-min-height: 2.5rem;
  --button-border-color: transparent;
  --button-font-weight: 600;
  --button-hover-border-color: transparent;
  align-items: center;
  gap: var(--space-4);
  padding-left: var(--filter-item-padding-left);
  padding-right: calc(var(--filter-item-padding-left) - 2px);
}
.filter__trigger .icon {
  margin-right: var(--space-4);
}
.filter__count[hidden] {
  display: none;
}
@media only screen and (max-width: 499px) {
  .filter__count {
    position: absolute;
    right: -0.375rem;
    top: -0.125rem;
    border: 1px solid var(--color-border-faint);
  }
}
.filter__clear {
  --button-min-width: 1.125rem;
  --button-min-height: 1.125rem;
  --button-padding-inline: 0;
  --button-padding-top: 0;
  --button-padding-bottom: 0;
  margin-left: calc(var(--space-4) * -1);
  cursor: pointer;
  position: relative;
  left: calc((var(--filter-item-padding-left) - var(--space-4)) * -1);
}
.filter__clear .icon--close {
  --icon-size: 0.5rem;
}
.filter__clear[hidden] {
  display: none;
}
@media only screen and (max-width: 739px) {
  .filter__clear {
    display: none;
  }
}
.filter__message {
  --title-margin-bottom: var(--space-16);
  --title-font-weight: 500;
  text-align: center;
  padding: var(--space-16);
  color: var(--color-on-surface-dark);
  border: 4px solid var(--color-border-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--card-horizontal-max-width);
  min-height: 10rem;
  border-radius: var(--card-border-radius);
  padding-top: var(--space-20);
  padding-bottom: var(--space-24);
}
.filter__message[hidden] {
  display: none;
}
.filter__message-tag[hidden], .filter__message-default[hidden] {
  display: none;
}
.filter__message .btn .icon {
  --icon-size: 0.625rem;
}
.filter__panel .drawer__body {
  padding-inline: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.filter__chip-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-4);
  row-gap: var(--space-8);
  padding-block: var(--space-16);
  padding-inline: var(--drawer-padding-inline);
}
@media only screen and (min-width: 740px) {
  .filter__chip-list {
    padding-block: 0;
    padding-inline: 0;
  }
}
.filter__chip.is-active {
  background: var(--color-accent);
  color: var(--color-on-primary);
}

.filter--chips .filter__item {
  background: none;
}
.filter--chips .filter__trigger {
  --button-background: var(--color-surface-white);
  --button-border-color: var(--color-border-subtle);
}
@media only screen and (min-width: 740px) {
  .filter--chips .filter__trigger {
    display: none;
  }
}

.card-horizontal-list {
  opacity: 1;
  transition: opacity 0.25s ease;
}
.card-horizontal-list.is-reloading {
  opacity: 0;
  pointer-events: none;
}

.section__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-top: var(--space-40);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  z-index: 1;
}
.section__overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.spinner {
  width: 3rem;
  height: 3rem;
  border: 0.375rem solid var(--spinner-color, var(--color-primary-on-dark));
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spinner-rotate 0.7s linear infinite;
  opacity: 0.8;
}

@keyframes spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .card-horizontal-list,
  .section__overlay {
    transition: none;
  }
  .spinner {
    animation: none;
  }
}
.checkout-timer {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav, 1000);
  background-color: rgba(var(--color-surface-dark-rgb), 0.9);
  color: var(--color-on-primary);
  padding-block: var(--space-8);
  text-align: right;
}
.checkout-timer__text {
  font-size: var(--text-14);
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  justify-content: center;
}
.checkout-timer__time {
  display: inline-block;
  width: 2.5rem;
}

.back-to-top {
  position: sticky;
  bottom: 0;
  height: 1px;
  pointer-events: none;
}
.back-to-top[hidden] {
  display: none;
}
.back-to-top__button {
  --button-min-height: 2.5rem;
  --button-min-width: 2.5rem;
  --button-padding-inline: 0;
  position: absolute;
  bottom: var(--space-16);
  right: 0;
  pointer-events: none;
  z-index: var(--z-filter-bar, 900);
  background: rgba(var(--color-surface-muted-rgb), 0.8);
  border-radius: var(--border-radius-4) 0 0 var(--border-radius-4);
  text-align: center;
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.back-to-top.is-visible .back-to-top__button {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

@media only screen and (max-width: 839px) {
  body.search-open {
    overflow: hidden;
    padding-right: var(--scrollbar-width, 0);
  }
}

.search {
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 99rem;
  display: inline-flex;
  align-items: center;
  padding-inline-end: 0.125rem;
  width: 100%;
  position: relative;
  z-index: 1;
  column-gap: var(--space-4);
  --input-background: transparent;
  --input-border: none;
  --input-color: var(--color-on-primary);
  --input-padding: var(--space-4) var(--space-4) var(--space-4) var(--space-14);
  --input-height: 2.5rem;
  --input-font-weight: 500;
}
.search-widget__toggle, .search__submit {
  --button-background: none;
  --button-border-color: transparent;
  --button-hover-background: none;
  --button-hover-border-color: transparent;
  --button-min-height: 2.25rem;
  --button-min-width: 2.25rem;
  --button-padding-inline: 0;
  --button-padding-top: 0;
  --button-padding-bottom: 0;
  --button-border-radius: 2px 99rem 99rem 2px;
}
.search-widget__toggle .icon, .search__submit .icon {
  margin-left: -0.125rem;
  margin-top: -0.0625rem;
}
.search:has(.search__input:focus:not(:placeholder-shown)) {
  border-color: rgba(255, 255, 255, 0.6);
}
.search:has(.search__input:focus:not(:placeholder-shown)) .search__submit {
  --button-background: rgba(var(--color-accent-rgb), 0.6);
}

.search-widget {
  position: static;
  width: 100%;
  z-index: var(--z-search-widget, 1000);
  display: flex;
  justify-content: end;
}
@media only screen and (min-width: 840px) {
  .search-widget {
    justify-content: center;
  }
}
@media only screen and (min-width: 980px) {
  .search-widget {
    padding-right: 1%;
  }
}
@media only screen and (min-width: 1024px) {
  .search-widget {
    padding-right: 2%;
  }
}
@media only screen and (min-width: 1200px) {
  .search-widget {
    padding-right: 3%;
  }
}
.search-widget__form {
  max-width: 31.25rem;
}
@media only screen and (max-width: 839px) {
  .search-widget__form {
    display: none;
  }
}
.search-widget__toggle {
  --button-min-width: 2.5rem;
  --button-min-height: 2.5rem;
}
.search-widget__toggle .icon {
  --icon-size: 1.625rem;
}
@media only screen and (min-width: 840px) {
  .search-widget__toggle {
    display: none;
  }
}
.search-widget__close {
  --button-border: none;
}
.search-widget__close .icon {
  --icon-size: 1.25rem;
}
.search-widget__close {
  display: none;
}
@media only screen and (min-width: 840px) {
  .search-widget__close {
    display: none;
  }
}
@media only screen and (max-width: 839px) {
  .search-widget.is-expanded {
    position: fixed;
    top: 0;
    left: 0;
    background: var(--color-primary);
    padding-block: var(--space-20);
    width: 100%;
    height: 100%;
    padding-inline: var(--space-12);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .search-widget.is-expanded .search {
    display: flex;
    width: 100%;
    height: 3.5rem;
    margin-bottom: var(--space-20);
    padding-inline-end: var(--space-4);
    column-gap: var(--space-4);
    animation: flash-once 1s ease;
  }
  .search-widget.is-expanded .search::before {
    content: attr(data-mobile-title);
    font-size: var(--text-18);
    font-weight: 700;
    position: absolute;
    top: -2.5rem;
  }
  .search-widget.is-expanded .search__submit {
    --button-background: rgba(var(--color-accent-rgb), 0.6);
    --button-min-width: 2.75rem;
    --button-min-height: 2.75rem;
  }
  .search-widget.is-expanded .search__submit .icon--search {
    animation: flash-once 1s ease;
  }
  .search-widget.is-expanded .search-widget__close {
    display: block;
    position: absolute;
    right: max(1rem, 50% - 250px);
    top: calc(50% - 5rem);
    animation: flash-once 1s ease;
  }
  .search-widget.is-expanded .search-widget__toggle {
    display: none;
  }
}

/*
.search-widget__results{
  position: absolute;
  top: calc(100% + pxToRem(4px));
  left: 0;
  right: 0;
  background: var(--color-surface);
  color: var(--color-on-surface);
  border-radius: 0 0 var(--border-radius-8) var(--border-radius-8);
  box-shadow: var(--shadow-high);
  margin-top: var(--space-4);
  padding-block: var(--panel-padding-block);
  padding-inline: var(--panel-padding-inline);
  z-index: var(--z-search-widget, 1001); // above site-header (1000)
  max-height: 400px; // or whatever fits your header's typical layout
  overflow-y: auto;

  p, ul, ol{
    margin-bottom: var(--space-4);
  }

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

  .search__group-label{
    font-size: var(--text-12);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-on-surface);
    margin-bottom: 0;
  }

  .search__results-list{
    margin-bottom: var(--space-12);

    li{
      border-bottom: 1px solid var(--color-border-subtle);
      padding-block: var(--space-12); 
    }
  }

  .search__result-link{
    font-weight: 500;
  }
}
*/
.site-header__logo, .site-header__login, .site-header__cart {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.site-header {
  background: rgba(var(--color-primary-rgb), 1);
  color: var(--color-on-primary);
  position: relative;
  width: 100%;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: height 0.3s ease;
  position: relative;
  column-gap: 0;
  padding-block: var(--space-8);
  min-height: var(--site-header-min-height, 3.75rem);
}
@media only screen and (min-width: 375px) {
  .site-header__inner {
    column-gap: var(--space-16);
  }
}
@media only screen and (min-width: 840px) {
  .site-header__inner {
    column-gap: var(--space-40);
  }
}
.site-header__nav {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}
@media only screen and (min-width: 375px) {
  .site-header__nav {
    gap: var(--space-16);
  }
}
@media only screen and (min-width: 840px) {
  .site-header__nav {
    flex: 1;
  }
}
.site-header__logo-link {
  display: block;
  width: 27%;
  min-width: 9.625rem;
  max-width: 15.625rem;
}
.site-header__logo {
  width: 100%;
  height: auto;
  transition: width 0.3s ease, height 0.3s ease;
}
.site-header__login {
  margin-left: 0;
}
@media only screen and (min-width: 840px) {
  .site-header__login {
    margin-left: var(--space-16);
  }
}
.site-header__search {
  flex: 0 1 auto;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
@media only screen and (max-width: 839px) {
  .site-header:has(.site-header__search.is-expanded) .site-header__logo,
  .site-header:has(.site-header__search.is-expanded) .site-header__login,
  .site-header:has(.site-header__search.is-expanded) .site-header__cart {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease, visibility 0.1s ease;
  }
}
.site-header__account {
  position: relative;
}

.login-text {
  white-space: nowrap;
}

.account-menu {
  --chip-font-weight: 500;
  --chip-padding-block: var(--space-4);
  text-align: center;
  margin-top: var(--space-8);
}
@media only screen and (min-width: 740px) {
  .account-menu {
    margin-top: 0;
    text-align: left;
  }
}
.account-menu__label {
  display: block;
}
.account-menu__heading {
  margin-bottom: var(--space-4);
}
.account-menu__heading:first-child {
  padding-top: 0;
  border-top: none;
}
@media only screen and (min-width: 740px) {
  .account-menu__heading {
    margin-left: var(--space-4);
  }
}
.account-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: var(--space-8);
  max-width: 18.75rem;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: var(--space-4);
}
.account-menu__list:last-child {
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}
.account-menu__link {
  font-weight: 700;
  font-size: var(--text-18);
  display: block;
  padding: var(--space-10) var(--space-16);
  border-radius: var(--border-radius-4);
}
.account-menu__link:hover {
  text-decoration: none;
  color: var(--color-accent-hover);
}
.account-menu__link .chip {
  margin-left: -0.25rem;
  margin-bottom: 0.125rem;
}
.account-menu__link:has(.chip) {
  padding-bottom: var(--space-6);
  padding-top: var(--space-8);
}
@media only screen and (min-width: 740px) {
  .account-menu__link {
    font-size: var(--text-15);
    display: block;
  }
  .account-menu__link:hover {
    background: var(--color-surface-muted);
  }
}

.cart {
  position: relative;
}
.cart__count {
  --badge-background: var(--color-secondary);
  --badge-color: var(--color-on-secondary);
  --badge-font-size: var(--text-10);
  position: absolute;
  top: 2px;
  right: -1px;
  width: 0.875rem;
  height: 0.875rem;
}
.cart__count[hidden] {
  display: none;
}

.site-tab-nav-sentinel {
  height: 1px;
  margin-top: var(--space-12);
}
@media only screen and (min-width: 500px) {
  .site-tab-nav-sentinel {
    margin-top: var(--space-16);
  }
}
@media only screen and (min-width: 740px) {
  .site-tab-nav-sentinel {
    margin-top: var(--space-20);
  }
}
@media only screen and (min-width: 980px) {
  .site-tab-nav-sentinel {
    margin-top: var(--space-24);
  }
}
@media only screen and (min-width: 1200px) {
  .site-tab-nav-sentinel {
    margin-top: var(--space-28);
  }
}

.site-tab-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav, 1000);
  background: transparent;
  box-shadow: none;
  transition: box-shadow 0.3s ease;
}
.site-tab-nav.is-stuck {
  --site-tab-nav-list-box-shadow: none;
  --site-tab-nav-list-background: transparent;
  --site-tab-nav-font-size: var(--text-14);
  --site-tab-nav-item-min-width: 3.125rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-medium);
  backdrop-filter: blur(0.25rem);
}
.site-tab-nav.is-stuck .site-tab-nav__wrapper {
  border-radius: 0;
}
@media only screen and (max-width: 639px) {
  .site-tab-nav.is-stuck .site-tab-nav__wrapper {
    margin-left: calc(var(--grid-padding-inline) * -1);
    margin-right: calc(var(--grid-padding-inline) * -1);
  }
}
@media only screen and (max-width: 639px) {
  .site-tab-nav.is-stuck .site-tab-nav__track {
    padding-inline: var(--space-12);
  }
}
@media only screen and (min-width: 640px) {
  .site-tab-nav {
    --site-tab-nav-item-border-color: transparent;
  }
}
@media only screen and (min-width: 740px) {
  .site-tab-nav {
    --site-tab-nav-font-size: var(--text-15);
    --site-tab-nav-item-min-width: 6.25rem;
  }
  .site-tab-nav.is-stuck {
    --site-tab-nav-item-height: 2.5rem;
  }
}
@media only screen and (min-width: 1024px) {
  .site-tab-nav {
    --site-tab-nav-font-size: var(--text-16);
  }
}
.site-tab-nav__wrapper {
  display: flex;
  border-radius: 99rem;
  box-shadow: var(--site-tab-nav-list-box-shadow, var(--shadow-medium));
  background: var(--site-tab-nav-list-background, var(--color-surface-white));
  transition: max-width 0.3s ease;
  overflow: hidden;
  position: relative;
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
@media only screen and (min-width: 640px) {
  .site-tab-nav__wrapper {
    margin-left: 0;
    margin-right: 0;
  }
}
.site-tab-nav__track {
  width: 100%;
  padding: 0.375rem;
  text-align: center;
  overflow-x: auto;
  scroll-behavior: smooth;
  position: relative;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.site-tab-nav__track::-webkit-scrollbar {
  display: none;
}
.site-tab-nav__list {
  flex: 1 0 auto;
  display: inline-flex;
  gap: var(--space-4);
  min-width: 100%;
}
.site-tab-nav__item {
  font-size: var(--site-tab-nav-font-size, var(--text-14));
  font-weight: 800;
  white-space: nowrap;
  padding-inline: var(--space-16);
  padding-block: var(--space-4);
  border-radius: 99rem;
  color: var(--color-accent);
  text-decoration: none;
  position: relative;
  min-width: var(--site-tab-nav-item-min-width, 4.75rem);
  height: var(--site-tab-nav-item-height, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--site-tab-nav-item-border-color, var(--color-border-faint));
  flex: 1 0 auto;
  transition: font-size 0.2s ease, color 0.2s ease, border-color 0.2s ease, height 0.2s ease, background-color 0.2s ease;
}
.site-tab-nav__item:hover {
  text-decoration: none;
  color: var(--color-accent-hover);
}
.site-tab-nav__item.is-active {
  background: var(--color-accent);
  color: var(--color-on-primary);
}
.site-tab-nav .badge--new {
  position: relative;
  top: -0.25rem;
  margin-left: 0.125rem;
  margin-right: -0.125rem;
}
@media only screen and (min-width: 740px) {
  .site-tab-nav .badge--new {
    top: -0.375rem;
    margin-left: 0.125rem;
    margin-right: -1rem;
  }
}
.site-tab-nav__arrow {
  --icon-color: var(--color-primary);
  width: 1.75rem;
  height: 100%;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.7);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: -8px 0px 16px rgba(0, 0, 0, 0.1);
  opacity: 1;
  backdrop-filter: blur(0.12rem);
  padding: 0;
}
.site-tab-nav__arrow .icon {
  --icon-size: 0.75rem;
  opacity: 0.8;
}
.site-tab-nav__arrow--left {
  left: 0;
  padding-left: 2px;
}
.site-tab-nav__arrow--right {
  right: 0;
  padding-right: 2px;
}
.site-tab-nav__arrow[hidden] {
  display: none;
}
.site-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--color-border-faint);
}
.site-footer__inner {
  display: grid;
  text-align: center;
  padding-block: var(--space-20);
  margin-bottom: var(--space-4);
  grid-template-areas: "authorised" "nav" "copyright";
}
@media only screen and (min-width: 840px) {
  .site-footer__inner {
    padding-block: var(--space-24);
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas: "nav authorised" "copyright authorised";
  }
}
@media only screen and (min-width: 980px) {
  .site-footer__inner {
    padding-block: var(--space-28);
  }
}
.site-footer__logo {
  max-width: 3.125rem;
  margin-bottom: var(--space-8);
}
.site-footer__authorised {
  grid-area: authorised;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-12);
}
@media only screen and (min-width: 840px) {
  .site-footer__authorised {
    text-align: right;
    align-items: flex-end;
    margin-bottom: 0;
  }
}
.site-footer__authorised p {
  font-size: var(--text-14);
  font-weight: 700;
  margin-bottom: 0;
  line-height: 1.2;
}
.site-footer__nav {
  grid-area: nav;
}
@media only screen and (min-width: 840px) {
  .site-footer__nav {
    align-self: end;
    margin-left: calc(var(--space-8) * -1);
  }
}
.site-footer__nav-list {
  font-size: var(--text-14);
  padding: 0;
  margin: 0;
  list-style: none;
}
@media only screen and (min-width: 840px) {
  .site-footer__nav-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-8);
  }
}
.site-footer__nav-list a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-4);
  padding-inline: var(--space-8);
  min-height: 2.25rem;
  color: var(--color-on-surface);
}
.site-footer__nav-list a:hover {
  opacity: 0.6;
}
.site-footer__copyright {
  grid-area: copyright;
  align-self: end;
  font-size: var(--text-14);
  line-height: 1.2;
  border-top: 1px solid var(--color-border-subtle);
  padding-block-start: var(--space-16);
  margin-top: var(--space-4);
  margin-bottom: 0;
}
@media only screen and (min-width: 840px) {
  .site-footer__copyright {
    border: none;
    text-align: left;
    margin-top: 0;
    padding-block-start: 0;
    padding-block-end: 2px;
  }
}

.cart-table {
  --meta-flex-direction: column;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-16);
  line-height: 1.2;
}
.cart-table__heading-row {
  display: none;
}
@media only screen and (min-width: 640px) {
  .cart-table__heading-row {
    display: grid;
    grid-template-columns: 1fr 8.125rem 6.875rem;
    column-gap: var(--space-8);
  }
}
.cart-table__heading {
  text-align: center;
}
.cart-table__heading:first-child {
  text-align: left;
  padding-left: 0.25rem;
}
.cart-table__heading:last-child {
  text-align: right;
  padding-right: 0.25rem;
}
.cart-table__row {
  display: grid;
  grid-template-areas: "package package" "qty price";
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--space-8);
  row-gap: var(--space-24);
  position: relative;
}
@media only screen and (min-width: 640px) {
  .cart-table__row {
    grid-template-areas: "package qty price" "package qty remove";
    grid-template-columns: 1fr 8.125rem 6.875rem;
  }
}
.cart-table__package {
  grid-area: package;
  display: grid;
  grid-template-areas: "thumbnail" "details";
}
@media only screen and (min-width: 980px) {
  .cart-table__package {
    grid-template-areas: "thumbnail details";
    grid-template-columns: auto 1fr;
  }
}
.cart-table__package .title {
  padding-right: 2.75rem;
}
.cart-table__thumbnail + .cart-table__details .title {
  padding-right: 0;
}
.cart-table__thumbnail {
  grid-area: thumbnail;
  margin-bottom: var(--space-8);
}
@media only screen and (min-width: 980px) {
  .cart-table__thumbnail {
    margin-bottom: 0;
    margin-right: var(--space-20);
  }
}
.cart-table__thumbnail .card__team-image-set {
  width: 100%;
  max-width: 7.5rem;
  max-height: 4.25rem;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--border-radius-4);
  margin-top: -0.125rem;
}
.cart-table__thumbnail > img {
  width: 100%;
  object-fit: cover;
  max-width: 7.5rem;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--border-radius-4);
  margin-top: -0.125rem;
}
.cart-table__details {
  grid-area: details;
}
.cart-table__meta {
  opacity: 0.8;
  padding-left: 0.125rem;
}
.cart-table__meta .icon {
  --icon-size: 1.25rem;
}
.cart-table__meta .icon--football {
  --icon-mask-size: 1.125rem;
}
.cart-table__meta .meta__text {
  padding-top: 0.2em;
}
.cart-table__qty {
  --label-margin-bottom: 0;
  grid-area: qty;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-4);
  min-width: 8rem;
}
@media only screen and (min-width: 640px) {
  .cart-table__qty {
    align-self: start;
    gap: var(--space-8);
  }
}
.cart-table__qty label {
  font-size: var(--text-13);
  font-weight: 400;
  text-align: center;
  align-self: center;
  padding-left: 0;
}
.cart-table__qty .field--quantity {
  --input-height: 2.5rem;
  margin-left: auto;
  margin-right: auto;
}
.cart-table__qty .field--quantity input[readonly],
.cart-table__qty .field--quantity input[disabled] {
  margin-left: -2px;
}
.cart-table__price {
  grid-area: price;
  align-self: center;
  text-align: right;
  padding-bottom: var(--space-20);
  padding-right: var(--space-4);
}
@media only screen and (min-width: 640px) {
  .cart-table__price {
    display: flex;
    flex-direction: column;
    align-self: start;
    padding-bottom: 0;
    padding-top: 0.625rem;
  }
}
.cart-table__price-amount {
  font-weight: 700;
  font-size: var(--text-16);
}
.cart-table__remove {
  position: absolute;
  top: var(--space-12);
  right: calc(var(--panel-padding-inline));
}
@media only screen and (min-width: 640px) {
  .cart-table__remove {
    position: static;
    align-self: end;
    justify-self: end;
    margin-right: -0.25rem;
  }
}
.cart-table__total-row {
  display: grid;
  grid-template-areas: "promo-code" "recalculate" "amount";
  grid-template-columns: auto;
}
@media only screen and (min-width: 500px) {
  .cart-table__total-row {
    grid-template-areas: "promo-code recalculate" "amount amount";
    grid-template-columns: 1fr auto;
    row-gap: var(--space-36);
    column-gap: var(--space-24);
  }
}
@media only screen and (min-width: 740px) {
  .cart-table__total-row {
    row-gap: var(--space-20);
  }
}
.cart-table__recalculate {
  --button-padding-inline: var(--space-12);
  grid-area: recalculate;
  justify-self: center;
  width: 100%;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  margin-bottom: var(--space-12);
}
@media only screen and (min-width: 375px) {
  .cart-table__recalculate {
    text-align: right;
  }
}
@media only screen and (min-width: 500px) {
  .cart-table__recalculate {
    margin-bottom: 0;
    align-self: start;
    padding-top: 0.1875rem;
  }
}
.cart-table__amount {
  grid-area: amount;
  align-self: center;
}
.cart-table__promo-code {
  grid-area: promo-code;
  display: flex;
  flex-direction: column;
  column-gap: var(--space-8);
  row-gap: var(--space-2);
  margin-bottom: var(--space-32);
  margin-left: var(--space-4);
  margin-right: var(--space-4);
  position: relative;
  padding-bottom: var(--space-8);
}
@media only screen and (min-width: 500px) {
  .cart-table__promo-code {
    margin-bottom: 0;
    max-width: 17.5rem;
  }
}
@media only screen and (min-width: 640px) {
  .cart-table__promo-code {
    width: auto;
    justify-content: start;
    padding-bottom: var(--space-16);
  }
}
.cart-table__promo-code .field--promo-code {
  --input-height: 2.5rem;
  width: 100%;
  max-width: none;
}
.cart-table__promo-code .btn {
  --button-padding-inline: var(--space-12);
  --button-height: 2.375rem;
  border-radius: 0 var(--field-border-radius) var(--field-border-radius) 0;
  position: absolute;
  right: 1px;
  top: 1px;
}
.cart-table__promo-code .field__success,
.cart-table__promo-code .field__error {
  position: absolute;
  bottom: -1.25rem;
  left: 0;
}
@media only screen and (min-width: 640px) {
  .cart-table__promo-code .field__success,
  .cart-table__promo-code .field__error {
    bottom: -0.75rem;
  }
}

.cart-table--review .meta {
  --meta-flex-direction: row;
}
.cart-table--review .cart-table__payment-details, .cart-table--review .cart-table__booking-details {
  --meta-text-font-size: var(--text-16);
}
.cart-table--review .cart-table__payment-details .meta__item, .cart-table--review .cart-table__booking-details .meta__item {
  grid-template-columns: 2.25rem 1fr;
}
.cart-table--review .cart-table__payment-details .meta__item .icon, .cart-table--review .cart-table__booking-details .meta__item .icon {
  justify-self: center;
  margin-left: -0.25rem;
  margin-top: 0.0625rem;
}
.cart-table--review .cart-table__payment-details .meta__item .icon[data-payment-method=Amex],
.cart-table--review .cart-table__payment-details .meta__item .icon[data-payment-method=Visa],
.cart-table--review .cart-table__payment-details .meta__item .icon[data-payment-method=Mastercard], .cart-table--review .cart-table__booking-details .meta__item .icon[data-payment-method=Amex],
.cart-table--review .cart-table__booking-details .meta__item .icon[data-payment-method=Visa],
.cart-table--review .cart-table__booking-details .meta__item .icon[data-payment-method=Mastercard] {
  margin-top: -0.375rem;
}
.cart-table--review .cart-table__payment-details .meta__item .icon[data-payment-method=Crypto], .cart-table--review .cart-table__booking-details .meta__item .icon[data-payment-method=Crypto] {
  margin-top: -0.25rem;
}
.cart-table--review .cart-table__total-row {
  grid-template-areas: "amount";
  grid-template-columns: auto;
}

.grid {
  --grid-content-max-width: var(--content-width-default);
  --grid-content-wider-max-width: var(--page-max-width);
  --content-wider-size: calc((var(--grid-content-wider-max-width) - var(--grid-content-max-width)) / 2);
  display: grid;
  grid-template-columns: [full-width-start] minmax(var(--grid-padding-inline, var(--space-12)), 1fr) [content-wider-start] minmax(0, var(--content-wider-size)) [content-start] min(100% - var(--grid-padding-inline, var(--space-12)) * 2, var(--grid-content-max-width)) [content-end] minmax(0, var(--content-wider-size)) [content-wider-end] minmax(var(--grid-padding-inline, var(--space-12)), 1fr) [full-width-end];
  align-content: flex-start;
}

.grid > :not(.grid--wide, .grid--full-width),
.full-width > :not(.grid--wide, .grid--full-width) {
  grid-column: content;
}

.grid > .grid--full-width {
  grid-column: full-width;
}

.grid--narrow {
  width: 100%;
  max-width: var(--content-width-narrow);
  margin-left: auto;
  margin-right: auto;
}

.grid--wide {
  width: 100%;
  max-width: var(--content-width-wide);
  margin-left: auto;
  margin-right: auto;
}

.grid--narrower {
  width: 100%;
  max-width: var(--content-width-narrower);
  margin-left: auto;
  margin-right: auto;
}

.grid--narrowest {
  width: 100%;
  max-width: var(--content-width-text);
  margin-left: auto;
  margin-right: auto;
}

.grid--card {
  width: 100%;
  max-width: var(--content-width-card);
  margin-left: auto;
  margin-right: auto;
}

.grid--card {
  width: 100%;
  max-width: var(--content-width-card);
  margin-left: auto;
  margin-right: auto;
}

.grid > .grid--wide {
  grid-column: content-wider;
}

.grid > .full-width {
  grid-column: full-width;
  display: grid;
  grid-template-columns: inherit;
}

.grid--content-center {
  align-content: center;
}

.main {
  --main-bg-background-overlay: var(--background-gradient-overlay);
  --main-padding-block: var(--space-24);
  flex: 1 0 auto;
  margin-top: 0;
  background-color: var(--main-background-color, var(--color-surface-dark));
  z-index: 0;
  overflow: hidden;
  position: relative;
  border-radius: var(--main-border-radius, var(--border-radius-16) var(--border-radius-16) 0 0);
  margin-top: calc((var(--site-tab-nav-item-height) + var(--site-tab-nav-list-padding) * 2) / 2 * -1);
  padding-top: calc((var(--site-tab-nav-item-height) + var(--site-tab-nav-list-padding) * 2) / 2 + var(--main-padding-block, var(--space-24)));
  padding-bottom: calc(var(--main-padding-block) + var(--space-20));
}
@media only screen and (min-width: 400px) {
  .main {
    --main-padding-block: var(--space-28);
  }
}
@media only screen and (min-width: 740px) {
  .main {
    --main-padding-block: var(--space-32);
    --main-border-radius: var(--border-radius-32) var(--border-radius-32) 0 0;
  }
}
@media only screen and (min-width: 980px) {
  .main {
    --main-padding-block: var(--space-36);
  }
}
.main__bg-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -2;
  opacity: var(--main-background-opacity, 0.7);
  overflow: hidden;
  display: grid;
  min-height: var(--main-bg-wrap-min-height, 0);
}
.main__bg-wrap::before {
  content: "";
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--main-bg-background-overlay);
}
.main__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.main--light-bg {
  --main-background-color: var(--color-surface);
}

.main--wout-nav {
  margin-top: var(--space-16);
  padding-top: var(--main-padding-block);
}
@media only screen and (min-width: 740px) {
  .main--wout-nav {
    margin-top: var(--space-24);
  }
}

.main--package {
  --main-background-opacity: 1;
  --main-bg-wrap-min-height: 37.5rem;
  background: var(--color-surface-muted);
  background: linear-gradient(180deg, var(--color-surface-muted) 0%, var(--color-surface-muted) 50%, var(--color-surface) 70%);
}
@media only screen and (min-width: 640px) {
  .main--package {
    --main-bg-wrap-min-height: 28.75rem;
  }
}
@media only screen and (min-width: 840px) {
  .main--package {
    --main-bg-wrap-min-height: 45rem;
  }
}
@media only screen and (min-width: 980px) {
  .main--package {
    --main-bg-wrap-min-height: 50rem;
  }
}

.main--grand-final {
  --main-background-color: var(--grand-final-background-color);
  --tile-background: var(--grand-final-tile-background);
  --tile-overlay-start-color: var(--grand-final-tile-overlay-start-color);
  --tile-overlay-end-color: var(--grand-final-tile-overlay-end-color);
  --main-bg-background-overlay: var(--grand-final-background-gradient-overlay);
}
.main--grand-final .section--events {
  --card-border: 1px solid var(--grand-final-event-card-border-color);
}

.section {
  margin-top: var(--section-margin-top, 0);
  margin-bottom: var(--section-margin-bottom, var(--space-32));
}
@media only screen and (min-width: 400px) {
  .section {
    --section-margin-bottom: var(--space-40);
  }
}
@media only screen and (min-width: 740px) {
  .section {
    --section-margin-bottom: var(--space-48);
  }
}
@media only screen and (min-width: 980px) {
  .section {
    --section-margin-bottom: var(--space-56);
  }
}
.section--panel {
  padding-inline: var(--section-padding-inline, var(--space-12));
  padding-block: var(--section-padding-block, var(--space-16));
}
@media only screen and (min-width: 375px) {
  .section--panel {
    --section-padding-block: var(--space-20);
    --section-padding-inline: var(--space-16);
  }
}
@media only screen and (min-width: 640px) {
  .section--panel {
    --section-padding-block: var(--space-24);
    --section-padding-inline: var(--space-24);
  }
}
@media only screen and (min-width: 740px) {
  .section--panel {
    --section-padding-block: var(--space-28);
    --section-padding-inline: var(--space-28);
  }
}
@media only screen and (min-width: 840px) {
  .section--panel {
    --section-padding-inline: var(--space-32);
  }
}
@media only screen and (min-width: 980px) {
  .section--panel {
    --section-padding-inline: var(--space-32);
  }
}
@media only screen and (min-width: 1024px) {
  .section--panel {
    --section-padding-block: var(--space-32);
    --section-padding-inline: var(--space-40);
  }
}
.section > :last-child {
  margin-bottom: 0;
}
.section__header {
  margin-bottom: var(--section-header-margin-bottom, var(--space-16));
  text-align: var(--section-header-text-align, center);
  padding-inline: var(--section-header-padding-inline, var(--space-4));
}
@media only screen and (min-width: 740px) {
  .section__header {
    --section-header-margin-bottom: var(--space-20);
    --section-header-text-align: left;
  }
}
.section__header > :last-child {
  margin-bottom: 0;
}
.section__heading {
  --title-margin-bottom: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "badge heading";
  column-gap: var(--step-badge-column-gap, var(--space-8));
  display: inline-grid;
  margin-bottom: var(--space-8);
}
.section__heading .step-badge {
  grid-area: badge;
  align-self: var(--step-badge-align-self, start);
}
.section__heading > .title, .section__heading > .text {
  grid-area: heading;
  align-self: center;
}
.section__breadcrumb {
  margin-bottom: var(--space-12);
}
.section__body {
  text-align: var(--section-body-text-align, center);
  position: relative;
}
.section__actions {
  margin-top: var(--space-20);
  text-align: center;
}
@media only screen and (min-width: 740px) {
  .section__actions {
    margin-top: var(--space-24);
  }
}
@media only screen and (min-width: 980px) {
  .section__actions {
    margin-top: var(--space-32);
  }
}
.section--hero-banner + .section--tile-grid, .section--hero-banner + .section--packages {
  margin-top: calc(var(--space-8) * -1);
}
@media only screen and (min-width: 400px) {
  .section--hero-banner + .section--tile-grid, .section--hero-banner + .section--packages {
    margin-top: calc(var(--space-12) * -1);
  }
}
@media only screen and (min-width: 740px) {
  .section--hero-banner + .section--tile-grid, .section--hero-banner + .section--packages {
    margin-top: calc(var(--space-16) * -1);
  }
}

.section--promo-banner-leaderboard {
  --section-margin-bottom: 0;
  --section-margin-top: var(--space-12);
}
@media only screen and (min-width: 400px) {
  .section--promo-banner-leaderboard {
    --section-margin-bottom: var(--space-4);
    --section-margin-top: var(--space-16);
  }
}
@media only screen and (min-width: 740px) {
  .section--promo-banner-leaderboard {
    --section-margin-top: var(--space-20);
  }
}
@media only screen and (min-width: 980px) {
  .section--promo-banner-leaderboard {
    --section-margin-top: var(--space-24);
  }
}
@media only screen and (min-width: 1024px) {
  .section--promo-banner-leaderboard {
    --section-margin-top: var(--space-28);
  }
}
.section--promo-banner-leaderboard[data-hide-when-wallpaper-visible] {
  max-height: 31.25rem;
  opacity: 1;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.4s ease, padding 0.4s ease;
}
@media only screen and (min-width: 1600px) {
  .section--promo-banner-leaderboard[data-hide-when-wallpaper-visible] {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
  }
}

.section--events {
  scroll-margin-top: 3rem;
}
.section--events .section__header {
  color: var(--color-on-primary);
}
@media only screen and (min-width: 740px) {
  .section--events .section__header {
    --breadcrumb-margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.section--events .section__header--has-event-filter + .section__body {
  min-height: 15rem;
}
@media only screen and (min-width: 740px) {
  .section--events .section__header--has-event-filter + .section__body {
    min-height: 20rem;
  }
}

[data-component=events-section] {
  scroll-margin-top: 4.75rem;
}

.section--packages {
  --filter-group-height: 2.75rem;
  background: var(--color-surface);
  border-radius: var(--section-container-border-radius, var(--card-border-radius));
  position: relative;
  text-align: center;
}
.section--packages .filter {
  text-align: center;
}
@media only screen and (min-width: 740px) {
  .section--packages .filter {
    text-align: left;
    padding-left: calc(var(--step-badge-size) + var(--step-badge-column-gap));
  }
}
@media only screen and (max-width: 739px) {
  .section--packages .section__heading {
    margin-left: -0.75rem;
  }
}
.section--packages .section__packages {
  padding-bottom: var(--space-4);
}

@media only screen and (max-width: 839px) {
  .grid > .section--packages.grid--full-width {
    --section-container-border-radius: 0;
  }
}
@media only screen and (min-width: 840px) {
  .grid > .section--packages.grid--full-width {
    grid-column: content;
  }
}

.section--products {
  color: var(--color-on-surface-dark);
}
@media only screen and (min-width: 740px) {
  .section--products .section__header {
    max-width: calc(38.75rem + var(--space-12));
    margin-left: auto;
    margin-right: auto;
  }
}
@media only screen and (min-width: 980px) {
  .section--products .section__header {
    max-width: none;
    padding-inline: var(--space-24);
  }
}

.section--cart {
  --section-header-text-align: left;
}

.section--details-payment {
  --section-body-text-align: left;
}

.section--login {
  --section-body-text-align: left;
}

.section__icon {
  padding-block: var(--space-16);
}
.section__icon .icon {
  --icon-size: var(--space-64);
  --icon-color: var(--color-success);
}
.section__icon--small .icon {
  --icon-size: var(--space-48);
}

.section--article {
  --section-body-text-align: left;
}

.article__header {
  --title-margin-bottom: 0;
  margin-bottom: var(--space-28);
  display: flex;
  column-gap: var(--space-16);
  row-gap: var(--space-8);
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.article__header *:last-child {
  margin-bottom: 0;
}
.article__body p {
  margin-bottom: var(--space-16);
}
.article__body *:last-child {
  margin-bottom: 0;
}
.article__body > .title:not(:first-child) {
  margin-top: var(--space-32);
}

.meta--contact {
  --meta-flex-direction: column;
  --meta-text-font-size: var(--text-16);
  --meta-row-gap: var(--space-12);
  padding-left: var(--space-4);
}

.section--contact a {
  color: var(--color-on-surface);
}
.section--contact a:hover {
  text-decoration: none;
  opacity: 0.8;
}

.section--register {
  --section-body-text-align: left;
  --section-header-text-align: left;
}
.section--register .section__header {
  color: var(--color-on-surface-dark);
}
.section--register .section__header a {
  color: var(--color-on-surface-dark);
  opacity: 0.7;
}

.section--promo-banner {
  margin-bottom: var(--space-32);
}

.main > .section--promo-banner .promo-banner--leaderboard {
  box-shadow: var(--shadow-outline), var(--shadow-card);
}

.section--search-results .btn[data-action=load-more] {
  --button-color: rgba(var(--color-accent-rgb), 1);
  --button-border-color: rgba(var(--color-accent-rgb), 1);
}

@media only screen and (min-width: 980px) {
  .packages {
    padding-left: calc(var(--step-badge-size) + var(--step-badge-column-gap));
  }
}

.package,
.package__details {
  --chip-font-weight: 600;
  --chip-font-size: 0.796875rem;
}

.package {
  display: grid;
}
.package.is-hidden {
  display: none;
}
.package.is-revealing {
  animation: card-fade-in 0.35s ease forwards;
}
.package.is-filtered-out {
  display: none;
}
.package__inclusions {
  --title-margin-bottom: var(--space-12);
  --inclusion-text-font-size: var(--text-15);
  --inclusion-row-gap: var(--space-12);
  --inclusion-columns: 1;
  background: var(--color-surface-dark);
  color: var(--color-on-primary);
  padding-inline: var(--space-12);
  padding-block: var(--space-12);
  border-radius: var(--card-border-radius);
}
@media only screen and (min-width: 375px) {
  .package__inclusions {
    --inclusion-row-gap: var(--space-16);
    padding-inline: var(--space-16);
    padding-block: var(--space-16);
  }
}
@media only screen and (min-width: 500px) {
  .package__inclusions {
    padding-inline: var(--space-20);
    padding-block: var(--space-20);
  }
}
@media only screen and (min-width: 640px) {
  .package__inclusions {
    padding-inline: var(--space-24);
    padding-block: var(--space-24);
  }
}
@media only screen and (min-width: 740px) {
  .package__inclusions {
    --inclusion-columns: 2;
    --inclusion-column-gap: var(--space-8);
    padding-inline: var(--space-20);
  }
}
.package__media-view {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--space-8);
  column-gap: var(--space-8);
  align-items: center;
  justify-content: start;
  padding-left: var(--space-4);
}
.package__media-view .btn {
  --button-min-height: 3.625rem;
  --button-font-weight: 500;
  --button-font-size: var(--text-13);
  --button-padding-top: var(--space-8);
  --button-padding-bottom: var(--space-8);
  --button-padding-inline: var(--space-8);
  --button-border: 1.5px solid rgba(var(--color-accent-rgb), 0.7);
  flex-direction: column;
  gap: 0.125rem;
  justify-content: space-between;
  box-shadow: var(--shadow-low);
}
.package__media-view .icon {
  --icon-size: var(--text-24);
}

.package__booking {
  --step-badge-column-gap: var(--space-12);
  background: rgba(var(--color-surface-muted-rgb), 0.9);
  background: linear-gradient(to bottom, rgba(var(--color-surface-muted-rgb), 1) 0%, rgba(var(--color-surface-muted-rgb), 0.95) 10%, rgba(var(--color-surface-muted-rgb), 0.95) 100%);
  backdrop-filter: blur(4px);
}

.package__form .fieldset__row {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--space-12);
  column-gap: var(--space-8);
  padding-left: 0;
}
@media only screen and (min-width: 500px) {
  .package__form .fieldset__row {
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
    column-gap: var(--space-20);
  }
}
.package__form .label--with-badge {
  padding-top: var(--space-4);
  padding-right: var(--space-8);
  flex: 0 0 auto;
}
@media only screen and (min-width: 500px) {
  .package__form .label--with-badge {
    flex: 0 0 auto;
    padding-right: 0;
  }
}
.package__form .field-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  column-gap: var(--space-12);
  row-gap: var(--space-12);
}
@media only screen and (min-width: 500px) {
  .package__form .field-group {
    flex: 1 1 0;
    justify-content: end;
    align-items: flex-start;
  }
}
.package__form .field-group .field--select {
  flex: 1 1 0;
  min-width: 200px;
  max-width: none;
  text-align: left;
}
@media only screen and (min-width: 500px) {
  .package__form .field-group .field--select {
    max-width: calc(21.25rem - var(--space-8));
  }
}
.package__form .field-group--quantity {
  flex-direction: column;
  row-gap: 0;
}
@media only screen and (min-width: 500px) {
  .package__form .field-group--quantity {
    align-items: end;
  }
}
@media only screen and (min-width: 500px) {
  .package__form .field-group .field--quantity {
    justify-content: end;
  }
}

.products {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 360px));
  gap: var(--space-16);
  justify-content: center;
}
@media only screen and (min-width: 500px) {
  .products {
    grid-template-columns: repeat(2, minmax(0, 310px));
  }
}
@media only screen and (min-width: 740px) {
  .products {
    padding-inline: var(--space-24);
  }
}
@media only screen and (min-width: 980px) {
  .products {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-20);
  }
}

.product {
  --title-margin-bottom: 0;
  --title-font-weight: 800;
}
.product.is-active {
  position: relative;
  z-index: 2;
}
.product__tile {
  position: relative;
  background: var(--product-tile-background, var(--color-surface-white));
  color: var(--product-tile-color, var(--color-on-surface));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: var(--space-4);
  width: 100%;
  min-height: 7.5rem;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
  padding-inline: var(--space-8);
  border-radius: var(--card-border-radius);
  box-shadow: var(--shadow-low);
}
.product__tile:hover {
  text-decoration: none;
}
@media only screen and (min-width: 640px) {
  .product__tile {
    min-height: 8.75rem;
  }
}
@media only screen and (min-width: 740px) {
  .product__tile {
    min-height: 9.25rem;
    padding-bottom: var(--space-4);
  }
}
.product__tile:hover {
  opacity: 1;
  filter: brightness(1.1);
}
.product.is-active .product__tile {
  z-index: 2;
}
.product--gf .product__logo {
  background-image: var(--product-tile-afl-logo, var(--afl-logo-black));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.product--gf .product__logo img {
  visibility: hidden;
}
.product--gf .product__title {
  font-size: var(--text-16);
  text-transform: uppercase;
  font-weight: 800;
}

[data-grand-final-product=ultimate] {
  --product-tile-background: var(--grand-final-gradient-ultimate);
  --product-tile-color: var(--grand-final-on-surface-ultimate);
  --product-info-border-color: var(--grand-final-border-color-ultimate);
  --product-info-background: var(--grand-final-surface-ultimate);
  --product-info-background-rgb: var(--grand-final-surface-ultimate-rgb);
  --package-tile-button-background: var(--grand-final-gradient-ultimate);
  --package-tile-button-color: var(--grand-final-on-surface-ultimate);
  --package-tile-button-border-color: var(--grand-final-border-color-ultimate);
}

[data-grand-final-product=vantage] {
  --product-tile-background: var(--grand-final-gradient-vantage);
  --product-tile-color: var(--grand-final-on-surface-vantage);
  --product-info-border-color: var(--grand-final-border-color-vantage);
  --product-info-background: var(--grand-final-surface-vantage);
  --product-info-background-rgb: var(--grand-final-surface-vantage-rgb);
  --product-tile-afl-logo: var(--afl-logo-white);
  --package-tile-button-background: var(--grand-final-gradient-vantage);
  --package-tile-button-color: var(--grand-final-on-surface-vantage);
  --package-tile-button-border-color: var(--grand-final-border-color-vantage);
}

[data-grand-final-product=countdown] {
  --product-tile-background: var(--grand-final-gradient-countdown);
  --product-tile-color: var(--grand-final-on-surface-countdown);
  --product-info-border-color: var(--grand-final-border-color-countdown);
  --product-info-background: var(--grand-final-surface-countdown);
  --product-info-background-rgb: var(--grand-final-surface-countdown-rgb);
  --product-tile-afl-logo: var(--afl-logo-white);
  --package-tile-button-background: var(--grand-final-gradient-countdown);
  --package-tile-button-color: var(--grand-final-on-surface-countdown);
  --package-tile-button-border-color: var(--grand-final-border-color-countdown);
}

[data-grand-final-product=grand-final-village] {
  --product-tile-background: var(--grand-final-gradient-grand-final-village);
  --product-tile-color: var(--grand-final-on-surface-grand-final-village);
  --product-info-border-color: var(--grand-final-border-color-grand-final-village);
  --product-info-background: var(--grand-final-surface-grand-final-village);
  --product-info-background-rgb: var(--grand-final-surface-grand-final-village-rgb);
  --product-tile-afl-logo: var(--afl-logo-white);
  --package-tile-button-background: var(--grand-final-gradient-grand-final-village);
  --package-tile-button-color: var(--grand-final-on-surface-grand-final-village);
  --package-tile-button-border-color: var(--grand-final-border-color-grand-final-village);
}

[data-grand-final-product=grand-final-plus-pass] {
  --product-tile-background: var(--grand-final-gradient-grand-final-plus-pass);
  --product-tile-color: var(--grand-final-on-surface-grand-final-plus-pass);
  --product-info-border-color: var(--grand-final-border-color-grand-final-plus-pass);
  --product-info-background: var(--grand-final-surface-grand-final-plus-pass);
  --product-info-background-rgb: var(--grand-final-surface-grand-final-plus-pass-rgb);
  --package-tile-button-background: var(--grand-final-gradient-grand-final-plus-pass);
  --package-tile-button-color: var(--grand-final-on-surface-grand-final-plus-pass);
  --package-tile-button-border-color: var(--grand-final-border-color-grand-final-plus-pass);
}

.product__info {
  background: var(--product-info-background, var(--color-surface-white));
}
.product__info .btn--product {
  --button-border: none;
  --button-background: var(--product-tile-background, var(--color-surface-white));
  --button-color: var(--product-tile-color, var(--color-on-surface));
  --button-max-width: 22.5rem;
}

.product__info .drawer__footer {
  text-align: center;
  background: rgba(var(--product-info-background-rgb), 0.8);
  border-top: 1px solid var(--color-border-subtle);
  border: none;
  backdrop-filter: blur(2px);
  --drawer-footer-padding-block: var(--space-16);
}
.product__info .swiper-slide {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.product__info .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product__info .product__aside {
  text-align: center;
}
.product__info .gallery {
  margin-left: auto;
  margin-right: auto;
}
.product__info .gallery + .package-tile-list {
  margin-top: var(--space-16);
}
@media only screen and (min-width: 740px) {
  .product__info .frame {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--space-20);
    max-width: var(--content-width-text);
  }
  .product__info .gallery {
    max-width: 31.25rem;
  }
  .product__info .product__cta {
    text-align: center;
    padding-top: var(--space-8);
    padding-bottom: var(--space-16);
  }
  .product__info .product__cta .btn--product {
    --button-padding-inline: var(--space-40);
  }
}
@media only screen and (min-width: 980px) {
  .product__info .frame {
    flex-direction: row;
    align-items: flex-start;
    max-width: none;
    column-gap: var(--space-32);
  }
  .product__info .product__aside {
    flex: 1 1 56%;
    min-width: 0;
  }
  .product__info .product__description {
    flex: 0 1 28.75rem;
    max-width: 28.75rem;
  }
  .product__info .product__cta {
    text-align: left;
  }
}
@media only screen and (min-width: 740px) {
  .product__info.drawer--right[data-drawer-mode=inline-desktop] {
    position: relative;
    z-index: 0;
    inset: auto;
    width: 100%;
    max-width: none;
    height: auto;
    transform: none;
    box-shadow: none;
    grid-column: 1/-1;
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    margin-top: 0;
    transition: grid-template-rows 0.35s ease, margin-top 0.35s ease, visibility 0s linear 0.35s;
    width: calc(100vw - var(--grid-padding-inline) * 2);
    margin-inline: calc(50% - 50vw + var(--grid-padding-inline));
    border-radius: var(--border-radius-20);
    box-shadow: 0 0 0 8px var(--product-info-border-color, var(--grand-final-border-color-ultimate));
  }
}
@media only screen and (min-width: 740px) and (min-width: 980px) {
  .product__info.drawer--right[data-drawer-mode=inline-desktop] {
    width: calc(100% + var(--space-20) * 2);
    margin-inline: calc(var(--space-20) * -1);
  }
}
@media only screen and (min-width: 740px) {
  .product__info.drawer--right[data-drawer-mode=inline-desktop] > * {
    min-height: 0;
    overflow: hidden;
  }
  .product__info.drawer--right[data-drawer-mode=inline-desktop] .drawer__close {
    display: none;
  }
  .product__info.drawer--right[data-drawer-mode=inline-desktop] .drawer__body {
    padding-block: 0;
    padding-inline: var(--grid-padding-inline, var(--space-24));
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    scrollbar-gutter: unset;
  }
  .product__info.drawer--right[data-drawer-mode=inline-desktop] .drawer__footer {
    padding-block: 0;
  }
  .product__info.drawer--right[data-drawer-mode=inline-desktop].is-open {
    grid-template-rows: 1fr;
    visibility: visible;
    pointer-events: auto;
    margin-top: -2.5rem;
    transition: grid-template-rows 0.35s ease, margin-top 0.35s ease;
  }
  .product__info.drawer--right[data-drawer-mode=inline-desktop].is-open .drawer__body {
    padding-block: var(--space-20);
    padding-top: var(--space-64);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease 0.1s, transform 0.3s ease 0.1s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product__info.drawer--right[data-drawer-mode=inline-desktop] {
    transition-duration: 0.01ms !important;
  }
  .product__info.drawer--right[data-drawer-mode=inline-desktop] .drawer__body {
    transition-duration: 0.01ms !important;
  }
}
.banner__product {
  background: var(--product-tile-background);
  color: var(--product-tile-color);
  padding: var(--panel-padding-block) var(--panel-padding-inline);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: var(--space-4);
}
.banner__logo {
  background-image: var(--product-tile-afl-logo, var(--afl-logo-black));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.banner__logo img {
  visibility: hidden;
}

.seat-level-list {
  --term-label-font-size: var(--text-14);
  --term-label-min-height: 3rem;
}
.seat-level-list .term__label {
  background: var(--seat-level-color, var(--color-surface-muted));
}

[data-seat-level=level-1],
[data-modal-match-value=level-1] {
  --seat-level-color: var(--mcg-color-level-1);
}

[data-seat-level=level-1-goal],
[data-modal-match-value=level-1-goal] {
  --seat-level-color: var(--mcg-color-level-1-goal);
}

[data-seat-level=level-2],
[data-modal-match-value=level-2] {
  --seat-level-color: var(--mcg-color-level-2);
}

[data-seat-level=level-2a],
[data-modal-match-value=level-2a] {
  --seat-level-color: var(--mcg-color-level-2a);
}

[data-seat-level=level-4-front],
[data-modal-match-value=level-4-front] {
  --seat-level-color: var(--mcg-color-level-4-front);
}

[data-seat-level=level-4-middle],
[data-modal-match-value=level-4-middle] {
  --seat-level-color: var(--mcg-color-level-4-middle);
}

[data-seat-level=level-4-back],
[data-modal-match-value=level-4-back] {
  --seat-level-color: var(--mcg-color-level-4-back);
}

[data-seat-level=level-4-back-goal],
[data-modal-match-value=level-4-back-goal] {
  --seat-level-color: var(--mcg-color-level-4-back-goal);
}

.btn--seat-ticket-info {
  --button-background: var(--seat-level-color, var(--color-surface-muted));
  --button-hover-background: var(--seat-level-color, var(--color-surface-muted));
}

.section--marvel {
  color: var(--color-on-primary);
  max-width: 43.75rem;
}
@media only screen and (min-width: 980px) {
  .section--marvel {
    max-width: 62.5rem;
  }
}
@media only screen and (min-width: 1024px) {
  .section--marvel {
    max-width: 63rem;
  }
}

.site-tab-nav__item--marvel.is-active {
  background: var(--color-secondary);
}

.card-list--marvel {
  color: var(--color-on-surface);
  display: grid;
  row-gap: var(--space-20);
}
@media only screen and (min-width: 640px) {
  .card-list--marvel {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-16);
  }
}
@media only screen and (min-width: 980px) {
  .card-list--marvel {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (min-width: 1024px) {
  .card-list--marvel {
    gap: var(--space-20);
  }
}
@media only screen and (min-width: 1200px) {
  .card-list--marvel {
    gap: var(--space-24);
  }
}
.card-list--marvel .card {
  padding-block: 0;
  border-top: 4px solid var(--color-secondary);
  border-radius: 0 0 var(--card-border-radius) var(--card-border-radius);
  width: 100%;
  max-width: 21.25rem;
}
.card-list--marvel .card__body {
  padding-top: var(--space-16);
  padding-inline: var(--card-padding-inline);
}
.card-list--marvel .card__body > *:last-child {
  margin-bottom: 0;
}
.card-list--marvel .card__cta {
  padding-bottom: var(--space-20);
}
.card-list--marvel .card--marvel-365 {
  box-shadow: -4px 0 0 rgba(255, 255, 255, 0.1), 4px 0 0 rgba(255, 255, 255, 0.1), 0 4px 0 rgba(255, 255, 255, 0.1);
}
.card-list--marvel .card--marvel-365 .card__media {
  aspect-ratio: auto;
}
.card-list--marvel .card--marvel-365 .card__cta {
  --button-background: var(--color-secondary);
  --button-border-color: var(--color-secondary);
  --button-hover-background: var(--color-secondary);
  --button-hover-border-color: var(--color-secondary);
  --button-hover-opacity: 0.8;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: none;
  justify-content: center;
  padding-bottom: var(--space-16);
}

.link--marvel {
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-15);
}

.fieldset--credit-card .fieldset__row {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-16);
}
.fieldset--credit-card .fieldset__row .field-group {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-16);
  align-items: start;
}

.message--credit-card {
  margin-top: var(--space-20);
  margin-bottom: 0;
  padding-block: var(--space-16);
}

.form-section__credit-card .note,
.form-section__credit-card .fieldset__row,
.form-section__credit-card .message {
  margin-left: var(--space-8);
  margin-right: var(--space-8);
}

/*# sourceMappingURL=style.css.map */