/* ═══════════════════════════════════════════════════════════════════════════
   scroll-guard.css — one scrollbar per page, sitewide
   ═══════════════════════════════════════════════════════════════════════════

   THE BUG THIS FIXES
   ------------------
   Several pages showed TWO vertical scrollbars on the right edge (cart.html
   and back-to-school.html were the reported ones). The mechanism:

   1. The Porto theme sets `html { overflow-x: hidden }` (demo21.min.css) and
      `body { overflow-x: hidden }`.
   2. CSS spec: setting a non-`visible` value on ONE axis makes the OTHER
      axis compute `visible → auto`. So both elements each became a scroll
      container of their own.
   3. The viewport propagates html's overflow, so the window draws the first
      scrollbar — and body (its own scroll container again) drew the second,
      painted just inside the window's bar.

   Why measurement, not grep: headless Chrome uses overlay scrollbars (no
   reserved gutter), so the bug is invisible in headless screenshots and in a
   plain stylesheet search. It only shows on desktop browsers that paint
   classic bars (Windows defaults, and macOS with "always show scrollbars").

   THE FIX
   -------
   Restore the canonical model on both elements, sitewide:

     html  { overflow-x: clip; }   → nothing scrolls horizontally anywhere,
                                     without turning html into a scroll box
     html  { overflow-y: visible; } → the ONLY vertical scroller is the window
     body  { overflow-x: clip; overflow-y: visible; }

   `clip` (unlike `hidden`) NEVER creates a scroll container — no scrollbar,
   no programmatic scrolling, no accidentally-scroll-locked page. With
   overflow-x clipped on html/body, the `visible → auto` flip can no longer
   happen, so each element is once again "visible" on the Y axis and no bar
   is reserved for either. Exactly one scrollbar remains: the window's.

   This file is injected LAST into every page (after theme/patch styles), so
   nothing loaded before it can reintroduce a second scroll container. It is
   verified by scripts/qa/scroll-audit.js, which fails any page where
   html/body report a reserved scrollbar gutter or a non-visible overflow-y.
   ═══════════════════════════════════════════════════════════════════════ */

html,
body {
  overflow-x: clip;
  overflow-y: visible;
}

/* Very old browsers that predate `clip` (pre-2022 Safari) keep the previous
   behaviour — overflow-x: hidden — but critically still get overflow-y back
   to the default so the second scrollbar cannot appear. */
@supports not (overflow-x: clip) {
  html,
  body {
    overflow-x: hidden;
    overflow-y: visible;
  }
}