@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Jost:ital,wght@0,100..700;1,100..700&family=Playfair+Display:ital,wght@0,400..700;1,400..700&display=swap');

:root {
  /* ----- Core brand ----- */
  --theme-primary: var(--color-primary, #4a5c47);
  --theme-secondary: var(--color-secondary, #2a2118);
  --theme-accent: var(--color-accent, #b8945a);
  --theme-accent-dark: var(--color-accentDark, #5b7057);
  --theme-accent-soft: var(--color-accentSoft, #d4b078);

  /* ----- Surfaces ----- */
  --theme-bg: var(--color-background, #f8f4ee);
  --theme-surface-card: var(--color-surfaceCard, #f2ede3);
  --theme-cream: var(--color-cream, #e8ddd0);

  /* ----- Text ----- */
  --theme-text: var(--color-secondary, #2a2118);
  --theme-text-secondary: var(--color-textSecondary, #6b5f54);
  --theme-muted: var(--color-muted, #9b8e7a);
  --theme-text-inverse: var(--color-footerText, #f8f4ee);

  /* ----- Borders ----- */
  --theme-border: var(--color-border, #c4b8a0);

  /*
   * Brand statement / philosophy band — matches reference art (#C4B8A0 quote, beige lines).
   * Driven by colors.* in theme settings → --color-* (see crownstore/settings/defaults.json + schema.json).
   */
  --theme-statement-band-bg: var(--color-statementBandBg, var(--theme-secondary));
  --theme-statement-quote: var(--color-statementQuote, var(--theme-border));
  --theme-statement-quote-watermark: var(
    --color-statementQuoteWatermark,
    color-mix(in srgb, var(--theme-border) 5.5%, transparent)
  );
  --theme-statement-line-soft: var(
    --color-statementLineSoft,
    color-mix(in srgb, var(--theme-border) 12%, transparent)
  );
  --theme-statement-line-medium: var(
    --color-statementLineMedium,
    color-mix(in srgb, var(--theme-border) 38%, transparent)
  );
  --theme-statement-caption-muted: var(
    --color-statementCaptionMuted,
    color-mix(in srgb, var(--theme-text-inverse) 38%, transparent)
  );
  --theme-statement-stat-value: var(--color-statementStatValue, var(--theme-text-inverse));

  /*
   * Conscious luxury / “Why Crown Selections” grid (home).
   * Optional overrides via colors.difference* in theme settings.
   */
  --theme-difference-eyebrow: var(--color-differenceEyebrow, var(--theme-muted, #9b8e7a));

  /* ----- Footer ----- */
  --theme-footer-bg: var(--color-footerBg, #2a2118);
  --theme-footer-text: var(--color-footerText, #f8f4ee);
  --theme-footer-heading: var(--color-footerHeading, var(--theme-footer-text));
  --theme-footer-muted: var(--color-footerMuted, #c4b8a0);
  --theme-footer-link: var(--color-footerLink, var(--theme-footer-muted));
  --theme-footer-link-hover: var(--color-footerLinkHover, var(--theme-footer-text));
  --theme-footer-border: var(--color-footerBorder, color-mix(in srgb, var(--theme-footer-muted) 20%, transparent));
  --theme-footer-surface: var(--color-footerSurface, color-mix(in srgb, var(--theme-footer-text) 8%, transparent));
  --theme-footer-surface-hover: var(--color-footerSurfaceHover, color-mix(in srgb, var(--theme-footer-text) 16%, transparent));
  --theme-footer-social-icon: var(--color-footerSocialIcon, var(--theme-footer-link));
  --theme-footer-newsletter-input-bg: var(--color-footerNewsletterInputBg, var(--theme-footer-surface));
  --theme-footer-newsletter-input-text: var(--color-footerNewsletterInputText, var(--theme-footer-text));
  --theme-footer-newsletter-button-bg: var(--color-footerNewsletterButtonBg, var(--theme-accent));
  --theme-footer-newsletter-button-text: var(--color-footerNewsletterButtonText, var(--theme-text));

  /* ----- Header ----- */
  --theme-header-bg: var(--color-headerBg, var(--theme-bg));
  --theme-header-text: var(--color-headerText, var(--theme-text));
  --theme-header-icon: var(--color-headerIcon, var(--theme-text-secondary));
  --theme-header-icon-hover: var(--color-headerIconHover, var(--theme-text));
  --theme-header-border: var(--color-headerBorder, var(--theme-border));
  --theme-header-shadow: var(--layout-shadow, var(--theme-shadow));
  --theme-header-surface: var(--color-headerSurface, var(--theme-cream));
  --theme-header-badge-bg: var(--color-headerBadgeBg, var(--theme-primary));
  --theme-header-badge-text: var(--color-headerBadgeText, var(--theme-bg));

  --theme-menu-text: var(--color-menuText, var(--theme-text-secondary));
  --theme-menu-hover: var(--color-menuHover, var(--theme-text));
  --theme-menu-active: var(--color-menuActive, var(--theme-text));
  /* Wash behind primary nav links (dropdown / hamburger list); ~rgba(196,184,160,0.07) from --theme-border */
  --theme-menu-hover-bg: var(
    --color-menuHoverBg,
    color-mix(in srgb, var(--theme-border) 7%, transparent)
  );
  /* Icon / hamburger circular hover: cream #e8ddd0 (not `headerSurface` / #f2ede3) */
  --theme-header-icon-hover-bg: var(--color-headerIconHoverBg, var(--theme-cream));
  --theme-dropdown-bg: var(--color-dropdownBg, var(--theme-bg));
  --theme-dropdown-text: var(--color-dropdownText, var(--theme-text));
  --theme-dropdown-hover: var(--color-dropdownHover, var(--theme-accent));
  --theme-mobile-menu-bg: var(--color-mobileMenuBg, var(--theme-bg));
  --theme-mobile-menu-text: var(--color-mobileMenuText, var(--theme-text));
  --theme-mobile-menu-muted: var(--color-mobileMenuMuted, var(--theme-text-secondary));

  --theme-header-height: var(--layout-headerHeight, 52px);
  --theme-header-padding-inline: var(--layout-headerPaddingInline, 20px);

  /* ----- Layout ----- */
  --theme-container: var(--layout-containerWidth, 1340px);
  --theme-gutter: var(--layout-gutter, 48px);
  --theme-section-spacing: var(--layout-sectionSpacing, 140px);
  --theme-radius: var(--layout-radius, 10px);
  --theme-shadow: var(--layout-shadow, 0 2px 8px rgba(0, 0, 0, 0.06));
  --theme-hero-media-radius: var(--layout-heroImageRadius, 22px);

  /* ----- Typography ----- */
  --theme-font-family: var(--font-family, 'Jost'), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --theme-font-serif: var(--font-serif, 'Cormorant Garamond'), Georgia, serif;
  --theme-font-display: var(--font-display, 'Playfair Display'), Georgia, 'Times New Roman', serif;
  --theme-font-size: var(--font-size, 15px);

  /* ----- Motion (fixed tokens; not theme settings) ----- */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur: 380ms;
  --dur-slow: 680ms;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--theme-font-family);
  font-size: var(--theme-font-size);
  line-height: 1.7;
  color: var(--theme-text);
  background-color: var(--theme-bg, #f8f4ee) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

#main-content.site-main,
main.site-main {
  background-color: var(--theme-bg, #f8f4ee);
  min-height: 40vh;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

ul {
  list-style: none;
}

/* ─── Brand orientation scroll fade (brand-orientation.js) ─── */
@keyframes boScrollFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body[data-cs-storefront='1'] .values-strip.bo-scroll.bo-wait .value-cell {
  opacity: 0;
  transform: translateY(16px);
  animation: none;
}

body[data-cs-storefront='1'] .values-strip.bo-scroll.bo-run .value-cell {
  opacity: 0;
  transform: translateY(16px);
  animation: boScrollFade 1s var(--ease, cubic-bezier(0.25, 0.46, 0.45, 0.94)) forwards;
}

body[data-cs-storefront='1'] .values-strip.bo-scroll.bo-run .values-inner > .value-cell:nth-child(1),
body[data-cs-storefront='1'] .values-strip.bo-scroll.bo-run .value-cell:nth-child(1) {
  animation-delay: 0.2s;
}

body[data-cs-storefront='1'] .values-strip.bo-scroll.bo-run .values-inner > .value-cell:nth-child(2),
body[data-cs-storefront='1'] .values-strip.bo-scroll.bo-run .value-cell:nth-child(2) {
  animation-delay: 0.35s;
}

body[data-cs-storefront='1'] .values-strip.bo-scroll.bo-run .values-inner > .value-cell:nth-child(3),
body[data-cs-storefront='1'] .values-strip.bo-scroll.bo-run .value-cell:nth-child(3) {
  animation-delay: 0.5s;
}

body[data-cs-storefront='1'] .values-strip.bo-scroll.bo-run .values-inner > .value-cell:nth-child(4),
body[data-cs-storefront='1'] .values-strip.bo-scroll.bo-run .value-cell:nth-child(4) {
  animation-delay: 0.65s;
}

/* ─── Scroll reveal (components/js/animation.js + data-cs-scroll-reveal on section roots) ─── */
@keyframes csScrollRevealFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* brand-orientation: own .bo-scroll system — never global scroll-reveal */
[data-cs-scroll-reveal].values-strip.bo-scroll .reveal,
.values-strip.bo-scroll .reveal,
.values-strip[data-bo-scroll] .reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Hidden only after animation.js arms the section (storefront). Default: visible (editor). */
[data-cs-scroll-reveal].cs-scroll-reveal-armed:not(.cs-scroll-reveal--visible):not(.cs-scroll-reveal--editor-ready):not([data-cs-scroll-reveal-editor]):not(.bo-scroll):not([data-bo-scroll]) .reveal {
  opacity: 0;
  transform: translateY(20px);
  animation: none;
}

[data-cs-scroll-reveal].cs-scroll-reveal-armed.cs-scroll-reveal--visible:not(.cs-scroll-reveal--editor-ready):not([data-cs-scroll-reveal-editor]):not(.bo-scroll):not([data-bo-scroll]) .reveal {
  opacity: 0;
  transform: translateY(20px);
  animation: csScrollRevealFade 0.95s var(--ease, cubic-bezier(0.25, 0.46, 0.45, 0.94)) forwards;
}

[data-cs-scroll-reveal].cs-scroll-reveal-armed.cs-scroll-reveal--visible:not(.cs-scroll-reveal--editor-ready):not([data-cs-scroll-reveal-editor]) .reveal.reveal--delay-1 {
  animation-delay: 0.12s;
}

[data-cs-scroll-reveal].cs-scroll-reveal-armed.cs-scroll-reveal--visible:not(.cs-scroll-reveal--editor-ready):not([data-cs-scroll-reveal-editor]) .reveal.reveal--delay-2 {
  animation-delay: 0.24s;
}

[data-cs-scroll-reveal].cs-scroll-reveal-armed.cs-scroll-reveal--visible:not(.cs-scroll-reveal--editor-ready):not([data-cs-scroll-reveal-editor]) .reveal.reveal--delay-3 {
  animation-delay: 0.36s;
}

@media (prefers-reduced-motion: reduce) {
  [data-cs-scroll-reveal] .reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (scripting: none) {
  [data-cs-scroll-reveal] .reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Page builder — final visible state on section (no html ancestor required) */
[data-cs-scroll-reveal].cs-scroll-reveal--editor-ready .reveal,
[data-cs-scroll-reveal][data-cs-scroll-reveal-editor] .reveal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
}