/* Calm engineering margins support product photography without competing with it.
 * Background ground fills the gutter; complete drawings fit the viewport height. */
body.shop-public {
  isolation: isolate;
  background-color: var(--color-surface);
}

@media (min-width: 1360px) and (min-height: 500px) {
  body.shop-public::before,
  body.shop-public::after {
    content: "";
    position: fixed;
    z-index: 1;
    top: var(--shop-utility-height, 54.5px);
    bottom: 0;
    width: max(0px, calc((100vw - var(--shop-page-width)) / 2 - 12px));
    background-repeat: no-repeat;
    background-size: contain, 100% 100%;
    pointer-events: none;
  }

  body.shop-public::before {
    left: 0;
    background-image: url("assets/catalog-technical-left.5981d1f55875.svg"),
      linear-gradient(90deg,
        color-mix(in srgb, var(--color-brand-green) 15%, var(--color-surface)) 0%,
        color-mix(in srgb, var(--color-brand-blue) 5%, var(--color-surface)) 48%,
        var(--color-surface) 100%);
    background-position: center, center;
  }

  body.shop-public::after {
    right: 0;
    background-image: url("assets/catalog-technical-right.58f301654362.svg"),
      linear-gradient(270deg,
        color-mix(in srgb, var(--color-brand-green) 15%, var(--color-surface)) 0%,
        color-mix(in srgb, var(--color-brand-blue) 5%, var(--color-surface)) 48%,
        var(--color-surface) 100%);
    background-position: center, center;
  }
}

/* The opaque footer covers fixed margin art when it enters the viewport. */
body.shop-public .site-footer {
  position: relative;
  z-index: 2;
}