header {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  z-index: 50;
  overflow: hidden;
  padding: 1rem;
  padding-bottom: 0px;
}

@media (min-width: 1024px) {

  header {
    margin-left: auto;
    max-width: 42.35rem;
    padding: 2rem;
    padding-bottom: 0px;
  }
}

.header-navbar--toggle {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(37 197 216 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(37 197 216 / var(--tw-bg-opacity));
}

.header-navbar path {
  fill: #fff;
  stroke: #fff;
}

.header-navbar .logo svg {
  height: 1.25rem;
  width: auto;
}

.header-navbar--item svg {
  height: auto;
  width: 1.25rem;
}

.header-navbar--item path {
  fill: #fff;
  stroke: #fff;
}

.header-navbar--content {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 6.75rem;
  z-index: 40;
  height: 0px;
  max-height: 0px;
  overflow: hidden;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {

  .header-navbar--content {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1024px) {

  .header-navbar--content {
    top: 7.5rem;
    margin-left: auto;
    max-width: 42.35rem;
  }
}

.header-navbar--content {
  transition: max-height 0.30s ease-in-out, height 0.30s ease-in-out;
}

.header-navbar--content .container {
  height: 100%;
  max-height: 90vh;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(37 197 216 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(30 32 25 / var(--tw-text-opacity));
  overflow-y: overlay;
}

.overlay-opacity {
  visibility: hidden;
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.overlay-opacity.open, .cart-active .overlay-opacity {
  visibility: visible;
  opacity: 0.5;
}

.header-navbar--content.open + .header-navbar--toggle {
  --tw-brightness: brightness(.5);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.cart-notification--active .cart-notification {
  opacity: 1;
}