[data-site-design="v1"][data-site-template-mode="theme"] [data-hm-design-role="text"] {
  color: var(--hm-design-text);
  font-family: var(--hm-design-body-font);
}

[data-site-design="v1"][data-site-template-mode="theme"] [data-hm-design-role="heading"] {
  color: var(--hm-design-text);
  font-family: var(--hm-design-heading-font);
}

[data-site-design="v1"]:is([data-site-page-background="token"], [data-site-page-background="custom"]) {
  background: var(--hm-design-page-background);
}

[data-site-design="v1"] [id] {
  scroll-margin-top: var(--hm-design-sticky-offset, 0px);
}

/* Full-bleed Hero width follows the page, including when a saved canvas width is present. */
[data-site-design="v1"][data-site-layout="configurable"] [data-site-region="main"]
  > [data-template-surface-role="hero-full-bleed"] {
  width: 100% !important;
}

[data-site-design="v1"] [data-site-editor-hidden-placeholder="true"] {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px dashed #9aaba8;
  color: #566663;
  background: #f3f7f6;
  font: 13px/1.4 Arial, sans-serif;
}

[data-site-design="v1"] [data-site-editor-hidden-placeholder="true"] > * {
  display: none !important;
}

[data-site-design="v1"] [data-site-editor-hidden-placeholder="true"]::before {
  content: "此公共区已隐藏，可在网站设计中心重新显示";
}

@media (min-width: 768px) {
  [data-site-design="v1"] [data-site-region="header"]:is([data-site-surface="token"], [data-site-surface="custom"]) {
    background: var(--hm-design-header-background);
  }

  [data-site-design="v1"] [data-site-region="footer"]:is([data-site-surface="token"], [data-site-surface="custom"]) {
    background: var(--hm-design-footer-background);
  }

  [data-site-design="v1"] [data-site-position="static"] {
    position: static;
  }

  [data-site-design="v1"] [data-site-position="sticky"] {
    position: sticky;
    z-index: 100;
    top: 0;
  }

  [data-site-design="v1"] [data-site-divider="hairline"] {
    border-bottom: 1px solid var(--hm-design-border);
  }

  [data-site-design="v1"] [data-site-region="footer"][data-site-divider="hairline"] {
    border-top: 1px solid var(--hm-design-border);
    border-bottom: 0;
  }

  [data-site-design="v1"] [data-site-shadow="subtle"] {
    box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
  }

  [data-site-design="v1"] [data-site-region="header"][data-site-custom-padding="true"] {
    padding-block: var(--hm-design-header-padding);
  }

  [data-site-design="v1"] [data-site-region="footer"][data-site-custom-padding="true"] {
    padding-block: var(--hm-design-footer-padding);
  }

  [data-site-design="v1"][data-site-layout="configurable"] [data-site-surface-width="content"] {
    width: min(calc(100% - 2 * var(--hm-design-desktop-gutter)), var(--hm-design-content-width));
    margin-inline: auto;
  }

  [data-site-design="v1"][data-site-layout="configurable"]
    [data-site-region="main"]:has(> [data-template-surface-role="hero-full-bleed"]) {
    width: 100%;
    margin-inline: 0;
  }

  [data-site-design="v1"][data-site-layout="configurable"][data-site-content-width]:not(
      [data-site-content-width="inherit"]
    )
    [data-site-region="main"]
    > :first-child:not([data-template-surface-role="hero-full-bleed"]),
  [data-site-design="v1"][data-site-layout="configurable"][data-site-desktop-gutter="custom"]
    [data-site-region="main"]
    > :first-child:not([data-template-surface-role="hero-full-bleed"]),
  [data-site-design="v1"][data-site-layout="configurable"] [data-site-surface-width="full"]
    > :first-child:not([data-template-surface-role="hero-full-bleed"]) {
    width: min(calc(100% - 2 * var(--hm-design-desktop-gutter)), var(--hm-design-content-width));
    margin-inline: auto;
  }
}

@media (max-width: 0px) {
  [data-site-design="v1"]
    [data-site-region="header"]:is([data-site-mobile-surface="token"], [data-site-mobile-surface="custom"]) {
    background: var(--hm-design-header-mobile-background);
  }

  [data-site-design="v1"]
    [data-site-region="footer"]:is([data-site-mobile-surface="token"], [data-site-mobile-surface="custom"]) {
    background: var(--hm-design-footer-mobile-background);
  }

  [data-site-design="v1"] [data-site-mobile-position="static"] {
    position: static;
  }

  [data-site-design="v1"] [data-site-mobile-position="sticky"] {
    position: sticky;
    z-index: 100;
    top: 0;
  }

  [data-site-design="v1"] [data-site-mobile-divider="hairline"] {
    border-bottom: 1px solid var(--hm-design-border);
  }

  [data-site-design="v1"] [data-site-region="footer"][data-site-mobile-divider="hairline"] {
    border-top: 1px solid var(--hm-design-border);
    border-bottom: 0;
  }

  [data-site-design="v1"] [data-site-mobile-shadow="subtle"] {
    box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
  }

  [data-site-design="v1"] [data-site-region="header"][data-site-mobile-custom-padding="true"] {
    padding-block: var(--hm-design-header-mobile-padding);
  }

  [data-site-design="v1"] [data-site-region="footer"][data-site-mobile-custom-padding="true"] {
    padding-block: var(--hm-design-footer-mobile-padding);
  }

  [data-site-design="v1"][data-site-layout="configurable"] [data-site-mobile-surface-width="content"] {
    width: calc(100% - 2 * var(--hm-design-mobile-gutter));
    margin-inline: auto;
  }

  [data-site-design="v1"][data-site-layout="configurable"]
    [data-site-region="main"]:has(> [data-template-surface-role="hero-full-bleed"]) {
    width: 100%;
    margin-inline: 0;
  }

  [data-site-design="v1"][data-site-layout="configurable"][data-site-mobile-content-width]:not(
      [data-site-mobile-content-width="inherit"]
    )
    [data-site-region="main"]
    > :first-child:not([data-template-surface-role="hero-full-bleed"]),
  [data-site-design="v1"][data-site-layout="configurable"][data-site-mobile-gutter="custom"]
    [data-site-region="main"]
    > :first-child:not([data-template-surface-role="hero-full-bleed"]),
  [data-site-design="v1"][data-site-layout="configurable"] [data-site-mobile-surface-width="full"]
    > :first-child:not([data-template-surface-role="hero-full-bleed"]) {
    width: calc(100% - 2 * var(--hm-design-mobile-gutter));
    margin-inline: auto;
  }
}