/* One viewport-fixed layer shared by all storefront theme pages.
   The SVG already contains the approved 30% opacity. */
body.jj-pattern-background {
  isolation: isolate;
  background-color: #fff;
}

body.jj-pattern-background::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--jj-pattern-image);
  background-repeat: repeat;
  background-position: center top;
  background-size: clamp(800px, 100vw, 1920px) auto;
}

/* Clear only page canvases. Cards, media, navigation, controls, overlays,
   and the dark section's contrasting surface retain their own backgrounds. */
body.jj-pattern-background :is(
  .main-collection-container,
  .main-search,
  .main-article-container,
  .main-blog,
  .section-main-collections-all,
  .featured-collection-list__wrapper,
  .product-detail-wrapper,
  .before-after,
  .featured-recommend-products,
  .section-blog-container,
  .sign-up-and-save-section,
  .footer
):not(.color-scheme-3) {
  background-color: transparent;
}

body.jj-pattern-background #shopline-section-template--index__sgc-flagship-compare > section,
body.jj-pattern-background #shopline-section-template--index__sgc-flagship-compare sgc-product-comparison,
body.jj-pattern-background .sign-up-and-save-section:not(.color-scheme-3) .sign-up-and-save__container {
  background-color: transparent;
}

/* Reading and filtering surfaces stay legible over the large logo pattern. */
body.jj-pattern-background :is(.main-article__content, .main-page .rte) {
  background-color: rgb(255 255 255 / 94%);
  border-radius: 24px;
}

@media (max-width: 959px) {
  body.jj-pattern-background::before {
    background-position: left top;
  }
}

@media print {
  body.jj-pattern-background::before { display: none; }
}