:root {
  /* ── EVOLOXX Design Tokens (auto-generated from Supabase) ── */
  --evoloxx-primary: #efd2a7;
  --evoloxx-primary-rgb: 239,210,167;
  --evoloxx-primary-hover: #d4b88a;
  --evoloxx-bg: #ffffff;
  --evoloxx-bg-warm: #FAFAF9;
  --evoloxx-fg: #2D2926;
  --evoloxx-fg-rgb: 45,41,38;
  --evoloxx-fg-light: #6B635D;
  --evoloxx-dark: #1A1614;
  --evoloxx-accent: #efd2a7;
  --evoloxx-accent2: #2D2926;
  --evoloxx-border: #E8E6E3;
  --evoloxx-shadow: #2D2926;
  --evoloxx-footer: #1A1614;
  --evoloxx-header: #2D2926;
  --evoloxx-icon-color: #505050;
  --evoloxx-font-heading: 'Playfair Display', Georgia, serif;
  --evoloxx-font-body: 'Montserrat', sans-serif;
  --evoloxx-font-heading-weight: 700;
  --evoloxx-font-body-weight: 400;
  --evoloxx-font-body-size: 17px;
  --evoloxx-btn-radius: 40px;
  --evoloxx-card-radius: 12px;
  --evoloxx-page-width: 1400px;
}

/* ── Override Shopify theme variables ── */
:root, .color-scheme-1 {
  --color-background: 255,255,255;
  --color-foreground: 45,41,38;
  --color-button: 239,210,167;
  --color-button-text: 45,41,38;
  --color-secondary-button-text: 45,41,38;
  --color-link: 45,41,38;
  --color-badge-foreground: 45,41,38;
  --color-badge-border: 45,41,38;
  --font-heading-family: 'Playfair Display', Georgia, serif;
  --font-heading-weight: 700;
}
.color-scheme-2 {
  --color-background: 255,255,255;
  --color-foreground: 45,41,38;
  --color-button: 239,210,167;
  --color-button-text: 45,41,38;
  --color-secondary-button-text: 45,41,38;
  --color-link: 45,41,38;
}
.color-scheme-3 {
  --color-background: 45,41,38;
  --gradient-background: #2D2926;
  --color-foreground: 255,255,255;
  --color-button: 239,210,167;
  --color-button-text: 45,41,38;
  --color-secondary-button-text: 239,210,167;
  --color-link: 239,210,167;
  --color-badge-foreground: 255,255,255;
  --color-badge-border: 255,255,255;
}
.color-scheme-4 {
  --color-background: 26,22,20;
  --gradient-background: #1A1614;
  --color-foreground: 255,255,255;
  --color-button: 239,210,167;
  --color-button-text: 26,22,20;
  --color-secondary-button-text: 239,210,167;
  --color-link: 239,210,167;
}
.color-scheme-5 {
  --color-background: 239,210,167;
  --gradient-background: #efd2a7;
  --color-foreground: 45,41,38;
  --color-button: 45,41,38;
  --color-button-text: 255,255,255;
  --color-secondary-button-text: 45,41,38;
  --color-link: 45,41,38;
}

/* ── Font & size overrides ── */
h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5 {
  font-family: 'Playfair Display', Georgia, serif !important;
}

body, .rte, p, li, td, th, label, input, select, textarea, .product__description {
  font-size: 19px !important;
  line-height: 1.65 !important;
}
h1, .h1 { font-size: 3.2rem !important; }
h2, .h2 { font-size: 2.6rem !important; }
h3, .h3 { font-size: 1.9rem !important; }
h4, .h4 { font-size: 1.5rem !important; }

.caption, .caption-large, .caption-with-letter-spacing {
  font-size: 15px !important;
}

@media screen and (max-width: 749px) {
  body, .rte, p, li, td, th, label, input, select, textarea, .product__description {
    font-size: 17px !important;
  }
  h1, .h1 { font-size: 2.6rem !important; }
  h2, .h2 { font-size: 2.1rem !important; }
  h3, .h3 { font-size: 1.6rem !important; }
}

/* ═══════ EVOLOXX COMPONENT CLASSES ═══════
   ALL font sizes & spacing in one place. Edit here to change site-wide.
   PREMIUM SPACING: generous whitespace between all sections.
*/

/* ── Premium whitespace ──
   REMOVED global section padding override - it was breaking
   USP strip, marquee, and other sections with specific padding.
   Each section controls its own padding via inline styles.
*/

/* ── Scroll reveal animation ── */
.cx-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cx-reveal.cx-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Section headings – large, airy */
.cx-section-heading {
  font-family: var(--evoloxx-font-heading) !important;
  font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
  color: var(--evoloxx-fg) !important;
  margin: 0 0 20px !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em;
}
.cx-section-sub {
  font-family: var(--evoloxx-font-body) !important;
  font-size: 1.25rem !important;
  color: #909090 !important;
  max-width: 560px;
  margin: 0 auto !important;
  line-height: 1.7 !important;
}

/* Tags / labels */
.cx-tag {
  font-family: var(--evoloxx-font-body) !important;
  font-size: 0.82rem !important;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--evoloxx-primary) !important;
  margin-bottom: 10px;
  font-weight: 600;
}

/* Cards – hover with color flash */
.cx-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.cx-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.1) !important;
}
.cx-card-title {
  font-family: var(--evoloxx-font-heading) !important;
  font-size: 1.5rem !important;
  color: var(--evoloxx-fg) !important;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.cx-card-sub {
  font-family: var(--evoloxx-font-body) !important;
  font-size: 1.05rem !important;
  color: #909090 !important;
  line-height: 1.55;
}

/* Steps */
.cx-step-circle {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--evoloxx-primary);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cx-step-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(239,187,165,0.4);
}
.cx-step-title {
  font-family: var(--evoloxx-font-heading) !important;
  font-size: 1.5rem !important;
  color: var(--evoloxx-fg) !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.01em;
}
.cx-step-text {
  font-family: var(--evoloxx-font-body) !important;
  font-size: 1.1rem !important;
  color: #909090 !important;
  line-height: 1.6;
}

/* Stats – large with subtle animation */
.cx-stat {
  font-family: var(--evoloxx-font-heading) !important;
  font-size: 4rem !important;
  color: var(--evoloxx-primary) !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em;
}
.cx-stat-label {
  font-family: var(--evoloxx-font-body) !important;
  font-size: 1.05rem !important;
  color: rgba(255,255,255,0.6) !important;
  margin-top: 8px;
  letter-spacing: 0.5px;
}

/* USP strip */
.cx-usp-title {
  font-family: var(--evoloxx-font-body) !important;
  font-size: 1.1rem !important;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 6px;
}
.cx-usp-sub {
  font-family: var(--evoloxx-font-body) !important;
  font-size: 0.92rem !important;
  color: rgba(255,255,255,0.55);
  line-height: 1.45;
}

/* CTA */
.cx-cta-heading {
  font-family: var(--evoloxx-font-heading) !important;
  font-size: clamp(2.6rem, 5vw, 4rem) !important;
  color: #fff !important;
  font-weight: 400 !important;
  margin: 0 0 20px !important;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.cx-cta-sub {
  font-family: var(--evoloxx-font-body) !important;
  font-size: 1.2rem !important;
  color: rgba(255,255,255,0.55) !important;
  margin: 0 0 44px !important;
  line-height: 1.6;
}
.cx-cta-btn {
  display: inline-block;
  padding: 20px 64px;
  background: var(--evoloxx-primary);
  color: var(--evoloxx-fg);
  text-decoration: none;
  border-radius: var(--evoloxx-btn-radius);
  font-family: var(--evoloxx-font-body) !important;
  font-size: 1.15rem !important;
  font-weight: 600;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  letter-spacing: 0.5px;
}
.cx-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(239,187,165,0.4);
}

/* Buttons */
.cx-btn {
  font-family: var(--evoloxx-font-body) !important;
  font-size: 1.1rem !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cx-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(239,187,165,0.4);
}

/* ── Parallax images ── */
.cx-parallax-img {
  transition: transform 0.15s linear;
  will-change: transform;
}

/* ═══════ RESPONSIVE ═══════ */
@media screen and (max-width: 749px) {
  .cx-section-heading { font-size: clamp(1.8rem, 6vw, 2.4rem) !important; }
  .cx-section-sub { font-size: 1.05rem !important; }
  .cx-card-title { font-size: 1.3rem !important; }
  .cx-card-sub { font-size: 0.95rem !important; }
  .cx-step-title { font-size: 1.3rem !important; }
  .cx-stat { font-size: 2.8rem !important; }
  .cx-usp-title { font-size: 1rem !important; }
  .cx-usp-sub { font-size: 0.85rem !important; }
  .cx-cta-heading { font-size: clamp(2rem, 6vw, 2.8rem) !important; }
}

/* ── Header: white background ── */
.section-header,
.header-wrapper {
  background-color: #ffffff !important;
  --color-foreground: 45,41,38;
}
.section-header .header__heading-link,
.section-header .header__icon,
.section-header a {
  color: #2D2926 !important;
}

/* ── Footer: Black ── */
.section-footer,
footer,
.footer {
  background-color: #1A1614 !important;
  --color-foreground: 255,255,255;
}
.footer a, .footer .footer-block__heading {
  color: #fff !important;
}