/** Shopify CDN: Minification failed

Line 282:0 Unexpected "}"

**/
/* ============================================
   Header — Custom Styles
   ============================================ */

/* ---- Layout: logo left, everything else right ---- */
@media screen and (min-width: 990px) {
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .header__heading {
    margin: 0;
    flex-shrink: 0;
  }

  /* Right side: nav + divider + icons grouped together */
  .header__right {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: auto;
  }

  /* Nav links */
  .header__right .header__menu-item-list {
    display: flex;
    align-items: center;
    gap: 4rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* Vertical divider between nav and icons */
  .header__nav-divider {
    display: block;
    width: 1px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.4);
    margin: 0 5.5rem;
    flex-shrink: 0;
  }

  /* Icons group */
  .header__icons {
    display: flex;
    align-items: center;
    gap: 4rem;
  }
}

/* Hide divider on mobile */
@media screen and (max-width: 989px) {
  .header__nav-divider {
    display: none;
  }
  .header__right {
    display: contents;
  }
}

/* ---- Nav links ---- */
.header__menu-item,
.header__menu-item span {
  font-size: 18px;
  font-family: Poppins, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 300;
  color: #ffffff;
}
.header__menu-item {
  padding-left: 20px;
  padding-right: 20px;
}


.header__menu-item--link {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  color: #ffffff;
  text-decoration: none;
}

.header__menu-item--link:hover {
  text-decoration: none;
  opacity: 0.75;
}

/* ---- Account icon — show Login text ---- */
.header__icon--account {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ffffff;
}

.header__icon--account .visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: nowrap !important;
  font-size: 18px;
  font-weight: 300;
  font-family: Poppins, sans-serif;
  letter-spacing: 0.05em;
  text-transform: capitalize;
  color: #ffffff;
}

.header__icon--account svg,
.header__icon--account .svg-wrapper svg {
  fill: #ffffff;
}

/* ---- Cart icon ---- */
.header__icon--cart svg,
.header__icon--cart .svg-wrapper svg {
  fill: #ffffff;
}

.header__icon--cart {
  color: #ffffff;
}

/* ---- Icons spacing ---- */
.header__icons {
  padding-left: 15px;
  gap: 4rem;
}

.header__icon {
  display: flex;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}

/* ---- Drawer open: solid teal background on header (homepage only) ---- */
body.template-index .header-wrapper:has(details[open]) {
  background: #446B74 !important;
  box-shadow: none !important;
}

/* ---- Drawer open: hide logo (homepage only) ---- */
body.template-index .section-header:has(details[open]) .header__heading-logo-wrapper {
  display: none;
}

/* ---- Scrolled state — resize logo ---- */
.scrolled-past-header .header__heading-logo-wrapper {
  transition: width 0.3s ease;
}

/* ---- Alternate logo swap on homepage scroll (homepage only) ---- */
/* Default: show light logo, hide scrolled logo */
body.template-index .header__logo--scrolled {
  display: none;
}

/* ---- Inner pages: always show scrolled (dark) logo ---- */
body:not(.template-index) .header__logo--default {
  display: none;
}

body:not(.template-index) .header__logo--scrolled {
  display: block;
}

/* Once scrolled past hero: hide light logo, show scrolled logo */
body.template-index .scrolled-past-hero .header__logo--default,
body.template-index .scrolled-past-header .header__logo--default {
  display: none;
}

body.template-index .scrolled-past-hero .header__logo--scrolled,
body.template-index .scrolled-past-header .header__logo--scrolled {
  display: block;
}

.scrolled-past-header .header-wrapper {
  background-color:  rgba(255,255,255,0.7)!important;
  transition: width 0.3s ease;
}

.scrolled-past-hero .header-wrapper--border-bottom {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

body.template-index .scrolled-past-header .header-wrapper,
body.template-index .scrolled-past-hero .header-wrapper {
  background: rgba(255,255,255,0.7) !important;
}

.scrolled-past-hero .header-wrapper {
  background-color:  rgba(255,255,255,1)!important;
  transition: width 0.3s ease;
}

body.template-index .scrolled-past-hero .header-wrapper {
  background: rgba(255,255,255,1) !important;
}

/* ---- Scrolled: nav items turn teal ---- */
.scrolled-past-hero .header__menu-item,
.scrolled-past-hero .header__menu-item span,
.scrolled-past-hero .header__menu-item--link,
.scrolled-past-header .header__menu-item,
.scrolled-past-header .header__menu-item span,
.scrolled-past-header .header__menu-item--link {
  color: #446B74 !important;
}

.scrolled-past-hero .header__icon--account,
.scrolled-past-hero .header__icon--account .visually-hidden,
.scrolled-past-header .header__icon--account,
.scrolled-past-header .header__icon--account .visually-hidden {
  color: #446B74 !important;
}

.scrolled-past-hero .header__icon--account svg path,
.scrolled-past-hero .header__icon--account .svg-wrapper svg path,
.scrolled-past-hero .header__icon--cart svg path,
.scrolled-past-hero .header__icon--cart .svg-wrapper svg path,
.scrolled-past-header .header__icon--account svg path,
.scrolled-past-header .header__icon--account .svg-wrapper svg path,
.scrolled-past-header .header__icon--cart svg path,
.scrolled-past-header .header__icon--cart .svg-wrapper svg path {
  fill: #446B74 !important;
}

.scrolled-past-hero .header__nav-divider,
.scrolled-past-header .header__nav-divider {
  background-color: rgba(68, 107, 116, 0.4);
}

/* ============================================
   Inner pages — solid teal header colors
   ============================================ */

body:not(.template-index) .header__menu-item,
body:not(.template-index) .header__menu-item span,
body:not(.template-index) .header__menu-item--link {
  color: #446B74 !important;
}

body:not(.template-index) .header__icon--account,
body:not(.template-index) .header__icon--account .visually-hidden {
  color: #446B74 !important;
}

body:not(.template-index) .header__icon--account svg path,
body:not(.template-index) .header__icon--account .svg-wrapper svg path,
body:not(.template-index) .header__icon--cart svg path,
body:not(.template-index) .header__icon--cart .svg-wrapper svg path {
  fill: #446B74 !important;
}

body:not(.template-index) .header__nav-divider {
  background-color: rgba(68, 107, 116, 0.4);
}

/* ============================================
   Announcement bar
   ============================================ */
.utility-bar {
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  text-align: center;
}
@media (max-width: 480px) {
  .header__icons
}

