body.wmb-member-page {
  --wmb-page-bg: var(--walkin-canvas, #f3eee4);
  --wmb-panel: var(--walkin-paper, #fbf8f1);
  --wmb-text: var(--walkin-ink, #181714);
  --wmb-muted: var(--walkin-muted, #625e55);
  --wmb-primary: var(--walkin-wine, #6e2833);
  --wmb-accent: var(--walkin-gold, #a88b57);
  --wmb-button-text: #fff;
  --wmb-line: var(--walkin-line, #d8cfbe);
  --wmb-radius: var(--walkin-site-radius, 12px);
  --wmb-shadow: var(--walkin-site-shadow, 0 18px 55px rgba(38, 30, 22, .1));
  background: var(--wmb-page-bg);
  color: var(--wmb-text);
}

.wmb-member-page :is(.walkin-page-shell, .walkin-account-main) {
  box-sizing: border-box;
  width: 100%;
  min-height: calc(100svh - var(--walkin-header-height, 5.25rem));
  padding: clamp(2.25rem, 6vw, 5.5rem) clamp(1rem, 4vw, 3rem);
  background: var(--wmb-page-bg);
  color: var(--wmb-text);
}

.wmb-member-page :is(.walkin-page-shell, .walkin-account-main) > .wp-block-post-title {
  width: min(100%, 1120px);
  margin: 0 auto clamp(1.5rem, 4vw, 2.75rem);
  color: var(--wmb-text);
  font-size: clamp(1.8rem, 4vw, 3rem);
  overflow-wrap: anywhere;
}

.wmb-member-page .um {
  box-sizing: border-box;
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  color: var(--wmb-text) !important;
  font-family: var(--walkin-site-font, inherit);
}

.wmb-member-page.wmb-screen-account .um-account {
  width: min(100%, 1120px) !important;
  max-width: 1120px !important;
}

.wmb-member-page .um:not(.um-account) .um-form,
.wmb-member-page .um-account {
  box-sizing: border-box;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid var(--wmb-line);
  border-radius: var(--wmb-radius);
  background: var(--wmb-panel);
  box-shadow: var(--wmb-shadow);
  color: var(--wmb-text);
}

.wmb-member-page .um-account {
  box-sizing: border-box;
  display: block;
}

/* UM nests the account columns inside .um-form > form. Keep the grid on the
 * actual column parent; placing it on .um-account shrinks .um-form to column 1. */
.wmb-member-page .um-account > .um-form {
  width: 100%;
  min-width: 0;
}

.wmb-member-page .um-account > .um-form > form {
  display: grid;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: start;
}

.wmb-member-page .um-account :is(.um-account-side, .um-account-main) {
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
  margin: 0 !important;
  float: none !important;
  color: var(--wmb-text);
}

.wmb-member-page .um-account .um-account-side {
  grid-column: 1;
}

.wmb-member-page .um-account .um-account-main {
  grid-column: 2;
}

.wmb-member-page .um-account .um-clear {
  grid-column: 1 / -1;
}

.wmb-member-page .um :is(h1, h2, h3, h4, label, legend, .um-field-label label, .um-account-heading, .um-account-name) {
  color: var(--wmb-text) !important;
}

.wmb-member-page .um :is(p, small, .um-field-help, .um-account-profile-link, .um-account-meta) {
  color: var(--wmb-muted) !important;
}

.wmb-member-page .um a {
  color: var(--wmb-accent) !important;
  text-underline-offset: .2em;
}

.wmb-member-page .um :is(input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], textarea, select) {
  box-sizing: border-box !important;
  width: 100%;
  min-height: 48px !important;
  border: 1px solid var(--wmb-line) !important;
  border-radius: var(--wmb-radius) !important;
  background: var(--wmb-page-bg) !important;
  color: var(--wmb-text) !important;
  box-shadow: none !important;
}

.wmb-member-page .um :is(input, textarea)::placeholder {
  color: var(--wmb-muted) !important;
  opacity: .8;
}

.wmb-member-page .um :is(input, textarea, select, button, a):focus-visible {
  outline: 3px solid var(--wmb-accent) !important;
  outline-offset: 3px;
}

.wmb-member-page .um :is(input[type="submit"], .um-button, a.um-button) {
  min-height: 48px !important;
  border: 1px solid var(--wmb-primary) !important;
  border-radius: var(--wmb-radius) !important;
  background: var(--wmb-primary) !important;
  color: var(--wmb-button-text) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.wmb-member-page .um :is(.um-button.um-alt, a.um-button.um-alt) {
  border-color: var(--wmb-line) !important;
  background: transparent !important;
  color: var(--wmb-text) !important;
}

.wmb-member-page .um .um-field-checkbox-state i,
.wmb-member-page .um .um-field-radio-state i,
.wmb-member-page .um .um-icon-android-checkbox-outline-blank {
  color: var(--wmb-muted) !important;
}

.wmb-member-page .um .um-field-checkbox.active .um-field-checkbox-state i,
.wmb-member-page .um .um-field-radio.active .um-field-radio-state i {
  color: var(--wmb-accent) !important;
}

.wmb-member-page .um-account-side ul {
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--wmb-line);
  border-radius: var(--wmb-radius);
  overflow: hidden;
  background: transparent;
}

.wmb-member-page .um-account-side li {
  margin: 0 !important;
  border-bottom: 1px solid var(--wmb-line);
}

.wmb-member-page .um-account-side li:last-child {
  border-bottom: 0;
}

.wmb-member-page .um-account-side li a {
  min-height: 48px;
  padding: .75rem 1rem !important;
  color: var(--wmb-text) !important;
  background: transparent !important;
}

.wmb-member-page .um-account-side li a.current,
.wmb-member-page .um-account-side li a:hover {
  background: color-mix(in srgb, var(--wmb-primary) 16%, transparent) !important;
  color: var(--wmb-text) !important;
  text-decoration: none;
}

.wmb-member-page .um-account-main {
  padding: clamp(1rem, 2.5vw, 1.75rem) !important;
  border: 1px solid var(--wmb-line);
  border-radius: var(--wmb-radius);
  background: var(--wmb-panel);
  background: color-mix(in srgb, var(--wmb-panel) 92%, transparent);
}

.wmb-member-page .um :is(.um-notice, .um-field-error) {
  border-radius: var(--wmb-radius) !important;
}

.wmb-member-page .um .um-field-error {
  background: #a63c31 !important;
  color: #fff !important;
}

.wmb-member-page .um .um-field-arrow i {
  color: #a63c31 !important;
}

@media (max-width: 860px) {
  .wmb-member-page .um-account > .um-form > form {
    grid-template-columns: minmax(0, 1fr);
  }

  .wmb-member-page .um-account :is(.um-account-side, .um-account-main) {
    grid-column: 1;
  }

  .wmb-member-page .um-account-side ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wmb-member-page .um-account-side li:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }
}

@media (max-width: 520px) {
  .wmb-member-page :is(.walkin-page-shell, .walkin-account-main) {
    padding: 1.75rem .85rem 3rem;
  }

  .wmb-member-page .um:not(.um-account) .um-form,
  .wmb-member-page .um-account,
  .wmb-member-page .um-account-main {
    padding: 1rem !important;
  }

  .wmb-member-page .um-account-side ul {
    grid-template-columns: minmax(0, 1fr);
  }

  .wmb-member-page .um-account-side li {
    border-bottom: 1px solid var(--wmb-line) !important;
  }

  .wmb-member-page .um-account-side li:last-child {
    border-bottom: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wmb-member-page *,
  .wmb-member-page *::before,
  .wmb-member-page *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}
