/* === BLUE SHELF MICROBAKERY === FILE: css/nav.css === */
/* Navbar, tab styles, cart button */

nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 66px; padding: 0 5%;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(253,246,236,0.92); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(107,143,171,0.13);
}
.nav-logo { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; color: var(--navy); text-decoration: none; letter-spacing: -0.02em; cursor: pointer; }
.nav-logo span { color: var(--blue); }
.nav-tabs { display: flex; gap: 0.25rem; }
.nav-tab {
  padding: 0.45rem 1.1rem; border-radius: 50px; border: none; background: none;
  font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 500;
  color: var(--text-muted); cursor: pointer; transition: all 0.2s;
}
.nav-tab:hover { color: var(--navy); background: var(--blue-xlight); }
.nav-tab.active { background: var(--navy); color: var(--cream); font-weight: 600; }
.cart-btn {
  background: var(--blush); border: none; border-radius: 50px; padding: 0.45rem 1.1rem;
  font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 600; color: var(--navy);
  cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 0.4rem;
}
.cart-btn:hover { background: var(--blush-dark); color: #fff; transform: translateY(-1px); }
.cart-count {
  background: var(--navy); color: var(--cream); font-size: 0.68rem; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s;
}
.cart-count.bump { transform: scale(1.4); }

@media (max-width: 540px) {
  .nav-tabs .nav-tab { padding: 0.4rem 0.65rem; font-size: 0.8rem; }
  nav { padding: 0 4%; }
}