.elementor-kit-5{--e-global-color-primary:#F8F5F0;--e-global-color-secondary:#EFE7DD;--e-global-color-text:#2E2E2E;--e-global-color-accent:#6E6A65;--e-global-color-ef9d4a7:#C6A87D;--e-global-color-e23026c:#5C5148;--e-global-typography-primary-font-family:"Playfair Display SC";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Manrope";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ===== Avelier — Design Tokens ===== */
:root {
  --ivory: #F8F5F0;
  --beige: #EFE7DD;
  --champagne-gold: #C6A87D;
  --deep-taupe: #5C5148;
  --deep-taupe-soft: #6E6A65;
  --deep-taupe-15: rgba(92,81,72,0.15);
  --deep-taupe-20: rgba(92,81,72,0.20);
  --deep-taupe-30: rgba(92,81,72,0.30);
  --charcoal: #2E2E2E;
}

/* ===== FAIL-SAFE DEFAULTS =====
   Everything is fully visible by default. Hidden/animated states
   only activate once body.js-anim is confirmed present (added by
   script at runtime). If the script never runs for any reason,
   the page still shows all content normally — just without the
   scroll animation. Never depend on JS for content visibility. */

/* ===== Base scroll-reveal system ===== */
body.js-anim .fade-in-up {
  opacity: 1; 
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.25,0.8,0.25,1), transform 0.8s cubic-bezier(0.25,0.8,0.25,1);
  will-change: opacity, transform;
}
body.js-anim .fade-in-up.is-visible { opacity: 1; transform: translateY(0); }

body.js-anim .delay-1 { transition-delay: 0.1s; }
body.js-anim .delay-2 { transition-delay: 0.25s; }
body.js-anim .delay-3 { transition-delay: 0.4s; }
body.js-anim .delay-4 { transition-delay: 0.55s; }
body.js-anim .delay-5 { transition-delay: 0.7s; }
body.js-anim .delay-6 { transition-delay: 0.85s; }

/* Nav: simple on-load fade, no scroll trigger */
body.js-anim .nav-fade-in { animation: navFadeDown 0.8s cubic-bezier(0.25,0.8,0.25,1) both; }
@keyframes navFadeDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Hero stats ===== */
body.js-anim .hero-stats .stat-item { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
body.js-anim .hero-stats.is-visible .stat-item { opacity: 1; transform: translateY(0); }
body.js-anim .hero-stats.is-visible .stat-item:nth-child(1) { transition-delay: 0.05s; }
body.js-anim .hero-stats.is-visible .stat-item:nth-child(2) { transition-delay: 0.15s; }
body.js-anim .hero-stats.is-visible .stat-item:nth-child(3) { transition-delay: 0.25s; }
body.js-anim .hero-stats.is-visible .stat-item:nth-child(4) { transition-delay: 0.35s; }

/* ===== Why Choose Avelier — ghost numbers + stagger ===== */
body.js-anim .why-choose-grid .feature-item:nth-child(1) { transition-delay: 0s; }
body.js-anim .why-choose-grid .feature-item:nth-child(2) { transition-delay: 0.12s; }
body.js-anim .why-choose-grid .feature-item:nth-child(3) { transition-delay: 0.24s; }
body.js-anim .why-choose-grid .feature-item:nth-child(4) { transition-delay: 0.36s; }
body.js-anim .feature-item .index-number {
  transition: opacity 0.8s ease, transform 0.8s ease;
  opacity: 0;
  transform: scale(0.85);
}
body.js-anim .feature-item.is-visible .index-number { opacity: 0.35; transform: scale(1); }
.feature-item .index-number { opacity: 0.35; } /* non-JS default: same as final state */

/* ===== Science-Inspired grid — stagger ===== */
body.js-anim .science-grid .science-item:nth-child(1) { transition-delay: 0s; }
body.js-anim .science-grid .science-item:nth-child(2) { transition-delay: 0.12s; }
body.js-anim .science-grid .science-item:nth-child(3) { transition-delay: 0.24s; }
body.js-anim .science-grid .science-item:nth-child(4) { transition-delay: 0.36s; }

/* ===== Shop by Category — simple fade (safer than clip-path) ===== */
body.js-anim .category-card {
  opacity: 1;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.25,0.8,0.25,1), transform 0.8s cubic-bezier(0.25,0.8,0.25,1);
}
body.js-anim .category-card.is-visible { opacity: 1; transform: translateY(0); }
body.js-anim .category-card:nth-child(1) { transition-delay: 0s; }
body.js-anim .category-card:nth-child(2) { transition-delay: 0.1s; }
body.js-anim .category-card:nth-child(3) { transition-delay: 0.2s; }
body.js-anim .category-card:nth-child(4) { transition-delay: 0.3s; }
body.js-anim .category-card:nth-child(5) { transition-delay: 0.4s; }
.category-card img { transition: transform 0.6s cubic-bezier(0.25,0.8,0.25,1); }
.category-card:hover img { transform: scale(1.04); }

/* ===== Best Sellers ===== */
body.js-anim .product-card.fade-in-up { transition-delay: 0.1s; }
body.js-anim .coming-soon-card.fade-in-up { filter: grayscale(35%); opacity: 1; }
.coming-soon-card { filter: grayscale(35%); } /* non-JS default still applies the grayscale look */
body.js-anim .coming-soon-card.is-visible { opacity: 0.75; }
body.js-anim .coming-soon-card:nth-child(2) { transition-delay: 0.2s; }
body.js-anim .coming-soon-card:nth-child(3) { transition-delay: 0.3s; }
body.js-anim .coming-soon-card:nth-child(4) { transition-delay: 0.4s; }
.notify-link { animation: pulseSoft 2.4s ease-in-out infinite; }
@keyframes pulseSoft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ===== Shop by Skin Concern — scale-pop tags ===== */
body.js-anim .skin-concern-tag.fade-in-up {
  transform: scale(0.9) translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
body.js-anim .skin-concern-tag.is-visible { opacity: 1; transform: scale(1); }
body.js-anim .concern-tags .skin-concern-tag:nth-child(1) { transition-delay: 0s; }
body.js-anim .concern-tags .skin-concern-tag:nth-child(2) { transition-delay: 0.06s; }
body.js-anim .concern-tags .skin-concern-tag:nth-child(3) { transition-delay: 0.12s; }
body.js-anim .concern-tags .skin-concern-tag:nth-child(4) { transition-delay: 0.18s; }
body.js-anim .concern-tags .skin-concern-tag:nth-child(5) { transition-delay: 0.24s; }
body.js-anim .concern-tags .skin-concern-tag:nth-child(6) { transition-delay: 0.3s; }

/* ===== Ingredient Spotlight — slide-in ===== */
body.js-anim .ingredient-item { opacity: 1; transform: translateX(-24px); transition: opacity 0.9s ease, transform 0.9s ease; }
body.js-anim .ingredient-item.is-visible { opacity: 1; transform: translateX(0); }
body.js-anim .ingredient-grid .ingredient-item:nth-child(1) { transition-delay: 0s; }
body.js-anim .ingredient-grid .ingredient-item:nth-child(2) { transition-delay: 0.15s; }
body.js-anim .ingredient-grid .ingredient-item:nth-child(3) { transition-delay: 0.3s; }
.ingredient-fig-label {
  font-style: italic;
  color: var(--champagne-gold);
  letter-spacing: 0.05em;
}

/* ===== Testimonials — quote mark pop ===== */
.testimonial { position: relative; }
.testimonial::before {
  content: '\201C';
  font-family: 'Cormorant Garamond', serif;
  font-size: 80px;
  color: var(--champagne-gold);
  opacity: 0.3;
  position: absolute;
  top: -20px; left: -10px;
}
body.js-anim .testimonial::before {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
body.js-anim .testimonial.is-visible::before { opacity: 0.3; transform: scale(1); }
body.js-anim .testimonial-grid .testimonial:nth-child(1) { transition-delay: 0s; }
body.js-anim .testimonial-grid .testimonial:nth-child(2) { transition-delay: 0.15s; }
body.js-anim .testimonial-grid .testimonial:nth-child(3) { transition-delay: 0.3s; }

/* ===== Daily Routine — drawing line + step pop ===== */
.routine-steps { position: relative; }
body.js-anim .routine-steps::before {
  content: '';
  position: absolute; top: 12px; left: 5%; right: 5%;
  height: 1px;
  background: var(--deep-taupe-20);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.65,0,0.35,1);
}
body.js-anim .routine-steps.is-visible::before { transform: scaleX(1); }
.routine-step .step-number {
  width: 24px; height: 24px;
  border: 1px solid var(--champagne-gold);
  border-radius: 50%;
  background: var(--ivory);
}
body.js-anim .routine-step .step-number {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
body.js-anim .routine-steps.is-visible .routine-step:nth-child(1) .step-number { opacity: 1; transform: scale(1); transition-delay: 0s; }
body.js-anim .routine-steps.is-visible .routine-step:nth-child(2) .step-number { opacity: 1; transform: scale(1); transition-delay: 0.15s; }
body.js-anim .routine-steps.is-visible .routine-step:nth-child(3) .step-number { opacity: 1; transform: scale(1); transition-delay: 0.3s; }
body.js-anim .routine-steps.is-visible .routine-step:nth-child(4) .step-number { opacity: 1; transform: scale(1); transition-delay: 0.45s; }
body.js-anim .routine-steps.is-visible .routine-step:nth-child(5) .step-number { opacity: 1; transform: scale(1); transition-delay: 0.6s; }

/* ===== Join Our Community — stat stagger ===== */
body.js-anim .join-stats .stat-item { opacity: 1; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
body.js-anim .join-stats.is-visible .stat-item { opacity: 1; transform: translateY(0); }
body.js-anim .join-stats.is-visible .stat-item:nth-child(1) { transition-delay: 0s; }
body.js-anim .join-stats.is-visible .stat-item:nth-child(2) { transition-delay: 0.12s; }
body.js-anim .join-stats.is-visible .stat-item:nth-child(3) { transition-delay: 0.24s; }

/* ===== Our Story — restrained fade, image slight desaturation ===== */
.our-story-image img { filter: sepia(5%) saturate(90%); }/* End custom CSS */