/*
 * Onefold — storefront stylesheet.
 *
 * ⚠️ THIS FILE IS LOADED ON EVERY PAGE OF THE MERCHANT'S STORE, not just the checkout.
 *    The platform renders the app's registered design URL as a plain
 *        <link rel="stylesheet" href="…/storefront/storefront.css">
 *    in `lib/wrapper.ejs`, inside the site wrapper, for every request. So every rule here
 *    MUST be namespaced to `#onefold-layer` / `[data-onefold]` and must not touch a single
 *    element the merchant owns. There are no element selectors in this file and there must
 *    never be one.
 *
 * ⚠️ IT MUST ALSO BE ABLE TO NOT LOAD. The overlay injects its full stylesheet from
 *    `storefront.js` at mount time (it has to: the palette is read from the store's own CSS
 *    variables at runtime, which a static file cannot know). This file is therefore a
 *    small set of pre-JS essentials only — an ad blocker or a failed fetch here changes
 *    nothing about whether the checkout works.
 *
 * It exists as a REAL file because the app's registered design URL used to resolve to the
 * SPA's index.html: the browser fetched it on every storefront page, got `text/html`, and
 * logged "Refused to apply style … MIME type ('text/html') is not a supported stylesheet
 * MIME type" into the console of every shopper on every page of every store that installed
 * us. A console error we put in a merchant's storefront is our defect, not a cosmetic one.
 */

/* The dialog container is focused on mount so a screen reader lands inside it. Without
   this, browsers draw a focus ring around the entire viewport at that moment. */
#onefold-layer:focus {
  outline: none;
}

/* Scroll lock. `storefront.js` also sets `body { overflow:hidden }` inline and restores the
   previous value on teardown; this is the belt to that braces, scoped to the attribute the
   overlay sets on the root element and removes again when it tears down. */
html[data-onefold='on'],
html[data-onefold='on'] body {
  overflow: hidden;
}

/* A checkout overlay has nothing to say on paper, and printing the covered native checkout
   underneath it is what a shopper actually wants. */
@media print {
  #onefold-layer {
    display: none !important;
  }
  html[data-onefold='on'],
  html[data-onefold='on'] body {
    overflow: visible;
  }
}

/* Respect the shopper's motion preference before our JS stylesheet has been parsed. */
@media (prefers-reduced-motion: reduce) {
  #onefold-layer,
  #onefold-layer * {
    animation: none !important;
    transition: none !important;
  }
}