/* ═══════════════════════════════════════════════════════════════════════════
   uikit-shim.css — the UIkit classes this estate actually uses, and nothing else.

   WHY THIS REPLACES uikit.min.css (271 KB, loaded on both Shopify and crm-base):
   audited 2026-08-19 across 5 storefront surfaces + 2 Webflow sites. Shopify used
   22 distinct uk- classes, crm-base used 1, crm-sync.webflow.io used none and works
   fine. Across every surface there is exactly ONE attribute-form usage — `uk-grid` on
   the PDP — and zero real components: no uk-modal, uk-toggle, uk-scrollspy, uk-slider.
   So it was 271 KB of CSS for layout utilities.

   The JS is a separate 216 KB (uikit.min.js 147 KB + uikit-icons 69 KB) injected at
   RUNTIME by /embed/stack-loader.js, which is why a static page-source scan shows no
   uikit script and reports "no JS loaded" — I made exactly that mistake auditing this.
   Its trigger was `[class*="uk-"]`, so one layout class pulled the whole component
   framework. Counting both: ~487 KB per page for 22 utilities.

   THE CONFLICT IT REMOVES, which is the real reason and not the bytes:
   uikit.min.css sets 30 distinct BARE ELEMENT selectors across 61 rules — h1..h6, p,
   a, img, ul, ol, pre, table, input, button, iframe, svg. Bare element selectors reach
   into whatever host they land in. On Shopify that stacked three resets (Dawn/Horizon
   base, then UIkit's, then the Webflow-exported chrome); on crm-base it stacked two
   (Webflow normalize, then UIkit's). This file contains NOT ONE bare element selector.
   Every rule is scoped to a .uk- class. It cannot clobber a host, which is the estate
   rule it was breaking.

   Geometry is UIkit 3.21.13's own, read out of uikit.min.css rather than eyeballed, so
   nothing shifts: container 1200px content-box with 15/30/40px padding, grid gutter
   30px (15px small), section 40/70px, breakpoints 640/960/1200/1600.

   Colour, type and radius come from the CENTRALIZED tokens in
   /brand/<slug>/theme.css — --brand-primary, --brand-accent, --brand-secondary,
   --brand-font-body, --brand-font-heading, --brand-heading-weight, --brand-radius.
   Every one has a literal fallback, so this sheet still renders correctly if the token
   sheet is slow, blocked, or absent. Load theme.css FIRST; nothing here needs it to
   arrive first to be safe, only to be branded.

   Load order, wherever this ships:  theme.css → uikit-shim.css → site/chrome CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Container ─────────────────────────────────────────────────────────── */
.uk-container {
  display: flow-root;
  box-sizing: content-box;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 640px)  { .uk-container { padding-left: 30px; padding-right: 30px; } }
@media (min-width: 960px)  { .uk-container { padding-left: 40px; padding-right: 40px; } }

/* Size modifier. Value read from uikit@3 dist rather than remembered: the four modifiers
   are xsmall 750 / small 900 / large 1400 / xlarge 1600, and .uk-container above already
   matches upstream's 1200 exactly, so the shim stays faithful rather than approximate.
   Added 2026-08-26 for /pages/support. Only xlarge is here — the others go in when a
   surface asks for one, which is the rule this file is built on. */
.uk-container-xlarge { max-width: 1600px; }
.uk-container-large  { max-width: 1400px; }

/* ── Padding ───────────────────────────────────────────────────────────── */
/* uikit@3 dist values, including the breakpoint: 30px, stepping to 40px at 1200px.
   Note this is NOT the same breakpoint as .uk-container's gutter above (640/960) —
   copying the container's media queries here by eye would have been wrong by 240px. */
.uk-padding { padding: 30px; }
@media (min-width: 1200px) { .uk-padding { padding: 40px; } }

/* ── Section ───────────────────────────────────────────────────────────── */
.uk-section {
  display: flow-root;
  box-sizing: border-box;
  padding-top: 40px;
  padding-bottom: 40px;
}
@media (min-width: 960px) { .uk-section { padding-top: 70px; padding-bottom: 70px; } }

/* ── Grid ──────────────────────────────────────────────────────────────── */
.uk-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0 -30px;
  padding: 0;
  list-style: none;
}
.uk-grid > * { margin: 0; padding-left: 30px; }

/* Row spacing WITHOUT the JS. UIkit's `uk-grid` ATTRIBUTE exists so its JS can add
   .uk-grid-margin to items that wrap onto a new row — that is the only reason a
   layout grid needs 216 KB of JavaScript. row-gap does the same thing natively and
   only affects the cross axis, so it does not disturb the negative-margin/padding
   column gutter above. The .uk-grid-margin rules stay for markup that already has
   the class, or for a page still running real UIkit. */
.uk-grid { row-gap: 30px; }
.uk-grid-small { row-gap: 15px; }
.uk-grid > .uk-grid-margin { margin-top: 30px; }
@media (min-width: 1200px) { .uk-grid { row-gap: 40px; } .uk-grid > .uk-grid-margin { margin-top: 40px; } }

.uk-grid-small { margin-left: -15px; }
.uk-grid-small > * { padding-left: 15px; }
.uk-grid-small > .uk-grid-margin { margin-top: 15px; }

/* Equal-height children. UIkit makes the CHILD a flex container so the card inside
   can stretch; without this .uk-grid-match does nothing visible. */
.uk-grid-match > * { display: flex; flex-wrap: wrap; }
.uk-grid-match > * > * { flex: none; box-sizing: border-box; width: 100%; }

/* ── Width utilities (only the fractions in use) ───────────────────────── */
.uk-width-1-1     { width: 100%; box-sizing: border-box; }
.uk-width-1-3     { width: 33.333%; box-sizing: border-box; }
.uk-width-1-5     { width: 20%; box-sizing: border-box; }
/* flex:1 with min-width:1px — the min-width stops a long unbroken string from
   forcing the column wider than its share, which flex:1 alone will allow. */
.uk-width-expand  { flex: 1; min-width: 1px; box-sizing: border-box; }

/* ── Flex + overflow ───────────────────────────────────────────────────── */
.uk-flex-top      { align-items: flex-start; }
.uk-overflow-auto { overflow: auto; }

/* ── Logo ──────────────────────────────────────────────────────────────── */
.uk-logo {
  font-family: var(--brand-font-heading, inherit);
  font-size: 1.5rem;
  color: var(--brand-secondary, #101010);
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
}
.uk-logo:hover,
.uk-logo:focus { color: var(--brand-secondary, #101010); text-decoration: none; outline: none; }

/* ── Navbar ────────────────────────────────────────────────────────────── */
.uk-navbar-container { display: flex; }
.uk-navbar-nav {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 0;
}
.uk-navbar-nav > li > a {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 80px;
  padding: 0 15px;
  font-family: var(--brand-font-body, inherit);
  font-size: .875rem;
  text-decoration: none;
  color: var(--brand-secondary, #101010);
  transition: color .1s ease-in-out;
}
.uk-navbar-nav > li:hover > a,
.uk-navbar-nav > li > a:focus,
.uk-navbar-nav > li.uk-active > a { color: var(--brand-primary, #118efa); }

.uk-navbar-right  { display: flex; align-items: center; margin-left: auto; }
.uk-navbar-center { display: flex; align-items: center; margin-left: auto; margin-right: auto; }

.uk-navbar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: 0 15px;
  background: none;
  border: none;
  border-radius: var(--brand-radius, 0);
  color: var(--brand-secondary, #101010);
  text-decoration: none;
  cursor: pointer;
}
.uk-navbar-toggle:hover,
.uk-navbar-toggle:focus { color: var(--brand-primary, #118efa); outline: none; text-decoration: none; }

/* ── Nav (offcanvas / dropdown lists) ──────────────────────────────────── */
.uk-nav-default { margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.uk-nav-default > li > a {
  display: block;
  padding: 5px 0;
  font-family: var(--brand-font-body, inherit);
  color: var(--brand-secondary, #101010);
  text-decoration: none;
}
.uk-nav-default > li > a:hover,
.uk-nav-default > li > a:focus { color: var(--brand-primary, #118efa); outline: none; }
.uk-nav-default > li.uk-active > a { color: var(--brand-primary, #118efa); }

.uk-nav-header {
  padding: 5px 0;
  font-family: var(--brand-font-heading, inherit);
  font-size: .875rem;
  font-weight: var(--brand-heading-weight, 600);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brand-secondary, #101010);
}
.uk-nav-header:not(:first-child) { margin-top: 20px; }

/* ── Offcanvas ─────────────────────────────────────────────────────────── */
/* Presentation only. Nothing in this estate carries a uk-offcanvas ATTRIBUTE, so
   UIkit's JS never wires these — whatever opens the panel is the host's own script.
   These rules must therefore NOT assume a .uk-open state machine exists. Positioning
   is here; visibility stays the host's business. */
.uk-offcanvas-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  width: 270px;
  padding: 20px;
  background: var(--brand-secondary, #101010);
  color: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 960px) { .uk-offcanvas-bar { width: 350px; padding: 40px; } }
.uk-offcanvas-bar .uk-nav-default > li > a,
.uk-offcanvas-bar .uk-nav-header { color: rgba(255, 255, 255, .7); }
.uk-offcanvas-bar .uk-nav-default > li > a:hover,
.uk-offcanvas-bar .uk-nav-default > li > a:focus,
.uk-offcanvas-bar .uk-nav-default > li.uk-active > a { color: #fff; }

.uk-offcanvas-close {
  position: absolute;
  z-index: 1000;
  top: 20px;
  right: 20px;
  padding: 5px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, .7);
  cursor: pointer;
}
.uk-offcanvas-close:hover,
.uk-offcanvas-close:focus { color: #fff; outline: none; }

/* ── Active ────────────────────────────────────────────────────────────── */
/* .uk-active is a STATE MARKER, not a look. In UIkit its appearance is defined by
   each component, which is why it appeared in 54 rules there. Every meaning it has
   here is already expressed above, scoped to its component. Defining a standalone
   .uk-active rule would invent a style UIkit never had — so there isn't one. */

/* ── Accessibility ─────────────────────────────────────────────────────── */
/* The rules above remove the UA focus ring on :focus. Restore a visible one for
   keyboard users, which the estate needs and which uikit.min.css does not provide
   at this scope. */
.uk-logo:focus-visible,
.uk-navbar-toggle:focus-visible,
.uk-offcanvas-close:focus-visible,
.uk-navbar-nav > li > a:focus-visible,
.uk-nav-default > li > a:focus-visible {
  outline: 2px solid var(--brand-primary, #118efa);
  outline-offset: 2px;
}

/* ── Responsive width variants, and uk-section-large ───────────────────────
   ADDED 2026-08-30. The 2026-08-19 audit that produced "22 classes" counted
   UNSUFFIXED names, so it scored `uk-width-1-5@m` as covered by `.uk-width-1-5`.
   It is not: the `@` needs escaping as `\@`, and without the rule the markup fell
   through to `.uk-width-1-1` (100%) at every viewport. Every card grid on the site
   stacked full-width — /pages/difference, eight /products/* pages, and section
   padding on /pages/privacy + /pages/terms.

   Re-audited 2026-08-30 across all 37 live pages (sitemap: pages, products,
   collections, home). These four classes are the complete set that is used and
   undefined — nothing speculative added, per this file's own rule:
     uk-width-1-3@m     8x   eight /products/* pages
     uk-width-expand@m  8x   the same eight
     uk-width-1-5@m     5x   /pages/difference
     uk-section-large   2x   /pages/privacy, /pages/terms

   Geometry read out of vendor/uikit-3.21.13/dist/css/uikit.min.css, not eyeballed,
   per the header. That is why 1-3 is `calc(100% / 3)` and not the 33.333% used by
   the unsuffixed rule above, why expand carries `min-width:1px`, and why the
   fixed-width classes reset `flex:initial` — UIkit does that so a width cannot be
   overridden by an expand class inherited from a smaller breakpoint. `box-sizing`
   is this shim's own convention, since it has no bare `*` selector to set it.

   Appended at the END on purpose: these share specificity (0,1,0) with
   .uk-width-1-1, and a media query adds none, so source order is what makes them
   win. Carries no colour, type or radius — geometry only — so nothing here
   competes with the /brand/<slug>/theme.css token layer. */

@media (min-width: 960px) {
  .uk-width-1-3\@m,
  .uk-width-1-5\@m   { flex: initial; box-sizing: border-box; }
  .uk-width-1-3\@m   { width: calc(100% / 3); }
  .uk-width-1-5\@m   { width: 20%; }
  .uk-width-expand\@m { flex: 1; min-width: 1px; box-sizing: border-box; }
}

.uk-section-large { padding-top: 70px; padding-bottom: 70px; }
@media (min-width: 960px) {
  .uk-section-large { padding-top: 140px; padding-bottom: 140px; }
}