/** Shopify CDN: Minification failed

Line 228:28 Unexpected "@starting-style"
Line 271:41 Unexpected "@starting-style"
Line 394:35 Unexpected "@starting-style"
Line 714:30 Unexpected "@starting-style"
Line 766:25 Unexpected "@starting-style"
Line 773:36 Unexpected "@starting-style"

**/
.header-mobile {
  display: flex;

  padding: 0.66rem;
  width: 100%;
  height: 100%;

  background: var(--color-white);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow);

  border: var(--rule-trans);

  transition-property: border, border-radius, background-color, color, fill;
  transition-duration: 180ms;
  transition-timing-function: ease-in-out;
}

.transparent--visible .header-mobile {
  background: transparent;
  box-shadow: none;
  color: var(--color-white);
}
.transparent--visible .header-mobile .logo-main path,
.transparent--visible .header-mobile .icon-search path,
.transparent--visible .header-mobile .icon-burger path {
  fill: var(--color-white);
}

.transparent--visible .header-mobile button.header-mobile__cart {
  border: var(--rule-white);
  color: var(--color-white);
}
.transparent--visible .header-mobile button.header-mobile__cart.has-items {
  background: transparent;
}

.transparent--visible .header-mobile button.header-mobile__cart span {
  color: var(--color-white);
}

.menu-active .header-mobile,
.mini-cart-open .header-mobile,
.search-active .header-mobile,
.menu-active .transparent--visible .header-mobile,
.mini-cart-open .transparent--visible .header-mobile,
.search-active .transparent--visible .header-mobile {
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  border: var(--rule-grey);
  border-bottom: none;
  background-color: var(--color-white);
}

.menu-active .header-mobile .logo-main path,
.mini-cart-open .header-mobile .logo-main path,
.search-active .header-mobile .logo-main path,
.menu-active .header-mobile .icon path,
.mini-cart-open .header-mobile .icon path,
.search-active .header-mobile .icon path {
  fill: var(--color-main);
}


.header-desktop {
  display: none;
}

header.main-header {
  position: fixed;
  top: 0;
  left: 0;

  width: 100%;
  background-color: transparent;
  height: var(--header-height);

  padding: 0.5rem 0.5rem 0;

  z-index: 100;

  transition-property: background-color, color, fill;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;

  /* box-shadow: var(--shadow-sml); */
}

.show-banner header.main-header {
  top: var(--banner-height);
}

.header-mobile__logo {
  width: 6rem;
}

header.main-header .logo-main {
  width: 100%;
}

/* Megamenu Card */

.card-megamenu {
  aspect-ratio: 4/5;
  overflow: hidden;
}

.card-megamenu__link {
  aspect-ratio: 1;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.card-megamenu__link:hover,
.card-megamenu__link:focus {
  opacity: 1;
}

.card-megamenu__link:hover .card-megamenu__image,
.card-megamenu__link:focus .card-megamenu__image {
  filter: blur(0.1em);
}

.card-megamenu__link .card-megamenu__button.btn.btn--secondary {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.card-megamenu__link:hover .card-megamenu__button.btn.btn--secondary,
.card-megamenu__link:focus .card-megamenu__button.btn.btn--secondary {
  background-color: var(--color-white);
  color: var(--color-main);
}

.card-megamenu__content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;

  gap: 2vw;

  width: 100%;
  height: 100%;
  padding: 2rem 1rem;
}

.card-megamenu__headline {
  text-wrap: balance;
  max-width: 30ch;
}

.card-megamenu .card-megamenu__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-s);

  transition: filter ease-in-out 0.4s;
}

.card-megamenu__button {
  width: fit-content;
  margin: 0 auto;
}

ul.megamenu__nav {
  margin-top: 0.5rem;
}

/* Mobile Search */

.show-banner .header-search {
  top: calc(var(--banner-height) + var(--header-height));
}

.header-search__container {
  position: relative;
  margin-bottom: 25svh;
}

.header-search {
  --present: 0;
  --translate: 100% 0;

  height: calc(var(--present) * 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--color-grey) var(--color-white);

  opacity: var(--present);
  filter: blur(calc(1 - var(--present) * 10px));
  transition-property: display, opacity, filter;
  transition-duration: 320ms;
  transition-timing-function: ease-in-out;


  background: var(--color-blur-l);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter:  var(--blur);
}

.header-search:popover-open {
  --present: 1;
  --translate: 0 0;
  padding: 1rem 0.66rem;
}

.header-search:popover-open @starting-style {
  --translate: 100% 0;
  --present: 0;
  --height: 0;
}

.header-search .form-search__terms {
  flex-direction: column;
}

.header-search .form-search__submit.btn {
  width: 100%;
  min-height: 3rem;
}

.header-search .form-search__submit.btn:disabled {
  background-color: var(--color-grey);
  color: var(--color-white);
}

.header-search .form-search__terms__input {
  min-height: 3rem;
  background-color: var(--color-white);
}

.header-search button.header-search__close {
  position: absolute;
  right: 0;
  padding: 0.5rem;
  top: 0;
  z-index: 100;
}

.header-search .header-search__close svg.icon.icon-close-small {
  rotate: 45deg;
  width: 1.25rem;
}

.no-popover.search-active .header-search {
  --present: 1;
  --translate: 0 0;
  padding: 1rem 0.66rem;
}
.no-popover.search-active .header-search @starting-style {
  --translate: 100% 0;
  --present: 0;
  --height: 0;
}

.header-mobile__burger {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.25rem 0.25rem 0.25rem 0;
  aspect-ratio: 1;
  transition: opacity 0.3s ease-in-out;
}

.header-mobile__burger svg {
  width: 100%;
  height: 100%;
}

.menu-active .header-mobile__burger {
  opacity: 0.25;
}

/* Initial state for the burger lines */

.header-mobile__icons {
  display: flex;
  gap: 0.5rem;
}
.header-mobile__icons a,
.header-mobile__icons button {
  height: 2rem;
  width: 2rem;
  padding: 0.125rem;
  transition: background-color 0.3s, color 0.3s;
}

/* .header-desktop__icons a svg,
.header-desktop__icons button svg {
  width: 50%;
} */
.header-mobile__search {
  aspect-ratio: 1;

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

  padding: 0.125rem;
}

.header-mobile__search .icon-close-small {
  display: none;
}

/* .search-active .header-mobile__search {
  background-color: var(--color-offset);
  color: var(--color-main);
} */

.search-active .header-mobile__search .icon-search {
  opacity: .33;
}

/* .search-active .header-mobile__search .icon-close-small.icon {
  display: block;
  transform: rotate(45deg);
} */

.search-active .header-mobile__search .icon-close-small.icon path {
  fill: var(--color-grey);
}

/* Cart Icon */
button.header-mobile__cart {
  width: 2rem;
  height: 2rem;

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

  border: var(--rule-grey);
}
button.header-mobile__cart span {
  line-height: var(--font-label-line);
  font-size: var(--font-body-size-s);
  margin-top: 0.1em;
}

button.header-mobile__cart.empty span {
  color: var(--color-grey-dark);
}

button.header-mobile__cart.has-items {
  background: var(--color-main);
  color: var(--color-white);
  border: var(--rule-main);
}

button.header-mobile__cart .icon-close-small {
  display: none;
}

.mini-cart-open button.header-mobile__cart .cart-count {
  display: none;
}
.mini-cart-open button.header-mobile__cart {
  background-color: var(--color-offset);
  border: var(--rule-trans);
}
.mini-cart-open button.header-mobile__cart .icon-close-small {
  display: block;
  transform: rotate(45deg);
}
.mini-cart-open button.header-mobile__cart .icon-close-small path {
  fill: var(--color-grey);
}

header.main-header .mini-cart-text {
  display: none;
}

header.main-header .mini-cart-text @starting-style {
  display: block;
}

.mini-cart-open header.main-header .mini-cart-text {
  display: block;
}

.mini-cart-open header.main-header .logo-main {
  display: none;
}

.no-popover .megamenu {
  display: none;
}

@media screen and (min-width: 1024px) {
  .mini-cart-open header.main-header {
    border-bottom: var(--rule-grey-light);

  }

  .mini-cart-open header.main-header .mini-cart-text {
    display: none;
  }

  .mini-cart-open header.main-header .logo-main {
    display: block;
  }
  header.main-header {
    height: var(--header-height);

    padding: 0;

    transition-property: background-color, color, fill;
    transition-duration: 640ms;
    transition-timing-function: ease-in-out;

    background: var(--color-white);
    padding: 1.75rem 0;

    border-bottom: var(--rule-grey-light);
  }
    header.main-header.transparent.transparent--visible {
      background: transparent;
      border-bottom: var(--rule-trans);
    }

    header.main-header.transparent.transparent--visible .header-desktop__menu-link {
      color: var(--color-white);
    }

    header.main-header.transparent.transparent--visible svg.logo-main path,
    header.main-header.transparent.transparent--visible .header-desktop__icons button svg path,
    header.main-header.transparent.transparent--visible .header-desktop__account svg path {
      fill: var(--color-white);
    }

    header.main-header.transparent.transparent--visible button.header-desktop__cart {
      background: var(--color-white);
      color: var(--color-main);
    }

  

  .show-banner header.main-header.hide {
    translate: 0 -100%;

    pointer-events: none;
  }

  .header-mobile {
    display: none;
  }

  .header-desktop {
    display: flex;
    padding: 0 3rem;

    width: 100%;
    height: 100%;

    max-width: var(--max-width);
    margin: 0 auto;
  }

  .header-desktop__logo {
    width: 8rem;
  }

  .header-desktop__logo:hover {
    transition: opacity 0.3s;
    opacity: 0.8;
  }

  /* Main Menu */
  .header-desktop__menu {
    gap: var(--clamp-gap-s);
  }

  .header-desktop__menu-link {
    font-family: var(--font-body-medium);
    padding: 0.33rem 0.66rem;
    border: var(--rule-trans);
    border-radius: var(--radius-xs);
    transition: background-color 0.3s, color 0.3s;
    line-height: var(--font-label-line);

    color: var(--color-main);

  }

  .header-desktop__menu-link:hover {
    background: var(--color-offset);
    border: var(--rule-trans);
    color: var(--color-main);
  }

  .header-desktop__menu-link.is-active {
    background: var(--color-offset);
    color: var(--color-main);
  }
  .header-desktop__nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Icons Menu */

  .header-desktop__icons {
    gap: var(--clamp-gap-s);
  }

  .header-desktop__icons a,
  .header-desktop__icons button {
    height: 2rem;
    padding: 0.25rem;
    border-radius: var(--radius-xs);
    transition: background-color 0.3s, color 0.3s;
    font-family: var(--font-body-medium);

  }

  .header-desktop__icons a.header-desktop__menu-link,
  .header-desktop__icons button.header-desktop__menu-link {
    padding: 0.33rem 0.66rem;
  }

  .header-desktop__icons a:has(.icon),
  .header-desktop__icons button:has(.icon) {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    height: 2rem;
    width: 2rem;
  }

  /* Icon Hover State */
  .header-desktop__icons a:has(.icon):hover,
  .header-desktop__icons button:has(.icon):hover {
    background-color: var(--color-offset);
    color: var(--color-main);
  }

  .header-desktop__icons a:has(.icon).is-active,
  .header-desktop__icons button:has(.icon).is-active {
    background-color: transparent;
    color: var(--color-grey);
  }

  .header-desktop__icons a:has(.icon):hover .icon path,
  .header-desktop__icons button:has(.icon):hover .icon path,
  .header-desktop__icons a:has(.icon).is-active .icon path,
  .header-desktop__icons button:has(.icon).is-active .icon path {
    fill: var(--color-main);
  }

  .search-active .header-desktop__search .icon-close-small,
  .search-active .header-desktop__search span.close {
    display: none;
  }

  .header-desktop__search {
    aspect-ratio: 1;

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

   
  }
  .header-desktop__search svg.icon-close-small {
    display: none;
  }

  .search-active .header-desktop__search {
    background-color: transparent;
    color: var(--color-main);


  
  }
  .search-active .header-desktop__search .icon-close-small.icon {
    display: block;
    transform: rotate(45deg);
    width: 1.25rem;
 
  }
  .search-active .header-desktop__search .icon-close-small.icon path {
    fill: var(--color-grey);
  }
  .search-active .header-desktop__search .icon-search {
    display: none;
  }

  /* Cart Icon */
  button.header-desktop__cart {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.66rem;

    text-align: center;
    line-height: var(--font-label-line);
    background: var(--color-main);
    color: var(--color-white, #fff);

    padding: 0.33rem 0.66rem;

  }
  button.header-desktop__cart:hover {
    opacity: 1;
    background: var(--color-offset);
    color: var(--color-main);
  }

  button.header-desktop__cart .cart-title--close {
    display: none;
  }

  button.header-desktop__cart.empty .cart-count__wrap {
      width: 0;
      height: 0;
      opacity: 0;
      transition: opacity 0.3s;
    }
  

  button.header-desktop__cart.has-items .cart-count__wrap {
    width: auto;
    height: auto;
    opacity: 1;
  }
    
  

  .mini-cart-open button.header-desktop__cart .cart-title--close {
      display: block;
  }
  .mini-cart-open button.header-desktop__cart .cart-title {
    display: none;
  }
  .mini-cart-open button.header-desktop__cart {
    background: var(--color-offset);
    color: var(--color-main);
    border: var(--rule-trans);
  }

  .cart-count__wrap {
    display: flex;
    gap: 0.16rem;
  }

  /* Search */

  .header-search {
    margin: 0 auto;
    width: 100%;

    border: none;
    border-bottom: var(--rule-grey);
  }
  .header-search .form-search {
    padding: 0 3rem;
  }

  .header-search .form-search__terms {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    width: 50svw;
    margin: 0 auto;
  }

  .header-search .form-search__submit.btn.btn--primary {
    width: auto;
    align-self: center;
    height: 2.5rem;

  }

  .header-search .form-search__submit.btn.btn--primary:disabled {
    background-color: var(--color-grey);
    color: var(--color-white);
  }

  .header-search .form-search__terms__input {
    width: 100%;
    height: 3rem;
    padding: 0.5rem;
    background-color: var(--color-white);
  }

  .header-search:popover-open {
    height: 100%;
    padding: 1.5rem 3rem;
  }
  .header-search:popover-open @starting-style {
    height: 0;
  }

  .header-search button.header-search__close {
    position: relative;
    width: fit-content;
    margin-top: 1rem;
  }
  

  .header-search__container {
    max-width: var(--max-width-inner);
    margin: 0 auto;

    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }

  /* Megamenus */

  .show-banner .megamenu {
    top: calc(var(--banner-height) + var(--header-height));
  }

  .megamenu {
    /* translate: 0 -100%; */
    background-color: var(--color-white);
    border-bottom: var(--rule-grey-light);
    box-shadow: -3px 9px 3px 0px rgba(0, 0, 0, 0),
      -2px 6px 2px 0px rgba(0, 0, 0, 0.01), -1px 3px 2px 0px rgba(0, 0, 0, 0.05),
      0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 0px 1px 0px rgba(0, 0, 0, 0.1);

    --present: 0;

    opacity: var(--present);
    filter: blur(calc(1 - var(--present) * 10px));
    top: var(--header-height);

    transition-property: display, overlay, opacity, filter;
    transition-duration: 0.32s;
    transition-timing-function: ease-in-out;
    transition-behavior: allow-discrete;
    padding: 1.75rem 3rem;
  }

  .megamenu:popover-open {
    /* translate: 0 0; */
    --present: 1;
  }

  .megamenu:popover-open @starting-style {
    --present: 0;
  }

  .no-popover.menu-active .megamenu {
      --present: 1;
  }
  .no-popover.menu-active .megamenu @starting-style {
        --present: 0;
  }

  .megamenu-inner {
    max-width: calc(var(--max-width) - 6rem);
    margin: 0 auto;
    grid-template-columns: repeat(5, minmax(12rem, 1fr));
    gap: 1rem;
  }

  .megamenu__nav-title,
  .megamenu__content-title {
    margin-bottom: 1rem;

    font-family: var(--font-body-medium);
  }

  .megamenu__nav-item {
    margin-bottom: 0.125rem;
    padding: 0.25rem 0;
  }

  .megamenu__nav-link {
    color: var(--color-grey-dark);
  }

  li.header-desktop__menu-item {
    white-space: nowrap;
  }
}