/* =========================================================
   WELLNESSHEALTH HEADER — 2026
========================================================= */

#shopify-section-oak-header {
  --wh-green: #18a66a;
  --wh-green-dark: #08784b;
  --wh-blue: #1877f2;
  --wh-blue-dark: #0756c9;
  --wh-navy: #102a43;
  --wh-text: #536975;
  --wh-border: rgba(16, 42, 67, .09);
  --wh-surface: #ffffff;
}


/* =========================================================
   TOP TRUST BAR
========================================================= */

#shopify-section-oak-header .wh-header-top {
  position: relative;
  z-index: 5;

  overflow: hidden;

  background:
    linear-gradient(
      100deg,
      #0d7e54 0%,
      #18a66a 42%,
      #1877f2 100%
    );

  color: #ffffff;
}

#shopify-section-oak-header .wh-header-top__inner {
  display: flex;

  width: min(1320px, 100%);

  min-height: 36px;

  margin: 0 auto;

  padding: 0 24px;

  align-items: center;
  justify-content: space-between;

  gap: 20px;
}

#shopify-section-oak-header .wh-header-top__message {
  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: .01em;
}

#shopify-section-oak-header .wh-header-top__pulse {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #ffffff;

  box-shadow:
    0 0 0 4px
    rgba(255,255,255,.14);

  animation:
    wh-header-pulse
    2s
    ease-in-out
    infinite;
}

#shopify-section-oak-header .wh-header-top__points {
  display: flex;

  align-items: center;

  gap: 20px;

  font-size: 10px;

  font-weight: 650;

  opacity: .96;
}

#shopify-section-oak-header .wh-header-top__point {
  display: flex;

  align-items: center;

  gap: 6px;
}

#shopify-section-oak-header .wh-header-top__point svg {
  width: 13px;
  height: 13px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   HEADER WRAPPER
========================================================= */

#shopify-section-oak-header .header-wrapper {
  position: relative;

  border: 0 !important;

  background:
    rgba(255,255,255,.96);

  transition:
    box-shadow .25s ease,
    background .25s ease,
    backdrop-filter .25s ease;
}

#shopify-section-oak-header
.shopify-section-header-sticky
.header-wrapper {

  background:
    rgba(255,255,255,.91);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  box-shadow:
    0 8px 32px
    rgba(16,42,67,.08);
}

#shopify-section-oak-header .header {
  display: grid;

  grid-template-columns:
    auto
    minmax(0,1fr)
    auto;

  width: min(1320px,100%);

  min-height: 78px;

  margin: 0 auto;

  padding:
    10px
    24px;

  align-items: center;

  gap: 28px;
}


/* =========================================================
   LOGO
========================================================= */

#shopify-section-oak-header .header__heading {
  margin: 0;
}

#shopify-section-oak-header .header__heading-link {
  display: inline-flex;

  align-items: center;

  padding: 0;

  text-decoration: none;
}

#shopify-section-oak-header .header__heading-link--no-home {
  cursor: default;
}

#shopify-section-oak-header .header__heading-logo-wrapper {
  display: flex;

  align-items: center;

  width: auto;

  max-width: 210px;

  transition:
    transform .25s ease;
}

#shopify-section-oak-header .header__heading-logo {
  display: block;

  width: auto;

  max-width: 100%;

  height: auto;
}


/* =========================================================
   DESKTOP MENU
========================================================= */

#shopify-section-oak-header .header__inline-menu {
  justify-self: center;

  margin: 0;
}

#shopify-section-oak-header .header__inline-menu .list-menu--inline {
  display: flex;

  align-items: center;

  gap: 4px;

  flex-wrap: nowrap;
}

#shopify-section-oak-header
.header__inline-menu
.list-menu__item {

  position: relative;

  min-height: 44px;

  padding:
    0
    13px;

  border-radius: 12px;

  color: var(--wh-navy);

  font-size: 13px;

  font-weight: 680;

  text-decoration: none;

  transition:
    color .18s ease,
    background .18s ease;
}

#shopify-section-oak-header
.header__inline-menu
.list-menu__item:hover {

  background:
    linear-gradient(
      135deg,
      rgba(24,166,106,.08),
      rgba(24,119,242,.07)
    );

  color: var(--wh-green-dark);
}

#shopify-section-oak-header
.header__inline-menu
.list-menu__item::after {

  content: "";

  position: absolute;

  right: 14px;
  bottom: 6px;
  left: 14px;

  height: 2px;

  border-radius: 99px;

  background:
    linear-gradient(
      90deg,
      var(--wh-green),
      var(--wh-blue)
    );

  transform:
    scaleX(0);

  transform-origin:
    center;

  transition:
    transform .18s ease;
}

#shopify-section-oak-header
.header__inline-menu
.list-menu__item:hover::after {

  transform:
    scaleX(1);
}


/* =========================================================
   ICON ZONE
========================================================= */

#shopify-section-oak-header .header__icons {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 7px;

  padding-right: 0;
}

#shopify-section-oak-header .header__icon {
  position: relative;

  display: flex;

  width: 43px;
  height: 43px;

  align-items: center;
  justify-content: center;

  margin: 0;

  border:
    1px solid var(--wh-border);

  border-radius: 13px;

  background:
    #ffffff;

  color:
    var(--wh-navy);

  transition:
    transform .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}

#shopify-section-oak-header .header__icon:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(24,166,106,.20);

  background:
    linear-gradient(
      135deg,
      rgba(24,166,106,.07),
      rgba(24,119,242,.06)
    );

  color:
    var(--wh-green-dark);

  box-shadow:
    0 9px 22px
    rgba(16,42,67,.07);
}

#shopify-section-oak-header
.header__icon
.svg-wrapper {

  display: flex;

  width: 19px;
  height: 19px;

  align-items: center;
  justify-content: center;
}

#shopify-section-oak-header
.header__icon
.svg-wrapper svg {

  width: 19px;
  height: 19px;
}


/* =========================================================
   CART
========================================================= */

#shopify-section-oak-header
.header__icon--cart {

  background:
    linear-gradient(
      135deg,
      rgba(24,166,106,.09),
      rgba(24,119,242,.08)
    );

  border-color:
    rgba(24,119,242,.12);
}

#shopify-section-oak-header
.cart-count-bubble {

  position: absolute;

  top: -5px;
  right: -5px;

  display: flex;

  width: 19px;
  height: 19px;

  min-width: 19px;

  align-items: center;
  justify-content: center;

  border:
    2px solid #ffffff;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--wh-green),
      var(--wh-blue)
    );

  color: #ffffff;

  font-size: 8px;

  font-weight: 800;

  animation:
    wh-cart-in
    .35s
    cubic-bezier(.16,1,.3,1);
}


/* =========================================================
   SEARCH
========================================================= */

#shopify-section-oak-header
.header__search {

  margin: 0;
}

#shopify-section-oak-header
details-modal
.header__icon--search {

  border:
    1px solid var(--wh-border);

  border-radius: 13px;
}


/* =========================================================
   COUNTRY / LANGUAGE
========================================================= */

#shopify-section-oak-header
.desktop-localization-wrapper {

  display: flex;

  align-items: center;
}

#shopify-section-oak-header
.localization-form__select {

  min-height: 40px;

  border-radius: 10px;
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

#shopify-section-oak-header header-drawer {
  justify-self: start;

  margin: 0;
}

#shopify-section-oak-header
.menu-drawer-container {

  display: flex;
}

#shopify-section-oak-header
.header__icon--menu {

  width: 43px;
  height: 43px;

  border:
    1px solid var(--wh-border);

  border-radius: 13px;

  background:
    linear-gradient(
      135deg,
      rgba(24,166,106,.08),
      rgba(24,119,242,.06)
    );
}


/* =========================================================
   MOBILE DRAWER
========================================================= */

#shopify-section-oak-header
.menu-drawer {

  border: 0;

  background:
    #ffffff;
}

#shopify-section-oak-header
.menu-drawer__navigation {

  padding:
    25px
    18px
    35px;
}

#shopify-section-oak-header
.menu-drawer__menu-item {

  margin-bottom: 7px;

  padding:
    14px
    15px;

  border:
    1px solid
    rgba(16,42,67,.07);

  border-radius: 14px;

  background:
    #f9fbfa;

  color:
    var(--wh-navy);

  font-size: 15px;

  font-weight: 700;
}

#shopify-section-oak-header
.menu-drawer__menu-item:hover {

  background:
    linear-gradient(
      135deg,
      rgba(24,166,106,.08),
      rgba(24,119,242,.07)
    );
}


/* =========================================================
   STICKY STATES
========================================================= */

.section-header {
  z-index: 30;
}

.shopify-section-header-sticky {
  position: sticky;

  top: 0;

  z-index: 30;
}

.shopify-section-header-hidden {
  transform:
    translateY(-100%);
}

.shopify-section-header-sticky.animate {
  transition:
    transform .2s ease;
}


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 1100px) {

  #shopify-section-oak-header .header {
    gap: 15px;
  }

  #shopify-section-oak-header
  .header__inline-menu
  .list-menu__item {

    padding:
      0
      9px;

    font-size: 12px;
  }

}


/* =========================================================
   DESKTOP DRAWER VISIBILITY
========================================================= */



@media screen and (min-width: 990px) {

  #shopify-section-oak-header header-drawer {
    display: none;
  }

}




/* =========================================================
   MOBILE
========================================================= */

@media screen and (max-width: 989px) {

  #shopify-section-oak-header
  .wh-header-top__inner {

    min-height: 32px;

    padding:
      0
      14px;

    justify-content: center;
  }

  #shopify-section-oak-header
  .wh-header-top__message {

    justify-content: center;

    font-size: 9px;

    text-align: center;
  }

  #shopify-section-oak-header
  .wh-header-top__points {

    display: none;
  }


  #shopify-section-oak-header .header {

    grid-template-columns:
      44px
      minmax(0,1fr)
      auto;

    min-height: 68px;

    padding:
      8px
      14px;

    gap: 9px;
  }


  #shopify-section-oak-header
  .header__heading {

    justify-self: center;

    min-width: 0;
  }


  #shopify-section-oak-header
  .header__heading-link {

    justify-content: center;
  }


  #shopify-section-oak-header
  .header__heading-logo-wrapper {

    max-width: 150px;
  }


  #shopify-section-oak-header
  .header__icons {

    gap: 5px;
  }


  #shopify-section-oak-header
  .header__icon {

    width: 39px;
    height: 39px;

    border-radius: 12px;
  }


  #shopify-section-oak-header
  .header__icon--account {

    display: none;
  }


  #shopify-section-oak-header
  .desktop-localization-wrapper {

    display: none;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media screen and (max-width: 480px) {

  #shopify-section-oak-header
  .header {

    grid-template-columns:
      40px
      1fr
      auto;

    padding:
      7px
      11px;
  }


  #shopify-section-oak-header
  .header__heading-logo-wrapper {

    max-width: 135px;
  }


  #shopify-section-oak-header
  details-modal {

    display: none;
  }

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes wh-header-pulse {

  0%,
  100% {
    box-shadow:
      0 0 0 3px
      rgba(255,255,255,.10);
  }

  50% {
    box-shadow:
      0 0 0 7px
      rgba(255,255,255,.03);
  }

}


@keyframes wh-cart-in {

  from {
    transform:
      scale(.4);

    opacity: 0;
  }

  to {
    transform:
      scale(1);

    opacity: 1;
  }

}


@media (prefers-reduced-motion: reduce) {

  #shopify-section-oak-header *,
  #shopify-section-oak-header *::before,
  #shopify-section-oak-header *::after {

    animation-duration:
      .01ms !important;

    transition-duration:
      .01ms !important;
  }

}