:root {
  --color-ivory: #fbfafd;
  --color-surface: #ffffff;
  --color-forest: #241934;
  --color-forest-deep: #160e25;
  --color-olive: #8f71b5;
  --color-green-bright: #9c75cf;
  --color-sand: #a282c7;
  --color-stone: #9f95aa;
  --color-line: #e2dce9;
  --color-ink: #181520;
  --color-muted: #6b6478;
  --font-display: "Besley", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;
  --page-max: 1440px;
  --content-max: 1280px;
  --reading-max: 720px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-slow: 420ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Product detail anti-FOUC.
   The legacy markup is the source used to build the redesigned product view.
   Keep only that main area out of view until interactions.js finishes the
   transformation, so a reload never exposes the old product layout. */
html body.single-product:not(.sunday-layout-ready) main#tbp_content {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: sunday-product-layout-failsafe .001s linear 4s forwards !important;
}

html body.single-product.sunday-layout-ready main#tbp_content {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  animation: sunday-product-layout-reveal .16s ease-out both !important;
}

@keyframes sunday-product-layout-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sunday-product-layout-failsafe {
  to {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body.single-product.sunday-layout-ready main#tbp_content {
    animation: none !important;
  }
}