/* ============================================================
   Kissy Face Med Spa — unified site nav (kfms-* scoped)
   Injected on every page (app-rendered + mirror static).
   Light pages: brown text · dark hero pages: white text.
   ============================================================ */

.kfms-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;
  padding: 26px 0 0;
  z-index: 999;
  /* pin typography so the nav is identical on every page (theme body styles vary) */
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: #643d35;
}
.kfms-container { width: min(1120px, 92%); margin: 0 auto; }
.kfms-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

.kfms-logo { display: inline-flex; align-items: center; text-decoration: none; }
.kfms-logo-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  line-height: 1.7; letter-spacing: .08em;
  color: #643d35;
  white-space: nowrap;
}
.kfms-logo-text em { font-style: italic; font-size: .92em; color: #be999a; }

.kfms-nav { display: flex; gap: 22px; font-size: 15px;
  font-family: inherit; line-height: 1.7; letter-spacing: .08em; text-transform: uppercase; font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif; }
.kfms-nav a { color: #643d35; font-weight: 400; text-decoration: none; }
.kfms-nav a:hover, .kfms-nav a.active { color: #be999a; }

.kfms-actions { display: flex; align-items: center; gap: 18px; }
.kfms-social { display: flex; gap: 12px; align-items: center; }
.kfms-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(100, 61, 53, .35);
  color: #643d35;
  text-decoration: none;
  transition: all .2s ease;
}
.kfms-social a:hover { background: #be999a; border-color: #be999a; color: #fff; }
.kfms-social svg { width: 16px; height: 16px; }

.kfms-cart { position: relative; color: #643d35; display: inline-flex; text-decoration: none; }
.kfms-cart-count {
  position: absolute; top: -8px; right: -10px; background: #dd6420; color: #fff;
  font-size: .65rem; min-width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}

.kfms-btn {
  display: inline-block;
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.7;
  font-weight: 500; font-size: 15px; letter-spacing: .12em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: 40px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .25s ease;
  text-align: center;
  text-decoration: none;
}
.kfms-btn-book { background: #643d35; color: #fef7ea; }
.kfms-btn-book:hover { background: #dd6420; color: #fff; }

/* ---------- dark hero pages (home, shop, product, cart…) ---------- */
body.kfms-dark .kfms-logo-text { color: #f2ede2; }
body.kfms-dark .kfms-logo-text em { color: #d8a2a8; }
body.kfms-dark .kfms-nav a { color: #f2ede2; }
body.kfms-dark .kfms-nav a:hover, body.kfms-dark .kfms-nav a.active { color: #d8a2a8; }
body.kfms-dark .kfms-social a { border-color: rgba(242, 237, 226, .5); color: #f2ede2; }
body.kfms-dark .kfms-social a:hover { background: #d8a2a8; border-color: #d8a2a8; color: #fff; }
body.kfms-dark .kfms-cart { color: #f2ede2; }
body.kfms-dark .kfms-btn-book { background: #ede7da; color: #3d2f28; }
body.kfms-dark .kfms-btn-book:hover { background: #d8a2a8; color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .kfms-header { padding: 16px 0 0; }
  .kfms-header-inner { gap: 12px; }
  .kfms-logo-text { font-size: 17px; }
  .kfms-nav { gap: 12px; font-size: 13px; }
  .kfms-social a { width: 30px; height: 30px; }
  .kfms-btn-book { padding: 10px 18px; font-size: 13px; }
}
@media (max-width: 640px) {
  .kfms-nav { display: none; }
}

/* ---------- light pages: keep content clear of the floating header ---------- */
body:not(.kfms-dark) .fl-page-content > *:first-child {
  padding-top: 120px !important;
}

/* ---------- dark pages: keep hero/slider content clear of the floating header ---------- */
body.kfms-dark .fl-page-content .fl-row:first-of-type .fl-row-content-wrap {
  padding-top: 110px !important;
}