:root {
  --brox-auth-bg: var(--bx-bg);
  --brox-auth-panel: var(--bx-panel);
  --brox-auth-panel-2: var(--bx-panel2);
  --brox-auth-line: var(--bx-line);
  --brox-auth-text: var(--bx-text);
  --brox-auth-muted: var(--bx-muted);
  --brox-auth-gold: var(--bx-gold2);
  --brox-auth-primary: var(--bx-primary);
  --brox-auth-primary-hover: var(--bx-primary-hover);
  --brox-auth-primary-text: var(--bx-primary-text);
  --brox-auth-danger: var(--bx-danger);
  --brox-auth-danger-bg: var(--bx-danger-bg);
  --brox-auth-success: var(--bx-success);
  --brox-auth-success-bg: var(--bx-success-bg);
  --brox-auth-warning: var(--bx-warning);
  --brox-auth-warning-bg: var(--bx-warning-bg);
  --brox-auth-shadow: var(--bx-shadow);
  --brox-auth-control-line: var(--bx-control-line);
}

@font-face {
  font-family: "Brox Icons";
  src: url("../fonts/fontawesome-webfont.woff2") format("woff2");
  font-display: block;
}

html[data-brox-theme] {
  min-width: 320px;
  min-height: 100%;
  background: var(--brox-auth-bg);
  scrollbar-color: var(--brox-auth-gold) var(--brox-auth-bg);
  scrollbar-width: thin;
}

.brox-auth,
.brox-auth * {
  box-sizing: border-box;
}

.brox-auth [hidden] {
  display: none;
}

.brox-auth {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--brox-auth-bg);
  color: var(--brox-auth-text);
  font-family: var(--bx-ui-font);
  font-size: 16px;
  line-height: 1.5;
  accent-color: var(--brox-auth-primary);
  caret-color: var(--brox-auth-gold);
  -webkit-font-smoothing: antialiased;
}

.brox-auth ::selection {
  background: var(--brox-auth-gold);
  color: #171813;
}

.brox-auth::-webkit-scrollbar {
  width: 11px;
}

.brox-auth::-webkit-scrollbar-track {
  background: var(--brox-auth-bg);
}

.brox-auth::-webkit-scrollbar-thumb {
  background: var(--brox-auth-gold);
  border: 3px solid var(--brox-auth-bg);
  border-radius: var(--bx-radius-sm);
}

.brox-auth__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bx-space-1);
  padding-block: var(--bx-space-1);
  background: var(--bx-panel);
  border-bottom: 1px solid var(--bx-line);
}
.brox-auth__brand { display: inline-flex; align-items: center; gap: var(--bx-space-1); min-height: var(--bx-control-height); text-decoration: none; color: var(--bx-text); }
.brox-auth__brand img { width: 32px; height: 32px; object-fit: contain; }
.brox-auth__brand span { display: grid; gap: 3px; line-height: 1; }
.brox-auth__brand b { font-family: var(--bx-display-font); font-size: .875rem; letter-spacing: .04em; }
.brox-auth__brand small { color: var(--bx-gold2); font-size: .625rem; letter-spacing: .18em; }
.brox-auth__header-actions { display: flex; min-width: 0; align-items: center; gap: var(--bx-space-1); }
.brox-auth__header[data-client-disclosures] { position: relative; z-index: 50; }
.brox-auth__header .brox-client-header__shop { position: static; }
.brox-auth__header .brox-client-header__shop-panel { position: absolute; top: calc(100% + var(--bx-space-1)); left: auto; right: 0; width: min(280px, calc(100vw - var(--bx-container-gutter) * 2)); max-height: 65dvh; margin-top: 0; box-shadow: var(--bx-shadow); }
.brox-auth__header .brox-client-header__shop :is(a, button):focus-visible { outline: 3px solid var(--bx-focus); outline-offset: -3px; }
.brox-auth__header .brox-auth__theme { flex-shrink: 0; min-width: var(--bx-control-height); width: var(--bx-control-height); padding: 0; }
.brox-auth__theme span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.brox-auth__header .brox-auth__brand:focus-visible { outline: 3px solid var(--bx-focus); outline-offset: 3px; }

.brox-auth__back,
.brox-auth__theme {
  min-height: var(--bx-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 999px;
  background: var(--brox-auth-panel);
  color: var(--brox-auth-text);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  padding: 0 16px;
  cursor: pointer;
  transition: background-color 180ms ease-out, color 180ms ease-out, transform 180ms ease-out;
}

.brox-auth__back:hover,
.brox-auth__theme:hover {
  background: var(--brox-auth-line);
  color: var(--brox-auth-text);
  transform: translateY(-1px);
}

.brox-auth__main {
  width: 100%;
  display: grid;
  place-items: center;
  padding: clamp(28px, 6vh, 64px) 16px;
}

.brox-auth__layout { width: 100%; }

.brox-auth__card {
  width: min(480px, 100%);
  margin: auto;
  padding: clamp(26px, 5vw, 40px);
  border-radius: var(--bx-radius-md);
  background: var(--brox-auth-panel);
  box-shadow: var(--bx-shadow);
  overflow: visible;
}

.brox-auth__logo {
  width: 82px;
  height: 82px;
  display: block;
  margin: 0 auto 22px;
  object-fit: cover;
  border: 2px solid var(--brox-auth-gold);
  border-radius: 50%;
}

.brox-auth__card h1,
.brox-auth__card h2 {
  max-width: 18ch;
  margin: 0 auto 12px;
  color: var(--brox-auth-text);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-align: center;
  text-wrap: balance;
}

.brox-auth__context {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brox-auth-gold);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.brox-auth__subtitle,
.brox-auth__intro {
  max-width: 66ch;
  margin: 0 auto 24px;
  color: var(--brox-auth-muted);
  font-size: 0.9375rem;
  text-align: center;
  overflow-wrap: anywhere;
}

.brox-auth__quiet,
.brox-auth__help {
  color: var(--brox-auth-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.brox-auth__tabs {
  margin: 24px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: var(--bx-radius-sm);
  background: var(--brox-auth-panel);
}

.brox-auth__tab {
  min-height: var(--bx-control-height);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--brox-auth-muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 800;
  padding: 8px 12px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease-out, color 180ms ease-out;
}

.brox-auth__stack-links {
  display: grid;
  gap: 9px;
  margin-top: 2px;
  text-align: center;
}

.brox-auth__tab:hover {
  color: var(--brox-auth-text);
}

.brox-auth__tab.is-active,
.brox-auth__tab[aria-selected="true"] {
  background: var(--brox-auth-panel);
  color: var(--brox-auth-text);
  box-shadow: var(--bx-shadow);
}

.brox-auth__panel[hidden] {
  display: none;
}

.brox-auth__panel {
  margin-top: 4px;
}

.brox-auth__form {
  display: grid;
  gap: 18px;
}

.brox-auth__field {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.brox-auth__field > label,
.brox-auth__label {
  color: var(--brox-auth-text);
  font-size: 0.875rem;
  font-weight: 800;
}

.brox-auth__input-wrap {
  position: relative;
  min-width: 0;
  display: block;
}

.brox-auth__input,
.brox-auth__field :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea),
.brox-auth__otp input {
  width: 100%;
  min-height: var(--bx-control-height);
  border: 1px solid var(--brox-auth-line);
  border-radius: 11px;
  outline: 0;
  background: var(--brox-auth-panel);
  color: var(--brox-auth-text);
  font: inherit;
  padding: 12px 14px;
  transition: border-color 180ms ease-out, box-shadow 180ms ease-out, background-color 180ms ease-out;
}

.brox-auth__field textarea {
  min-height: 104px;
  resize: vertical;
}

.brox-auth__input-wrap > input {
  padding-left: 48px;
  line-height: 1.35;
}

.brox-auth__input-wrap:has([data-password-toggle], [data-registration-password-toggle]) > input {
  padding-right: 52px;
}

.brox-auth__field-icon {
  position: absolute;
  top: 50%;
  left: 18px;
  width: 18px;
  height: 18px;
  display: block;
  color: var(--brox-auth-muted);
  fill: currentColor;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}

.brox-auth__toggle-icon {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
  margin: auto;
}

.brox-auth__password-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--bx-radius-sm);
  background: transparent;
  color: var(--brox-auth-muted);
  cursor: pointer;
  transform: translateY(-50%);
}


.brox-auth__input::-ms-reveal,
.brox-auth__input::-ms-clear {
  display: none;
}

.brox-auth__field input,
.brox-auth__field textarea,
.brox-auth__field select {
  text-indent: 0;
}

.brox-auth__field input::placeholder,
.brox-auth__field textarea::placeholder {
  color: var(--brox-auth-muted);
  opacity: 0.84;
}

.brox-auth__field input:-webkit-autofill,
.brox-auth__field input:-webkit-autofill:hover,
.brox-auth__field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--brox-auth-text);
  caret-color: var(--brox-auth-gold);
  box-shadow: 0 0 0 1000px var(--brox-auth-panel-2) inset;
  transition: background-color 9999s ease-out 0s;
}

.brox-auth :focus-visible {
  outline: 3px solid var(--bx-focus);
  outline-offset: 3px;
}

.brox-auth__field input:focus,
.brox-auth__field select:focus,
.brox-auth__field textarea:focus,
.brox-auth__otp input:focus {
  border-color: var(--brox-auth-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brox-auth-gold) 24%, transparent);
}

.brox-auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.brox-auth__check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--brox-auth-muted);
  font-size: 0.875rem;
  cursor: pointer;
}

.brox-auth__check input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.brox-auth__action,
.brox-auth__secondary,
.brox-auth__social {
  width: 100%;
  min-height: var(--bx-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 11px;
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  padding: 12px 18px;
  cursor: pointer;
  transition: background-color 180ms ease-out, color 180ms ease-out, transform 180ms ease-out, box-shadow 180ms ease-out;
}

.brox-auth__action {
  background: var(--brox-auth-primary);
  color: var(--brox-auth-primary-text);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brox-auth-primary) 32%, transparent);
}

.brox-auth__action:hover {
  background: var(--brox-auth-primary-hover);
  color: var(--brox-auth-primary-text);
  transform: translateY(-1px);
}

.brox-auth__secondary,
.brox-auth__social {
  border: 1px solid var(--brox-auth-line);
  background: var(--brox-auth-panel);
  color: var(--brox-auth-text);
}

.brox-auth__social > .fa {
  flex: 0 0 18px;
  width: 18px;
  text-align: center;
}

.brox-auth__secondary:hover,
.brox-auth__social:hover {
  border-color: var(--brox-auth-gold);
  color: var(--brox-auth-text);
}

.brox-auth__action:disabled,
.brox-auth__secondary:disabled,
.brox-auth__social:disabled,
.brox-auth [aria-busy="true"] {
  cursor: wait;
  opacity: 0.64;
  transform: none;
  box-shadow: none;
}

.brox-auth__action[aria-busy="true"]::before {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  animation: brox-auth-spin 700ms linear infinite;
}

.brox-auth__message,
.brox-auth__test-mode {
  width: 100%;
  margin: 16px 0;
  border-radius: 11px;
  color: var(--brox-auth-danger);
  background: var(--brox-auth-danger-bg);
  font-size: 0.875rem;
  line-height: 1.5;
  padding: 13px 14px;
  overflow-wrap: anywhere;
  word-break: normal;
}

.brox-auth__message--success {
  color: var(--brox-auth-success);
  background: var(--brox-auth-success-bg);
}

.brox-auth__message--warning,
.brox-auth__message--blocked,
.brox-auth__test-mode {
  color: var(--brox-auth-warning);
  background: var(--brox-auth-warning-bg);
}

.brox-auth__test-mode {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.brox-auth__otp {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.brox-auth__otp input {
  min-width: 0;
  padding: 8px 2px;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-align: center;
}

.brox-auth__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--brox-auth-muted);
  font-size: 0.8125rem;
  text-align: center;
}

.brox-auth__divider::before,
.brox-auth__divider::after {
  height: 1px;
  flex: 1;
  background: var(--brox-auth-line);
  content: "";
}

.brox-auth__link,
.brox-auth__card a:not([class]) {
  color: var(--brox-auth-gold);
  font-weight: 750;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.brox-auth__link-button {
  width: fit-content;
  border: 0;
  background: transparent;
  color: var(--brox-auth-gold);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 750;
  line-height: 1.4;
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  padding: 4px 0;
  cursor: pointer;
}

.brox-auth__link-button:hover {
  color: var(--brox-auth-text);
}

.brox-auth__code-input {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-align: center;
}

.brox-auth__modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow-y: auto;
  background: color-mix(in srgb, var(--brox-auth-bg) 86%, transparent);
  padding: 20px;
}

.brox-auth__modal-card {
  width: min(480px, 100%);
  max-height: calc(100svh - 40px);
  overflow-y: auto;
  border-radius: var(--bx-radius-md);
  background: var(--brox-auth-panel);
  color: var(--brox-auth-text);
  box-shadow: var(--bx-shadow);
  padding: clamp(24px, 5vw, 36px);
}

.brox-auth__modal-card h2 {
  margin-bottom: 14px;
}

.brox-auth__modal-card .brox-auth__field + .brox-auth__field,
.brox-auth__modal-card [id^="resetPaso"] .brox-auth__field {
  margin-top: 16px;
}

.brox-auth__modal-actions {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.brox-auth__toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1100;
  width: min(360px, calc(100vw - 32px));
  display: grid;
  gap: 3px;
  border-radius: var(--bx-radius-sm);
  background: var(--brox-auth-success-bg);
  color: var(--brox-auth-success);
  box-shadow: var(--bx-shadow);
  padding: 14px 16px;
  overflow-wrap: anywhere;
}

.brox-auth__link:hover,
.brox-auth__card a:not([class]):hover {
  color: var(--brox-auth-text);
}

.brox-auth__footer {
  min-height: var(--bx-control-height);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--brox-auth-muted);
  font-size: 0.75rem;
  padding: 0 16px 18px;
  text-align: center;
}

@keyframes brox-auth-spin {
  to { transform: rotate(360deg); }
}

/* The public account opts in; staff, wholesale and checkout keep their shells. */
.brox-auth--minimal {
  --brox-auth-radius: var(--bx-radius-md);
  --brox-auth-control-height: var(--bx-control-height);
  --brox-auth-card-width: 28rem;
  grid-template-rows: auto 1fr;
  font-family: var(--bx-ui-font);
}
.brox-auth--minimal .brox-auth__main {
  align-items: start;
  padding: 48px 16px;
}
.brox-auth--minimal .brox-auth__layout {
  width: min(var(--brox-auth-card-width), 100%);
}
.brox-auth__heading { margin-bottom: 24px; text-align: center; }
.brox-auth__heading h1 {
  font-family: var(--bx-display-font);
  margin: 0 0 8px;
  font-size: 2rem;
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.2;
  text-wrap: balance;
}
.brox-auth__heading .brox-auth__intro { margin: 0; font-size: .9375rem; }
.brox-auth--minimal .brox-auth__card {
  width: 100%;
  padding: 24px;
  border: 1px solid var(--brox-auth-line);
  border-radius: var(--brox-auth-radius);
  box-shadow: none;
}
.brox-auth--minimal .brox-auth__tabs { margin: 0 0 24px; }
.brox-auth--minimal .brox-auth__tab {
  min-height: var(--bx-control-height);
  font-weight: 600;
}
.brox-auth--minimal .brox-auth__tab[aria-selected="true"] {
  box-shadow: inset 0 -2px var(--brox-auth-gold);
}
.brox-auth--minimal .brox-auth__panel { margin: 0; }
.brox-auth--minimal .brox-auth__form { gap: 16px; }
.brox-auth--minimal .brox-auth__divider { margin: 0; }
.brox-auth--minimal .brox-auth__field > label { font-weight: 600; }
.brox-auth--minimal .brox-auth__input {
  min-height: var(--brox-auth-control-height);
  border-color: var(--brox-auth-control-line);
  background: var(--brox-auth-panel);
}
.brox-auth--minimal .brox-auth__input::placeholder { opacity: 1; }
.brox-auth--minimal :is(.brox-auth__action, .brox-auth__secondary, .brox-auth__social) {
  min-height: var(--brox-auth-control-height);
  font-weight: 600;
  transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
}
.brox-auth--minimal .brox-auth__action { box-shadow: none; }
.brox-auth--minimal .brox-auth__action:hover { transform: none; }
.brox-auth--minimal .brox-auth__social { background: var(--brox-auth-panel-2); }
.brox-auth--minimal :is(.brox-auth__action, .brox-auth__secondary, .brox-auth__social):active:not(:disabled) {
  filter: brightness(.94);
  transition: none;
}
.brox-auth--minimal .brox-auth__password-toggle {
  display: grid;
  place-items: center;
  padding: 0;
  touch-action: manipulation;
}
.brox-auth--minimal .brox-auth__password-toggle:hover { color: var(--brox-auth-text); background: var(--brox-auth-panel); }
.brox-auth--minimal .brox-auth__password-toggle .fa { font-size: 1.125rem; }
.brox-auth--minimal ::selection { color: var(--brox-auth-bg); }
.brox-auth--minimal .customer-registration__consent span { text-wrap: pretty; }
.brox-auth--minimal .brox-auth__link-button { min-height: var(--bx-control-height); padding: 8px 0; font-weight: 500; }
.brox-auth--minimal .brox-auth__check { gap: 12px; line-height: 1.5; }
.brox-auth--minimal .brox-auth__check > span { min-width: 0; overflow-wrap: anywhere; }
.brox-auth--minimal .brox-auth__card a:not([class]) { font-weight: 500; }
.brox-auth--minimal .brox-auth__modal { padding: 16px; }
.brox-auth--minimal .brox-auth__modal--notice { z-index: 1020; }
.brox-auth--modal-open { overflow: hidden; }
.brox-auth--minimal .brox-auth__modal-card {
  width: min(var(--brox-auth-card-width), 100%);
  max-height: calc(100dvh - 32px);
  border: 1px solid var(--brox-auth-line);
  border-radius: var(--brox-auth-radius);
  padding: 24px;
  box-shadow: var(--bx-shadow);
}
.brox-auth--minimal .brox-auth__modal-card h2 {
  max-width: none;
  margin: 0 0 12px;
  font: 600 1.375rem/1.25 var(--bx-display-font);
  letter-spacing: -.015em;
  text-align: left;
}
.brox-auth--minimal .brox-auth__modal-card .brox-auth__subtitle { margin: 0 0 24px; text-align: left; }
.brox-auth--minimal .brox-auth__modal-actions { gap: 12px; margin-top: 24px; }
.brox-auth--minimal .brox-auth__toast {
  right: 16px;
  bottom: 16px;
  border: 1px solid var(--brox-auth-line);
  background: var(--brox-auth-panel);
  color: var(--brox-auth-text);
  box-shadow: var(--bx-shadow);
  font-size: .875rem;
}
.brox-auth--minimal .brox-auth__toast strong { color: var(--brox-auth-success); font-weight: 600; }
@media (max-width: 430px) {
  .brox-auth--minimal .brox-auth__main { padding: 32px 16px 48px; }
  .brox-auth--minimal .brox-auth__heading { margin-bottom: 24px; }
  .brox-auth--minimal .brox-auth__card { padding: 0; border: 0; border-radius: 0; background: transparent; }
  .brox-auth--minimal .brox-auth__modal-card { padding: 24px 16px; }
  /* Inline after the form on small screens: never cover its primary action. */
  .brox-auth--minimal .brox-auth__toast { position: static; width: 100%; margin-top: 24px; box-shadow: none; }
}

@media (max-width: 560px) {
  .brox-auth__brand b { font-size: .75rem; }

  .brox-auth__theme span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .brox-auth__theme {
    width: 44px;
    padding: 0;
  }

  .brox-auth__main {
    place-items: start center;
    padding: 24px 12px 32px;
  }

  .brox-auth__card {
    padding: 26px 20px;
  }
}

@media (max-width: 390px) {
  .brox-auth__card {
    border-radius: var(--bx-radius-md);
    padding: 24px 16px;
  }

  .brox-auth__logo {
    margin-bottom: 18px;
  }

  .brox-auth__row {
    align-items: flex-start;
    flex-direction: column;
  }

  .brox-auth__otp {
    gap: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brox-auth.brox-auth--minimal *,
  .brox-auth *,
  .brox-auth *::before,
  .brox-auth *::after {
    scroll-behavior: auto;
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
  }
}

.brox-auth :is([hidden], [hidden].brox-auth__panel, [hidden].brox-auth__modal) { display: none; }
.brox-auth :is(button, input):disabled { background: var(--bx-disabled-bg); color: var(--bx-disabled-text); opacity: 1; cursor: not-allowed; }

.brox-auth__skip { position: absolute; left: var(--bx-container-gutter); top: -100px; z-index: 70; padding: var(--bx-space-2); background: var(--bx-primary); color: var(--bx-primary-text); border-radius: var(--bx-radius-sm); }
.brox-auth__skip:focus { top: var(--bx-space-1); }