@font-face {
      font-family: "Silka App";
      src: url("/dist/assets/fonts/silka/silka-regular-webfont.woff2") format("woff2"),
           url("/dist/assets/fonts/silka/silka-regular-webfont.woff") format("woff");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Brandon Text";
      src: url("/fonts/2C5E16_2_0.woff2") format("woff2"),
           url("/fonts/2C5E16_2_0.woff") format("woff");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Brandon Text";
      src: url("/fonts/2C5E16_0_0.woff2") format("woff2"),
           url("/fonts/2C5E16_0_0.woff") format("woff");
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Brandon Text";
      src: url("/fonts/2C5E16_1_0.woff2") format("woff2"),
           url("/fonts/2C5E16_1_0.woff") format("woff");
      font-weight: 900;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --login-font-body: "Silka App", "Avenir Next", "Segoe UI", sans-serif;
      --login-font-heading: "Brandon Text", "Avenir Next Condensed", sans-serif;
      --shopapp-runtime-safe-top: 0px;
      --login-safe-area-top: env(safe-area-inset-top, 0px);
      --login-safe-area-right: env(safe-area-inset-right, 0px);
      --login-safe-area-bottom: env(safe-area-inset-bottom, 0px);
      --login-safe-area-left: env(safe-area-inset-left, 0px);

}

    html {
      height: -webkit-fill-available;
    }

    body,
    input,
    button {
      font-family: var(--login-font-body);
    }

    body {
      min-height: 100vh;
      min-height: 100dvh;
      min-height: -webkit-fill-available;
      background-color: var(--login-background);
      background-image:
        linear-gradient(135deg, color-mix(in srgb, var(--login-background) 88%, white 12%), color-mix(in srgb, var(--login-background) 62%, black 38%)),
        var(--login-background-image);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    h1,
    h2,
    h3 {
      font-family: var(--login-font-heading);
      letter-spacing: -0.02em;
    }

    .shopapp-switch--login {
      --shopapp-switch-off-bg: color-mix(in srgb, var(--login-background) 65%, white 35%);
      --shopapp-switch-off-border: rgba(0, 0, 0, 0.12);
      --shopapp-switch-on-bg: var(--login-primary);
      --shopapp-switch-on-border: var(--login-primary);
      --shopapp-switch-thumb: #ffffff;
      --shopapp-switch-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    }

    .shopapp-switch__control {
      position: relative;
      display: inline-flex;
      height: 1.95rem;
      width: 3.35rem;
      flex: 0 0 auto;
      vertical-align: middle;
    }

    .shopapp-switch__input {
      position: absolute;
      inset: 0;
      z-index: 2;
      margin: 0;
      cursor: pointer;
      opacity: 0;
    }

    .shopapp-switch__track {
      height: 100%;
      width: 100%;
      border-radius: 9999px;
      border: 1px solid var(--shopapp-switch-off-border);
      background: var(--shopapp-switch-off-bg);
      box-sizing: border-box;
      transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
    }

    .shopapp-switch__thumb {
      position: absolute;
      top: 50%;
      left: 0.2rem;
      height: 1.45rem;
      width: 1.45rem;
      border-radius: 9999px;
      background: var(--shopapp-switch-thumb);
      box-shadow: var(--shopapp-switch-shadow);
      pointer-events: none;
      transform: translate(0, -50%);
      transition: transform .18s ease, box-shadow .18s ease;
    }

    .shopapp-switch__input:checked + .shopapp-switch__track {
      border-color: var(--shopapp-switch-on-border);
      background: var(--shopapp-switch-on-bg);
    }

    .shopapp-switch__input:checked + .shopapp-switch__track + .shopapp-switch__thumb {
      transform: translate(1.38rem, -50%);
    }

    .shopapp-switch__input:focus-visible + .shopapp-switch__track {
      outline: 2px solid color-mix(in srgb, var(--login-accent) 72%, #ffffff 28%);
      outline-offset: 2px;
    }

    .shopapp-switch__input:disabled {
      cursor: not-allowed;
    }

    .shopapp-switch__input:disabled + .shopapp-switch__track,
    .shopapp-switch__input:disabled + .shopapp-switch__track + .shopapp-switch__thumb {
      opacity: 0.55;
    }

    .shopapp-login-safe-shell {
      box-sizing: border-box;
      min-height: 100vh;
      min-height: 100dvh;
      min-height: -webkit-fill-available;
      padding-top: 2rem;
      padding-top: calc(2rem + var(--shopapp-runtime-safe-top, 0px));
      padding-right: 1.5rem;
      padding-right: calc(1.5rem + constant(safe-area-inset-right));
      padding-right: calc(1.5rem + env(safe-area-inset-right));
      padding-bottom: 2rem;
      padding-bottom: calc(2rem + constant(safe-area-inset-bottom));
      padding-bottom: calc(2rem + env(safe-area-inset-bottom));
      padding-left: 1.5rem;
      padding-left: calc(1.5rem + constant(safe-area-inset-left));
      padding-left: calc(1.5rem + env(safe-area-inset-left));
    }