/* ==========================================================================
   Earth Scientific Spa — shared site header & footer ("site chrome")
   One header + one footer for every public page. Markup lives between
   <!-- ESS:HEADER --> / <!-- ESS:FOOTER --> markers in each page (generated
   from the site-chrome build script, kept outside the deploy folder); behaviour is in /assets/js/site-chrome.js.
   Everything is scoped to #essx-header / #essx-footer / .essx-* so page CSS
   (and the old SPA's global nav{} / footer{} rules) can't leak in.
   ========================================================================== */
:root{
  --essx-ink:#16110d; --essx-ink2:#211912; --essx-ink3:#2c2219;
  --essx-earth:#7B4A22; --essx-earth-d:#4E2D0E; --essx-gold:#C7A26A; --essx-gold-l:#E4CB9C;
  --essx-cream:#F7F1E8; --essx-cream-d:#E9DCC9; --essx-muted:#B9A792; --essx-line:rgba(228,203,156,.16);
  --essx-serif:'Playfair Display',Georgia,serif; --essx-sans:'Lato','Helvetica Neue',Arial,sans-serif;
  --essx-bar:36px; --essx-main:78px;
}
#essx-header,#essx-header *,#essx-footer,#essx-footer *{box-sizing:border-box}
#essx-header a,#essx-footer a{text-decoration:none}
#essx-header ul,#essx-footer ul{list-style:none;margin:0;padding:0}
#essx-header button{font-family:inherit;line-height:inherit}

/* ---- header shell ---- */
#essx-header{position:sticky!important;top:0!important;left:0;right:0;z-index:2000!important;width:100%;font-family:var(--essx-sans);color:var(--essx-cream);transform:none!important;margin:0!important;padding:0!important;background:none!important;display:block!important}
.essx-bar{height:var(--essx-bar);background:var(--essx-earth-d);color:var(--essx-cream-d);display:flex;align-items:center;justify-content:center;gap:14px;padding:0 20px;font-size:12px;letter-spacing:.6px;transition:margin-top .3s}
.essx-bar a{color:var(--essx-gold-l)!important;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;font-size:11px;border-bottom:1px solid rgba(228,203,156,.45);padding-bottom:1px}
.essx-bar a:hover{color:#fff!important}
.essx-bar-msg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#essx-header.essx-scrolled .essx-bar{margin-top:calc(var(--essx-bar) * -1)}
.essx-main{height:var(--essx-main);background:rgba(22,17,13,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--essx-line);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(16px,3vw,44px);transition:box-shadow .3s}
#essx-header.essx-scrolled .essx-main{box-shadow:0 10px 40px rgba(0,0,0,.35)}

/* logo */
.essx-logo{display:flex;flex-direction:column;align-items:center;line-height:1;color:var(--essx-cream)!important;padding:0 18px}
.essx-logo b{font-family:var(--essx-serif);font-weight:500;font-size:28px;letter-spacing:9px;margin-right:-9px;color:var(--essx-cream)}
.essx-logo span{margin-top:6px;font-size:9.5px;letter-spacing:4.4px;margin-right:-4.4px;text-transform:uppercase;color:var(--essx-gold)}

/* nav */
.essx-nav{display:flex;align-items:center;min-width:0;position:static!important;padding:0!important;background:none!important;height:auto!important;z-index:auto!important}
.essx-nav-left{justify-content:flex-start}
.essx-nav-right{justify-content:flex-end;gap:6px}
.essx-menu{display:flex;align-items:center;gap:2px}
.essx-item{position:static}
.essx-link{display:inline-flex;align-items:center;gap:6px;height:var(--essx-main);padding:0 13px;color:var(--essx-cream-d)!important;font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;background:none;border:0;cursor:pointer;position:relative;white-space:nowrap}
.essx-link:after{content:"";position:absolute;left:13px;right:13px;bottom:22px;height:1px;background:var(--essx-gold);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.essx-item.essx-open>.essx-link,.essx-link:hover,.essx-link:focus-visible{color:var(--essx-gold-l)!important}
.essx-item.essx-open>.essx-link:after,.essx-link.essx-current:after{transform:scaleX(1)}
.essx-caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7;transition:transform .25s}
.essx-item.essx-open .essx-caret{transform:rotate(225deg) translate(-1px,-1px)}

/* dropdown panels */
.essx-drop{position:absolute;top:100%;left:50%;transform:translate(-50%,10px);width:min(1180px,calc(100vw - 32px));background:var(--essx-ink2);border:1px solid var(--essx-line);border-top:2px solid var(--essx-gold);box-shadow:0 30px 80px rgba(0,0,0,.45);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,transform .18s,visibility 0s linear .18s;color:var(--essx-cream)}
.essx-drop.essx-drop-sm{width:min(720px,calc(100vw - 32px))}
.essx-item.essx-open>.essx-drop{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:opacity .18s,transform .18s,visibility 0s}
/* invisible bridge so the pointer can travel from the menu label into the panel */
.essx-drop:before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.essx-drop{z-index:5}
.essx-drop-inner{display:grid;grid-template-columns:1.1fr repeat(4,1fr);gap:34px;padding:36px 40px}
.essx-drop-sm .essx-drop-inner{grid-template-columns:1.05fr 1fr}
.essx-feature{border-right:1px solid var(--essx-line);padding-right:30px;display:flex;flex-direction:column}
.essx-eyebrow{font-size:10px;letter-spacing:3.2px;text-transform:uppercase;color:var(--essx-gold);font-weight:700;margin-bottom:12px}
.essx-feature h3{font-family:var(--essx-serif);font-weight:400;font-size:26px;line-height:1.15;color:var(--essx-cream);margin:0 0 12px;text-transform:none;letter-spacing:0}
.essx-feature h3 em{color:var(--essx-gold-l);font-style:italic}
.essx-feature p{font-size:13.5px;line-height:1.7;color:var(--essx-muted);margin:0 0 20px}
.essx-col h4{font-family:var(--essx-sans);font-size:10.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--essx-gold);font-weight:700;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--essx-line)}
.essx-col a{display:block;padding:7px 0;font-size:14px;line-height:1.35;color:var(--essx-cream-d)!important;transition:color .2s,padding-left .2s}
.essx-col a:hover{color:var(--essx-gold-l)!important;padding-left:5px}
.essx-col a small{display:block;font-size:11.5px;color:var(--essx-muted);margin-top:2px;letter-spacing:.2px}
.essx-col a.essx-all{margin-top:8px;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;color:var(--essx-gold)!important}
.essx-drop-foot{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:space-between;padding:16px 40px;border-top:1px solid var(--essx-line);background:rgba(0,0,0,.18);font-size:12.5px;color:var(--essx-muted)}
.essx-drop-foot a{color:var(--essx-gold-l)!important;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;font-size:11px}

/* buttons */
.essx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:3px;font-family:var(--essx-sans);font-size:11px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;cursor:pointer;border:1px solid var(--essx-gold);transition:background .25s,color .25s,border-color .25s;white-space:nowrap;line-height:1}
.essx-btn-gold{background:var(--essx-gold);color:var(--essx-ink)!important}
.essx-btn-gold:hover{background:var(--essx-gold-l);border-color:var(--essx-gold-l)}
.essx-btn-ghost{background:transparent;color:var(--essx-cream)!important;border-color:rgba(247,241,232,.4)}
.essx-btn-ghost:hover{border-color:var(--essx-gold);color:var(--essx-gold-l)!important}

/* right utilities */
.essx-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--essx-cream-d)!important;position:relative;transition:color .2s,background .2s;background:none;border:0;cursor:pointer}
.essx-icon:hover{color:var(--essx-gold-l)!important;background:rgba(228,203,156,.08)}
.essx-icon svg{width:19px;height:19px}
.essx-badge{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--essx-gold);color:var(--essx-ink);font-size:10px;font-weight:800;display:none;align-items:center;justify-content:center;line-height:1}
.essx-badge.essx-has{display:inline-flex}
.essx-phone{display:inline-flex;align-items:center;gap:8px;color:var(--essx-cream-d)!important;font-size:12.5px;letter-spacing:1px;padding:0 10px;white-space:nowrap}
.essx-phone svg{width:15px;height:15px;color:var(--essx-gold)}
.essx-phone:hover{color:var(--essx-gold-l)!important}
.essx-cta{margin-left:8px}
.essx-burger{display:none}
.essx-burger span{display:block;width:22px;height:1.5px;background:currentColor;position:relative}
.essx-burger span:before,.essx-burger span:after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:currentColor;transition:transform .25s}
.essx-burger span:before{top:-7px}.essx-burger span:after{top:7px}

/* ---- mobile drawer ---- */
.essx-drawer{position:fixed;inset:0;z-index:2100;pointer-events:none}
.essx-drawer-scrim{position:absolute;inset:0;background:rgba(10,7,5,.6);opacity:0;transition:opacity .3s}
.essx-drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,92vw);background:var(--essx-ink);border-left:1px solid var(--essx-line);transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
body.essx-drawer-open{overflow:hidden}
body.essx-drawer-open .essx-drawer{pointer-events:auto}
body.essx-drawer-open .essx-drawer-scrim{opacity:1}
body.essx-drawer-open .essx-drawer-panel{transform:none}
.essx-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--essx-line)}
.essx-drawer-head .essx-logo{align-items:flex-start;padding:0}
.essx-drawer-head .essx-logo b{font-size:22px;letter-spacing:6px}
.essx-acc{border-bottom:1px solid var(--essx-line)}
.essx-acc>button,.essx-acc>a{width:100%;display:flex;align-items:center;justify-content:space-between;padding:17px 22px;background:none;border:0;color:var(--essx-cream)!important;font-size:12.5px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;cursor:pointer;text-align:left}
.essx-acc-body{display:none;padding:0 22px 16px}
.essx-acc.essx-open .essx-acc-body{display:block}
.essx-acc.essx-open .essx-caret{transform:rotate(225deg)}
.essx-acc-body h4{font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--essx-gold);margin:14px 0 6px;font-weight:700}
.essx-acc-body a{display:block;padding:8px 0;color:var(--essx-cream-d)!important;font-size:14.5px}
.essx-drawer-foot{margin-top:auto;padding:22px;display:grid;gap:10px;border-top:1px solid var(--essx-line)}
.essx-drawer-foot .essx-btn{width:100%;padding:15px}

/* ---- responsive ---- */
@media (max-width:1280px){
  .essx-link{padding:0 9px;letter-spacing:1.6px;font-size:11px}
  .essx-link:after{left:9px;right:9px}
  .essx-phone span{display:none}
}
@media (max-width:1100px){
  .essx-main{grid-template-columns:auto 1fr auto}
  .essx-menu,.essx-phone,.essx-cta-desk{display:none!important}
  .essx-logo{align-items:flex-start;padding:0}
  .essx-burger{display:inline-flex}
  .essx-nav-left{order:3;justify-content:flex-end}
  .essx-logo-wrap{order:1}
  .essx-nav-right{order:2;justify-content:flex-end}
}
@media (max-width:600px){
  :root{--essx-main:66px;--essx-bar:34px}
  .essx-logo b{font-size:22px;letter-spacing:6px;margin-right:-6px}
  .essx-logo span{font-size:8px;letter-spacing:3px}
  .essx-bar{font-size:11px;gap:10px}
  .essx-bar-msg{display:none}
}

/* ==================== footer ==================== */
#essx-footer{display:block!important;background:var(--essx-ink)!important;color:var(--essx-muted);font-family:var(--essx-sans);padding:0!important;margin:0!important;position:relative;z-index:1;text-align:left}
.essx-foot-cta{border-bottom:1px solid var(--essx-line);background:radial-gradient(circle at 15% 0%,rgba(199,162,106,.16),transparent 45%),linear-gradient(180deg,#1d1610,#16110d)}
.essx-foot-cta-in{max-width:1240px;margin:0 auto;padding:64px clamp(20px,4vw,48px);display:grid;grid-template-columns:1.3fr auto;gap:32px;align-items:center}
.essx-foot-cta h2{font-family:var(--essx-serif);font-weight:400;font-size:clamp(30px,3.6vw,46px);line-height:1.1;color:var(--essx-cream);margin:0 0 12px;letter-spacing:0;text-transform:none}
.essx-foot-cta h2 em{color:var(--essx-gold-l)}
.essx-foot-cta p{margin:0;font-size:15px;line-height:1.7;max-width:620px;color:var(--essx-muted)}
.essx-foot-cta-btns{display:flex;flex-wrap:wrap;gap:12px}
.essx-foot-main{max-width:1240px;margin:0 auto;padding:60px clamp(20px,4vw,48px) 40px;display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr 1.1fr;gap:36px}
.essx-foot-brand .essx-logo{align-items:flex-start;padding:0;margin-bottom:18px}
.essx-foot-brand p{font-size:13.5px;line-height:1.75;margin:0 0 14px;color:var(--essx-muted)}
.essx-foot-col h4{font-family:var(--essx-sans);font-size:10.5px;letter-spacing:2.8px;text-transform:uppercase;color:var(--essx-gold);font-weight:700;margin:0 0 16px}
.essx-foot-col a{display:block;padding:5px 0;font-size:14px;color:var(--essx-cream-d)!important;transition:color .2s}
.essx-foot-col a:hover{color:var(--essx-gold-l)!important}
.essx-foot-col address{font-style:normal;font-size:14px;line-height:1.7;color:var(--essx-cream-d)}
.essx-hours{font-size:13px;line-height:1.8;margin-top:10px}
.essx-social{display:flex;gap:10px;margin-top:16px}
.essx-social a{width:38px;height:38px;border:1px solid var(--essx-line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--essx-cream-d)!important;padding:0}
.essx-social a:hover{border-color:var(--essx-gold);color:var(--essx-gold-l)!important}
.essx-social svg{width:16px;height:16px}
.essx-foot-legal{border-top:1px solid var(--essx-line)}
.essx-foot-legal-in{max-width:1240px;margin:0 auto;padding:22px clamp(20px,4vw,48px) 30px;font-size:11.5px;line-height:1.7;color:#8f7f6d}
.essx-foot-legal-in p{margin:0 0 8px}
.essx-foot-legal-links{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:10px}
.essx-foot-legal-links a{color:var(--essx-muted)!important;font-size:12px}
.essx-foot-legal-links a:hover{color:var(--essx-gold-l)!important}
@media (max-width:1024px){
  .essx-foot-main{grid-template-columns:1fr 1fr 1fr}
  .essx-foot-brand{grid-column:1/-1}
}
@media (max-width:720px){
  .essx-foot-cta-in{grid-template-columns:1fr;padding:48px 22px}
  .essx-foot-main{grid-template-columns:1fr 1fr;gap:28px;padding:44px 22px 30px}
}

/* Legacy chrome that this header/footer replaces (kept hidden in case any page still carries it) */
body.essx-chrome #mainNav,body.essx-chrome .ess-main-nav,body.essx-chrome .page>footer,body.essx-chrome .nav-mobile-toggle{display:none!important}

/* ---- Legibility guard: some pages ship global rules such as
   h1..h6{color:#2a1a12!important} and p,li{color:#3a2b22!important}. The header, menus and
   footer are dark, so their text colours are locked here (id + !important wins). ---- */
#essx-header,#essx-header p,#essx-header li,#essx-header span,#essx-header div{color:inherit}
#essx-header .essx-bar,#essx-header .essx-bar-msg{color:var(--essx-cream-d)!important}
#essx-header h3,#essx-drawer h3,#essx-footer h2{color:var(--essx-cream)!important}
#essx-header h3 em,#essx-footer h2 em{color:var(--essx-gold-l)!important}
#essx-header h4,#essx-drawer h4,#essx-footer h4,#essx-header .essx-eyebrow,#essx-footer .essx-eyebrow{color:var(--essx-gold)!important}
#essx-header .essx-feature p,#essx-header .essx-drop-foot,#essx-header .essx-drop-foot span,#essx-header .essx-col a small{color:var(--essx-muted)!important}
#essx-header .essx-col a,#essx-drawer .essx-acc-body a{color:var(--essx-cream-d)!important}
#essx-header .essx-col a.essx-all,#essx-header .essx-drop-foot a,#essx-header .essx-bar a{color:var(--essx-gold-l)!important}
#essx-header .essx-col a:hover{color:var(--essx-gold-l)!important}
#essx-drawer .essx-acc>button,#essx-drawer .essx-acc>a{color:var(--essx-cream)!important}
#essx-header .essx-logo b,#essx-drawer .essx-logo b,#essx-footer .essx-logo b{color:var(--essx-cream)!important}
#essx-header .essx-logo span,#essx-drawer .essx-logo span,#essx-footer .essx-logo span{color:var(--essx-gold)!important}
#essx-header .essx-btn-gold,#essx-footer .essx-btn-gold,#essx-drawer .essx-btn-gold{color:var(--essx-ink)!important}
#essx-header .essx-btn-ghost,#essx-footer .essx-btn-ghost,#essx-drawer .essx-btn-ghost{color:var(--essx-cream)!important}
#essx-footer p,#essx-footer .essx-foot-brand p,#essx-footer .essx-foot-cta p{color:#c9b9a4!important}
#essx-footer .essx-foot-col a,#essx-footer address,#essx-footer .essx-hours{color:var(--essx-cream-d)!important}
#essx-footer .essx-foot-legal-in p,#essx-footer .essx-foot-legal-in strong{color:#a8977f!important}
#essx-footer .essx-foot-legal-links a{color:var(--essx-muted)!important}
#essx-footer .essx-foot-col a:hover,#essx-footer .essx-foot-legal-links a:hover{color:var(--essx-gold-l)!important}

/* ---- Page legibility (light pages): small labels and notes that were too faint ---- */
body.essx-chrome main p.eyebrow,body.essx-chrome section p.eyebrow{color:#8E5A2E!important}
body.essx-chrome .section-title em{color:#8E5A2E}
body.essx-chrome .affirm-legal,body.essx-chrome .affirm-legal strong,body.essx-chrome .checkout-notice,body.essx-chrome .pm-tab-desc,body.essx-chrome .product-price-note,body.essx-chrome .prod-price-note,body.essx-chrome .prod-breadcrumb a{color:#6E5A4A!important}
body.essx-chrome .affirm-legal strong{color:#4E2D0E!important}
body.essx-chrome .fda-tag,body.essx-chrome .prod-fda-tag{color:#1D6B3E!important}