.navbar2{
    display: flex;
    justify-content: between;
    width: 100%;
    height: 161px;
    background-color: (95,150,170);
}


.navbar2-section{
    flex:1;
    height: 100%;
    
    display: flex;
    align-items: center;
    justify-content: center;
}


.left{
    flex:1;
    color: black;
}

.middle{
    flex:3
}

.right{
    flex:1.5;
    justify-content: flex-end;
}

.nav-links {
  display: flex;
  width: 100%;                    /* make it fill the middle section */
  justify-content: space-evenly;  /* ← evenly spread across the width */
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;            /* keep all on one line */
  overflow: visible !important;

}

.nav-links a {
  text-decoration: none;
  color: black;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* Right section container */
.header-right {
  display: flex;
  align-items: center;
  gap: 20px;   /* space between search & icons */
}

/* Search pill */
/* Search pill */
.search {
  display: flex;
  align-items: center;
  height: 40px;
  min-width: 260px;
  background: #f1e5d7;       /* all white */
  border-radius: 9999px;
  overflow: hidden;
  flex: 0.9;
  border: 1px solid #ddd;    /* optional subtle border */
}

/* Input */
.search-input {
  border: 0;
  background: #f1e5d7;
  padding: 0 16px;
  font-size: 16px;
  color: white;            /* black text */
  width: 100%;
  outline: none;
}

.search-input::placeholder {
  color: black;               /* dark gray placeholder */
}

/* Button */
.search-btn {
  border: 0;
  background: #f1e5d7;   /* same white background */
  display: grid;
  place-items: center;
  height: 40px;
  width: 48px;
  cursor: pointer;
  color: #000000;            /* black icon */
}

.search-btn svg {
  stroke: black;           /* ensure SVG uses black stroke */
}


/* Icons row */
.icon-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
  text-decoration: none;
}

/* Cart badge */
.icon.cart .badge {
  position: absolute;
  top: -6px;
  right: -6px;
  height: 18px;
  min-width: 18px;
  padding: 0 5px;
  border-radius: 9999px;
  background: #d1ad00;   /* gold badge */
  color: #000;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.tabs-wrap {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}

.tabs-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabs-row {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  scroll-snap-type: x mandatory;
  align-items: center;
}

.tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;            /* prevents wrapping */
  scroll-snap-align: start;
  text-decoration: none;
}

.tab-count {
  min-width: 22px;
  line-height: 20px;
  padding: 0 8px;
  font-size: 12px;
  border-radius: 999px;
  background: #f3f4f6;       /* subtle badge bg */
}

.tabs-arrow {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  user-select: none;
}

/* Parent must be relative */
.dropdown {
  position: relative;
  
}

/* Hide dropdown by default */
.dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 20px); /* visually 20px below */
  background: white;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #ddd;
  min-width: 180px;
  z-index: 1000;
  border-radius: 0; /* ← removes rounded edges */

}

/* Show on hover */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* Items */
.dropdown-menu li {
  padding: 8px 12px;
}

.dropdown-menu li a {
  text-decoration: none;
  color: #333;
  display: block;
}

.dropdown-menu li:hover {
  background-color: #f5f5f5;
}

/* Invisible hover bridge */
.dropdown::after {
  content: "";
  position: absolute;
  top: 100%;         /* immediately below the parent */
  left: 0;
  width: 100%;
  height: 20px;      /* matches the gap */
}

.tabs-scroll::-webkit-scrollbar { height: 6px; }
.tabs-scroll::-webkit-scrollbar-thumb { border-radius: 6px; background: #e5e7eb; }