/* Premium, unified header treatment for every Thanes Wellness page. */
.nav,.site-header{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(253,253,249,.965)!important;
  border-bottom:1px solid rgba(13,59,46,.11)!important;
  box-shadow:0 10px 36px rgba(12,41,35,.065);
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  transition:box-shadow .25s ease,background .25s ease;
}
.nav::before,.site-header::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg,#0d3b2e 0%,#47745b 34%,#c4a15a 63%,#0d3b2e 100%);
  pointer-events:none;
}
.nav.is-scrolled,.nav.scrolled,.site-header.is-scrolled{
  background:rgba(253,253,249,.99)!important;
  box-shadow:0 14px 42px rgba(12,41,35,.12);
}
.nav>.wrap,.site-header>.wrap{width:min(1420px,calc(100% - 48px))!important}

/* Homepage and trust/article header families. */
.navin{
  min-height:94px!important;
  height:94px!important;
  display:grid!important;
  grid-template-columns:minmax(235px,255px) minmax(0,1fr) auto auto!important;
  align-items:center!important;
  gap:clamp(14px,1.45vw,24px)!important;
  padding:0!important;
}
.navin>a:first-child{display:flex;align-items:center;min-width:0}
.brand-logo,.navin>a:first-child>img.logo{
  display:block!important;
  width:242px!important;
  height:136px!important;
  max-width:none!important;
  margin:-21px 0!important;
  object-fit:contain!important;
  object-position:left center!important;
  filter:drop-shadow(0 3px 7px rgba(13,59,46,.08));
}
.links,.navlinks{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  gap:clamp(14px,1.25vw,22px)!important;
  font-size:clamp(.88rem,.82vw,.98rem)!important;
  font-weight:720!important;
  letter-spacing:.005em;
  white-space:nowrap;
}
.links>a,.navlinks>a{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  padding:10px 2px!important;
  text-decoration:none;
}
.links>a:hover,.navlinks>a:hover{color:#0d3b2e}
.actions{display:flex;align-items:center;gap:10px!important;white-space:nowrap}
.contact-mini,.line-cta{
  min-height:48px!important;
  padding:12px 19px!important;
  border:1px solid #0d3b2e!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#164d3d,#0d3b2e)!important;
  color:#fff!important;
  font-size:.9rem!important;
  font-weight:800!important;
  line-height:1.2!important;
  box-shadow:0 10px 24px rgba(13,59,46,.18)!important;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease!important;
}
.contact-mini:hover,.line-cta:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 14px 30px rgba(13,59,46,.24)!important;
  background:linear-gradient(135deg,#1b5b48,#103f32)!important;
}
.language-switcher{
  min-height:42px;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:4px!important;
  padding:4px 6px!important;
  border:1px solid rgba(13,59,46,.18)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.88)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 16px rgba(13,59,46,.06);
  white-space:nowrap;
}
.language-switcher button{
  min-width:38px;
  min-height:30px;
  padding:7px 9px!important;
  border-radius:9px!important;
  font-size:.8rem!important;
  font-weight:850!important;
}
.language-switcher button[aria-pressed="true"]{
  background:linear-gradient(135deg,#174d3e,#0d3b2e)!important;
  color:#fff!important;
  box-shadow:0 5px 12px rgba(13,59,46,.18);
}
.mobile-nav,.menu-toggle,.article-mobile-nav{
  width:44px!important;
  height:44px!important;
  border:1px solid rgba(13,59,46,.2)!important;
  border-radius:13px!important;
  background:#fff!important;
  color:#0d3b2e!important;
  font-size:1.25rem!important;
  box-shadow:0 6px 18px rgba(13,59,46,.08);
  cursor:pointer;
}
.article-mobile-nav{display:none}

/* Knowledge/product page family. */
.header-in{
  min-height:94px!important;
  display:grid!important;
  grid-template-columns:minmax(235px,255px) minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:clamp(16px,1.5vw,26px)!important;
}
.header-in>.logo{display:flex;align-items:center;overflow:visible}
.header-in>.logo img{
  width:242px!important;
  height:136px!important;
  max-width:none!important;
  margin:-21px 0!important;
  object-fit:contain!important;
  object-position:left center!important;
  filter:drop-shadow(0 3px 7px rgba(13,59,46,.08));
}
.nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  gap:clamp(14px,1.25vw,22px)!important;
  font-size:clamp(.88rem,.82vw,.98rem)!important;
  font-weight:720!important;
  white-space:nowrap;
}
.nav-links a{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  padding:10px 2px!important;
  border-bottom:2px solid transparent;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:#0d3b2e!important;border-color:#c4a15a!important}
.header-actions{display:flex;align-items:center;gap:10px!important;white-space:nowrap}

/* Give the mobile first view a more editorial, premium entrance. */
body>main#top>.hero{
  background:
    radial-gradient(circle at 82% 8%,rgba(196,161,90,.11),transparent 29%),
    radial-gradient(circle at 10% 36%,rgba(71,116,91,.08),transparent 33%),
    #fcfdf9!important;
}

@media(max-width:1280px){
  .nav>.wrap,.site-header>.wrap{width:min(100% - 32px,1320px)!important}
  .navin{grid-template-columns:205px minmax(0,1fr) auto auto!important;gap:12px!important}
  .header-in{grid-template-columns:205px minmax(0,1fr) auto!important;gap:12px!important}
  .brand-logo,.navin>a:first-child>img.logo,.header-in>.logo img{width:215px!important;height:121px!important;margin:-14px 0!important}
  .links,.navlinks,.nav-links{gap:12px!important;font-size:.84rem!important}
  .contact-mini,.line-cta{padding:11px 14px!important;font-size:.82rem!important}
}

@media(max-width:1060px){
  .navin,.header-in{
    min-height:80px!important;
    height:80px!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
  }
  .navin>a:first-child,.header-in>.logo{margin-right:auto!important}
  .brand-logo,.navin>a:first-child>img.logo,.header-in>.logo img{
    width:198px!important;
    height:112px!important;
    margin:-15px 0!important;
  }
  .links,.navlinks,.nav-links{
    position:absolute!important;
    left:16px!important;
    right:16px!important;
    top:88px!important;
    display:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:3px!important;
    max-height:calc(100vh - 112px)!important;
    padding:14px!important;
    overflow-y:auto!important;
    white-space:normal!important;
    border:1px solid rgba(13,59,46,.13)!important;
    border-radius:22px!important;
    background:rgba(255,255,255,.99)!important;
    box-shadow:0 26px 68px rgba(12,41,35,.2)!important;
  }
  .links.open,.navlinks.open,.nav-links.open{display:flex!important}
  .links>a,.navlinks>a,.nav-links>a{
    display:flex!important;
    width:100%!important;
    min-height:48px!important;
    padding:12px 14px!important;
    border:0!important;
    border-radius:12px!important;
    font-size:.98rem!important;
  }
  .links>a:hover,.navlinks>a:hover,.nav-links>a:hover,.nav-links>a[aria-current="page"]{background:#eef5f1!important}
  .links a:after{display:none!important}
  .mobile-nav,.menu-toggle,.article-mobile-nav{display:grid!important;place-items:center!important;flex:0 0 auto}
  .header-actions{margin-left:auto}
  .header-actions .line-cta{display:none!important}
  .navlinks.open a{display:flex!important}
}

@media(max-width:640px){
  .nav>.wrap,.site-header>.wrap{width:min(100% - 20px,1320px)!important}
  .navin:has(.contact-mini),.header-in{
    min-height:122px!important;
    height:auto!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    grid-template-rows:72px 40px!important;
    gap:4px 7px!important;
    padding:6px 0 8px!important;
  }
  .navin:has(.navlinks):not(:has(.contact-mini)){
    min-height:78px!important;
    height:78px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    gap:7px!important;
    padding:3px 0!important;
  }
  .navin>a:first-child,.header-in>.logo{grid-column:1;grid-row:1;margin:0!important}
  .brand-logo,.navin>a:first-child>img.logo,.header-in>.logo img{
    width:178px!important;
    height:100px!important;
    margin:-14px 0!important;
  }
  .actions,.header-actions{display:contents!important}
  .language-switcher{grid-column:2;grid-row:1;align-self:center;margin:0!important;min-height:40px}
  .mobile-nav,.menu-toggle,.article-mobile-nav{grid-column:3;grid-row:1;align-self:center;width:42px!important;height:42px!important}
  .contact-mini,.header-actions .line-cta{
    display:flex!important;
    grid-column:1/-1!important;
    grid-row:2!important;
    width:100%!important;
    min-height:40px!important;
    height:40px!important;
    padding:8px 14px!important;
    border-radius:12px!important;
    font-size:.8rem!important;
    text-align:center;
    align-items:center;
    justify-content:center;
  }
  .links,.nav-links{top:130px!important;left:10px!important;right:10px!important;max-height:calc(100vh - 148px)!important}
  .navlinks{top:84px!important;left:10px!important;right:10px!important;max-height:calc(100vh - 104px)!important}
  .language-switcher button{min-width:34px;padding:6px 7px!important;font-size:.74rem!important}
  body>main#top>.hero{padding:46px 0 44px!important}
  body>main#top>.hero h1{font-size:clamp(2.6rem,12vw,3.3rem)!important;line-height:1.04!important;letter-spacing:-.045em!important}
  body>main#top>.hero .hero-thai{font-size:1.18rem!important;line-height:1.5!important}
  body>main#top>.hero .eyebrow{font-size:.7rem!important;letter-spacing:.11em!important}
}

@media(max-width:390px){
  .brand-logo,.navin>a:first-child>img.logo,.header-in>.logo img{width:160px!important;height:92px!important}
  .language-switcher{gap:1px!important;padding:3px 4px!important}
  .language-switcher button{min-width:30px;padding:6px 5px!important;font-size:.7rem!important}
  .mobile-nav,.menu-toggle,.article-mobile-nav{width:40px!important;height:40px!important}
}

@media(prefers-reduced-motion:reduce){
  .nav,.site-header,.contact-mini,.line-cta{transition:none!important}
}