/* ════════════════════════════════════════════════════════════════════════
   Vendor quarantine — the last layer, and the only file in the storefront
   permitted `!important` (gate G6 asserts the count is 0 everywhere else).

   Nothing here is a style decision. Every rule exists to neutralise a
   declaration this theme does not own and cannot otherwise reach.
   ════════════════════════════════════════════════════════════════════════ */

@layer vendor-quarantine {

  /* ── the mobile bottom bar's clearance ────────────────────────────────

     The bar is `position: fixed`, so the final ~61px of every mobile page sat
     permanently behind it. Measured on the cart at 390×844: footer bottom
     844, nav occupying 783–844, body padding 0. Scrolling cannot reveal that
     strip, because the occluded strip IS the end of the document — whatever
     ends the page is what gets covered, which on the cart is the checkout
     button and on the confirmation the order total.

     WHY IT IS HERE AND NOT IN nav-bottom.css.

     WordPress emits an UNLAYERED `body { padding: 0 }` in its
     global-styles-inline-css block. Unlayered declarations beat every layered
     one regardless of specificity or source order, so the identical rule
     written in `@layer components` simply never applied. That was verified
     rather than assumed: injecting the same declaration unlayered at runtime
     moved the computed padding to 56px, and injecting it into
     `@layer components` left it at 0px.

     An `!important` inside a cascade layer DOES beat an unlayered normal
     declaration — important declarations reverse layer precedence — which is
     precisely the case this file was reserved for.

     The safe-area inset is a second declaration rather than a term inside the
     first calc, so a browser that cannot parse it keeps the part that
     matters.

     WHY THE RESERVATION IS `--bar-h + --s-2` AND NOT THE BAR'S EXACT HEIGHT.

     The first version reserved `--tap-min + --s-3` — 44 + 12 = 56px — which is
     a plausible-looking composition of the bar and not the bar's. Measured at
     390, the bar is 61px: its cells carry `min-block-size: var(--bar-h)` (56)
     but their content — icon, gap, label — is taller than that minimum, and
     the bar adds its own 1px top rule. Five pixels of every mobile page were
     still behind it, which is a smaller version of the defect this rule was
     written to remove.

     The bar's height is content-driven, so no CSS expression can equal it
     exactly without pinning the bar and risking a clipped label. The
     reservation is therefore deliberately a little larger than the bar —
     56 + 8 = 64 against 61 — and the GUARANTEE is the assertion, not the
     arithmetic: tests/chrome measures the rendered bar against the rendered
     padding at 390 and fails if the reservation is ever the smaller of the
     two. Three pixels of extra ground at the end of the page costs nothing;
     five pixels of hidden checkout button cost an order. */
  @media (max-width: 1023px) {
    body {
      padding-block-end: calc(var(--bar-h) + var(--s-2)) !important;
    }
  }

  @supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 1023px) {
      body {
        padding-block-end: calc(var(--bar-h) + var(--s-2) + env(safe-area-inset-bottom)) !important;
      }
    }
  }
}