/* Top navigation bar style */
.navbar {
  display: flex; /* use Flexbox layout */
  justify-content: space-between; /* LOGO And menu/Left and right distribution of icon area */
  align-items: center; /* Align items vertically in the center */
  padding: 15px 30px; /* according toFigmaAdjust the inner margin */
  background-color: #EAE4DD; /* Figma background color */
  border-bottom: 1px solid #D5CCC6; /* Figma Separation line color */
  position: sticky; /* Fixed navigation bar */
  top: 0;
  z-index: 900;
  height: 80px; /* according toFigmaSet a fixed height */
  box-sizing: border-box;
}
.logo {
  cursor: pointer;
  display: flex; /* add flex To help align images */
  align-items: center; /* Vertically centered image */
}
.nav-menu {
  list-style: none; /* Remove the default style from the list */
  display: flex; /* Horizontal arrangement of menu items */
  gap: 30px; /* FigmaMenu item spacing */
  margin: 0;
  padding: 0;
}
.nav-menu li {
  font-family: 'Poppins', sans-serif; /* Figma Menu font */
  font-size: 16px; /* Figma Menu font size */
  color: #000000; /* Figma Menu Text Color */
  cursor: pointer;
  transition: color 0.3s ease;
}
.nav-menu li:hover {
  color: #51393A; /* Mouse hover color，Customizable */
}
.nav-icons {
  display: flex; /* use Flexbox */
  align-items: center; /* Ensure that all icons are vertically centered and aligned */
  gap: 20px; /* Figma Icon spacing */
}
/* General style for all icons in nav-icons for alignment */
.nav-icons > * { /* Target direct children: span for search, img for heart and bag */
  display: flex; /* Helps align content within the icon wrapper if any */
  align-items: center;
  justify-content: center;
}
.nav-icons img { /* Style for all img icons (heart, bag, and search if it becomes one) */
  width: 24px; /* according toFigmaAdjust icon size，Ensure coordination with image size */
  height: 24px; /* according toFigmaAdjust icon size，Ensure coordination with image size */
  object-fit: contain; /* Ensure complete display of image content */
  cursor: pointer;
}
/* Specific class for search icon's image if needed, already covered by .nav-icons img */
/* .nav-icons .icon-search-img { ... } */
/* The search span itself, if it remains a span wrapping an img */
.nav-icons .icon-search {
    line-height: 1; /* Ensure span itself doesn't add extra height */
}
.nav-icons img.icon-heart, /* Specifically referring to the heart-shaped icon */
.nav-icons img.icon-search-img /* If the search icon isimg */ {
    width: 24px; /* Clearly set the width of the image */
    height: 24px; /* Clearly set the height of the image */
    object-fit: contain; /* Ensure complete display of image content */
}
.nav-icons .icon-bag {
    font-size: 28px; /* shopping bagemojiYou may need to fine tune the size to visually align with other icons */
    line-height: 1; /* ensureemojiThere will be no additional row height causing misalignment */
}