/* Full-page artwork used by the requested storefront page families. */
body:is(.zen-image-bg-mountains, .zen-image-bg-lotus, .zen-image-bg-product, .zen-image-bg-account, .zen-image-bg-blog) {
  position: relative;
  isolation: isolate;
  background: #f8ebcb;
}

body:is(.zen-image-bg-mountains, .zen-image-bg-lotus, .zen-image-bg-blog)::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  pointer-events: none;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

body.zen-image-bg-mountains::before,
body.zen-image-bg-blog::before {
  background-image: url("../images/page-assets/common/common-ink-wash-mountain-lake-background.webp");
}

body.zen-image-bg-lotus::before {
	background-image: url("../images/page-assets/shop/shop-ink-wash-mountain-temple-background.webp");
}

body.zen-image-bg-account .zen-and-tao-account-background {
  position: fixed;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* These wrappers currently paint an opaque paper surface over the artwork. */
body:is(.zen-image-bg-mountains, .zen-image-bg-lotus, .zen-image-bg-product, .zen-image-bg-account) .zen-and-tao-page-shell,
body.zen-image-bg-blog .zen-and-tao-page-shell,
body:is(.zen-image-bg-lotus, .zen-image-bg-product, .zen-image-bg-account) .zen-and-tao-shop-shell,
body.zen-image-bg-account .zen-and-tao-page-shell::before,
body.zen-image-bg-account .zen-and-tao-page-shell .zen-and-tao-content,
body:is(.zen-image-bg-mountains) .zen-and-tao-contact,
body:is(.zen-image-bg-mountains) .zen-and-tao-help-page,
body:is(.zen-image-bg-mountains) .zen-and-tao-policy-page,
body:is(.zen-image-bg-mountains) .zen-and-tao-policy-page .zen-and-tao-help-page__hero {
  background: transparent !important;
}

/* Keep the artwork visible behind the chrome while preserving readable controls. */
body:is(.home, .page-five-elements, .zen-image-bg-mountains, .zen-image-bg-lotus, .zen-image-bg-product, .zen-image-bg-account, .zen-image-bg-blog) .zen-and-tao-site-header {
  background: rgb(255 255 255 / 70%);
  backdrop-filter: blur(3px);
}

/* The scroll reveal slides a solid white header and its contents together. */
body:is(.home, .page-five-elements, .zen-image-bg-mountains, .zen-image-bg-lotus, .zen-image-bg-product, .zen-image-bg-account, .zen-image-bg-blog) .zen-and-tao-site-header.is-scrolled {
  background: var(--zen-and-tao-paper);
  backdrop-filter: none;
}

body:is(.home, .page-five-elements, .zen-image-bg-mountains, .zen-image-bg-lotus, .zen-image-bg-product, .zen-image-bg-account, .zen-image-bg-blog) .zen-and-tao-site-header::after {
  opacity: 0;
  background: transparent;
}

body.zen-image-bg-mountains .zen-story-background {
  display: none;
}

body.zen-image-bg-lotus .zen-and-tao-product-background {
  display: none;
}

body.zen-image-bg-product .zen-and-tao-product-background {
  position: fixed;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* One translucent backing includes account headings, menus, forms and notices. */
body.woocommerce-account.zen-image-bg-account {
  --zen-account-panel-surface: rgb(255 255 255 / 70%);
  --zen-account-panel-padding: 32px;
}

body.woocommerce-account.zen-image-bg-account .zen-and-tao-content > .woocommerce {
  background: var(--zen-account-panel-surface);
}

body.woocommerce-account.zen-image-bg-account:not(.logged-in) .zen-and-tao-content > .woocommerce {
  width: min(100%, 560px);
  margin-inline: auto;
}

body.woocommerce-account.zen-image-bg-account.logged-in .zen-and-tao-content > .woocommerce {
  padding: var(--zen-account-panel-padding);
}

/* Avoid stacked white layers that would hide the landscape again. */
body.woocommerce-account.zen-image-bg-account .zen-and-tao-page-shell .woocommerce :is(
  .zen-and-tao-auth-card,
  .woocommerce-form-login,
  .woocommerce-form-register,
  .woocommerce-ResetPassword,
  .zen-reset-password-confirmation,
  .woocommerce-MyAccount-navigation,
  .woocommerce-MyAccount-content,
  .woocommerce-MyAccount-content > p:first-child,
  .zen-and-tao-account-actions a,
  .zen-and-tao-orders-overview,
  .zen-and-tao-order-card,
  .zen-and-tao-order-card__header,
  .zen-and-tao-order-card__footer,
  .zen-and-tao-order-tracking,
  .woocommerce-Address,
  .woocommerce-EditAccountForm,
  .woocommerce-EditAccountForm legend,
  .woocommerce-address-fields,
  table.shop_table,
  table.shop_table thead th,
  .zen-and-tao-order-history tbody tr:hover,
  .woocommerce-info,
  .woocommerce-message,
  .woocommerce-error
) {
  background: transparent;
}

body.woocommerce-account.zen-image-bg-account.logged-in .zen-and-tao-page-shell .woocommerce .woocommerce-MyAccount-navigation a,
body.woocommerce-account.zen-image-bg-account.logged-in .zen-and-tao-page-shell .woocommerce .woocommerce-MyAccount-navigation a:is(:hover, :focus-visible),
body.woocommerce-account.zen-image-bg-account.logged-in .zen-and-tao-page-shell .woocommerce .woocommerce-MyAccount-navigation li.is-active a {
  background: transparent;
}

@media (max-width: 782px) {
  body.zen-image-bg-mountains::before,
  body.zen-image-bg-blog::before {
    background-image: url("../images/page-assets/common/common-ink-wash-mountain-lake-background-mobile.webp");
  }

  body.zen-image-bg-lotus::before {
    background-image: url("../images/page-assets/shop/shop-ink-wash-mountain-temple-background-mobile.webp");
  }

  body.woocommerce-account.zen-image-bg-account {
    --zen-account-panel-padding: 20px;
  }

  body:is(.zen-image-bg-mountains, .zen-image-bg-lotus, .zen-image-bg-blog)::before {
    background-position: center center;
  }
}