/* The Gear Fox: ONE header for every page we make (Nov 8, Bastien: "the header is carried over to all the pages. Founder stuff either").
   Markup: scraper/site_header.py header_html() (shoe/boot/list/brand/BF/race/trail/gift pages, and About/privacy/terms/My account/
   welcome through tools/make_headers.py). Script: site/header.js. The homepage keeps its own header (search + filters live in it) with the
   same logo, ♡, ☰ and member pill. Loaded before theme.css (the charcoal look on non-homepage pages lives there). */
:root{--ink:#17201C;--card:#FFFFFF;--line:#CBD2CC;--muted:#5C6660;--mist:#EEF1EC;--moss:#B8470A;--hivis:#F26A1B;--body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
header.top{background:var(--card);border-bottom:1.5px solid var(--line)}
.top .in{max-width:720px;margin:0 auto;padding:12px 16px}
.top .in{display:flex;align-items:center;justify-content:space-between;gap:12px}
.top .logo{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:var(--ink)}
.top .logo img{height:40px;width:auto;display:block}
.top .tagline{display:flex;align-items:center;gap:5px;margin-top:3px;font:600 8.5px/1 var(--body);letter-spacing:.16em;white-space:nowrap}
.top .tagline::before,.top .tagline::after{content:"";width:10px;height:1.5px;background:var(--hivis);border-radius:1px}
.lang{font:600 14px var(--body);border:1.5px solid var(--line);border-radius:999px;padding:6px 12px;text-decoration:none;color:var(--ink)}
.top{position:relative}.menu{position:static}.menu summary{list-style:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);cursor:pointer;color:var(--ink)}
.menu summary::-webkit-details-marker{display:none}.menu[open] summary{background:var(--ink);color:var(--card);border-color:var(--ink)}
.menu nav{position:absolute;right:max(16px,calc(50% - 344px));top:calc(100% + 6px);z-index:30;width:min(300px,calc(100vw - 32px));background:var(--card);border:1.5px solid var(--line);border-radius:18px;box-shadow:0 14px 40px rgba(0,0,0,.18);padding:8px}
.menu nav a{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 12px;border-radius:12px;font:600 16px/1.2 var(--body);color:var(--ink);text-decoration:none}
.menu nav a:hover{background:var(--mist)}.menu nav .mi{flex:0 0 auto;color:var(--muted)}
.menu nav a.sw{border-top:1.5px solid var(--line);border-radius:0;margin-top:6px;font-size:15px;color:var(--moss)}
.menu nav .lsw{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-top:1.5px solid var(--line);margin-top:6px;padding:10px 8px 4px;font-size:14px;color:var(--muted)}
.menu nav .lsw .k{flex:1 1 auto}
.menu nav .lsw a,.menu nav .lsw .on{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border:1.5px solid var(--line);border-radius:999px;font:600 14px var(--body);color:var(--ink);text-decoration:none}
.menu nav .lsw .on{background:var(--hivis,#C9F24D);border-color:var(--hivis,#C9F24D);color:#17201C}
.hdrb header.top{position:sticky;top:0;z-index:30;transition:transform .22s ease}
.hdrb header.top.hide{transform:translateY(-100%)}
.hdrb .find{top:var(--hh,0px);transition:top .22s ease}
.hsb{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-left:auto;margin-right:-4px;border-radius:50%;background:none;border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer}
.hsb[aria-expanded="true"]{background:rgba(255,255,255,.16)}
.hsb[hidden],.hsf[hidden]{display:none}
.hsf{display:flex;gap:8px;max-width:720px;margin:0 auto;padding:0 16px 12px}
.hsf input{flex:1;min-width:0;min-height:44px;font:400 16px var(--body);color:#17201C;background:#fff;border:0;border-radius:999px;padding:0 16px}
.hsf button{flex:none;min-height:44px;font:700 15px var(--body);color:#17201C;background:var(--hivis,#FF5A1F);border:0;border-radius:999px;padding:0 16px;cursor:pointer}
/* Nov 8: same logo as the homepage at each width: the app icon's fox under 760px, the wordmark above */
header.top .logo .lgmini{display:none}
@media(max-width:759px){html header.top .logo img.lgfull,html header.top .logo .tagline{display:none}
  html:not(.rd) header.top .logo img.lgmini{display:block;width:40px;height:40px;border-radius:50%}}
/* ♡ watchlist + member pill, as on the homepage */
header.top .hright{display:flex;align-items:center;gap:6px;margin-left:auto}
header.top .hright .hsb{margin-left:0;margin-right:0}
.hwatch{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:#fff;text-decoration:none}
.hwatch:focus-visible,.gsr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* the charcoal look itself (theme.css repeats it; pages without theme.css, like My account and the welcome page, need it here) */
html:not(.rd) header.top{background:#17232B;border-bottom:0;font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
html:not(.rd) header.top .tagline{color:#fff}
@media(max-width:899px){html:not(.rd) header.top .tagline{display:none}}
html:not(.rd) header.top .logo img.lgfull{height:38px;width:auto}
html:not(.rd) header.top .menu summary{color:#fff;border-color:rgba(255,255,255,.3)}
html:not(.rd) header.top .menu[open] summary{background:rgba(255,255,255,.16);color:#fff;border-color:transparent}
html:not(.rd) header.top .menu nav{background:#fff;color:#17232B}
html:not(.rd) header.top .menu nav a{color:#17232B}
/* Nov 8 (Bastien, team 3-0): for paying members the member badge REPLACES the logo fox, one fox. Founder = the founding icon (gold ring
   as drawn) + a small gold "#001" tag on its bottom edge; Pro = the same green fox with the gold ring cut off (round box, image drawn
   larger), a thin forest ring + a "PRO" tag of the same size. Visitors keep the logo. header.js fills it from this phone's Pro answer. */
header.top.member .logo img.lgmini,header.top.member .logo img.lgfull{display:none!important}
.mbadge{position:relative;display:inline-flex;flex-direction:column;align-items:center;flex:none}
.mbadge[hidden]{display:none}
.mbox{display:block;width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none}
.mbox img{display:block;width:40px;height:40px}
.mbadge .mtag{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);padding:1px 3px;border-radius:4px;font:800 8px/1 "Inter",system-ui,sans-serif;
  letter-spacing:.02em;white-space:nowrap;font-variant-numeric:tabular-nums;background:#16301F;color:#E3B85A;border:1px solid rgba(249,246,240,.75)}
.mbadge.pro .mbox,.macct .mbox.pro{width:36px;height:36px;margin:2px;box-shadow:0 0 0 1.5px #3E7A5A}
.mbadge.pro .mbox img{width:46px;height:46px;margin:-4px -5px -6px}
.mbadge.pro .mtag{background:#0F2A1E;color:#F2EAD3;border:1px solid #3E7A5A}
@media(min-width:760px){header.top.member .logo .tagline{margin-top:6px}}
/* ☰ My account row (first, members only), the same badge small */
.menu nav a.macct[hidden]{display:none}
.macct .mbox.sm{width:22px;height:22px}.macct .mbox.sm img{width:22px;height:22px}
.macct .mbox.sm.pro{width:20px;height:20px;margin:1px;box-shadow:0 0 0 1.5px #3E7A5A}.macct .mbox.sm.pro img{width:26px;height:26px;margin:-3px}