/* ==========================================================================
   2. HEADER — promo bar, sticky nav, slide-in drawer
   ========================================================================== */

/* ── promo bar ───────────────────────────────────────────────────────────
   Compact, centred, readable. The desktop version ran at 10px, which is
   unreadable on a handset. */
.topbar{
  min-height:var(--m-promo);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:10px var(--m-gutter);
  font-size:.8125rem;              /* 13px */
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.35;
}
.topbar a{
  font-size:inherit;font-weight:700;
  text-decoration:underline;text-underline-offset:3px;
  margin-left:6px;
}

/* ── sticky nav ─────────────────────────────────────────────────────────── */
.navbar{
  position:sticky;top:0;z-index:1200;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.07);
}
body.nav-stuck .navbar{box-shadow:0 2px 14px rgba(0,0,0,.08);}

.nav-inner{
  height:var(--m-header);
  display:flex;align-items:center;gap:10px;
  padding:0 var(--m-gutter);
}

/* burger sits first, logo next to it, icons pushed right */
.nav-burger{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;margin-left:-10px;
  font-size:1.5rem;background:none;border:none;cursor:pointer;color:var(--black);
}
.nav-logo{
  margin-right:auto;
  display:inline-flex;align-items:center;
  font-size:1.25rem;
}
.nav-logo img{max-height:30px;width:auto;display:block;}

.nav-menu{display:none;}          /* replaced by the drawer */
.nav-cta{display:none;}           /* sign-in lives in the drawer */

.nav-right{display:flex;align-items:center;gap:2px;}
.nav-icon-btn{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;position:relative;background:none;border:none;
  color:var(--black);
}
.icon-badge{
  position:absolute;top:6px;right:5px;
  min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:var(--red);color:#fff;
  font-size:.625rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}

/* ── slide-in drawer ────────────────────────────────────────────────────── */
.mobile-drawer{
  position:fixed;top:0;left:-100%;
  width:min(88vw,360px);height:100%;
  background:#fff;z-index:3000;overflow-y:auto;
  transition:left .3s cubic-bezier(.4,0,.2,1);
  box-shadow:10px 0 44px rgba(0,0,0,.2);
  display:flex;flex-direction:column;
  -webkit-overflow-scrolling:touch;
}
body.drawer-open .mobile-drawer{left:0;}
body.drawer-open{overflow:hidden;}

.drawer-scrim{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  z-index:2999;opacity:0;visibility:hidden;transition:opacity .3s;
}
body.drawer-open .drawer-scrim{opacity:1;visibility:visible;}

.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--m-gutter);
  min-height:var(--m-header);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.drawer-logo img{max-height:28px;width:auto;}
.drawer-close{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;font-size:1.6rem;line-height:1;color:#666;cursor:pointer;
}

.drawer-nav{flex:1;padding:4px 0 16px;}
.drawer-row{border-bottom:1px solid #f2f2f2;}
.drawer-link{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:16px var(--m-gutter);
  min-height:52px;
  font-size:.9375rem;               /* 15px */
  font-weight:500;letter-spacing:.01em;
  color:var(--black);text-decoration:none;cursor:pointer;
}
.drawer-link.sale{color:var(--red);font-weight:700;}
.drawer-link i{font-size:1.05rem;color:#999;transition:transform .25s;}
.drawer-row.open > .drawer-link i{transform:rotate(180deg);}

.drawer-sub{display:none;background:#fafafa;padding-bottom:10px;}
.drawer-row.open > .drawer-sub{display:block;}
.drawer-sub-head{
  padding:14px var(--m-gutter) 6px;
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:#999;font-weight:700;
}
.drawer-sub a{
  display:block;padding:11px var(--m-gutter) 11px 28px;
  font-size:.875rem;color:#444;text-decoration:none;min-height:44px;
}

.drawer-foot{
  border-top:1px solid rgba(0,0,0,.08);
  padding:14px var(--m-gutter) 30px;
  display:flex;flex-direction:column;gap:2px;
}
.drawer-foot a{
  display:flex;align-items:center;gap:12px;
  min-height:46px;font-size:.875rem;color:var(--black);text-decoration:none;
}
.drawer-foot a i{font-size:1.1rem;color:#999;width:22px;}
.drawer-cta{
  background:var(--black);color:#fff !important;
  justify-content:center;margin-top:12px;
  font-size:.75rem !important;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;
}

/* search panel drops under the sticky bar */
.search-panel{top:calc(var(--m-header) + var(--m-promo));}