.farfetch-account-page {
  background: #fff;
  color: #222;
  min-width: 0;
  overflow-x: clip;
}

.account-mini-header {
  background: #fff;
  height: 44px;
  position: relative;
  width: 100%;
}

.account-mini-logo {
  display: block;
  height: 16px;
  left: 16px;
  position: absolute;
  top: 14px;
  width: 124px;
}

.account-mini-logo svg {
  display: block;
  fill: #222;
  height: 16px;
  width: 124px;
}

.account-mini-contact {
  display: none;
}

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

.account-page {
  font-family: "Farfetch Basis", "Helvetica Neue", Arial, sans-serif;
}

.account-auth-page {
  margin: 0;
  max-width: none;
  min-height: calc(100svh - 44px);
  overflow-x: clip;
  padding: 30px 16px 40px;
}

.account-auth-column {
  margin: 0;
  max-width: none;
  width: 100%;
}

.account-auth-column > h1,
.account-standalone-panel > h1 {
  color: #222;
  font-size: 22px;
  font-weight: 400;
  line-height: 27.9994px;
  margin: 0;
}

.account-auth-tabs {
  border-bottom: 1px solid #dedede;
  display: flex;
  height: 44px;
  margin-top: 19px;
  position: relative;
}

.account-auth-tabs > button {
  background: transparent;
  border: 0;
  color: #727272;
  flex: 0 0 auto;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  height: 44px;
  line-height: 19.9995px;
  margin: 0;
  padding: 18px 8px 4px 0;
  text-transform: uppercase;
}

.account-auth-tabs > button + button {
  padding-left: 8px;
}

.account-auth-tabs > button[aria-selected='true'] {
  color: #222;
}

.account-tab-indicator {
  background: #222;
  bottom: -1px;
  height: 2px;
  left: var(--account-tab-left, 0);
  position: absolute;
  transition: left 300ms cubic-bezier(0, 0, 0, 1), width 300ms cubic-bezier(0, 0, 0, 1);
  width: var(--account-tab-width, 54px);
}

.account-auth-panel[hidden] {
  display: none !important;
}

.account-auth-panel {
  margin-top: 16px;
}

.account-auth-form {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.account-auth-field {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.account-auth-field + .account-auth-field {
  margin-top: 12px;
}

.account-auth-field > label,
.account-resend > label {
  color: #222;
  display: block;
  font-size: 13px;
  font-weight: 400;
  line-height: 17.0001px;
  margin: 0 0 4px;
}

.account-auth-input-wrap {
  align-items: center;
  background: #fff;
  border: 1px solid #727272;
  display: flex;
  height: 44px;
  position: relative;
  width: 100%;
}

.account-auth-input-wrap input {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #222;
  flex: 1 1 auto;
  font: inherit;
  font-size: 16px;
  height: 42px;
  line-height: 21.3328px;
  min-width: 0;
  outline: 0;
  padding: 0 0 0 16px;
  width: 100%;
}

.account-auth-input-wrap:focus-within {
  border-color: #222;
  outline: 2px solid #101010;
  outline-offset: -2px;
}

.account-auth-field.is-invalid .account-auth-input-wrap {
  border-color: #c41429;
}

.account-field-error {
  color: #c41429;
  display: none;
  font-size: 13px;
  line-height: 17.0001px;
  margin: 4px 0 0;
  padding-left: 24px;
  position: relative;
}

.account-field-error:not(:empty) {
  display: block;
}

.account-field-error:not(:empty)::before {
  background: #c41429;
  border-radius: 50%;
  color: #fff;
  content: '!';
  font-size: 11px;
  font-weight: 700;
  height: 16px;
  left: 0;
  line-height: 16px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 16px;
}

.account-password-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  display: flex;
  flex: 0 0 44px;
  height: 42px;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 44px;
}

.account-password-toggle svg {
  display: block;
  fill: #222;
  height: 24px;
  width: 24px;
}

.account-password-toggle .account-eye-crossed,
.account-password-toggle[aria-checked='true'] .account-eye-open {
  display: none;
}

.account-password-toggle[aria-checked='true'] .account-eye-crossed {
  display: block;
}

.account-password-toggle:focus-visible,
.account-auth-tabs > button:focus-visible,
.account-register-jump:focus-visible {
  outline: 2px solid #101010;
  outline-offset: -2px;
}

.account-forgot-link {
  align-self: flex-start;
  font-size: 13px;
  line-height: 17.0001px;
  margin-top: 12px;
  text-decoration: underline;
}

.account-primary-button,
.account-otp-button,
.account-secondary-button,
.account-provider-button {
  align-items: center;
  border-radius: 0;
  display: flex;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  height: 44px;
  justify-content: center;
  line-height: 19.9995px;
  min-height: 44px;
  padding: 10px 16px;
  text-decoration: none;
  transition: background-color 300ms cubic-bezier(0, 0, 0, 1), border-color 300ms cubic-bezier(0, 0, 0, 1), color 300ms cubic-bezier(0, 0, 0, 1), opacity 300ms cubic-bezier(0, 0, 0, 1);
  width: 100%;
}

.account-primary-button {
  background: #222;
  border: 1px solid transparent;
  color: #fff;
  margin-top: 12px;
  position: relative;
}

.account-primary-button:hover {
  background: #727272;
}

.account-primary-button:focus-visible,
.account-otp-button:focus-visible,
.account-secondary-button:focus-visible,
.account-provider-button:focus-visible {
  outline: 2px solid #101010;
  outline-offset: -2px;
}

.account-button-loader {
  animation: account-button-spin 850ms infinite cubic-bezier(0.4, 0.14, 1, 1);
  display: none;
  fill: #fff;
  height: 24px;
  left: calc(50% - 12px);
  position: absolute;
  top: 9px;
  width: 24px;
}

.account-primary-button[data-loading='true'] {
  background: #b6b6b6;
  pointer-events: none;
}

.account-primary-button[data-loading='true'] > span {
  color: transparent;
}

.account-primary-button[data-loading='true'] .account-button-loader {
  display: block;
}

@keyframes account-button-spin {
  to {
    transform: rotate(360deg);
  }
}

.account-otp-button {
  background: #f5f5f5;
  border: 1px solid transparent;
  color: #b6b6b6;
  margin-top: 12px;
}

.account-auth-or {
  font-size: 15px;
  font-weight: 400;
  line-height: 19.9995px;
  margin: 16px 0 12px;
  text-align: center;
}

.account-provider-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.account-provider-button {
  background: #fff;
  border: 1px solid #222;
  color: #222;
  position: relative;
}

.account-provider-button:hover {
  background: #f5f5f5;
}

.account-provider-button[aria-disabled='true'] {
  cursor: default;
}

.account-provider-button svg {
  height: 24px;
  left: 14px;
  position: absolute;
  top: 9px;
  width: 24px;
}

.account-register-jump {
  background: transparent;
  border: 0;
  color: #222;
  display: block;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 19.9995px;
  margin: 16px auto 0;
  padding: 0;
  text-decoration: underline;
}

.account-registration-legal {
  font-size: 13px;
  line-height: 17.0001px;
  margin: 12px 0 0;
}

.account-registration-legal a,
.account-marketing-check a {
  text-decoration: underline;
}

.account-marketing-check {
  align-items: flex-start;
  display: flex;
  font-size: 13px;
  gap: 4px;
  line-height: 17.0001px;
  margin-top: 12px;
}

.account-marketing-check input {
  appearance: none;
  background: #fff;
  border: 1px solid #222;
  border-radius: 0;
  flex: 0 0 24px;
  height: 24px;
  margin: 0;
  position: relative;
  width: 24px;
}

.account-marketing-check input:checked::after {
  border: solid #222;
  border-width: 0 1.5px 1.5px 0;
  content: '';
  height: 12px;
  left: 8px;
  position: absolute;
  top: 3px;
  transform: rotate(45deg);
  width: 6px;
}

.account-marketing-check input:focus-visible {
  outline: 2px solid #101010;
  outline-offset: 1px;
}

.account-register-form .account-primary-button {
  margin-top: 12px;
}

.account-honeypot {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.account-auth-notice {
  font-size: 13px;
  line-height: 17.0001px;
  margin: 12px 0 0;
  overflow-wrap: anywhere;
}

.account-auth-notice-error {
  color: #c41429;
}

.account-auth-notice-success {
  color: #16794a;
}

.account-auth-column > .account-auth-notice + .account-auth-tabs {
  margin-top: 12px;
}

.account-resend {
  border-top: 1px solid #dedede;
  display: flex;
  flex-direction: column;
  margin-top: 24px;
  padding-top: 24px;
}

.account-secondary-button {
  background: transparent;
  border: 1px solid transparent;
  color: #222;
  margin-top: 12px;
}

.account-standalone-panel > p {
  font-size: 15px;
  line-height: 19.9995px;
  margin: 31px 0 0;
}

.account-forgot-panel .account-auth-form {
  margin-top: 24px;
}

.account-forgot-panel .account-primary-button {
  margin-top: 36px;
}

/* Authenticated account baseline; private FARFETCH views require an authorised QA session. */
.account-private-page {
  margin: 0 auto;
  max-width: 1440px;
  min-height: calc(100svh - 44px);
  overflow-x: clip;
  padding: 64px 24px 120px;
}

.account-heading {
  margin: 0 auto 46px;
  max-width: 920px;
  text-align: center;
}

.account-heading p {
  color: #727272;
  font-size: 12px;
  letter-spacing: .08em;
  margin: 0 0 12px;
}

.account-heading h1 {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
}

.account-notice {
  border: 1px solid;
  line-height: 20px;
  margin: 0 auto 28px;
  max-width: 920px;
  overflow-wrap: anywhere;
  padding: 14px 16px;
}

.account-notice-success {
  background: #eef8f1;
  border-color: #8fc6a0;
  color: #14532d;
}

.account-notice-error {
  background: #fff3f1;
  border-color: #d99a92;
  color: #8d2117;
}

.account-dashboard {
  display: grid;
  gap: 64px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 auto;
  max-width: 1120px;
}

.account-panel h2,
.account-summary h2 {
  font-size: 23px;
  font-weight: 400;
  margin: 0 0 12px;
}

.account-panel form {
  display: flex;
  flex-direction: column;
}

.account-panel form > label {
  font-size: 13px;
  margin: 18px 0 7px;
}

.account-panel form > label:first-of-type {
  margin-top: 0;
}

.account-panel input[type='text'],
.account-panel input[type='email'],
.account-panel input[type='password'] {
  background: #fff;
  border: 1px solid #c8c8c8;
  border-radius: 0;
  color: #222;
  font: inherit;
  height: 45px;
  padding: 0 13px;
  width: 100%;
}

.account-panel input[readonly] {
  background: #f5f5f5;
  color: #666;
}

.account-panel input:focus {
  border-color: #222;
  outline: 2px solid #101010;
  outline-offset: -2px;
}

.account-panel > form > button {
  background: #222;
  border: 1px solid #222;
  color: #fff;
  font: inherit;
  font-weight: 700;
  height: 45px;
  margin-top: 24px;
}

.account-summary {
  background: #f5f5f5;
  padding: 40px;
}

.account-summary > span {
  align-items: center;
  background: #222;
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 24px;
  height: 58px;
  justify-content: center;
  margin-bottom: 24px;
  width: 58px;
}

.account-summary p {
  color: #555;
  overflow-wrap: anywhere;
}

.account-summary a {
  display: inline-block;
  margin-top: 28px;
  text-decoration: underline;
}

.account-panel fieldset {
  border: 0;
  border-top: 1px solid #c8c8c8;
  display: flex;
  flex-direction: column;
  margin: 32px 0 0;
  padding: 28px 0 0;
}

.account-panel legend {
  font-size: 18px;
  padding-right: 12px;
}

.account-panel fieldset p {
  color: #666;
  font-size: 13px;
  margin: 0 0 4px;
}

.account-panel fieldset label {
  font-size: 13px;
  margin: 18px 0 7px;
}

@media (min-width: 601px) {
  .account-mini-logo {
    left: 50%;
    transform: translateX(-50%);
  }

  .account-mini-contact {
    align-items: center;
    color: #222;
    display: flex;
    height: 44px;
    justify-content: center;
    position: absolute;
    right: 24px;
    top: 0;
    width: 44px;
  }

  .account-mini-contact svg {
    display: block;
    height: 24px;
    width: 24px;
  }

  .account-auth-page {
    padding: 96px 48px 64px;
  }

  .account-auth-column {
    margin: 0 auto;
    max-width: 352px;
  }

  .account-auth-input-wrap input {
    font-size: 15px;
    line-height: 19.9995px;
  }

  .account-auth-tabs {
    margin-top: 21px;
  }
}

@media (max-width: 767px) {
  .account-private-page {
    min-height: calc(100svh - 44px);
    padding: 44px 16px 80px;
  }

  .account-heading {
    margin-bottom: 32px;
    text-align: left;
  }

  .account-heading h1 {
    font-size: 25px;
    line-height: 30px;
  }

  .account-dashboard {
    gap: 32px;
    grid-template-columns: 1fr;
  }

  .account-panel h2,
  .account-summary h2 {
    font-size: 22px;
    line-height: 28px;
  }

  .account-summary {
    padding: 28px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-tab-indicator,
  .account-primary-button,
  .account-otp-button,
  .account-provider-button {
    transition: none;
  }

  .account-button-loader {
    animation: none;
  }
}