/* #region CONTENT BLUR (RESPONSIVE) */

.blur-wrapper {
  filter: blur(0px);
}

/* #endregion */

/* #region NAVIGATION (RESPONSIVE) */

.navigation {
  position: fixed;
  z-index: 9999;
  top: 1rem;
  right: 1rem;

  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: fit-content;

  padding: 0.5rem;
}

/* #endregion */

/* #region CART (RESPONSIVE) */

.navigation__view-cart__quantity {
  display: none;
}

.navigation__view-cart__quantity:empty {
  display: none;
}

.navigation__view-cart span {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.navigation__view-cart span::after {
  content: '';
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 45'><path fill='%23f3f3f6' d='M 23 2 C 18.385291 2 14.559689 5.5140788 14.058594 10 L 12 10 C 9.688 10 7.7634375 11.733203 7.5234375 14.033203 L 5.0234375 38.033203 C 4.8914375 39.298203 5.30425 40.566672 6.15625 41.513672 C 7.00825 42.458672 8.228 43 9.5 43 L 38.5 43 C 39.772 43 40.99175 42.458672 41.84375 41.513672 C 42.69575 40.567672 43.106609 39.298203 42.974609 38.033203 L 40.476562 14.033203 C 40.236562 11.733203 38.312 10 36 10 L 33.953125 10 C 33.984125 10.33 34 10.664 34 11 L 34 13 L 36 13 C 36.771 13 37.412187 13.578703 37.492188 14.345703 L 39.992188 38.345703 C 40.036187 38.767703 39.898234 39.189906 39.615234 39.503906 C 39.331234 39.818906 38.924 40 38.5 40 L 9.5 40 C 9.076 40 8.6697188 39.819859 8.3867188 39.505859 C 8.1027187 39.190859 7.9638125 38.767703 8.0078125 38.345703 L 10.507812 14.345703 C 10.587813 13.578703 11.229 13 12 13 L 14 13 L 14 16.5 A 1.50015 1.50015 0 1 0 17 16.5 L 17 11 C 17 7.6687195 19.668719 5 23 5 C 25.989762 5 28.439942 7.1510842 28.912109 10 L 19.132812 10 C 19.048812 10.32 19 10.654 19 11 L 19 13 L 29 13 L 29 16.5 A 1.50015 1.50015 0 1 0 32 16.5 L 32 11 C 32 6.0472805 27.952719 2 23 2 z' /></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  color: #f3f3f6;
}

/* #endregion */

/* #region HAMBURGER MENU (RESPONSIVE) */

.hamburger-menu {
  width: 32px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  z-index: 9999;
  padding: 0;
}

.hamburger-menu span {
  height: 2px;
  width: 100%;
  background-color: #f3f3f6;
  border-radius: 1px;
  opacity: 1;
  transition: all 0.3s ease;
  transform-origin: center;
}

.hamburger-menu.open span:nth-child(1) {
  transform: translateY(-11px); /* move both to center */
  opacity: 0;
}

.hamburger-menu.open span:nth-child(3) {
  transform: translateY(11px); /* move both to center */
  opacity: 0;
}

/* #endregion */

/* #region DROP DOWN MENU (RESPONSIVE) */

.nav-menu {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9998;
  margin: 0;
  padding: 0;

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

  opacity: 0;
  backdrop-filter: blur(8px);
  background: transparent;
  transition: opacity 0.5s ease;
  white-space: nowrap;
  pointer-events: none;
}

.nav-menu.open {
  opacity: 1;
  pointer-events: auto;
}

.nav-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 85vw;
  gap: clamp(1rem, 8vh, 2.5rem);
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: visible;
}

.nav-menu a {
  font-size: 0.75rem;
}

@media (width > 768px) {
  .nav-menu {
    align-items: end;
    right: 1rem;
  }
  .nav-menu ul {
    align-items: end;
  }
}

/* #endregion */

/* #region FOOTER (RESPONSIVE) */

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;

  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

footer.open {
  opacity: 1;
  pointer-events: auto;
}

footer ul {
  margin-bottom: 1.5rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: clamp(1rem, 4vw + 0.5rem, 3rem);
  font-size: 0.5rem;
}

footer a {
  font-size: 0.5rem;
}

/* #endregion */

/* #region SHOPIFY CART (RESPONSIVE) */

shopify-cart::part(dialog) {
  text-transform: uppercase;
  font-style: normal;
  font-weight: 200;
  /* max-width: 33vw; */
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);               /* blur the background behind */
  -webkit-backdrop-filter: blur(8px);       /* Safari support */
  color: #f3f3f6;
}

@media (width > 768px) {
  shopify-cart::part(dialog) {
    background-color: rgba(255, 255, 255, 0.0);
    border: 1px solid rgba(243, 243, 246, 0.5);
  }
}

shopify-cart::part(line-heading) {
  text-transform: uppercase;
  font-style: normal;
  font-weight: 200;
}

shopify-cart::part(line-options) {
  text-transform: uppercase;
  font-style: normal;
  font-weight: 200;
  font-size: 0.5rem;
  color: #f3f3f6;
}

shopify-cart::part(line-price) {
  text-transform: uppercase;
  font-style: normal;
  font-weight: 200;
}

shopify-cart::part(primary-button) {
  text-transform: uppercase;
  font-style: normal;
  font-weight: 200;
  color: #f3f3f6;
  background: none;
  border: 1px solid #f3f3f6;
}

shopify-cart::part(secondary-button) {
  text-transform: uppercase;
  font-style: normal;
  font-weight: 200;
  color: #000;
}

/* shopify-cart::part(tertiary-button) {
  text-transform: uppercase;
  font-style: normal;
  font-weight: 200;
  color: #f3f3f6;
} */

shopify-cart::part(line-image) {
  display: none;
}

/* #endregion */