/* header-nav.css — topbar, site-nav, basket badge, offcanvas, burger, overlay
   (split from storefront.css, move-only). */

/* header */
.site-header { position:sticky; top:0; z-index:30; background:var(--paper);
  border-bottom:1px solid var(--line); }
.topbar { display:flex; align-items:center; gap:1.25rem; height:72px; }
.brand img { height:40px; width:auto; }
.site-nav { display:flex; gap:1.1rem; margin-left:auto; font-family:var(--font-head);
  font-weight:600; }
.site-nav a.on, .site-nav a:hover { color:var(--green); }
.basket-link { position:relative; margin-left:.5rem; }
.basket-badge { position:absolute; top:-8px; right:-10px; min-width:18px; height:18px;
  padding:0 4px; border-radius:999px; background:var(--action); color:#fff; font-size:11px;
  font-weight:700; display:none; align-items:center; justify-content:center; }
.basket-badge.show { display:inline-flex; }
.burger { display:none; }

/* offcanvas (mobile) — right-side drawer */
.offcanvas { position:fixed; inset:0 0 0 auto; width:min(320px, 84vw); background:var(--paper);
  transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1); z-index:40;
  display:flex; flex-direction:column; box-shadow:-8px 0 30px rgba(43,43,40,.14); }
.offcanvas.open { transform:none; }
.offcanvas__top { display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.15rem; border-bottom:1px solid var(--line); }
.offcanvas__close { display:inline-flex; padding:.4rem; border:0; background:none; cursor:pointer;
  color:var(--muted); border-radius:8px; }
.offcanvas__close svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; }
.offcanvas__close:hover { color:var(--green); background:var(--green-tint); }
.offcanvas__nav { display:flex; flex-direction:column; padding:.5rem; gap:.15rem; }
.offcanvas__link { display:flex; align-items:center; gap:.85rem; padding:.85rem .9rem;
  border-radius:12px; font-family:var(--font-head); font-weight:700; color:var(--ink); }
.offcanvas__link svg { width:22px; height:22px; fill:none; stroke:var(--muted); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; flex:none; }
.offcanvas__link:hover { background:var(--green-tint); }
.offcanvas__link.on { color:var(--green); background:var(--green-tint); }
.offcanvas__link.on svg { stroke:var(--green); }
.offcanvas__badge { margin-left:auto; min-width:20px; height:20px; padding:0 5px; border-radius:999px;
  background:var(--action); color:#fff; font-size:11px; font-weight:700; display:inline-flex;
  align-items:center; justify-content:center; }
.offcanvas__account { margin-top:auto; padding:1.15rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:.6rem; }
.offcanvas__hi { font-family:var(--font-head); font-weight:700; }
.offcanvas__logout { width:100%; display:inline-flex; align-items:center; justify-content:center;
  gap:.45rem; padding:.7rem 1rem; font:inherit; font-weight:700; font-family:var(--font-head);
  color:var(--muted); background:none; border:1px solid var(--line); border-radius:12px;
  cursor:pointer; transition:color .15s, border-color .15s, background .15s; }
.offcanvas__logout:hover { color:var(--action); border-color:var(--action);
  background:rgba(0,0,0,.02); }
.offcanvas__register { text-align:center; color:var(--green); font-weight:700;
  font-family:var(--font-head); font-size:.9rem; }
.overlay { position:fixed; inset:0; background:rgba(43,43,40,.45); opacity:0; visibility:hidden;
  transition:opacity .28s, visibility .28s; z-index:35; }
.overlay.show { opacity:1; visibility:visible; }
body.nav-locked { overflow:hidden; }
/* burger -> X */
.burger span { transition:transform .25s, opacity .2s; transform-origin:center; }
.burger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .offcanvas, .overlay, .burger span { transition:none; }
}

@media (max-width:800px) {
  .site-nav { display:none; }
  /* nav is hidden on mobile, so push the cart to the right to sit beside the menu */
  .basket-link { margin-left:auto; }
  .burger { display:inline-flex; flex-direction:column; gap:4px; margin-left:0;
    background:0; border:0; cursor:pointer; }
  .burger span { width:24px; height:2px; background:var(--ink); }
}