/* mobile-menu.css: ported 1:1 from foodforjoe.es CSS modules (hash suffixes removed). */

/* ── MobileMenu ── */
.MobileMenu_mobileMenu {
  z-index:2;
  position:fixed;
  height:100%;
  width:100%;
  top:0;
  left:0;
  margin:0;
  transform:translateX(-100%);
  transition:all .9s cubic-bezier(.4,0,.2,1);
  background:var(--color-white);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:42px 0 0;
  max-width:480px;
}

.MobileMenu_closeButton {
  border:none;
  background:none;
  padding:0;
  position:absolute;
  top:22px;
  right:25px;
  cursor:pointer;
}

.MobileMenu_mobileMenuVisible {
  transform:translateX(0);
  box-shadow:0 0 20px rgb(31 68 61/40%);
}

.MobileMenu_logo {
  width:71px;
  height:54px;
  margin-bottom:32px;
}

.MobileMenu_viewport {
  width:100%;
  height:calc(100vh - 280px);
  overflow:hidden;
}

.MobileMenu_track {
  display:flex;
  width:200%;
  height:100%;
  transform:translateX(0);
  transition:transform .9s cubic-bezier(.2,0,0,1);
}

.MobileMenu_trackCategory {
  transform:translateX(-50%);
}

.MobileMenu_panel {
  display:flex;
  flex-direction:column;
  width:50%;
  flex-shrink:0;
  overflow-y:auto;
  overflow-x:hidden;
  justify-content:flex-start;
  opacity:1;
  transition:opacity .9s cubic-bezier(.2,0,0,1);
}

.MobileMenu_panel[aria-hidden=true] {
  opacity:0;
}

.MobileMenu_backButton,
.MobileMenu_categoryButton,
.MobileMenu_link {
  text-align:left;
  font-size:24px;
  font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes);
  width:100%;
  padding:0 40px;
  margin:0 auto 1.1em;
  position:relative;
  background:none;
  border:none;
  color:inherit;
  cursor:pointer;
}

.MobileMenu_backButton {
  font-family:var(--font-family-serif-light);
  font-size:18px;
  margin-bottom:2.4em;
  opacity:0;
  animation:MobileMenu_backButtonFadeIn .35s ease-out .85s forwards;
}

@keyframes MobileMenu_backButtonFadeIn {
  to {
    opacity:1;
  }
}

.MobileMenu_caretLeft {
  display:inline-block;
  font-size:20px;
  line-height:1;
  margin-right:6px;
}

.MobileMenu_link:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}

.MobileMenu_linkBadge {
  display:inline-block;
  position:relative;
  right:0;
  top:0;
  font-size:8px;
  letter-spacing:.08em;
  font-family: var(--font-family-serif-medium); font-variation-settings: var(--gp-medium-axes);
  background:var(--color-yellow);
  font-weight:700;
  padding:3px 4px;
  border-radius:3px;
  transform:translate(3px,-10px);
}

.MobileMenu_footer {
  position:absolute;
  width:100%;
  bottom:0;
  display:flex;
  justify-content:space-between;
  background:var(--color-beige);
  padding:20px;
  flex-wrap:wrap;
}

.MobileMenu_buttonSecondary {
  flex:1 0 100%;
  overflow:hidden;
  margin:0 auto 12px;
}

.MobileMenu_buttonPrimary {
  flex:1 0 100%;
  overflow:hidden;
  margin:0 auto;
}

.MobileMenu_localeLabel {
  text-align:center;
  display:flex;
  align-items:center;
  width:-moz-fit-content;
  width:fit-content;
  margin:0 auto;
  gap:5px;
}

.MobileMenu_localeButton {
  display:inline-block;
  margin-left:5px;
}

@media (min-width:1350px) {
  .MobileMenu_mobileMenu {
    display:none;
  }
}