@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));
    }

/* Login split is structural; component colors, borders and padding remain theme-owned. */
.shopapp-login-page .shopapp-login-layout {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100dvh;}
.shopapp-login-page .shopapp-login-story {display:flex;min-width:0;padding:clamp(1rem,3vw,3rem);}
.shopapp-login-page .shopapp-login-story-content {position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;width:100%;min-width:0;}
.shopapp-login-page .shopapp-login-brand {display:flex;align-items:center;gap:1rem;flex-wrap:wrap;font-weight:700;}
.shopapp-login-page .shopapp-login-brand .shopapp-login-logo {max-width:min(12rem,100%);max-height:4rem;}
.shopapp-login-page .shopapp-login-intro {margin-top:auto;}
.shopapp-login-page .shopapp-login-eyebrow {font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.shopapp-login-page .shopapp-login-intro h2 {font-size:clamp(2rem,3.5vw,4rem);line-height:1.12;letter-spacing:-.035em;margin:1rem 0;overflow-wrap:anywhere;}
.shopapp-login-page .shopapp-login-intro > p:last-child {max-width:30rem;line-height:1.7;}
.shopapp-login-page .shopapp-login-image {position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;}
.shopapp-login-page .shopapp-login-story-with-image::before {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--shopapp-ui-header-bg) 45%,transparent),color-mix(in srgb,var(--shopapp-ui-header-bg) 85%,transparent));}
.shopapp-login-page .shopapp-login-illustration {width:100%;max-height:15rem;}
.shopapp-login-page .shopapp-login-caption {font-size:.875rem;}
.shopapp-login-page .shopapp-login-access {display:grid;align-items:center;justify-items:center;min-width:0;padding:clamp(1.5rem,5vw,5rem);}
.shopapp-login-page .shopapp-login-workspace {width:100%;max-width:26rem;}
.shopapp-login-page .shopapp-login-workspace h1 {font-size:clamp(2rem,3vw,3rem);line-height:1.15;letter-spacing:-.03em;margin:1rem 0;}
.shopapp-login-page .shopapp-login-description {line-height:1.6;margin-bottom:2rem;}
.shopapp-login-page .shopapp-login-form {display:grid;gap:1.25rem;}
.shopapp-login-page .shopapp-login-forgot {justify-self:end;color:var(--shopapp-primary);font-size:.875rem;text-decoration:underline;text-underline-offset:.25em;}
.shopapp-login-page .shopapp-login-submit {display:flex;justify-content:center;align-items:center;width:100%;font-weight:700;}
.shopapp-login-page .shopapp-login-idle {display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;}
.shopapp-login-page .shopapp-login-pending {display:none;}
.shopapp-login-page .shopapp-login-form.htmx-request .shopapp-login-idle {display:none;}
.shopapp-login-page .shopapp-login-form.htmx-request .shopapp-login-pending {display:inline;}
@media (max-width:767px) {
  .shopapp-login-page .shopapp-login-layout {grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr;}
  .shopapp-login-page .shopapp-login-story {padding:1rem;}
  .shopapp-login-page .shopapp-login-story-content {gap:1rem;}
  .shopapp-login-page .shopapp-login-intro {margin:0;}
  .shopapp-login-page .shopapp-login-intro h2 {font-size:1.75rem;margin:.5rem 0;}
  .shopapp-login-page .shopapp-login-intro h2 br {display:none;}
  .shopapp-login-page .shopapp-login-illustration,.shopapp-login-page .shopapp-login-caption,.shopapp-login-page .shopapp-login-intro > p:last-child {display:none;}
  .shopapp-login-page .shopapp-login-access {padding:1.5rem 1.5rem max(2rem,env(safe-area-inset-bottom));align-items:start;}
}

/* Scoped to login; the other public authentication pages retain their layout. */
body.shopapp-login-page {background-image:none;background-color:var(--shopapp-background,var(--login-background));color:var(--shopapp-text,var(--login-text));}
.shopapp-login-page .shopapp-login-story-content {background-color:var(--shopapp-ui-header-bg,var(--shopapp-nav));color:var(--shopapp-ui-header-text,var(--shopapp-nav-text));border:var(--shopapp-ui-header-border-width,1px) solid var(--shopapp-ui-header-border,var(--shopapp-border));border-radius:var(--shopapp-ui-header-radius,1rem);padding:var(--shopapp-ui-header-padding,1.5rem);box-shadow:var(--shopapp-ui-header-shadow,none);}
.shopapp-login-page .shopapp-auth-field {display:grid;gap:.5rem;font-size:.875rem;font-weight:600;}
.shopapp-login-page .shopapp-login-remember {display:flex;align-items:center;gap:.75rem;font-size:.875rem;}
.shopapp-login-page .shopapp-login-register {display:flex;align-items:center;justify-content:center;margin-top:1rem;}
.shopapp-login-page .shopapp-auth-message {margin:1rem 0;padding:var(--shopapp-ui-notices-padding,1rem);border-radius:var(--shopapp-ui-notices-radius,.5rem);background:var(--shopapp-status-danger-surface);color:var(--shopapp-status-danger);border:1px solid var(--shopapp-status-danger-border);}
.shopapp-login-page .shopapp-login-story {padding-top:max(1rem,env(safe-area-inset-top));}

/* Public login can use a palette-only theme without component tokens. */
.shopapp-login-page .shopapp-login-submit {
  border-radius:var(--shopapp-ui-buttons-radius,.75rem);
  border-width:var(--shopapp-ui-buttons-border-width,0px);
  border-style:solid;
  padding:var(--shopapp-ui-buttons-padding,1rem);
  box-shadow:var(--shopapp-ui-buttons-shadow,0 1px 2px rgba(15,23,42,.08));
  font-family:var(--shopapp-font-body,"Avenir Next","Segoe UI",sans-serif);
}