/** Shopify CDN: Minification failed

Line 784:37 Expected "*/" to terminate multi-line comment

**/
/* Simply Food Storage — header/nav layout + brand overrides. v1.3.3
   Ported from Dawn 15.3 base.css header section. Loaded after Dawn 16 base.css.
   Case: BYOB/nav look; do not edit 190222303522.
   Case: v15 cart/account/search stroke SVGs (not Dawn 16 bag icons); Account label dropped — icon only.
   Case: middle-left nav uses auto | 1fr | auto so menu fills dead space beside logo/icons.
   Case: current-page nav link shows persistent navy underline (link.current / header__active-menu-item). */

.header {
  display: grid;
  grid-template-areas: "left-icons heading icons";
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}

@media screen and (max-width: 749px) {
  .header--has-app {
    grid-template-columns: auto 1fr auto;
  }
  .header {
    padding: 2rem !important;
  }
  .header .header__heading-link {
    padding: 0;
  }
  .header header-drawer {
    margin-left: unset;
  }
  header.header .header__icon .svg-wrapper {
    width: 24px;
    height: 24px;
    background: unset;
    border-radius: 50%;
  }
  header.header .header__icon,
  header.header .header__icon--cart .icon {
    height: 2.4rem;
    width: 2.4rem;
  }
  /* Cart badge is tuned for the 4.4rem desktop icon; rescale for the 2.4rem mobile icon so it sits on the corner instead of floating off it. */
  header.header .header__icon--cart .cart-count-bubble {
    top: -0.3rem;
    right: -0.5rem;
    height: 1.3rem;
    width: 1.3rem;
    font-size: 0.8rem;
  }
}

@media screen and (min-width: 990px) {
  .header {
    grid-template-columns: 1fr auto 1fr;
  }

  .header--top-left,
  .header--middle-left:not(.header--has-menu) {
    grid-template-areas:
      "heading icons"
      "navigation navigation";
    grid-template-columns: 1fr auto;
  }

  .header--top-left.drawer-menu,
  .header--middle-left.drawer-menu {
    grid-template-areas: "navigation heading icons";
    grid-template-columns: auto 1fr auto;
    column-gap: 1rem;
  }

  .header--middle-left {
    grid-template-areas: "heading navigation icons";
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 1.2rem;
  }

  .header--middle-center:not(.drawer-menu) {
    grid-template-areas: "navigation heading icons";
    grid-template-columns: 1fr auto 1fr;
    column-gap: 2rem;
  }

  .header--middle-center a.header__heading-link {
    text-align: center;
  }

  .header--top-center {
    grid-template-areas:
      "left-icons heading icons"
      "navigation navigation navigation";
  }

  .header--top-center.drawer-menu {
    grid-template-areas: "left-icons heading icons";
    grid-template-columns: 1fr auto 1fr;
  }

  .header:not(.header--middle-left, .header--middle-center)
    .header__inline-menu {
    margin-top: 1.05rem;
  }
}

.header *[tabindex="-1"]:focus {
  outline: none;
}

.header__heading {
  margin: 0;
  line-height: 0;
}

.header > .header__heading-link {
  line-height: 0;
}

.header__heading,
.header__heading-link {
  grid-area: heading;
  justify-self: center;
}

.header__heading-link {
  display: inline-block;
  padding: 0.75rem;
  text-decoration: none;
  word-break: break-word;
}

.header__heading-link:hover .h2 {
  color: rgb(var(--color-foreground));
}

.header__heading-link .h2 {
  line-height: 1;
  color: rgba(var(--color-foreground), 0.75);
}

.header__heading-logo {
  height: auto;
  max-width: 100%;
}

.header__heading-logo-wrapper {
  width: 100%;
  display: inline-block;
  transition: width 0.3s cubic-bezier(0.52, 0, 0.61, 0.99);
}

@media screen and (max-width: 989px) {
  .header__heading,
  .header__heading-link {
    text-align: center;
  }

  .header--mobile-left .header__heading,
  .header--mobile-left .header__heading-link {
    text-align: left;
    justify-self: start;
  }

  .header--mobile-left {
    grid-template-columns: auto 1fr;
    grid-template-areas: " heading icons";
  }
  /* The left column (hamburger only) and right column (search+account+cart) pull unequal
     widths out of a 1fr/1fr split — grid tracks only share LEFTOVER space equally, they
     don't force equal final widths when one side's content needs more room. That drags the
     middle (logo) column off the true center. Pin both side columns to the same fixed width
     (sized to fit the wider, 3-icon side) so the middle column is always truly centered —
     this does not touch the logo's own size, only where its column sits. */
  .header--mobile-center {
    grid-template-columns: 120px 1fr 120px;
  }
  .header__heading-logo-wrapper img {
    width: 210px;
  }
  .header__icon--cart {
    margin-right: 0;
  }
  .header__icons {
    gap: 13px !important;
    padding: 0;
  }
  .header__icon--cart {
    margin: 0 !important;
  }
}

@media screen and (min-width: 990px) {
  .header--middle-left .header__heading-link,
  .header--top-left .header__heading-link {
    margin-left: -0.75rem;
  }

  .header__heading,
  .header__heading-link {
    justify-self: start;
  }

  .header--middle-center .header__heading-link,
  .header--middle-center .header__heading {
    justify-self: center;
    text-align: center;
  }

  .header--top-center .header__heading-link,
  .header--top-center .header__heading {
    justify-self: center;
    text-align: center;
  }
}

/* Header icons */
.header__icons {
  display: flex;
  grid-area: icons;
  justify-self: end;
  padding-right: 0.8rem;
  gap: 8px;
}

.header__icons .shopify-app-block {
  max-width: 4.4rem;
  max-height: 4.4rem;
  overflow: hidden;
}

.header__icon:not(.header__icon--summary),
.header__icon span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__icon {
  color: rgb(var(--color-foreground));
}

.header__icon span {
  height: 100%;
}

.header__icon .svg-wrapper {
  width: 44px;
  height: 44px;
  background: rgba(243, 244, 246, 1);
  border-radius: 50%;
}
.header__icon .svg-wrapper svg {
  width: 2.4rem;
  height: 2.4rem;
}
.header__icon::after {
  content: none;
}

.header__icon:hover .icon,
.modal__close-button:hover .icon {
  transform: scale(1.07);
}

.header__icon .icon {
  height: 2rem;
  width: 2rem;
  fill: none;
  vertical-align: middle;
}

.header__icon,
.header__icon--cart .icon {
  height: 4.4rem;
  width: 4.4rem;
  padding: 0;
}

.header__icon--cart {
  position: relative;
  margin-right: -1.2rem;
}

.header__icon--menu[aria-expanded="true"]::before {
  content: "";
  top: 100%;
  left: 0;
  height: calc(
    var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%))
  );
  width: 100%;
  display: block;
  position: absolute;
  background: rgba(var(--color-foreground), 0.5);
}

.header__icon--account shop-user-avatar {
  --shop-avatar-size: 2.8rem;
}

details .header__icon-close {
  display: none;
}

details[open] .header__icon-close {
  display: inline-block;
}

account-icon {
  display: flex;
}

/* Search */
menu-drawer + .header__search {
  display: none;
}

.header > .header__search {
  grid-area: left-icons;
  justify-self: start;
}

.header--top-center.drawer-menu > .header__search {
  margin-left: 3.2rem;
}

.header--top-center header-drawer {
  grid-area: left-icons;
}

.header:not(.header--has-menu) * > .header__search {
  display: none;
}

.header__search {
  display: inline-flex;
  line-height: 0;
}

.header--top-center > .header__search {
  display: none;
}

.header--top-center * > .header__search {
  display: inline-flex;
}

@media screen and (min-width: 990px) {
  .header:not(.header--top-center) * > .header__search,
  .header--top-center > .header__search {
    display: inline-flex;
  }

  .header:not(.header--top-center) > .header__search,
  .header--top-center * > .header__search {
    display: none;
  }
}

details[open] > .search-modal {
  opacity: 1;
  animation: animateMenuOpen var(--duration-default) ease;
}

details[open] .modal-overlay {
  display: block;
}

details[open] .modal-overlay::after {
  position: absolute;
  content: "";
  background-color: rgb(var(--color-foreground), 0.5);
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
}

.search-modal {
  opacity: 0;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  min-height: calc(
    100% + var(--inputs-margin-offset) + (2 * var(--inputs-border-width))
  );
  height: 100%;
}

.search-modal__content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 5rem 0 1rem;
  line-height: calc(1 + 0.8 / var(--font-body-scale));
  position: relative;
}

.search-modal__content-bottom {
  bottom: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__content-top {
  top: calc((var(--inputs-margin-offset) / 2));
}

.search-modal__form {
  width: 100%;
}

.search-modal__close-button {
  position: absolute;
  right: 0.3rem;
}

@media screen and (min-width: 750px) {
  .search-modal__close-button {
    right: 1rem;
  }

  .search-modal__content {
    padding: 0 6rem;
  }
}

@media screen and (min-width: 990px) {
  .search-modal__form {
    max-width: 74.2rem;
  }

  .search-modal__close-button {
    position: initial;
    margin-left: 0.5rem;
  }
}

/* Header menu drawer */
.header__icon--menu .icon {
  display: block;
  position: absolute;
  opacity: 1;
  transform: scale(1);
  transition: transform 150ms ease, opacity 150ms ease;
}

details:not([open]) > .header__icon--menu .icon-close,
details[open] > .header__icon--menu .icon-hamburger {
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-close {
  visibility: hidden;
}

.js details[open]:not(.menu-opening) > .header__icon--menu .icon-hamburger {
  visibility: visible;
  opacity: 1;
  transform: scale(1.07);
}

.js details > .header__submenu {
  opacity: 0;
  transform: translateY(-1.5rem);
  box-shadow: 0px 4px 44px #00000026;
}

details[open] > .header__submenu {
  animation: animateMenuOpen var(--duration-default) ease;
  animation-fill-mode: forwards;
  z-index: 1;
}

@media (prefers-reduced-motion) {
  details[open] > .header__submenu {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Header menu */
.header__inline-menu {
  margin-left: -1.2rem;
  grid-area: navigation;
  display: none;
}

.header--top-center .header__inline-menu,
.header--top-center .header__heading-link {
  margin-left: 0;
}
.header__menu-item span {
  text-decoration-color: #001f3d;
  color: #001f3d;
}
@media screen and (min-width: 990px) {
  .header__inline-menu {
    display: block;
  }

  .header--top-center .header__inline-menu {
    justify-self: center;
  }

  .header--top-center .header__inline-menu > .list-menu--inline {
    justify-content: center;
  }

  .header--middle-left .header__inline-menu {
    margin-left: 0;
    text-align: center;
    width: 100%;
    min-width: 0;
    justify-self: stretch;
  }

  .header--middle-left .header__inline-menu > .list-menu--inline {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    column-gap: 0;
  }
}

.header__menu {
  padding: 0 1rem;
}

.header__menu-item {
  padding: 1.2rem;
  text-decoration: none;
  color: #001f3d;
  font-size: 1.6rem;
}

@media screen and (min-width: 990px) {
  .header--middle-left .header__menu-item {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    white-space: nowrap;
  }
}

.header__menu-item:hover {
  color: #001f3d;
}

.header__menu-item span {
  transition: text-decoration var(--duration-short) ease;
}

.header__menu-item:hover span {
  text-decoration: underline;

  text-underline-offset: 3.2rem;
  text-decoration-color: #001f3d;
}

details[open] > .header__menu-item {
  text-decoration: none;
}

details[open]:hover > .header__menu-item {
  text-decoration-thickness: 0.2rem;
}

details[open] > .header__menu-item .icon-caret {
  transform: rotate(180deg);
}

.header__active-menu-item {
  transition: text-decoration-thickness var(--duration-short) ease;
  color: #001f3d;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #001f3d;
  text-underline-offset: 3.2rem;
  text-decoration-thickness: 0.2rem;
}

.header__menu-item:hover .header__active-menu-item {
  text-decoration-thickness: 0.3rem;
  color: #001f3d;
}

.header__menu-item:hover span {
  text-decoration-thickness: 0.3rem;
  color: #001f3d;
}

/* Dropdown / child links: navy */
.header__submenu .header__menu-item,
.header__submenu .header__menu-item span,
.header__submenu .header__active-menu-item {
  color: #001f3d;
  font-weight: 400;
}

.header__submenu .header__menu-item:hover,
.header__submenu .header__menu-item:hover span {
  color: #001f3d;
  text-decoration-color: #001f3d;
}

.header__submenu {
  transition: opacity var(--duration-default) ease,
    transform var(--duration-default) ease;
}

.global-settings-popup,
.header__submenu.global-settings-popup {
  border-radius: var(--popup-corner-radius);
  border-color: rgba(var(--color-foreground), var(--popup-border-opacity));
  border-style: solid;
  border-width: var(--popup-border-width);
  box-shadow: var(--popup-shadow-horizontal-offset)
    var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius)
    rgba(var(--color-shadow), var(--popup-shadow-opacity));
  z-index: -1;
}

.header__submenu.list-menu {
  padding: 1rem 0;
}

.header__submenu .header__submenu {
  background-color: rgba(var(--color-foreground), 0.03);
  padding: 1rem 0;
  margin: 1rem 0;
}

.header__submenu .header__menu-item:after {
  right: 2rem;
}

.header__submenu .header__menu-item {
  justify-content: space-between;
  padding: 0.8rem 2rem;
}

.header__submenu .header__menu-item:hover {
  text-decoration-line: underline;
}

.header__menu-item .icon-caret {
  right: 0.8rem;
}

.header__submenu .icon-caret {
  flex-shrink: 0;
  margin-left: 1rem;
  position: static;
}

header-menu > details,
details-disclosure > details {
  position: relative;
}

@keyframes animateMenuOpen {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.overflow-hidden-mobile,
.overflow-hidden-tablet,
.overflow-hidden-desktop {
  overflow: hidden;
}

/* Mega menu customs from Dawn 15.3 component-mega-menu.css */
.mega-menu__list {
  display: flex;
  gap: 7rem;
  justify-content: center;
}
.mega-menu__link--level-2 {
  text-align: start;
  font-weight: 600;
  font-size: 1.8rem;
  color: #001f3d;
}
.mega-menu__link:hover,
.mega-menu__link--active {
  color: #001f3d;
  text-decoration: underline;
}
.mega-menu--link-3 {
  text-align: left;
  font-weight: 400;
  font-size: 15px;
  color: #001f3d;
}
.mega-menu[open] .mega-menu__content {
  box-shadow: 0 4px 44px 0 rgba(0, 0, 0, 0.15);
  z-index: 99;
}
.list-menu__item--active {
  color: #001f3d;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: #001f3d;
  text-underline-offset: 0.3rem;
  text-decoration-thickness: 0.2rem;
}

/* Mobile drawer: match desktop current-page emphasis (menu-drawer__menu-item--active). */
.menu-drawer__menu-item--active {
  color: #001f3d;
  font-weight: 600;
}

.menu-drawer__menu-item--active:hover {
  color: #001f3d;
}

/* Cart count badge — leaf green, top-right of icon circle (Dawn 15). */
.header__icon--cart .cart-count-bubble {
  background: var(--sfs-leaf, #5d7d2d);
  color: var(--sfs-white, #ffffff);
  left: auto;
  right: -0.6rem;
  bottom: auto;
  top: 0.4rem;
  height: 1.5rem;
  width: 1.5rem;
  font-size: 1rem;
}

.sublink_mega_menu:hover {
  text-decoration: none !important;
}

/* Mobile menu-drawer social icons — match the footer's navy/leaf-green brand badge treatment.
   component-list-social.css (which normally sets .list-social { display:flex } ) is only ever
   linked from the unused generic footer.liquid, not sfs-footer.liquid, so it never loads on this
   storefront — the <ul> falls back to block/list-item and the icons stack. Set layout here too. */
.menu-drawer .list-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.menu-drawer .list-social__item {
  margin: 0 0.6rem 0 0;
}

.menu-drawer .list-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  padding: 0;
  border-radius: 50%;
  background: rgba(0, 31, 61, 0.06);
  color: var(--sfs-navy, #001f3d);
}

.menu-drawer .list-social__link:hover {
  background: rgba(93, 125, 45, 0.16);
  color: var(--sfs-leaf, #5d7d2d);
}

.menu-drawer .list-social__link .svg-wrapper,
.menu-drawer .list-social__link .svg-wrapper svg {
  width: 2.4rem;
  height: 2.4rem;
  fill: currentColor;
}

/* Mobile: search sat crammed next to the drawer's close (X) button. Dawn's markup renders
   two <header__search> instances �