/* Shared web top bar: the ONE stylesheet for every static page (landing,
   ingredients, products). Mirrors the Flutter web bar in
   lib/widgets/responsive_scaffold.dart; change both together. */
.appbar{position:sticky;top:0;z-index:20;padding:14px 16px 6px}
.bar{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:14px 22px;border-radius:26px;background:linear-gradient(145deg,#fdf8f0,#f1e6d2);
  box-shadow:6px 8px 18px rgba(176,161,142,.5),-6px -6px 14px rgba(255,255,255,.9)}
.brand{justify-self:start;display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:64px;height:64px;border-radius:14px}
.brand .wm{font-size:22px;line-height:1;font-weight:500;color:#5B6B45;letter-spacing:-.01em;
  text-shadow:0 1px 0 rgba(255,255,255,.8),0 2px 3px rgba(0,0,0,.22)}
.brand .wm b{font-weight:900}

/* Nav: always centred in the bar; the current page is a pressed pill. */
.nav{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap}
.nav a{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 14px;border-radius:16px;
  color:#3B2C28;text-decoration:none;font-family:'Nunito',system-ui,sans-serif;font-weight:800;font-size:15px;
  transition:background .15s,color .15s,border-color .15s}
.nav a:hover{color:#5B6B45;background:rgba(176,161,142,.14)}
.nav a.gated{border:1px solid #DAD3CD;border-radius:999px;padding:0 8px 0 14px}
.nav a.gated:hover{background:transparent;border-color:#5B6B45}
.nav .tag{font-size:11px;font-weight:800;letter-spacing:.3px;color:#6A554E;background:rgba(221,231,210,.5);
  border-radius:999px;padding:3px 8px}
.nav a.on,.nav a.on:hover{color:#5B6B45;background:#F4EAD7;border-color:transparent;
  box-shadow:inset 3px 3px 6px rgba(137,122,100,.4),inset -3px -3px 6px rgba(255,255,255,.85)}

/* Actions: round elevated icon buttons (SoftIconButton), pressed on tap. */
.actions{justify-self:end;display:flex;align-items:center;gap:10px}
.ibtn{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;padding:0;border:none;border-radius:50%;cursor:pointer;color:#6A554E;
  background:linear-gradient(135deg,#FAF6ED,#F4EAD7);
  box-shadow:3px 4px 8px rgba(176,161,142,.69),-3px -3px 6px rgba(255,255,255,.95)}
.ibtn:active,.ibtn.on{background:#F4EAD7;
  box-shadow:inset 3px 3px 6px rgba(137,122,100,.4),inset -3px -3px 6px rgba(255,255,255,.85)}
.ibtn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ibtn.heart{color:#C6655A}
.ibtn.heart.on svg{fill:currentColor}
.ibtn .badge{position:absolute;right:-5px;top:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  border:1.5px solid #fff;background:#C6655A;color:#fff;font:800 10px/15px 'Nunito',system-ui,sans-serif;text-align:center}
.ibtn .badge:empty{display:none}

/* Below the Flutter web breakpoint the nav drops to its own row. */
@media(max-width:980px){
  .bar{grid-template-columns:1fr auto}
  .nav{grid-column:1/-1;grid-row:2}
}

/* Signed in (set by /appbar.js): gated links become plain links. */
.signed-in .nav .tag{display:none}
.signed-in .nav a.gated{border-color:transparent;border-radius:16px;padding:0 14px}
.signed-in .nav a.gated:hover{border-color:transparent;background:rgba(176,161,142,.14)}