/* ============================================================
   STORE BAR: one floating bar over the hero sky that carries the
   section links and Buy, plus the logo once the hero is behind you.
   This file holds the shared structure and behaviour. The look
   (nav-pill.css, chosen from three tried on 27 Sep 2026) is scoped
   to :root[data-nav="pill"] and sets surface, type and spacing,
   plus these tokens:
     --bar-gap    space between the bar and the page edges
     --bar-h      bar height
     --bar-max    widest the bar gets on large screens
     --nav-h      space the bar takes at the top (gap + height);
                  the hero pads by this and anchors scroll past it
   States, set on #storebar by nav.js:
     .is-hidden     scrolling down: the bar slides out of view
     .is-past-hero  hero is behind you: the logo's slot opens
   ============================================================ */
:root{--bar-gap:10px; --bar-h:52px; --bar-max:1180px}

.storebar{
  position:fixed; z-index:60; top:0; left:0; right:0;
  padding:var(--bar-gap) var(--bar-gap) 0;
  pointer-events:none;
  transition:transform 280ms var(--motion-ease)
}
.storebar.is-hidden{transform:translateY(calc(-100% - 16px))}
.storebar__in{
  pointer-events:auto;
  display:flex; align-items:center; gap:8px;
  min-height:var(--bar-h); max-width:var(--bar-max); margin:0 auto
}

/* The logo waits in a collapsed slot and slides open once the hero is behind you.
   The 0fr to 1fr column animates the width; the inner box clips while it opens,
   so the logo keeps its own padding and spacing. */
.storebar__slot{display:grid; grid-template-columns:0fr; flex:0 0 auto;
  transition:grid-template-columns 280ms var(--motion-ease)}
.storebar.is-past-hero .storebar__slot{grid-template-columns:1fr}
.storebar__slot-in{display:flex; align-items:center; min-width:0; overflow:hidden}
.storebar__logo{flex:0 0 auto; text-decoration:none; white-space:nowrap;
  opacity:0; visibility:hidden; transition:opacity 180ms ease, visibility 0s linear 280ms}
.storebar.is-past-hero .storebar__logo{opacity:1; visibility:visible;
  transition:opacity 180ms ease 80ms, visibility 0s linear 0s}

.navlinks{display:flex; align-items:center; flex:0 0 auto}
.navlinks a{display:inline-flex; align-items:center; min-height:44px; text-decoration:none; white-space:nowrap}
.navbuy{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; margin-left:auto;
  min-height:44px; text-decoration:none; white-space:nowrap}

@media (max-width:599px){
  .storebar__logo span{display:block}
  .navbuy-price{display:none}
}
/* Very narrow phones: links and Buy only, no logo. */
@media (max-width:359px){
  .storebar__slot{display:none}
}

@media (prefers-reduced-motion:reduce){
  .storebar,
  .storebar__slot,
  .storebar__logo{transition:none !important}
}

/* The bar floats over the hero, so the hero starts at the very top and
   pads its content down by the bar's space. Heights match style.css. */
.hero-meadow{margin-top:calc(-1 * var(--nav-h)); padding-top:var(--nav-h); min-height:100svh}
.hero-meadow .hero-meadow__layout{min-height:0; flex:1 0 auto}
@media (max-width:899px){
  .hero-meadow{min-height:max(calc(672px + var(--nav-h)),100svh)}
}
@media (max-height:650px){
  .hero-meadow{min-height:calc(620px + var(--nav-h))}
}
@media (max-width:899px) and (max-height:500px) and (orientation:landscape){
  .hero-meadow{min-height:calc(460px + var(--nav-h))}
}