:root {
  --clrBodyMs: #f1f1f1;
  --direction: rtl;

  --menuItemClrF: #fff;
  --menuItemClr5: #555;
  --menuItemActiveBg: #ffc400;
  --menuItemBg: #333;
  --menuItemTextSize: 14.4px;

  --gridItemBg: #fff;
  --gridItemNameFontSize: 16px;
  --gridItemNameFontClr: #555;
  --gridItemDetailsSize: 14.4px;
  --gridItemDetailsClr: #555;
  --gridItemPriceSize: 12.8px;
  --gridItemPriceClr: #555;

  --itemHeaderBg: #ffc400;
  --itemHeaderFontSize: 16px;
  --itemHeaderClr: #333;

  --backLinkBg: #333;
  --backLinkFontSize: 12.8px;
  --backLinkTextClr: #fff;
}
body,
html {
  background-color: var(--clrBodyMs);
}
nav {
  position: fixed;
  left: 0;
  height: 100dvh;
  background-color: var(--menuItemBg);
  width: 80px;
  z-index: 900;
  direction: var(--direction);
}
.backLink {
  height: 50px;
  color: var(--backLinkTextClr);
  justify-content: center;
  font-size: var(--backLinkFontSize);
  gap: 3px;
  width: 100%;
  padding-right: 10px;
  background-color: var(--backLinkBg);
}
.backLink:hover {
  background-color: var(--whiteClr20);
}
.navItemList {
  height: calc(100dvh - 50px);
  max-width: calc(100dvh - 50px);
  overflow-y: auto;
  scroll-behavior: smooth;
}
.navItemBtn {
  padding: 10px 0;
  align-items: center;
  gap: 3px;
  background-color: var(--menuItemBg);
  min-height: fit-content;
  transition: background-color 0.4s;
}
.navItemBtn:hover {
  background-color: var(--whiteClr20);
}
.navItemBtn.activeNavBtn {
  background-color: var(--menuItemActiveBg);
}
.navItemText {
  color: var(--menuItemClrF);
  font-size: var(--menuItemTextSize);
  font-weight: 500;
  transition: color 0.4s;
}
.navItemImg {
  width: 60px;
  height: 60px;
  transition: filter 0.4s;
}
.navItemBtn.activeNavBtn .navItemImg {
  filter: invert();
}
.navItemBtn.activeNavBtn .navItemText {
  color: var(--menuItemClr5);
  font-weight: 600;
}

@media screen and (min-width: 868px) {
  nav {
    width: 110px;
  }
}
/* menuContent */
.menuContent {
  width: calc(100% - 80px);
  margin-left: 90px;
  direction: var(--direction);
}
.menuItem {
  padding-top: 20px;
}
.menuItem:first-child {
  padding-top: 0;
}
.menuItemTitle {
  background-color: var(--itemHeaderBg);
  height: 50px;
  position: sticky;
  top: 0;
  font-weight: 600;
  padding: 0 5px;
  color: var(--itemHeaderClr);
  font-size: var(--itemHeaderFontSize);
}
.menuItemTitleImg {
  width: 35px;
  height: 35px;
  filter: invert();
}
.menuGrid {
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 0 15px;
  margin-top: 15px;
}
.menuGridItem {
  background-color: var(--gridItemBg);
  box-shadow: 0 0 15px var(--blackOp12);
  padding: 10px;
  border-radius: 7px;
  cursor: pointer;
}
.menuGridItemImg {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 5px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
.menuItemGridInfoDiv {
  padding: 0 7px;
}
.menuGridItemName {
  font-size: var(--gridItemNameFontSize);
  color: var(--gridItemNameFontClr);
  font-weight: 600;
  margin-top: 10px;
}
.menuItemGridDetails {
  font-size: var(--gridItemDetailsSize);
  color: var(--gridItemDetailsClr);
  line-height: 1.36em;
  margin-top: 5px;
}
.menuItemPrice {
  font-size: var(--gridItemPriceSize);
  color: var(--gridItemPriceClr);
  font-weight: 400;
  margin: 10px auto 0 0;
  gap: 5px;
}
.menuItemPrice .bold {
  font-weight: 600;
  font-size: 1.15em;
}
@media screen and (min-width: 600px) {
  .menuGrid {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 868px) {
  .menuGrid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  body:has(.settingModal.showSettingModal) .menuGrid {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 1100px) {
  .menuGrid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  body:has(.settingModal.showSettingModal) .menuGrid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 1400px) {
  .menuGrid {
    max-width: 1440px;
    margin: 15px auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
  body:has(.settingModal.showSettingModal) .menuGrid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}