/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
:root {
  --c-ink-900: #1a1a1a;
  --c-ink-700: #3d3d3d;
  --c-ink-500: #6b6b6b;
  --c-ink-300: #b8b8b8;
  --c-rule: #e4e4e4;
  --c-surface: #ffffff;
  --c-surface-2: #f6f6f6;
  --c-surface-3: #ececec;
  --c-utility-bar: #2a2a2a;
  --c-primary: oklch(0.58 0.2 28);
  --c-primary-hover: oklch(0.52 0.2 28);
  --c-primary-ink: #ffffff;
  --c-link: oklch(0.5 0.13 245);
  --c-link-hover: oklch(0.42 0.13 245);
  --c-deal-text: var(--c-primary);
  --c-success: #237a2f;
  --c-warn-bg: oklch(0.96 0.05 90);
  --c-pay-alt: oklch(0.78 0.12 85);
  --c-promo-blue: oklch(0.45 0.18 255);
  --f-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --fz-xs: 12px;
  --fz-sm: 13px;
  --fz-base: 14px;
  --fz-md: 15px;
  --fz-lg: 17px;
  --fz-xl: 20px;
  --fz-2xl: 24px;
  --fz-3xl: 30px;
  --fz-4xl: 40px;
  --fz-5xl: 56px;
  --fz-6xl: 76px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-base: 1.45;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --sh-2: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --sh-3: 0 8px 24px rgba(0, 0, 0, 0.1);
  --container: 1280px;
  --gutter: 24px;

  /* Responsive breakpoint scale - single source of truth.
     Mirrors design/theme/theme.ts. Mobile-first: author bare/mobile
     styles, add desktop at min-width. Canonical @media values:
     480 / 768 / 1024 / 1280 (md=768 is the mobile<->desktop switch).
     CSS does not allow var() inside @media conditions, so the literal
     px values are used in media queries; these tokens document the
     scale and are usable in width/max-width. Enforced by
     scripts/check-breakpoints.mjs. */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  --color-brand: var(--c-primary);
  --color-brand-hover: var(--c-primary-hover);
  --color-brand-active: var(--c-primary-hover);
  --color-accent: #ee9b00;
  --color-accent-soft: #fff3d6;
  --color-sale: #ae2012;
  --color-text: var(--c-ink-900);
  --color-text-muted: var(--c-ink-500);
  --color-border: var(--c-rule);
  --color-surface: var(--c-surface);
  --color-surface-alt: var(--c-surface-2);
  --color-surface-strong: var(--c-surface-3);
  --color-success: var(--c-success);
  --color-warning: #b7791f;
  --color-error: #c53030;
  --color-info: var(--c-link);
  --color-focus: var(--c-primary);
  --font-sans: var(--f-sans);
  --text-xs: var(--fz-xs);
  --text-sm: var(--fz-base);
  --text-md: var(--fz-lg);
  --text-lg: var(--fz-xl);
  --text-xl: var(--fz-2xl);
  --text-2xl: var(--fz-3xl);
  --font-normal: var(--fw-regular);
  --font-medium: var(--fw-medium);
  --font-semibold: var(--fw-bold);
  --font-bold: var(--fw-bold);
  --container-max: var(--container);
  --content-max: var(--container);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --shadow-card: 0 1px 3px rgba(31, 41, 51, 0.12);
  --shadow-popover: 0 8px 24px rgba(31, 41, 51, 0.18);
}

/*
 * Dark mode tokens.
 *
 * Two activation paths share the same variable block:
 *   1. Explicit override - [data-theme="dark"] on <html> set by the
 *      shop ThemeToggle (and by shop/theme/ShopThemeSync on first paint
 *      from localStorage.theme === "dark").
 *   2. OS preference - @media (prefers-color-scheme: dark) for users
 *      who have not made an explicit choice yet. The :not selector
 *      lets [data-theme="light"] keep the light palette on a dark-OS
 *      machine when the user explicitly opted in.
 *
 * The media query is the reason the root layout no longer emits an
 * inline <script> to bootstrap the theme: the browser applies it
 * before the first paint and before any React code runs.
 */
[data-theme="dark"] {
  --c-ink-900: #f0f0f0;
  --c-ink-700: #c8c8c8;
  --c-ink-500: #8a8a8a;
  --c-ink-300: #454545;
  --c-rule: #2a2a2a;
  --c-surface: #111111;
  --c-surface-2: #191919;
  --c-surface-3: #212121;
  --c-utility-bar: #0a0a0a;
  --c-warn-bg: oklch(0.22 0.04 90);
  --c-link: #7cc7ff;
  --c-link-hover: #a8dcff;
  --c-deal-text: #ff8a80;
  --c-success: #7ed688;

  --color-accent-soft: #3a2800;
  --color-warning: #d4a254;
  --color-error: #e06060;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-ink-900: #f0f0f0;
    --c-ink-700: #c8c8c8;
    --c-ink-500: #8a8a8a;
    --c-ink-300: #454545;
    --c-rule: #2a2a2a;
    --c-surface: #111111;
    --c-surface-2: #191919;
    --c-surface-3: #212121;
    --c-utility-bar: #0a0a0a;
    --c-warn-bg: oklch(0.22 0.04 90);
    --c-link: #7cc7ff;
    --c-link-hover: #a8dcff;
    --c-deal-text: #ff8a80;
    --c-success: #7ed688;

    --color-accent-soft: #3a2800;
    --color-warning: #d4a254;
    --color-error: #e06060;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.7);
  }
}

* {
  box-sizing: border-box;
}

/* Media and tables never exceed their container - the second most
   common source of horizontal overflow on small viewports. */
img,
video,
svg,
canvas,
table {
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* Drive native controls, scrollbars, and the default canvas from the active
   theme. `light dark` follows the OS preference (matching the prefers-color-scheme
   rules above); the [data-theme] overrides force it when the user toggles. */
:root {
  color-scheme: light dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

html {
  background: var(--c-surface);
  /* The condensing shop header changes its in-flow height on scroll. With
     scroll anchoring on (the default), the browser compensates by shifting
     scrollY, which re-crosses the condense threshold and makes the header and
     pinned subcategory ring tremble. Disabling anchoring lets the condense
     animate cleanly without the scroll position fighting it. */
  overflow-anchor: none;
}

body {
  margin: 0;
  color: var(--c-ink-900);
  background: var(--c-surface);
  font-family: var(--f-sans);
  font-size: var(--fz-base);
  line-height: var(--lh-base);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  /* Long unbreakable strings (emails, order ids, urls) wrap instead of
     pushing the layout wider than a 320px screen. break-word only
     breaks when a word truly cannot fit, so normal text is unaffected. */
  overflow-wrap: break-word;
  /* Disable scroll anchoring here too - see the html rule. overflow-anchor is
     not inherited, and the anchor-node candidates live in body's subtree, so
     setting it only on html does not stop the condense-header tremble. */
  overflow-anchor: none;
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

a {
  color: var(--c-link);
  text-decoration: none;
}

a:hover {
  color: var(--c-link-hover);
}

.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;
}