/* ===================== ANNOUNCEMENT BAR ===================== */
.announcement-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 230;
  background: var(--white);
  color: var(--black);
  text-align: center;
  padding: 0.55rem 3rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.announcement-bar span { opacity: 0.4; font-size: 0.6rem; }
.announcement-close {
  position: absolute;
  right: 1.2rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--black);
  opacity: 0.4;
  transition: var(--trans);
  line-height: 1;
}
.announcement-close:hover { opacity: 1; }
/* ===================== NAV ===================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 220;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 2.5rem;
  background: #09090b;
  isolation: isolate;
  border-bottom: 1px solid var(--c08);
  box-shadow: 0 1px 12px rgba(0,0,0,0.3);
  transition: top .45s ease, background .35s ease, box-shadow .35s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.logo { height: 36px; width: auto; filter: none; }
.nav-left a { display: flex; align-items: center; cursor: pointer; }
.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.nav-right button {
  background: none;
  border: none;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  cursor: pointer;
  padding: 0.4rem 0.8rem;
  transition: var(--trans);
}
.nav-right button:hover { opacity: 0.5; }
#cart-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--c30) !important;
  border-radius: 2px;
}
.cart-count {
  font-size: 0.7rem;
  background: var(--white);
  color: var(--black);
  border-radius: 50%;
  width: 16px; height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
#account-btn {
  background: none;
  border: none;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 0.4rem;
  opacity: 0.75;
  transition: var(--trans);
}
#account-btn:hover { opacity: 1; }
#account-btn svg { width: 15px; height: 15px; }
.logout-btn {
  background: none;
  border: none;
  color: var(--c35);
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s;
  display: none;
}
.logout-btn:hover { color: var(--white); }

/* ===================== MOBILE NAV ===================== */
@media (max-width: 900px) {
  .announcement-bar {
    padding: calc(0.35rem + env(safe-area-inset-top, 0px)) 3rem 0.55rem;
  }
  .nav {
    z-index: 240;
    padding: calc(0.55rem + env(safe-area-inset-top, 0px)) 1rem 0.8rem;
    transition: background .35s ease, box-shadow .35s ease, padding .35s ease;
  }
  .nav-right {
    gap: 0.5rem !important;
  }
  .nav-right button {
    font-size: 0.72rem;
    padding: 0.3rem 0.5rem;
    letter-spacing: 0.06em;
  }
  /* Keep the cart bag button identifiable */
  #cart-btn {
    padding: 0.3rem 0.6rem;
  }
}

/* ===================== LIGHT MODE ===================== */
body.light-mode .announcement-bar {
  background: #09090b;
  color: #F0EEE9;
  border-bottom-color: rgba(244,241,235,0.1);
}
body.light-mode .announcement-close {
  color: #F0EEE9;
}
body.light-mode .nav {
  background: #F0EEE9;
  border-bottom-color: rgba(9,9,11,0.08);
  box-shadow: 0 1px 12px rgba(9,9,11,0.06);
}
body.light-mode .logo {
  filter: invert(1);
}
body.light-mode .nav-right button,
body.light-mode #account-btn {
  color: #09090b;
}
body.light-mode .nav-right button:hover,
body.light-mode #account-btn:hover {
  opacity: 0.65;
  color: #09090b;
}
body.light-mode #cart-btn {
  border-color: rgba(9,9,11,0.2) !important;
  color: #09090b;
}
body.light-mode .cart-count {
  background: #09090b;
  color: #E8E3DC;
}
body.light-mode .logout-btn {
  color: rgba(9,9,11,0.35);
}
body.light-mode .logout-btn:hover {
  color: #09090b;
}