/* ==========================================================================
   Desktop site header: one slim floating glass pill.
   Logo · five section links · Trail switch + Store. Nothing else.
   ========================================================================== */
.site-hdr {
  --ease: cubic-bezier(.16, 1, .3, 1);
  display: none;
  position: fixed; z-index: 85; top: 18px; left: 24px; right: 24px; margin: 0 auto; max-width: 1180px; height: 60px;
  grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 8px 0 22px;
  border-radius: 999px; background: rgba(12, 12, 14, .6); border: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 10px 40px -18px rgba(0, 0, 0, .6);
  color: #f3f0e9; font-family: 'Geist', system-ui, sans-serif;
  transition: transform .8s var(--ease), background .5s ease, border-color .5s ease;
}
.site-hdr.is-compact { background: rgba(12, 12, 14, .74); border-color: rgba(255, 255, 255, .1); }
.site-hdr.is-hidden, .menu-open .site-hdr { transform: translateY(calc(-100% - 30px)); }

.sh-logo { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-family: 'Bricolage Grotesque', 'Geist', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: inherit; }
.sh-logo .bee { font-size: 24px; color: #ffc21a; transition: transform .7s var(--ease); }
.sh-logo:hover .bee { transform: rotate(-14deg); }

.sh-nav { display: flex; gap: 4px; }
.sh-nav a { position: relative; padding: 8px 14px; font-size: 14px; color: rgba(243, 240, 233, .62); border-radius: 99px; transition: color .35s ease; }
.sh-nav a::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #ffc21a; transform: scale(0); transition: transform .5s var(--ease); }
.sh-nav a:hover { color: #f3f0e9; }
.sh-nav a.is-active { color: #f3f0e9; }
.sh-nav a.is-active::after { transform: scale(1); }

.sh-right { justify-self: end; display: flex; align-items: center; gap: 14px; }
.sh-store { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px 0 18px; border-radius: 99px; background: #ffc21a; color: #0a0a0a; font-weight: 600; font-size: 14px; transition: background .3s ease, transform .4s var(--ease); }
.sh-store:hover { background: #ffd34d; }
.sh-store .count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 99px; background: #0a0a0a; color: #ffc21a; font-size: 12px; }

/* desktop gets the pill; smaller screens keep the slim bar */
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .site-hdr { display: grid; }
  #nav { display: none; }
  .menu-open #nav { display: block; }
}

/* ---------- Trail switch ---------- */
.fx-toggle { display: none !important; align-items: center; gap: 9px; font-size: 13px; color: rgba(243, 240, 233, .62); transition: color .3s; }
.fx-toggle:hover { color: #f3f0e9; }
@media (hover: hover) and (pointer: fine) { .fx-toggle { display: inline-flex !important; } }
.fx-switch { position: relative; width: 32px; height: 18px; border-radius: 99px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); transition: background .45s var(--ease), border-color .45s; }
.fx-switch i { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: rgba(243, 240, 233, .8); transition: transform .6s var(--ease), background .45s; }
.fx-toggle[aria-pressed="true"] { color: #f3f0e9; }
.fx-toggle[aria-pressed="true"] .fx-switch { background: #ffc21a; border-color: #ffc21a; }
.fx-toggle[aria-pressed="true"] .fx-switch i { transform: translateX(14px); background: #0a0a0a; }

/* ==========================================================================
   Ring cursor: a dot pinned to the pointer and a ring that glides after it in
   slow motion, stretching with speed and opening up over links.
   ========================================================================== */
.fx-ring, .fx-dot { position: fixed; top: 0; left: 0; z-index: 96; pointer-events: none; mix-blend-mode: difference; opacity: 0; will-change: transform; }
.fx-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; transition: opacity .3s, width .45s cubic-bezier(.16,1,.3,1), height .45s, margin .45s; }
.fx-ring { width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; transition: opacity .5s; }
.fx-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.85);
  transition: transform .9s cubic-bezier(.16,1,.3,1), background-color .6s, border-width .4s; transform: scale(var(--k, 1)); }
.fx-ring span { position: relative; font: 600 11px/1 'Geist', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #000; opacity: 0; transform: scale(.6); transition: opacity .35s, transform .6s cubic-bezier(.16,1,.3,1); }
html.fx-ring-on .fx-ring, html.fx-ring-on .fx-dot { opacity: 1; }
html.fx-ring-on.fx-away .fx-ring, html.fx-ring-on.fx-away .fx-dot { opacity: 0; }
html.fx-hover .fx-ring::before { --k: 1.9; background: #fff; border-color: #fff; }
html.fx-hover .fx-dot { width: 0; height: 0; margin: 0; }
html.fx-label .fx-ring::before { --k: 2.3; background: #fff; border-color: #fff; }
html.fx-label .fx-ring span { opacity: 1; transform: scale(1); }
html.fx-down .fx-ring::before { --k: .72; }
html.fx-down.fx-hover .fx-ring::before, html.fx-down.fx-label .fx-ring::before { --k: 1.55; }
html.fx-ring-on, html.fx-ring-on body, html.fx-ring-on a, html.fx-ring-on button, html.fx-ring-on [role="button"], html.fx-ring-on label, html.fx-ring-on canvas { cursor: none; }
html.fx-ring-on input, html.fx-ring-on textarea, html.fx-ring-on select { cursor: auto; }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .fx-ring, .fx-dot { display: none !important; }
}