/* One continuous page surface, with a rounded finish above the legal footer. */
body.mainstream-theme {
  --ms-surface-base: #f8f7f3;
  --ms-surface-color: var(--ms-surface-base);
  --ms-footer-radius: clamp(32px, 5vw, 64px);
  background-color: var(--ms-surface-color);
}

body.mainstream-theme.template-home {
  --ms-surface-base: var(--ms-home-tone, #f0ede5);
}

.mainstream-theme .ms-home-v2,
.mainstream-theme .ms-catalog {
  background-color: var(--ms-surface-color);
}

/* The fallback keeps adjoining surfaces equal, even without color-mix support. */
.mainstream-theme .ms-info,
.mainstream-theme .ms-product-page,
.mainstream-theme .ms-discovery-region {
  background: var(--ms-surface-color);
}

@supports (color: color-mix(in srgb, white, black)) {
  body.mainstream-theme {
    --ms-surface-color: color-mix(in srgb, var(--ms-surface-base), #e7eadf var(--ms-footer-mix, 0%));
  }

  .mainstream-theme .ms-info {
    background:
      radial-gradient(ellipse at 92% 0, color-mix(in srgb, #dfe4d574, transparent var(--ms-footer-mix, 0%)), transparent 45%),
      linear-gradient(180deg, color-mix(in srgb, #f0f0e9, #e7eadf var(--ms-footer-mix, 0%)) 0, var(--ms-surface-color) 470px);
  }

  .mainstream-theme .ms-product-page {
    background:
      linear-gradient(180deg, transparent 65%, var(--ms-surface-color)),
      radial-gradient(ellipse at 12% 20%, color-mix(in srgb, #e3e5dc, transparent var(--ms-footer-mix, 0%)) 0, transparent 48%),
      linear-gradient(135deg, color-mix(in srgb, #f1f0ea, #e7eadf var(--ms-footer-mix, 0%)), var(--ms-surface-color) 65%);
  }

  .mainstream-theme .ms-catalog .ms-catalog-opening {
    background:
      linear-gradient(180deg, transparent 62%, var(--ms-surface-color) 100%),
      linear-gradient(112deg, var(--ms-surface-color) 12%, color-mix(in srgb, #edf0e8, #e7eadf var(--ms-footer-mix, 0%)) 60%, color-mix(in srgb, #dce3d8, #e7eadf var(--ms-footer-mix, 0%)) 100%);
  }
}

.mainstream-theme .ms-footer.js-footer.ms-footer-wrap {
  position: relative;
  isolation: isolate;
  padding: 0;
  border: 0;
  background: #405247;
  box-shadow: none;
}

.mainstream-theme .ms-footer-panel {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(16px, 2vw, 28px);
  border: 0;
  border-radius: 0 0 var(--ms-footer-radius) var(--ms-footer-radius);
  background: var(--ms-surface-color);
  overflow: hidden;
  overflow: clip;
}

.mainstream-theme .ms-footer-base {
  position: relative;
  z-index: 0;
  margin-top: calc(-1 * var(--ms-footer-radius));
  padding-top: var(--ms-footer-radius);
  padding-bottom: 12px;
  color: #dce3d8;
  background: #405247;
}

.mainstream-theme .ms-footer-base .ms-footer-legal {
  gap: 16px 28px;
  padding-top: 25px;
  padding-bottom: 21px;
  border: 0;
}

.mainstream-theme .ms-footer-base .ms-footer-registration,
.mainstream-theme .ms-footer-base .ms-footer-credit,
.mainstream-theme .ms-footer-base .ms-footer-claims {
  color: #dce3d8;
  font-size: 11px;
  line-height: 1.7;
}

.mainstream-theme .ms-footer-base .ms-footer-credit strong {
  color: #fffef9;
}

.mainstream-theme .ms-footer-base .ms-footer-credit:hover,
.mainstream-theme .ms-footer-base .ms-footer-claims a:hover {
  color: #fffef9;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.mainstream-theme .ms-footer-base .ms-footer-claims a {
  color: inherit;
}

.mainstream-theme .ms-footer-base a:focus-visible {
  outline-color: #fffef9;
}

@media (max-width: 600px) {
  body.mainstream-theme {
    --ms-footer-radius: 32px;
  }

  .mainstream-theme .ms-footer-panel {
    padding-bottom: 16px;
  }

  .mainstream-theme .ms-footer-base .ms-footer-legal {
    gap: 14px;
    padding-top: 23px;
    padding-bottom: 20px;
  }

  .mainstream-theme .ms-footer-base .ms-footer-credit {
    max-width: 270px;
  }

  .mainstream-theme .ms-footer-base {
    padding-bottom: 18px;
  }
}