/* ============================================================
   ANNOUNCEMENT BAR — dark, promises left, utility links right
   ============================================================ */
.topbar {
  background: var(--c-navy-deep);
  color: rgba(255,255,255,.82);
  font-size: var(--t-xs);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: 42px; padding-block: var(--s-2);
}
.topbar__promos { display: flex; align-items: center; gap: var(--s-3); font-weight: 500; }
.topbar__promos strong { color: #fff; font-weight: 700; }
.topbar__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--c-navy); flex: none; }
.topbar__links { display: flex; align-items: center; gap: var(--s-5); }
.topbar__links a { transition: color .16s var(--ease); }
.topbar__links a:hover { color: #fff; }
.topbar__phone { color: #fff; font-weight: 600; }

@media (max-width: 1080px) { .topbar__links { display: none; } }
@media (max-width: 720px) {
  .topbar__inner { justify-content: center; min-height: 36px; }
  .topbar__promos { font-size: 11px; gap: var(--s-2); }
  /* Only the first promise survives at phone width */
  .topbar__promos .topbar__promo:nth-child(n+4) { display: none; }
}

/* ============================================================
   HEADER — logo, search rail, account/cart
   ============================================================ */
.site-header { position: sticky; top: 0; z-index: 90; background: var(--c-white); }
.site-header.is-stuck { box-shadow: var(--sh-2); }

.header__main {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center; gap: var(--s-6);
  padding-block: var(--s-4);
}

/* --- Logo --- */
.brand { display: flex; align-items: center; gap: var(--s-3); }
.brand__mark {
  width: 44px; height: 44px; border-radius: var(--r); flex: none;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 1.5rem; font-weight: 600; line-height: 1;
}
.brand__name {
  font-family: var(--f-display); font-size: 1.6rem; font-weight: 700;
  letter-spacing: .02em; line-height: 1; color: var(--c-ink);
}
.brand__tag {
  font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-ink-soft); font-weight: 700; margin-top: 3px;
}

/* --- Search rail --- */
.hsearch {
  display: flex; align-items: stretch;
  border: 2px solid var(--c-navy); border-radius: var(--r);
  overflow: hidden; background: var(--c-white);
  max-width: 880px; width: 100%;
}
.hsearch__cat { position: relative; flex: none; border-right: 1px solid var(--c-line); }
.hsearch__cat select {
  appearance: none; border: 0; background: transparent;
  padding: 0 var(--s-7) 0 var(--s-4); height: 100%;
  font-size: var(--t-sm); font-weight: 500; color: var(--c-ink);
  cursor: pointer; min-width: 170px;
}
.hsearch__cat::after {
  content: ""; position: absolute; right: var(--s-4); top: 50%;
  width: 9px; height: 9px; margin-top: -6px; pointer-events: none;
  border-right: 2px solid var(--c-ink-soft); border-bottom: 2px solid var(--c-ink-soft);
  transform: rotate(45deg);
}
.hsearch__cat select:focus { outline: none; }
.hsearch__field { flex: 1; border: 0; padding: 13px var(--s-4); font-size: var(--t-base); min-width: 0; }
.hsearch__field:focus { outline: none; }
.hsearch__go {
  flex: none; display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 0 var(--s-6); background: var(--c-navy); color: #fff;
  font-size: var(--t-sm); font-weight: 700;
  transition: background-color .18s var(--ease);
}
.hsearch__go:hover { background: var(--c-navy-deep); }

/* --- Account / cart --- */
.tools { display: flex; align-items: center; gap: var(--s-5); }
.tool-wide {
  display: inline-flex; align-items: center; gap: var(--s-3);
  color: var(--c-ink); transition: color .18s var(--ease);
}
.tool-wide:hover { color: var(--c-navy); }
.tool-wide__ico { position: relative; flex: none; }
.tool-wide__l1 { font-size: 11px; color: var(--c-ink-soft); line-height: 1.2; }
.tool-wide__l2 { font-size: var(--t-sm); font-weight: 700; line-height: 1.25; }
.tool-wide__badge {
  position: absolute; top: -7px; right: -9px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--c-navy); color: #fff;
  border-radius: 9px; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.tool-wide__badge.is-bumped { animation: badge-bump .4s var(--ease); }
@keyframes badge-bump { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }

/* Icon-only buttons, shown once the wide versions collapse */
.tool {
  position: relative; width: 42px; height: 42px; border-radius: var(--r);
  display: none; align-items: center; justify-content: center; color: var(--c-ink);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.tool:hover { background: var(--c-ice); color: var(--c-navy); }
.tool svg { width: 20px; height: 20px; }
.tool__badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--c-navy); color: #fff;
  border-radius: 9px; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1180px) { .hsearch__cat { display: none; } }
@media (max-width: 1024px) {
  .header__main { grid-template-columns: auto 1fr auto; gap: var(--s-4); padding-block: var(--s-3); }
  .hsearch { display: none; }
  .tool-wide__text { display: none; }
  .tool { display: inline-flex; }
  .tools { gap: var(--s-1); }
  .brand__mark { width: 38px; height: 38px; font-size: 1.25rem; }
  .brand__name { font-size: 1.3rem; }
}
@media (max-width: 520px) { .brand__tag { display: none; } }

/* ============================================================
   OLIVE NAV BAR
   ============================================================ */
.navbar { background: var(--c-navy); color: #fff; position: relative; }
.navbar__inner { display: flex; align-items: stretch; gap: var(--s-5); }

.navbar__browse {
  display: inline-flex; align-items: center; gap: var(--s-3);
  background: var(--c-navy-deep); color: #fff;
  padding: 0 var(--s-5); font-size: var(--t-sm); font-weight: 700; flex: none;
}
.navbar__browse svg:last-child { transition: transform .2s var(--ease); }
.navbar__browse[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }

.nav { flex: 1; min-width: 0; }
.nav__list { display: flex; align-items: stretch; gap: var(--s-6); height: 100%; }
/* static, so the mega panel can span the full navbar width */
.nav__item { display: flex; align-items: stretch; position: static; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding-block: 15px;
  font-size: var(--t-sm); font-weight: 600; color: rgba(255,255,255,.92);
  transition: color .16s var(--ease);
}
.nav__link:hover, .nav__item.is-open > .nav__link { color: #fff; }
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 2px;
  background: #7FC4F0; transform: scaleX(0); transform-origin: left;
  transition: transform .22s var(--ease);
}
.nav__item:hover > .nav__link::after,
.nav__item.is-open > .nav__link::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link svg { opacity: .8; transition: transform .2s var(--ease); }
.nav__item:hover > .nav__link svg { transform: rotate(180deg); }

.navbar__aside {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); font-weight: 700; color: #fff; flex: none;
}
.navbar__aside svg { opacity: .85; }

@media (max-width: 1024px) { .navbar { display: none; } }

/* ============================================================
   MEGA DROPDOWN
   ============================================================ */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line);
  box-shadow: var(--sh-3);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 80; color: var(--c-ink);
}
.nav__item:hover .mega, .nav__item.is-open .mega { opacity: 1; visibility: visible; transform: none; }

.mega__inner {
  display: grid; grid-template-columns: repeat(4, 1fr) 1.15fr;
  gap: var(--s-7); padding-block: var(--s-6);
}
.mega__col-title {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-ink);
  padding-bottom: var(--s-3); margin-bottom: var(--s-4);
  border-bottom: 2px solid var(--c-navy);
}
.mega__links { display: flex; flex-direction: column; gap: 10px; }
.mega__link {
  font-size: var(--t-sm); color: var(--c-ink-soft);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  transition: color .16s var(--ease), padding-left .16s var(--ease);
}
.mega__link:hover { color: var(--c-navy); padding-left: 3px; }
.mega__count { font-size: 11px; color: var(--c-line); font-variant-numeric: tabular-nums; }
.mega__link:hover .mega__count { color: var(--c-steel); }

.mega__feature {
  border-left: 1px solid var(--c-line); padding-left: var(--s-7);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.mega__feature-img {
  aspect-ratio: 4/3; background: var(--c-ice); border-radius: var(--r);
  overflow: hidden; margin-bottom: var(--s-1);
}
.mega__feature-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.mega__feature:hover .mega__feature-img img { transform: scale(1.04); }
.mega__feature-eyebrow { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--c-navy); font-weight: 700; }
.mega__feature-title { font-family: var(--f-display); font-size: var(--t-lg); font-weight: 500; }
.mega__feature-text { font-size: var(--t-sm); color: var(--c-ink-soft); }

/* ============================================================
   MOBILE SEARCH STRIP — the rail moves here once it collapses
   ============================================================ */
.msearch { display: none; border-top: 1px solid var(--c-line); background: var(--c-ice); padding: var(--s-3) 0; }
.msearch .hsearch { display: flex; max-width: none; }
@media (max-width: 1024px) { .msearch { display: block; } }

/* ============================================================
   MOBILE DRAWER
   ============================================================ */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(8,24,42,.45); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), visibility .28s;
}
.drawer-scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 96;
  width: min(86vw, 380px); background: var(--c-white);
  transform: translateX(-100%); transition: transform .3s var(--ease);
  display: flex; flex-direction: column;
  overflow-y: auto; overscroll-behavior: contain;
}
.drawer.is-open { transform: none; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  background: transparent;
  position: sticky; top: 0; z-index: 2;
}
.drawer__head .tool { display: inline-flex; color: #fff; }
.drawer__head .tool:hover { background: rgba(255,255,255,.12); color: #fff; }
.drawer__body { padding: var(--s-4) var(--s-5) var(--s-8); }
.drawer__section + .drawer__section { border-top: 1px solid var(--c-line-soft); margin-top: var(--s-4); padding-top: var(--s-4); }

.drawer__toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 13px 0; font-size: var(--t-md); font-weight: 700; text-align: left;
}
.drawer__toggle svg { width: 12px; height: 12px; opacity: .5; transition: transform .22s var(--ease); }
.drawer__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.drawer__panel { display: none; padding-bottom: var(--s-3); }
.drawer__panel.is-open { display: block; }
.drawer__sub {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 9px 0 9px var(--s-4); font-size: var(--t-sm); color: var(--c-ink-soft);
}
.drawer__sub:hover { color: var(--c-navy); }
.drawer__link { display: block; padding: 13px 0; font-size: var(--t-md); font-weight: 700; }