/* Mint teal + white + wood grain — rgb(162 222 216) */

:root,
html[data-site-theme="white"] {
  color-scheme: light;
  --ds-font-display: "Avenir LT Std", sans-serif;
  --ds-font-body: "Avenir LT Std", sans-serif;
  --ds-font-nav: "Avenir LT Std", sans-serif;
  --ds-brand-green: #4a8f84;
  --ds-brand-green-rgb: 74, 143, 132;
  --ds-brand-orange: #5a9e94;
  --ds-brand-orange-rgb: 90, 158, 148;
  --mobile-bottom-nav-surface: #ffffff;
  --mobile-bottom-nav-plum: #4a8f84;
  --mobile-bottom-nav-rose: #a2ded8;
  --mobile-bottom-nav-theme: #4a8f84;
  --mobile-bottom-nav-active-bg: rgba(162, 222, 216, 0.35);
}

/* Global — white base with very subtle wood grain (not on chrome) */
html {
  font-family: var(--ds-font-body);
  font-synthesis: none;
}

body {
  font-family: var(--ds-font-body) !important;
  background-color: #ffffff;
  background-image: var(--ds-wood-grain);
  background-blend-mode: multiply;
}

.site-main {
  position: relative;
  z-index: 1;
  margin-top: 0;
  padding-top: 0;
}

#site-main.site-main,
#site-main.site-main > #app,
#site-main.site-main > #spa-home-prerender {
  margin-top: 0;
  padding-top: 0;
}

/* Hero / page panels — clean white */
.hero_sec.hero-split,
.hero-split__copy,
.hero-split--home.hero_sec.hero-split,
.hero-split--home .hero-split__copy {
  background: #ffffff !important;
  background-image: none !important;
}

.hero-split--home .hero-split__visual--mobile-static::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 72%,
    #ffffff 100%
  ) !important;
}

.hero-split__copy {
  border-right-color: rgba(var(--ds-wood-rgb, 184, 149, 106), 0.22) !important;
}

.hero-split--home .hero-split__copy {
  border-bottom-color: rgba(var(--ds-wood-rgb, 184, 149, 106), 0.18) !important;
}

.hero-headline-accent,
.hero-split--home .hero-headline-accent {
  color: var(--ds-brand-green, #4a8f84) !important;
}

.hero-slide-arrow:hover,
.hero-slide-arrow:focus-visible {
  background: var(--ds-accent, #a2ded8) !important;
  border-color: var(--ds-accent-deep, #5a9e94) !important;
  color: #fff !important;
}

.hero-slide-dot.is-active {
  background: var(--ds-brand-green, #4a8f84) !important;
}

/* Mobile bottom nav */
.mobile-bottom-nav__toolbar {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(162, 222, 216, 0.45) !important;
  border-radius: 1.25rem;
  box-shadow: 0 4px 20px rgba(74, 143, 132, 0.08) !important;
}

.mobile-bottom-nav__item.is-active .mobile-bottom-nav__icon,
.mobile-bottom-nav__item.is-active .mobile-bottom-nav__label {
  color: var(--ds-brand-green, #4a8f84) !important;
}

.mobile-bottom-nav__item.is-active::before {
  background: rgba(162, 222, 216, 0.45) !important;
}

/* Brand */
.site-brand--sidebar .site-brand__name {
  color: var(--ds-brand-green, #4a8f84) !important;
}

.site-brand--sidebar .site-brand__rule {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--ds-accent-500-rgb, 162, 222, 216), 0.65) 22%,
    rgba(var(--ds-wood-rgb, 184, 149, 106), 0.45) 78%,
    transparent
  ) !important;
}

.site-brand__name {
  background: linear-gradient(
    120deg,
    #c2ebe6,
    #a2ded8 45%,
    #b8956a 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

nav.navbar .site-brand--nav .site-brand__name,
nav.navbar .site-brand--nav .site-brand__name-brand,
nav.navbar .site-brand--nav .site-brand__name-suffix {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #1a1416 !important;
  -webkit-text-fill-color: #1a1416 !important;
}

nav.navbar .site-brand--nav .site-brand__tagline {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: rgba(26, 20, 22, 0.55) !important;
  -webkit-text-fill-color: rgba(26, 20, 22, 0.55) !important;
}

nav.navbar .site-brand--nav .site-brand__mark-img {
  width: 2.15rem !important;
  height: auto !important;
  object-fit: contain;
}

nav.navbar .site-brand--jffd .site-brand__mark-img {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain;
}

/* Cart / badges — teal accent */
.svc-cart-fab__count {
  background: var(--ds-brand-orange, #5a9e94) !important;
  color: #fff !important;
  border-color: #fff !important;
}

.svc-cart-panel .svc-proceed-btn.is-ready {
  background: var(--ds-brand-orange, #5a9e94) !important;
  border-color: var(--ds-brand-orange, #5a9e94) !important;
  color: #fff !important;
}

.global-wa-fab-btn__ring:not([hidden]) {
  background: linear-gradient(135deg, #a2ded8, #5a9e94) !important;
}

/* Services page */
.svc-page {
  --svc-ivory: #ffffff;
  --svc-gold: #5a9e94;
  --svc-gold-hover: #6bb8ad;
  --svc-gold-deep: #4a8f84;
  --svc-gold-soft: rgba(162, 222, 216, 0.35);
  --svc-gold-border: rgba(90, 158, 148, 0.4);
  --svc-line: rgba(42, 36, 32, 0.08);
  background: #ffffff;
  background-image: none !important;
}

.svc-category-pill,
.svc-category-tab {
  color: rgba(42, 36, 32, 0.55);
}

.svc-category-tab__icon {
  width: 2.85rem;
  height: 3.15rem;
  border-radius: 1rem;
  background: #ffffff;
  background-image: none;
  border: 1px solid rgba(162, 222, 216, 0.45);
  color: var(--ds-accent, #a2ded8);
  opacity: 1;
  box-shadow: 0 2px 8px rgba(74, 143, 132, 0.06);
}

.svc-category-pill.is-active .svc-category-tab__icon,
.svc-category-tab.is-active .svc-category-tab__icon {
  color: var(--ds-brand-green, #4a8f84);
  background: #fff;
  border-color: rgba(var(--ds-accent-500-rgb, 162, 222, 216), 0.55);
  box-shadow: 0 4px 12px rgba(162, 222, 216, 0.25);
}

.svc-category-pill.is-active::after,
.svc-category-tab.is-active::after {
  background: var(--ds-brand-green, #4a8f84);
  height: 0.14rem;
  width: 1.4rem;
}

.svc-browse-item.svc-browse-item--grid {
  background: #ffffff;
  background-image: none;
  border: 1px solid rgba(162, 222, 216, 0.35);
  border-radius: 1rem;
  box-shadow: 0 4px 16px rgba(74, 143, 132, 0.06);
  transform: none !important;
}

.svc-browse-item.svc-browse-item--grid::before {
  display: none;
}

.svc-browse-item.svc-browse-item--grid:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(42, 36, 32, 0.09);
  border-color: rgba(var(--ds-accent-500-rgb, 162, 222, 216), 0.45);
}

.svc-browse-item.svc-browse-item--grid.is-added {
  border-color: var(--ds-brand-orange, #5a9e94);
  border-style: solid;
  box-shadow: 0 0 0 1px rgba(90, 158, 148, 0.25);
}

.svc-grid-card__media {
  border: none;
  border-radius: 0.75rem;
  background: #f5faf9;
}

.svc-grid-add,
.svc-grid-add.is-ready {
  background: var(--ds-brand-orange, #5a9e94) !important;
  border-color: var(--ds-brand-orange, #5a9e94) !important;
  color: #fff !important;
}

.svc-browse-scroll {
  background: transparent;
}

/* Hero typography */
.hero-lead,
.hero-split--home .hero-lead {
  color: var(--ds-wood-deep, #a67c52) !important;
}

.hero-kicker,
.hero-split--home .hero-kicker {
  color: var(--ds-brand-green, #4a8f84) !important;
}

/* Top nav — clean pill, no inner panel (legacy single-tier only) */
body:has(.hero-split) nav.navbar:not(.navbar--two-tier):not(.scrolled) .nav-item .nav-link:not(.top-nav-book-cta):not(.top-nav-social__link).active,
nav.navbar.navbar--top-float:not(.navbar--two-tier) .nav-link.active:not(.top-nav-book-cta) {
  background: transparent !important;
  color: var(--ds-brand-green, #4a8f84) !important;
  border-color: transparent !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(162, 222, 216, 0.95);
}

nav.navbar.navbar--top-float:not(.navbar--two-tier) {
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(162, 222, 216, 0.5) !important;
  box-shadow: 0 4px 24px rgba(74, 143, 132, 0.08) !important;
}

nav.navbar.navbar--top-float:not(.navbar--two-tier).scrolled {
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 6px 28px rgba(74, 143, 132, 0.1) !important;
  border-color: rgba(162, 222, 216, 0.55) !important;
}

nav.navbar.navbar--top-float .top-nav-menu,
nav.navbar.navbar--top-float .top-nav-links,
nav.navbar.navbar--top-float .top-nav-actions,
nav.navbar.navbar--top-float .navbar-topbar,
nav.navbar.navbar--top-float .navbar-top-float__inner {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

nav.navbar.navbar--top-float:not(.navbar--two-tier) .nav-book-btn,
nav.navbar.navbar--top-float:not(.navbar--two-tier) .top-nav-book-cta,
.top-nav-shell .top-nav-actions .nav-book-btn {
  background: linear-gradient(135deg, #7ec9bf, #5a9e94 55%, #4a8f84) !important;
  border-color: #5a9e94 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(74, 143, 132, 0.22) !important;
}

.top-nav-shell .top-nav-book-cta {
  background: var(--top-nav-brand-teal, #003b49) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: none !important;
}

nav.navbar.navbar--top-float:not(.navbar--two-tier) .nav-book-btn:hover,
nav.navbar.navbar--top-float:not(.navbar--two-tier) .top-nav-book-cta:hover,
.top-nav-shell .top-nav-actions .nav-book-btn:hover {
  background: linear-gradient(135deg, #7ec9bf, #5a9e94) !important;
  border-color: #5a9e94 !important;
}

.top-nav-shell .top-nav-book-cta:hover,
.top-nav-shell .top-nav-book-cta:focus-visible {
  background: var(--top-nav-brand-teal-hover, #002a33) !important;
  color: #fff !important;
}

.hero-btn--primary,
.hero-split--home .hero-btn--primary {
  background: linear-gradient(135deg, #6bb8ad, #4a8f84) !important;
  border-color: #4a8f84 !important;
  color: #fff !important;
  animation: none !important;
  box-shadow: 0 4px 16px rgba(74, 143, 132, 0.28) !important;
}

.hero-btn--primary:hover,
.hero-btn--primary:focus-visible,
.hero-split--home .hero-btn--primary:hover,
.hero-split--home .hero-btn--primary:focus-visible {
  background: linear-gradient(135deg, #7ec9bf, #5a9e94) !important;
  border-color: #5a9e94 !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(90, 158, 148, 0.32) !important;
}

.hero-btn--outline {
  border-color: rgba(var(--ds-wood-rgb, 184, 149, 106), 0.45) !important;
  background: rgba(255, 255, 255, 0.85) !important;
}

.hero-btn--outline:hover,
.hero-btn--outline:focus-visible {
  border-color: var(--ds-brand-green, #4a8f84) !important;
  color: var(--ds-brand-green, #4a8f84) !important;
  background: rgba(162, 222, 216, 0.2) !important;
}

/* Footer — warm wood base */
footer.footer.sf-ft {
  background: var(--ds-wood-panel-warm) !important;
  background-image: var(--ds-wood-grain), var(--ds-wood-panel-warm) !important;
  background-blend-mode: multiply, normal;
  border-top-color: rgba(var(--ds-wood-rgb, 184, 149, 106), 0.35) !important;
}

.sf-ft-local {
  background: linear-gradient(180deg, #ffffff 0%, #f5efe8 100%) !important;
}

/* Trust showcase — wood-framed panel */
.salon-trust-showcase__inner {
  background: #ffffff;
  background-image: none;
  border-radius: var(--ds-radius-lg, 18px);
  border: 1px solid rgba(162, 222, 216, 0.35);
}

/* —— JFFD main nav (wins over legacy style.css 14px / uppercase) —— */
.top-nav-shell nav.navbar.navbar--top-float.navbar--two-tier .navbar-nav > .nav-item {
  margin: 0 0.35rem;
}

.top-nav-shell nav.navbar.navbar--top-float.navbar--two-tier .navbar-nav > .nav-item > .nav-link:not(.top-nav-book-cta),
.top-nav-shell nav.navbar.navbar--top-float.navbar--two-tier .navbar-nav > .nav-item.nav-item--services > .nav-link--trigger,
.top-nav-shell nav.navbar.navbar--top-float.navbar--two-tier .nav-link--studio {
  font-family: "Avenir LT Std", sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  text-transform: none !important;
  color: #000 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-transform: uppercase !important;
}

.top-nav-shell nav.navbar.navbar--top-float.navbar--two-tier .navbar-nav > .nav-item > .nav-link:not(.top-nav-book-cta):hover,
.top-nav-shell nav.navbar.navbar--top-float.navbar--two-tier .navbar-nav > .nav-item > .nav-link:not(.top-nav-book-cta):focus,
.top-nav-shell nav.navbar.navbar--top-float.navbar--two-tier .navbar-nav > .nav-item > .nav-link:not(.top-nav-book-cta):focus-visible,
.top-nav-shell nav.navbar.navbar--top-float.navbar--two-tier .nav-link--studio:hover,
.top-nav-shell nav.navbar.navbar--top-float.navbar--two-tier .nav-link--studio:focus-visible {
  color: #003b49 !important;
  background: transparent !important;
  opacity: 0.78;
}

.top-nav-shell nav.navbar.navbar--top-float.navbar--two-tier .navbar-nav > .nav-item > .nav-link.active {
  color: #003b49 !important;
  font-weight: 800 !important;
  background: transparent !important;
  opacity: 1;
}

.top-nav-shell nav.navbar.navbar--top-float.navbar--two-tier .navbar-nav {
  gap: 0.25rem;
}

.top-nav-shell nav.navbar.navbar--top-float.navbar--two-tier .top-nav-book-cta,
.top-nav-shell nav.navbar.navbar--top-float.navbar--two-tier .top-nav-book-cta:hover,
.top-nav-shell nav.navbar.navbar--top-float.navbar--two-tier .top-nav-book-cta:focus-visible {
  font-family: "Avenir LT Std", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
  color: #fff !important;
  background: #003b49 !important;
  border: none !important;
  border-radius: var(--top-nav-cta-radius) !important;
  padding: 0.65rem 1.15rem !important;
  min-height: 2.5rem !important;
  box-shadow: none !important;
}

.top-nav-shell nav.navbar.navbar--top-float.navbar--two-tier .top-nav-book-cta:hover,
.top-nav-shell nav.navbar.navbar--top-float.navbar--two-tier .top-nav-book-cta:focus-visible {
  background: #002a33 !important;
}

@media (min-width: 1280px) {
  .top-nav-shell nav.navbar.navbar--top-float.navbar--two-tier .navbar-nav > .nav-item {
    margin: 0 0.625rem;
  }

  .top-nav-shell nav.navbar.navbar--top-float.navbar--two-tier .navbar-nav {
    gap: 0.15rem;
  }
}

/* Force Avenir LT Std across entire nav chrome (beats legacy stacks / system Avenir) */
.top-nav-shell,
.top-nav-shell .top-nav-contact-bar,
.top-nav-shell .top-nav-contact-bar__link,
.top-nav-shell nav.navbar,
.top-nav-shell nav.navbar .navbar-nav,
.top-nav-shell nav.navbar .nav-link,
.top-nav-shell nav.navbar .top-nav-book-cta,
.top-nav-shell nav.navbar .site-brand__name,
.top-nav-shell nav.navbar .site-brand__tagline {
  font-family: var(--ds-font-nav) !important;
  font-synthesis: none;
}

/* Site-wide typography — override per-page Jost / Outfit / EB Garamond / Cormorant */
html[data-site-theme="white"] body :is(
  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6
) {
  font-family: var(--ds-font-display) !important;
}

html[data-site-theme="white"] body :is(
  p, span, a, li, label, small, strong, em,
  input, textarea, select, button, option,
  th, td, figcaption, blockquote, cite
):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not([class*="fa-"]) {
  font-family: inherit;
}

html[data-site-theme="white"] #app,
html[data-site-theme="white"] .site-main,
html[data-site-theme="white"] .mobile-bottom-nav,
html[data-site-theme="white"] .mobile-bottom-nav__label,
html[data-site-theme="white"] .mobile-more-drawer {
  font-family: var(--ds-font-body);
}

/* Reset per-page hardcoded stacks — inherit Avenir from body (preserve icon fonts) */
html[data-site-theme="white"] body [class]:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not([class*="fa-"]) {
  font-family: inherit;
}