:root {
  --mobile-menu-duration: 220ms;
}

/* Shared mobile menu polish */
#mobile-nav-overlay #mobile-close-btn,
.mobile-overlay .mobile-close {
  display: none !important;
}

.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  border: 1px solid rgba(250, 248, 244, 0.3);
  border-radius: 9999px;
  background: rgba(250, 248, 244, 0.08);
  color: inherit;
  line-height: 0;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.mobile-menu-toggle:focus-visible,
.mobile-menu-btn:focus-visible {
  outline: 2px solid #C4974A;
  outline-offset: 3px;
}

.mobile-menu-toggle-icon {
  display: block;
  width: 24px;
  height: 24px;
  transition: transform var(--mobile-menu-duration) ease-in-out;
}

.mobile-menu-toggle-path {
  stroke-dasharray: 12 63;
  transition: stroke-dasharray var(--mobile-menu-duration) ease-in-out, stroke-dashoffset var(--mobile-menu-duration) ease-in-out;
}

#hamburger-btn-mobile.mobile-menu-toggle.is-open,
body.mobile-nav-open #hamburger-btn-mobile.mobile-menu-toggle {
  color: #FAF8F4 !important;
  border-color: rgba(250, 248, 244, 0.38);
  background: rgba(250, 248, 244, 0.12);
}

#hamburger-btn-mobile.mobile-menu-toggle.is-open .mobile-menu-toggle-icon,
body.mobile-nav-open #hamburger-btn-mobile.mobile-menu-toggle .mobile-menu-toggle-icon {
  transform: rotate(-45deg);
}

#hamburger-btn-mobile.mobile-menu-toggle.is-open .mobile-menu-toggle-path,
body.mobile-nav-open #hamburger-btn-mobile.mobile-menu-toggle .mobile-menu-toggle-path {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42px;
}

body.mobile-nav-open #main-nav {
  background: transparent !important;
  border-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.mobile-nav-open #main-nav .header-logo-link,
body.mobile-nav-open #main-nav #cart-indicator {
  opacity: 0;
  pointer-events: none;
}

.mobile-menu-btn {
  position: relative;
  color: #2D5A3D;
  line-height: 0;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

#mobile-toggle:checked ~ #main-nav {
  z-index: 1300;
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#mobile-toggle:checked ~ #main-nav .nav-logo {
  opacity: 0;
  pointer-events: none;
}

#mobile-toggle:checked ~ #main-nav .mobile-menu-btn {
  color: #FAF8F4;
  border-color: rgba(250, 248, 244, 0.38);
  background: rgba(250, 248, 244, 0.12);
}

#mobile-toggle:checked ~ #main-nav .mobile-menu-btn .mobile-menu-toggle-icon {
  transform: rotate(-45deg);
}

#mobile-toggle:checked ~ #main-nav .mobile-menu-btn .mobile-menu-toggle-path {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42px;
}

@media (max-width: 768px) {
  #hamburger-btn-mobile.mobile-menu-toggle {
    display: flex !important;
  }

  .mobile-menu-btn {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-toggle,
  .mobile-menu-toggle-icon,
  .mobile-menu-toggle-path,
  .mobile-menu-btn,
  .mobile-menu-btn .mobile-menu-toggle-icon,
  .mobile-menu-btn .mobile-menu-toggle-path {
    transition: none !important;
  }
}