*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* html bg duplicates body bg so iOS rubber-band / overscroll shows the theme
   colour instead of the UA default white. Essential for premium feel under
   viewport-fit=cover where the safe-area gutters are visible. color-scheme
   tells the UA how to render native controls (scrollbars, form widgets) and
   — critically on iOS Safari — gives the address-bar a hint to tint itself
   in sync with the page when meta[theme-color] doesn't re-read dynamically. */
html { background: var(--bg); color-scheme: light; overflow-x: clip; }
html[data-theme="dark"] { color-scheme: dark; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }

.mono { font-family: var(--font-mono); }

.xf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent-2);
}

body::before {
  content: "";
  position: fixed;
  inset: -20vh -20vw;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 80% -10%, var(--ambient-1), transparent 60%),
    radial-gradient(50vw 40vh at -10% 30%, var(--ambient-2), transparent 60%);
  filter: blur(10px);
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; }
@media (hover: hover) {
  *::-webkit-scrollbar-thumb:hover { background: var(--line); }
}

/* Toast — transient feedback pinned bottom-right. Used by add-to-cart,
   can be reused by future flows (favorites, compare, etc.). */
.xf-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-card);
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  max-width: 360px;
}
.xf-toast.is-shown { opacity: 1; transform: translateY(0); }
.xf-toast--error {
  background: oklch(0.32 0.08 25);
  color: #fff;
  border-color: transparent;
}