:root {
  --avilion-header-height: 56px;
}

body::after {
  content: "";
  position: fixed;
  z-index: 5000;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

body.route-transitioning::after { opacity: 1; }

html[data-i18n-loading="true"] body { visibility: hidden; }
.legacy-site-header {
  position: fixed;
  z-index: 1000;
  inset: 0 0 auto;
  height: var(--avilion-header-height);
  padding: 0 clamp(20px, 3vw, 42px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  color: #fff;
  background: #090909;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

/* Legacy page styles must not offset or resize the shared taskbar. */
body > .legacy-site-header {
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  font-size: 16px;
  line-height: normal;
}

.legacy-mark-link {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: inherit;
}

.legacy-brand-mark {
  width: 30px;
  height: 30px;
  display: block;
  background: currentColor;
  -webkit-mask: url("../assets/avilion-brand-mark.png") center / contain no-repeat;
  mask: url("../assets/avilion-brand-mark.png") center / contain no-repeat;
}

header.legacy-site-header .legacy-primary-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.5vw, 38px);
  font-size: clamp(14px, 1.1vw, 16px);
  letter-spacing: .01em;
}

header.legacy-site-header .legacy-primary-nav a {
  position: relative;
  padding: 7px 0 9px;
  color: inherit;
  text-decoration: none;
  font-size: inherit;
  font-weight: 400;
}

.legacy-primary-nav a::after { content: ""; position: absolute; right: 0; bottom: 3px; left: 0; height: 3px; border-radius: 3px; background: currentColor; transform: scaleX(0); transform-origin: center; transition: transform 180ms ease; }
.legacy-primary-nav a:hover::after, .legacy-primary-nav a.active::after { transform: scaleX(1); }

html[data-theme="dark"] .legal-redirect {
  color: #f5f5f2;
  background: #0b0b0b;
}

html[data-theme="dark"] .legal-redirect p { color: #b7b7b2; }
html[data-theme="dark"] .legal-redirect a { color: #fff; }

.legacy-help-link {
  justify-self: end;
  color: inherit;
  font-size: 22px;
  text-decoration: none;
}
.legacy-profile-button { width: 34px; height: 34px; padding: 0; border: 0; justify-self: end; display: grid; place-items: center; color: inherit; background: transparent; cursor: pointer; }
.legacy-profile-button span { width: 20px; height: 20px; position: relative; border: 1.6px solid currentColor; border-radius: 50%; }
.legacy-profile-button span::before { content: ""; width: 5px; height: 5px; position: absolute; top: 4px; left: 50%; border: 1.4px solid currentColor; border-radius: 50%; transform: translateX(-50%); }
.legacy-profile-button span::after { content: ""; width: 10px; height: 5px; position: absolute; left: 50%; bottom: 3px; border: 1.4px solid currentColor; border-radius: 8px 8px 5px 5px; transform: translateX(-50%); }
.legacy-profile-menu { width: 220px; padding: 8px; position: fixed; z-index: 1010; top: 54px; right: clamp(18px, 2.7vw, 43px); color: #111; background: #fff; border: 1px solid #d6d6d2; }
.legacy-profile-menu[hidden] { display: none; }
.legacy-profile-menu a, .legacy-profile-menu button { width: 100%; min-height: 38px; padding: 0 10px; border: 0; display: flex; align-items: center; color: inherit; background: transparent; font: inherit; font-size: 12px; text-align: left; text-decoration: none; cursor: pointer; }
.legacy-profile-menu a:hover, .legacy-profile-menu button:hover { color: #fff; background: #111; }
.legacy-global-footer { min-height: 230px; padding: 52px clamp(22px, 5vw, 72px); display: grid; grid-template-columns: .8fr 1.2fr .5fr; gap: 48px; color: #fff; background: #000; font-size: 12px; }
.legacy-global-footer div { display: grid; align-content: start; gap: 8px; }
.legacy-global-footer p { max-width: 560px; margin: 0; color: #aaa; line-height: 1.65; }
.legacy-global-footer nav { display: grid; align-content: start; gap: 12px; }
.legacy-global-footer nav a,
.legacy-global-footer nav button { min-height: 20px; padding: 0; border: 0; color: #fff; background: transparent; font: inherit; font-size: 12px; font-weight: 400; line-height: 1.4; text-align: left; text-decoration: none; cursor: pointer; }

.legacy-menu-toggle {
  display: none;
  border: 0;
  color: inherit;
  background: transparent;
}

@media (max-width: 900px) {
  :root { --avilion-header-height: 56px; }
  .legacy-site-header { padding: 0 16px; grid-template-columns: 1fr auto auto; gap: 10px; }
  .legacy-mark-link { width: 44px; height: 44px; }
  .legacy-brand-mark { width: 36px; height: 36px; }
  .legacy-menu-toggle { min-width: 54px; min-height: 44px; display: block; font-size: 15px; }
  .legacy-primary-nav { position: fixed; inset: var(--avilion-header-height) 0 auto; padding: 12px 18px 22px; display: none; flex-direction: column; align-items: stretch; gap: 0; color: #000; background: #fff; border-bottom: 1px solid #d7d7d3; font-size: 20px; }
  .legacy-primary-nav.open { display: flex; }
  .legacy-primary-nav a { min-height: 52px; padding: 13px 4px; border-bottom: 1px solid #d7d7d3; }
  .legacy-primary-nav a::after { display: none; }
  .legacy-primary-nav a.active { font-weight: 600; }
  .legacy-help-link { font-size: 25px; }
  .legacy-global-footer { grid-template-columns: 1fr; gap: 28px; }
}

@media (min-width: 901px) {
  .support-hero { gap: 80px; padding: 107px 80px; }
  .support-left { flex-basis: 322px; }
  .support-left h1, .support-title { font-size: 64px; }
  .support-subtitle { margin-top: 7px; max-width: 282px; font-size: 17px; }
  .support-text { margin-top: 12px; font-size: 13px; }
  .support-right { gap: 16px; margin-right: clamp(16px, 4vw, 80px); }
  .support-main { width: 348px; height: 54px; padding: 0 27px; font-size: 17px; }
  .support-btn { width: 348px; height: 47px; font-size: 16px; }
  .support-form { gap: 11px; }
  .support-input { max-width: 348px; margin-top: 13px; padding: 13px 19px; font-size: 12px; border-radius: 40px; }
  textarea.support-input { min-height: 107px; border-radius: 16px; }
  .support-submit-status { min-height: 16px; font-size: 10px; }
  .support-identity-label { font-size: 10px; }
  .breadcrumb { margin-bottom: 13px; font-size: 10px; }
}
.legacy-profile-menu [hidden] { display: none !important; }
.locale-picker { display: grid; gap: 5px; padding: 8px 10px 10px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.locale-picker select { width: 100%; min-height: 34px; border: 1px solid var(--legacy-line); padding: 0 8px; color: inherit; background: transparent; font: inherit; text-transform: none; letter-spacing: 0; }
.eu-language-notice { position: fixed; z-index: 150; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(0,0,0,.55); }
.eu-language-notice > div { width: min(520px, 100%); padding: 28px; color: #111; background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.eu-language-notice h2 { margin: 0 0 12px; font-size: 22px; }
.eu-language-notice p { margin: 0 0 22px; color: #555; line-height: 1.55; }
.eu-language-notice button { min-height: 40px; padding: 0 18px; border: 0; color: #fff; background: #111; font: inherit; cursor: pointer; }
html[data-theme="dark"] .eu-language-notice > div { color: #f5f5f2; background: #171715; }
html[data-theme="dark"] .eu-language-notice p { color: #bbb; }
html[data-theme="dark"] .eu-language-notice button { color: #111; background: #fff; }
.locale-sync-prompt{position:fixed;z-index:140;right:16px;bottom:16px;width:min(360px,calc(100vw - 32px));padding:18px;color:#111;background:#fff;box-shadow:0 18px 55px rgba(0,0,0,.22)}.locale-sync-prompt p{margin:0 0 12px;font-size:12px}.locale-sync-prompt div{display:flex;gap:7px}.locale-sync-prompt button{min-height:36px;border:1px solid #111;padding:0 11px;background:transparent;font:inherit;font-size:10px;cursor:pointer}.locale-sync-prompt button:first-child{color:#fff;background:#111}

/* The standalone pages share the same mobile navigation behavior as the storefront. */
.legacy-nav-scrim {
  position: fixed;
  z-index: 999;
  inset: var(--avilion-header-height) 0 0;
  border: 0;
  background: rgba(0, 0, 0, .46);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.legacy-profile-menu {
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 180ms ease, visibility 0s linear 180ms;
}
.legacy-profile-menu[hidden] { display: block; }
.legacy-profile-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition-delay: 0s; }
.legacy-menu-toggle { align-items: center; justify-content: center; gap: 9px; cursor: pointer; }
.legacy-menu-toggle i,
.legacy-menu-toggle i::before { width: 15px; height: 1px; display: block; position: relative; background: currentColor; transition: transform 200ms ease; }
.legacy-menu-toggle i::before { content: ""; position: absolute; top: 5px; }
.legacy-menu-toggle[aria-expanded="true"] i { transform: translateY(3px) rotate(45deg); }
.legacy-menu-toggle[aria-expanded="true"] i::before { transform: translateY(-5px) rotate(-90deg); }

@media (max-width: 900px) {
  body.mobile-nav-open { overflow: hidden; }
  .legacy-site-header {
    background: rgba(8,8,8,.72);
    -webkit-backdrop-filter: blur(16px) saturate(135%);
    backdrop-filter: blur(16px) saturate(135%);
    transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
  }
  .legacy-menu-toggle { display: flex; }
  header.legacy-site-header .legacy-primary-nav {
    position: fixed;
    inset: var(--avilion-header-height) 0 auto;
    width: auto;
    max-width: none;
    padding: 10px 18px 20px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    color: #000;
    background: #fff;
    border-bottom: 1px solid #d7d7d3;
    font-size: 20px;
    z-index: 1001;
    display: flex;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px);
    pointer-events: none;
    box-shadow: none;
    transition: opacity 180ms ease, transform 240ms cubic-bezier(.2,.7,.2,1), visibility 0s linear 240ms;
  }
  header.legacy-site-header .legacy-primary-nav.open { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; box-shadow: 0 18px 40px rgba(0,0,0,.18); transition-delay: 0s; }
  .legacy-primary-nav a { opacity: 0; transform: translateY(-6px); transition: opacity 140ms ease, transform 180ms ease; }
  .legacy-primary-nav.open a { opacity: 1; transform: translateY(0); }
  .legacy-primary-nav.open a:nth-child(2) { transition-delay: 35ms; }
  .legacy-primary-nav.open a:nth-child(3) { transition-delay: 70ms; }
  .legacy-site-header[data-menu-open="true"] .legacy-nav-scrim { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .legacy-profile-menu { top: calc(var(--avilion-header-height) + 6px); right: 12px; width: min(250px, calc(100vw - 24px)); }
  html[data-theme="dark"] .legacy-primary-nav,
  html[data-theme="dark"] .legacy-profile-menu { color: #f5f5f2; background: #0b0b0b; border-color: #3c3c38; }
  html[data-theme="dark"] .legacy-profile-menu a:hover,
  html[data-theme="dark"] .legacy-profile-menu button:hover { color: #111; background: #fff; }
  .legacy-global-footer { padding: 42px 20px calc(42px + env(safe-area-inset-bottom)); text-align: left; }
  .legacy-global-footer nav { width: 100%; justify-content: start; justify-items: start; text-align: left; }
  .legacy-global-footer nav a { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .legacy-primary-nav, .legacy-primary-nav a, .legacy-profile-menu, .legacy-nav-scrim, body::after { transition: none !important; }
}
.cookie-consent{width:min(620px,calc(100vw - 28px));padding:22px;position:fixed;z-index:2100;right:14px;bottom:14px;color:#fff;background:#111;border:1px solid #444;text-align:left;}
.cookie-consent[hidden],.cookie-consent [hidden]{display:none!important;}
.cookie-consent h2{margin:0 0 8px;font-size:20px;font-weight:600;line-height:1.2;color:#fff;}
.cookie-consent p{margin:0 0 16px;color:#bbb;font-size:12px;line-height:1.55;}
.cookie-consent>div,.cookie-consent fieldset>div{margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:7px;}
.cookie-consent button{min-height:38px;padding:0 12px;border:1px solid #777;color:#fff;background:transparent;font:inherit;font-size:11px;cursor:pointer;}
.cookie-consent button:first-child,.cookie-consent fieldset [data-cookie-action="save"]{color:#111;background:#fff;border-color:#fff;}
.cookie-consent fieldset{margin:14px 0 0;padding:14px 0 0;border:0;border-top:1px solid #444;}
.cookie-consent legend{padding:0 0 10px;font-size:13px;font-weight:600;color:#fff;}
.cookie-consent label{display:flex;align-items:flex-start;gap:8px;margin-bottom:11px;color:#fff;font-size:11px;}
.cookie-consent label input{margin-top:3px;accent-color:#fff;}
.cookie-consent label span{display:flex;flex-direction:column;gap:2px;}
.cookie-consent label strong{font-size:11px;}
.cookie-consent label small{color:#aaa;font-size:10px;line-height:1.4;}
.legacy-global-footer [data-cookie-settings]{justify-self:start;padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;}

@media(max-width:900px){.cookie-consent{right:12px;bottom:12px;left:12px;width:auto;max-height:calc(100svh - 24px);overflow-y:auto;}}