/* VeloScience Bike Works. Built on the landing-page-design system:
   one typeface (Geist; Geist Mono only for the 3D fit sheet numbers), Tailwind type scale,
   spacing scale 2/4/8/12/16/24/32/40/48/64/80/96, Tailwind radii, flat backgrounds from the
   approved dark palette, BMW blue as the single accent, one custom easing curve for all motion. */
:root{
  --primary:#1c69d4; --primary-active:#0653b6;
  --primary-text:#4f8ff0;                         /* blue lifted for text on black (6.5:1) */
  --ink:#ffffff; --body:#cccccc; --muted:#9b9b9b;
  /* Approved dark backgrounds only */
  --bg:#000000; --surface:#181818; --surface-2:#1f1f1f; --surface-3:#272727; --surface-4:#313131;
  --glass:rgba(24,24,24,.8);                      /* #181818 at 80% over the bike */
  --lift:inset 0 1px 0 rgba(255,255,255,.06);
  --focus:var(--primary-text);
  --font:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(0.32,0.72,0,1);             /* the only curve on the site */
  --dur:700ms; --dur-press:160ms; --dur-reveal:900ms;
  --section:80px; --gutter:16px; --max:1280px; --nav:72px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--body);font:400 16px/24px var(--font);overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font);font-weight:600;color:var(--ink);margin:0;text-wrap:balance}
h2{font-size:30px;line-height:36px;letter-spacing:-.02em;margin-bottom:24px}
h3{font-size:20px;line-height:28px;letter-spacing:-.01em}
p,dd,li,summary{text-wrap:pretty}
p{margin:0 0 16px}
a{color:inherit}
img{max-width:100%}

/* Type helpers */
.lede{font-size:18px;line-height:28px;color:var(--body);max-width:680px}
.body-lg{font-size:18px;line-height:28px;color:var(--body);max-width:52ch}
.muted{color:var(--muted)}
.textlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:600 16px/24px var(--font);color:var(--ink);text-decoration:none;
  transition:color var(--dur) var(--ease),transform var(--dur-press) var(--ease)}
.textlink i{font-size:20px;color:var(--primary-text)}
.textlink:active{transform:translateY(1px)}

/* Buttons: 8px/12px padding at 44px tall (touch), semibold, full pill */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 12px;border:0;
  background:var(--surface-2);color:var(--ink);font:600 16px/24px var(--font);text-decoration:none;border-radius:9999px;white-space:nowrap;cursor:pointer;
  transition:background-color var(--dur) var(--ease),transform var(--dur-press) var(--ease)}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--primary);color:#fff}
.btn--lg{min-height:48px;padding:12px 24px}
.btn--nav{font-size:14px;line-height:20px;padding:8px 16px}

/* Nav: logo badge on the left, a floating glass pill in the middle (links + CTA) */
.nav{position:fixed;inset:0 0 auto;z-index:30;display:flex;justify-content:center;padding:24px var(--gutter) 0;pointer-events:none}
.nav>*{pointer-events:auto}
.nav__brand{position:absolute;left:var(--gutter);top:16px;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);
  font:600 14px/20px var(--font);white-space:nowrap}
.nav__brand img{height:56px;width:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.6));transform-origin:0 0;transition:transform var(--dur) var(--ease)}
@media (min-width:768px){.nav__brand img{height:76px}}
.nav--tucked .nav__brand img{transform:scale(.62)}
.nav__brand.has-logo span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nav__pill{display:flex;align-items:center;gap:4px;width:max-content;margin:0 auto;padding:4px;border-radius:9999px;
  background:var(--glass);box-shadow:var(--lift);-webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%)}
.nav__links{display:none;align-items:center}
.nav__links a{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:9999px;font:600 14px/20px var(--font);
  color:var(--muted);text-decoration:none;transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.nav__links a[aria-current]{color:var(--ink);background:var(--surface-3)}

/* Hamburger: three lines that morph into an X, never disappear */
.nav__menu{position:relative;display:inline-flex;width:44px;height:44px;padding:0;border:0;border-radius:9999px;background:transparent;color:var(--ink);cursor:pointer}
.nav__menu i,.nav__menu i::before,.nav__menu i::after{position:absolute;left:14px;width:16px;height:2px;border-radius:2px;background:currentColor;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.nav__menu i{top:21px}
.nav__menu i::before,.nav__menu i::after{content:"";left:0}
.nav__menu i::before{transform:translateY(-6px)}.nav__menu i::after{transform:translateY(6px)}
.nav__menu[aria-expanded="true"] i{transform:rotate(45deg)}
.nav__menu[aria-expanded="true"] i::before{transform:rotate(0) translateY(0);opacity:0}
.nav__menu[aria-expanded="true"] i::after{transform:rotate(-90deg) translateY(0)}

/* Menu overlay: screen filling heavy glass, links rise in staggered */
.sheet{position:fixed;inset:0;z-index:25;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:96px 24px 48px;
  background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(64px);backdrop-filter:blur(64px);
  transition:opacity var(--dur) var(--ease),visibility 0s linear 0s}
.sheet[hidden]{display:flex;visibility:hidden;opacity:0;pointer-events:none;transition:opacity 400ms var(--ease),visibility 0s linear 400ms}
.sheet a{display:flex;align-items:center;min-height:48px;font:600 36px/40px var(--font);letter-spacing:-.02em;color:var(--muted);text-decoration:none;
  opacity:1;transform:none;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),color var(--dur) var(--ease);
  transition-delay:calc(100ms + var(--i,0) * 50ms)}
.sheet a[aria-current]{color:var(--ink)}
.sheet .btn{align-self:flex-start;margin-top:24px;font:600 16px/24px var(--font);color:#fff;min-height:48px;padding:12px 24px}
.sheet[hidden] a{opacity:0;transform:translateY(48px);transition-delay:0ms}
.menu-open body{overflow:hidden}
@media (min-width:768px){.nav__links{display:flex}.nav__menu,.sheet,.sheet[hidden]{display:none}}
/* 768-1023px: six links + Book a fit + cart fit beside the logo badge only with tighter link spacing */
@media (min-width:768px) and (max-width:1023px){.nav__links a{padding:8px 10px}}

/* Fixed stage: the bike lives behind the whole page; flat black, no washes */
.stage{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:0;pointer-events:none;background:var(--bg)} /* lvh: the address bar never resizes the 3D canvas */
#bike-canvas,.hero__fallback{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero__fallback{object-fit:contain;object-position:center 62%;padding:18vh 4vw 12vh}
/* Film grain on its own fixed layer (never on scrolling content) */
.grain{position:fixed;inset:0;z-index:15;pointer-events:none;overflow:hidden;opacity:.035}
.grain::before{content:"";position:absolute;inset:-50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
main,.foot{position:relative;z-index:1}

/* Hero: heading + subheading capped at 680px, heading in a white to grey text gradient */
.hero{min-height:100vh;min-height:100svh;position:relative}
.hero__copy{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(var(--nav) + 64px);max-width:680px}
.hero h1{font-size:36px;line-height:40px;letter-spacing:-.03em;font-weight:600;margin-bottom:16px;max-width:680px;
  background:linear-gradient(90deg,#ffffff,#9b9b9b);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 16px rgba(0,0,0,.7))}
.hero h1 br{display:none}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.hero__proof{margin:16px 0 0;font-size:14px;line-height:20px;color:var(--muted)}

/* Bands */
.band{padding:var(--section) var(--gutter)}
.band__inner{max-width:var(--max);margin:0 auto}
.split{display:grid;gap:48px}

/* How it works: three steps, icon in a round well */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:24px;border-radius:16px;background:var(--surface);box-shadow:var(--lift)}
.steps__icon{display:grid;place-items:center;width:48px;height:48px;border-radius:9999px;background:var(--surface-3);color:var(--primary-text);font-size:24px}
.steps p{margin:4px 0 0;color:var(--body)}

/* Service: typographic menu */
.service{display:grid;gap:48px}
.service__head .body-lg{margin-bottom:16px}
.menu{margin:0;display:grid;gap:24px}
.menu div{display:grid;gap:4px}
.menu dt{font:600 30px/36px var(--font);letter-spacing:-.02em;color:var(--ink)}
.menu dd{margin:0;color:var(--body);font-size:18px;line-height:28px;max-width:40ch}

/* Brands row + gear */
.brandrow{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px 24px;align-items:baseline}
@media (min-width:768px){.brandrow{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.brandrow{grid-template-columns:repeat(6,auto);justify-content:space-between}}
.brandrow li{font:600 30px/36px var(--font);letter-spacing:-.02em;color:var(--muted);transition:color var(--dur) var(--ease)}
.gear{margin-top:64px}
.chips{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{background:var(--surface-2);border-radius:9999px;padding:8px 16px;font-size:14px;line-height:20px;color:var(--body)}
.insta{margin-top:48px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px}
.insta p{margin:0;color:var(--body)}

/* The fit break: page opens up, bike holds at 180 degrees with the fit sheet facing you */
.break{height:260vh;position:relative}
.break__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.break__copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:48px;max-width:520px}
.break__copy .body-lg{margin-bottom:0}

/* Benefits: four text tiles in the fit page's own words */
.gains{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:560px){.gains{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.gains{grid-template-columns:repeat(4,1fr)}}
.gain{display:flex;flex-direction:column;gap:4px;padding:20px 24px;border-radius:16px;background:var(--surface);box-shadow:var(--lift)}
.gain__word{margin:0;font-size:24px;line-height:32px;letter-spacing:-.02em}
.gain p{margin:0;font-size:16px;line-height:24px;color:var(--body)}
@media (min-width:768px){.gain{gap:8px;padding:28px 32px}.gain__word{font-size:30px;line-height:36px}.gain p{font-size:18px;line-height:28px}}

/* Tagline reveal: big type, words brighten one at a time on scroll */
.tagline{position:relative;padding:96px var(--gutter)}
.tagline__text{max-width:680px;margin:0 auto;font:600 36px/40px var(--font);letter-spacing:-.03em;text-wrap:balance}
.tagline__text .w{color:rgba(255,255,255,.3);transition:color var(--dur) var(--ease)}
.tagline__text .w.on{color:var(--ink)}
.tagline__text br{display:none}

/* Inside the shop */
.photos{display:grid;gap:16px;margin-top:40px}
.photo{margin:0;position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--surface-2)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo figcaption{position:absolute;left:16px;bottom:16px;padding:4px 12px;border-radius:9999px;background:var(--glass);
  font-size:14px;line-height:20px;font-weight:600;color:var(--ink);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
@media (min-width:768px){.photos{grid-template-columns:2fr 1fr 1fr}.photo--wide{aspect-ratio:auto}}

/* FAQ: native disclosure, one card per question */
.faq__list{display:grid;gap:8px;max-width:800px}
.faq details{border-radius:16px;background:var(--surface);box-shadow:var(--lift);transition:background-color var(--dur) var(--ease)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:16px 24px;cursor:pointer;list-style:none;
  font:600 18px/28px var(--font);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;font-size:20px;color:var(--muted);transition:transform var(--dur) var(--ease)}
.faq details[open] summary i{transform:rotate(45deg)}
.faq details p{margin:0;padding:0 24px 24px;color:var(--body);max-width:64ch}
.faq summary:focus-visible{outline-offset:-2px;border-radius:16px}

/* Booking */
.book{display:grid;gap:48px}
.book__assure{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-weight:600;color:var(--ink)}
.book__assure i{font-size:20px;color:var(--primary-text)}
.book__call{margin:0;color:var(--muted)}
.book__call a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--primary-text);text-decoration:none}
.book__panel{display:grid;justify-items:start}
/* Google's page can't be themed from here, so the frame is inverted to read dark; hue-rotate keeps blues blue. */
.book__embed{width:100%;height:700px;border:0;border-radius:24px;background:#fff;box-shadow:var(--lift);filter:invert(.92) hue-rotate(180deg)}
.book__embed[hidden],.book__open[hidden]{display:none}
.field{display:grid;gap:8px;border:0;margin:0;padding:0;min-width:0}
.field label,.field legend{font-size:14px;line-height:20px;font-weight:600;color:var(--ink);padding:0;margin-bottom:4px}
.field label:not(.pill) span,.field legend span{color:var(--muted);font-weight:400}
.field input,.field textarea{width:100%;font:400 16px/24px var(--font);color:var(--ink);background:var(--surface-2);
  border:1px solid transparent;border-radius:12px;padding:12px 16px;min-height:48px;transition:background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
.field textarea{resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:none;background:var(--surface-3);box-shadow:0 0 0 2px var(--focus)}
.field input[aria-invalid="true"]{box-shadow:0 0 0 2px #ff8a7a}
.field__err{margin:0;font-size:14px;line-height:20px;color:#ff8a7a}
.field__err:empty{display:none}
.field-row{display:grid;gap:24px}
@media (min-width:640px){.field-row{grid-template-columns:1fr 1fr}}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative;cursor:pointer}
.pill input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pill span{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:9999px;background:var(--surface-2);
  font-size:14px;line-height:20px;font-weight:600;color:var(--body);transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.pill input:checked+span{color:#fff;background:var(--primary)}
.pill input:active+span{transform:scale(.98)}
.pill input:focus-visible+span{outline:2px solid var(--focus);outline-offset:3px}
/* Heading above, schedule full width: Google shows more days the wider its frame is (side by side it showed two) */
@media (min-width:1024px){.book{gap:40px}.book__panel{justify-items:stretch}}

/* Visit */
.visit__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.visit__head h2{margin:0}
.facts{margin:48px 0 0;display:grid;gap:40px}
.facts div{display:grid;gap:8px;align-content:start}
.facts dt{font-size:14px;line-height:20px;font-weight:600;color:var(--muted)}
.facts dd{margin:0;font-size:20px;line-height:28px;color:var(--ink)}
.facts dd a{text-decoration:none;color:var(--primary-text)}
.facts dd a[href^="tel"]{display:inline-flex;align-items:center;min-height:44px}
.facts dd .textlink{color:var(--ink)}
.hours{list-style:none;margin:0;padding:0;display:grid;gap:4px;white-space:pre}

/* Footer */
.foot{padding:64px var(--gutter);font-size:14px;line-height:20px;color:var(--muted)}
.foot__row{display:grid;gap:24px}
.foot p{margin:0}
.foot a{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;color:var(--ink);font-weight:600}
.foot a i{font-size:20px;color:var(--primary-text)}
.foot strong{font-size:16px;line-height:24px;font-weight:600;color:var(--ink);display:inline-block;margin-bottom:8px}

/* Responsive */
@media (min-width:768px){
  :root{--gutter:32px;--section:96px}
  h2{font-size:48px;line-height:1}
  .hero h1{font-size:48px;line-height:1}
  .tagline__text{font-size:48px;line-height:1}
  .foot__row{grid-template-columns:2fr 1fr 1fr;align-items:end}
  .facts{grid-template-columns:repeat(3,1fr)}
  .tagline{padding:96px var(--gutter)}
}
@media (min-width:1024px){
  :root{--gutter:48px}
  .hero h1{font-size:60px;line-height:1}
  .hero h1 br,.tagline__text br{display:inline}
  .tagline__text{font-size:60px;line-height:1}
  .split{grid-template-columns:5fr 7fr;gap:96px;align-items:start}
  .service__head{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:40px}
  .service__head h2,.service__head .body-lg{margin:0}
  .menu div{grid-template-columns:1fr 1fr;align-items:baseline;gap:48px}
}
/* Landscape screens: copy bottom left, bike on the right */
@media (min-width:700px) and (min-aspect-ratio:11/10){
  .hero__copy{top:auto;bottom:96px;max-width:min(680px,48vw)}
}

/* States on real pointers only (touch would leave them stuck) */
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--surface-3)}
  .btn--primary:hover{background:var(--primary-active)}
  .pill span:hover{background:var(--surface-3)}
  .pill input:checked+span:hover{background:var(--primary-active)}
  .nav__links a:hover{color:var(--ink)}
  .nav__menu:hover{background:var(--surface-3)}
  .textlink:hover,.foot a:hover{color:var(--primary-text)}
  .brandrow li:hover{color:var(--ink)}
  .faq details:hover{background:var(--surface-2)}
  .sheet a:hover{color:var(--ink)}
}

/* Hero comes into focus on load */
@keyframes focus-in{from{opacity:0;filter:blur(12px);transform:translateY(16px)}to{opacity:1;filter:none;transform:none}}
.hero__copy>*{animation:focus-in 1100ms var(--ease) both}
.hero__copy h1{animation-name:focus-in-h1;animation-delay:150ms}
@keyframes focus-in-h1{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero__copy .lede{animation-delay:350ms}.hero__copy .cta{animation-delay:450ms}.hero__proof{animation-delay:550ms}

/* Scroll reveal: heavy fade up, 900ms */
.reveal{opacity:0;transform:translateY(64px);filter:blur(12px);
  transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease),filter var(--dur-reveal) var(--ease)}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal .menu>div,.reveal .brandrow>li,.reveal .gain,.reveal .steps>li,.reveal .faq__list>details{opacity:0;transform:translateY(24px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),color var(--dur) var(--ease),background-color var(--dur) var(--ease);
  transition-delay:calc(var(--i,0) * 60ms)}
.reveal.in .menu>div,.reveal.in .brandrow>li,.reveal.in .gain,.reveal.in .steps>li,.reveal.in .faq__list>details{opacity:1;transform:none}
.reveal.in .brandrow>li:hover{transition-delay:0s}
/* Break copy: held until the bike settles at 180, then rises in with the measurements */
.js-3d .break__copy{opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity 300ms var(--ease),transform 300ms var(--ease),visibility 0s 300ms}
.js-3d .break.settled .break__copy{opacity:1;visibility:visible;transform:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s}

/* Copy over the bike: a soft dark shadow keeps it readable */
.hero__copy .lede,.hero__proof,.break__copy,.band__inner,.tagline{text-shadow:0 2px 24px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.6)}

/* Focus: one visible ring everywhere */
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.btn--primary:focus-visible{outline-color:var(--ink)}
.skip{position:fixed;left:var(--gutter);top:-100px;z-index:40;display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:9999px;
  background:var(--ink);color:var(--bg);font:600 14px/20px var(--font);text-decoration:none}
.skip:focus{top:12px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn:active,.textlink:active{transform:none}
  .hero__copy>*{animation:none}
  .reveal,.reveal .menu>div,.reveal .brandrow>li,.reveal .gain,.reveal .steps>li,.reveal .faq__list>details{opacity:1;transform:none;filter:none;transition:none}
  .js-3d .break__copy{opacity:1;visibility:visible;transform:none}
  .grain::before{animation:none}
  .break{height:auto}.break__pin{position:relative;height:auto;padding:var(--section) 0}.break__copy{position:relative;bottom:auto}
  .sheet,.sheet[hidden],.sheet a,.nav__menu i,.nav__menu i::before,.nav__menu i::after,.gain__frame img,.nav__brand img{transition:none}
  .tagline__text .w{color:var(--ink)}
}

/* Standalone pages (privacy, 404) */
.page__inner{max-width:680px;padding-top:24px}
.page__logo{display:inline-flex;margin-bottom:48px}
.page__logo img{height:76px;width:auto}
.page__title{font-size:48px;line-height:1;letter-spacing:-.03em;margin-bottom:24px;
  background:linear-gradient(90deg,#ffffff,#9b9b9b);-webkit-background-clip:text;background-clip:text;color:transparent}
.page__h{font-size:24px;line-height:32px;margin:40px 0 8px}
.page__link{color:var(--primary-text);text-decoration:none;font-weight:600}

.gear__note{margin:8px 0 0;color:var(--body)}
.book__phone{font-weight:600;color:var(--primary-text);text-decoration:none;white-space:nowrap}
#riders .body-lg{margin-bottom:0}

/* Dealer logo wall: whitened versions of Geoff's logo files, equal visual weight per logo.
   Each logo's height comes from JS as --h; object-fit keeps wide wordmarks inside small tiles. */
.logos{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:359px){.logos{grid-template-columns:repeat(3,1fr)}}
@media (min-width:640px){.logos{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1024px){.logos{grid-template-columns:repeat(6,1fr);margin-top:40px}}
.logos li{display:grid;place-items:center;height:56px;padding:8px;border-radius:12px;background:var(--surface);box-shadow:var(--lift);min-width:0}
.logos img{display:block;width:100%;height:calc(var(--h,40px) * .5);object-fit:contain;opacity:0;transition:opacity var(--dur) var(--ease)}
@media (min-width:640px){.logos li{height:80px;padding:12px;border-radius:16px}.logos img{height:calc(var(--h,40px) * .8)}}
@media (min-width:1024px){.logos li{height:96px;padding:16px}.logos img{height:var(--h,40px)}}
.logos li.is-ready img{opacity:.8}
.logos img:not([src]){visibility:hidden}
/* Placeholder boxes (preview, until Geoff's brand list is in) and brands whose logo is not added yet */
.logos:empty{display:none}
.logos li.is-slot{box-shadow:none;border:1px dashed var(--surface-4);background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 1px,transparent 1px 11px)}
.logos li span{font:600 12px/16px var(--font);letter-spacing:.06em;text-transform:uppercase;text-align:center;overflow-wrap:anywhere;color:var(--muted)}
.logos li.is-name span{color:var(--ink)}
@media (max-width:639px){.logos li.is-name span{font-size:10px;line-height:12px;letter-spacing:.02em}}
@media (hover:hover) and (pointer:fine){.logos li:hover img{opacity:1}}

/* Phones (portrait): the break copy sits right under the bike instead of at the screen bottom */
@media (max-aspect-ratio:11/10){.break__copy{bottom:auto;top:calc(50svh + 16px)}}


/* Loading screen: logo + a thin line that fills while the 3D bike builds, then fades away as one piece */
.loader{position:fixed;inset:0;z-index:60;display:grid;place-content:center;justify-items:center;gap:24px;background:var(--bg);
  transition:opacity 600ms var(--ease),visibility 0s linear 600ms}
.loader__logo{width:96px;height:auto;opacity:.9}
.loader__bar{width:160px;height:2px;border-radius:2px;background:var(--surface-3);overflow:hidden}
.loader__bar i{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;
  animation:loader-fill 3s var(--ease) forwards}
@keyframes loader-fill{to{transform:scaleX(.85)}}
.is-ready .loader{opacity:0;visibility:hidden;pointer-events:none}
.is-loading body{overflow:hidden}
/* Hero entrance waits for the loader to finish */
.is-loading .hero__copy>*{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.loader{transition:opacity 200ms linear,visibility 0s linear 200ms}.loader__bar i{animation:none;transform:scaleX(.85)}}

/* Front-door gate: a full-screen "under construction" cover (above the loader) until the password is
   entered. The real page sits behind it, so the fixed opaque cover is what hides it. .unlocked removes
   the cover; js/gate.js adds that class once 1111 is entered, and before paint for returning visitors. */
.gate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:32px;
  background:#3b1a6b;color:var(--body);text-align:center}
html.unlocked .gate{display:none}
.gate__inner{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:420px}
.gate__logo{display:inline-flex;padding:8px;margin:-8px;border:0;background:transparent;cursor:pointer;border-radius:12px;
  transition:transform var(--dur-press) var(--ease)}
.gate__logo img{width:120px;height:auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,.6))}
.gate__logo:active{transform:scale(.98)}
.gate__logo:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.gate__title{font-size:24px;line-height:32px;letter-spacing:-.01em}
.gate__status{color:var(--primary-text);font-weight:600;margin:0}
.gate__form{display:flex;flex-direction:column;gap:12px;width:240px;max-width:100%}
.gate__form[hidden]{display:none}
.gate__label{font:600 14px/20px var(--font);color:var(--ink);text-align:left}
.gate__input{min-height:48px;padding:8px 16px;border:1px solid var(--surface-4);border-radius:9999px;background:var(--surface);
  color:var(--ink);font:400 18px/24px var(--font);text-align:center;letter-spacing:.3em}
.gate__input:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:transparent}
.gate__err{color:#ff6b6b;font:400 14px/20px var(--font);margin:0}

/* Fit + service copy sits over the scrolling bike: back it with the nav's glass so the text stays readable */
.band .split{padding:24px;border-radius:24px;background:var(--glass);box-shadow:var(--lift);
  -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%)}
.band .split .body-lg{color:var(--ink)}
@media (min-width:768px){.band .split{padding:48px}}

/* Shop: grid, product page, cart button + panel. Existing tokens only. */
.shop{padding:calc(var(--nav) + 96px) var(--gutter) var(--section)}
@media (min-width:768px){.shop{padding-top:calc(var(--nav) + 120px)}}
.shop__title{font-size:48px;line-height:1;letter-spacing:-.03em;margin-bottom:16px;
  background:linear-gradient(90deg,#ffffff,#9b9b9b);-webkit-background-clip:text;background-clip:text;color:transparent}
.shop-grid{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
@media (min-width:768px){.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}}
@media (min-width:1280px){.shop-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.shop-card{display:block;color:inherit;text-decoration:none;border-radius:16px}
.shop-card:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.shop-card__photo{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--surface-2)}
.shop-card__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--dur) var(--ease)}
@media (hover:hover){.shop-card:hover .shop-card__photo img{transform:scale(1.03)}}
.shop-card__name{margin:12px 0 0;font-size:16px;line-height:24px}
.shop-card__price{margin:0;color:var(--body)}

/* Preview-only slots: a dashed outline with a label, so Geoff sees exactly what to send */
.slot{position:absolute;inset:0;display:grid;place-items:center;padding:16px;border:1px dashed var(--surface-4);border-radius:inherit;text-align:center}
.slot span,.slot-text{font:600 12px/16px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.product__desc .slot{position:relative;min-height:120px;border-radius:12px}

/* Product page: stacked on phones, photos left + details right from 1024px */
.product__back{margin-bottom:24px}
.product__grid{display:grid;gap:32px}
@media (min-width:1024px){
  .product__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}
  .product__info{position:sticky;top:calc(var(--nav) + 48px)}
}
.product__main{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:var(--surface-2)}
.product__main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.product__thumbs{display:flex;gap:8px;margin-top:12px;overflow-x:auto}
.product__thumb{flex:0 0 72px;aspect-ratio:1;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--surface-2);cursor:pointer;opacity:.55;
  transition:opacity var(--dur) var(--ease)}
.product__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.product__thumb[aria-current]{opacity:1;box-shadow:inset 0 0 0 2px var(--ink)}
.product__thumb:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.product__name{font-size:36px;line-height:40px;letter-spacing:-.03em;margin-bottom:8px}
.product__price{margin:0 0 24px;font-size:20px;line-height:28px;font-weight:600;color:var(--ink)}
.product__desc{margin-bottom:32px}
.product__desc p{font-size:18px;line-height:28px;max-width:52ch}
.product__form{display:grid;gap:24px}
.product__qty{display:grid;gap:8px;justify-items:start}
.product__qty label{font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.product__form .btn{width:100%}
.product__form .btn[disabled]{opacity:.5;cursor:not-allowed}
.product__status{margin:0;color:var(--body)}
.product__status:empty{display:none}

/* Quantity stepper (product page + cart lines) */
.qty{display:inline-flex;align-items:center;border-radius:9999px;background:var(--surface-2)}
.qty button{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:9999px;background:transparent;color:var(--ink);font-size:16px;cursor:pointer}
.qty button:disabled{opacity:.35;cursor:default}
.qty button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.qty input{width:40px;height:44px;padding:0;border:0;background:transparent;color:var(--ink);font:600 16px/24px var(--font);text-align:center;-moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-inner-spin-button,.qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.qty input:focus-visible{outline:2px solid var(--focus);border-radius:8px}
.qty span{min-width:24px;text-align:center;font-weight:600;color:var(--ink)}

/* Cart button in the nav pill */
.nav__cart{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:9999px;background:transparent;color:var(--ink);font-size:22px;cursor:pointer}
.nav__cart:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.nav__count{position:absolute;top:2px;right:0;min-width:18px;height:18px;padding:0 5px;border-radius:9999px;background:var(--primary);color:#fff;font:600 11px/18px var(--font);text-align:center}
.nav__count[hidden]{display:none}

/* Cart panel: a right-side sheet on <dialog> (focus trap + Esc built in) */
.cart{margin:0 0 0 auto;padding:0;width:min(420px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;border:0;background:var(--surface);color:var(--body);
  box-shadow:-24px 0 64px rgba(0,0,0,.5);transition:transform var(--dur) var(--ease),overlay var(--dur) allow-discrete,display var(--dur) allow-discrete}
.cart:not([open]){transform:translateX(100%)}
@starting-style{.cart[open]{transform:translateX(100%)}}
.cart::backdrop{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html:has(.cart[open]){overflow:hidden}
.cart__box{display:flex;flex-direction:column;height:100%;padding:24px var(--gutter) calc(24px + env(safe-area-inset-bottom))}
@media (min-width:640px){.cart__box{padding:24px}}
.cart__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cart__head h2{margin:0;font-size:24px;line-height:32px}
.cart__close{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:9999px;background:var(--surface-2);color:var(--ink);font-size:20px;cursor:pointer}
.cart__lines{list-style:none;margin:0;padding:0;flex:1;overflow-y:auto}
.cart__lines:empty{display:none}                 /* empty cart: the message sits right under the heading */
.line{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;padding:16px 0;border-top:1px solid var(--surface-3)}
.line:first-child{border-top:0}
.line__photo{aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--surface-2)}
.line__photo img{display:block;width:100%;height:100%;object-fit:cover}
.line__name{margin:0;font-weight:600;color:var(--ink)}
.line__size{margin:0;font-size:14px;line-height:20px;color:var(--muted)}
.line__info .qty{margin-top:8px}
.line__end{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between}
.line__total{margin:0;font-weight:600;color:var(--ink);white-space:nowrap}
.line__remove{min-height:44px;padding:0;border:0;background:none;color:var(--muted);font:400 14px/20px var(--font);text-decoration:underline;cursor:pointer}
.cart__empty{margin:16px 0 0;color:var(--body)}
.cart__done{margin:16px 0 0;color:var(--ink);font-weight:600}
.cart__done a{color:var(--primary-text)}
.cart__pay{display:grid;gap:12px;margin-top:16px}
.cart__pay[hidden],.cart__foot .btn[hidden]{display:none}
.cart__card{min-height:90px}
.cart__empty a{color:var(--primary-text);font-weight:600;text-decoration:none}
.cart__empty a,.cart__status a{display:inline-flex;align-items:center;min-height:44px}   /* full-size tap targets */
.cart__empty[hidden],.cart__foot[hidden]{display:none}
.cart__foot{display:grid;gap:16px;padding-top:16px;border-top:1px solid var(--surface-3)}
.cart__sum{display:flex;align-items:baseline;justify-content:space-between;color:var(--ink)}
.cart__sum strong{font-size:20px;line-height:28px}
.cart__status{margin:0;font-size:14px;line-height:20px;color:var(--body)}
.cart__status:empty{display:none}
.cart__status a{color:var(--primary-text);font-weight:600;text-decoration:none;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.cart,.shop-card__photo img,.product__thumb{transition:none}}
/* Narrow phones: the pill (Book a fit + cart + menu) sits right so it never runs into the logo badge */
@media (max-width:380px){.nav__pill:has(.nav__cart){margin-right:0}}
/* Spam trap (honeypot): off-screen for people, still filled in by bots */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Brands: index grid + brand page (logo, click-to-load video, Geoff's words, ways to reach the shop) */
.brands-link{margin:24px 0 0}
.brand-grid{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
@media (min-width:768px){.brand-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}}
@media (min-width:1280px){.brand-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.brand-card{display:block;color:inherit;text-decoration:none;border-radius:16px}
.brand-card:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.brand-card__logo{position:relative;display:grid;place-items:center;aspect-ratio:3/2;padding:24px;border-radius:16px;background:var(--surface-2);overflow:hidden}
.brand-card__logo img{position:absolute;inset:24px;width:calc(100% - 48px);height:calc(100% - 48px);object-fit:contain;transition:transform var(--dur) var(--ease)}
@media (hover:hover){.brand-card:hover .brand-card__logo img{transform:scale(1.03)}}
/* No logo: the brand's name stands in. Smaller on phones, wraps anywhere, and the tile may grow
   (overflow visible lets the aspect-ratio box stretch) rather than cut the name off. */
.brand-card__logo:has(.brand-card__word){padding:12px;overflow:visible}
.brand-card__word{font-size:clamp(16px,4.5vw,24px);line-height:1.25;font-weight:600;letter-spacing:-.02em;color:var(--ink);text-align:center;overflow-wrap:anywhere}
.brand-card__name{margin:12px 0 0;font-size:16px;line-height:24px}
.brand{max-width:860px}
.brand__logo{position:relative;width:min(240px,60%);aspect-ratio:3/2;margin-bottom:24px}
.brand__logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center}
.brand__logo--slot{border-radius:16px}
.brand .product__name{margin-bottom:24px}
.video{position:relative;aspect-ratio:16/9;margin-bottom:32px;border-radius:24px;overflow:hidden;background:var(--surface-2)}
.video__play{position:absolute;inset:0;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.video__play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video__icon{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:9999px;
  background:var(--glass);color:#fff;font-size:32px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform var(--dur-press) var(--ease)}
@media (hover:hover){.video__play:hover .video__icon{transform:scale(1.06)}}
.video__play:focus-visible{outline:2px solid var(--focus);outline-offset:-4px;border-radius:24px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.brand__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:8px}
@media (prefers-reduced-motion:reduce){.brand-card__logo img,.video__icon{transition:none}}
/* Text for screen readers only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== Polish (2026-10-10): sub-pages brought up to the home page ===== */
/* Fade between pages where the browser supports it; the header holds still across the change */
@view-transition{navigation:auto}
.nav{view-transition-name:site-nav}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* Product and brand cards rise in one after another (js/nav.js initReveal) */
.reveal-cards>li{opacity:0;transform:translateY(24px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
.reveal-cards.in>li{opacity:1;transform:none}

/* Shop cards: the second photo fades in on hover; prices in steady figures */
.shop-card__alt{opacity:0;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
@media (hover:hover){.shop-card:hover .shop-card__alt{opacity:1}}
.shop-card__price,.product__price,.line__total,.cart__sum strong,.cart__head h2{font-variant-numeric:tabular-nums}

/* Preview slots read as deliberate placeholders: a fine hatch and a label chip */
.slot{background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 1px,transparent 1px 11px)}
.slot span{padding:6px 12px;border-radius:9999px;background:var(--surface-3)}

/* Breadcrumbs (product and brand pages) */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-bottom:16px;font-size:14px;line-height:20px;color:var(--muted)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--body);text-decoration:none;transition:color var(--dur) var(--ease)}
@media (hover:hover){.crumbs a:hover{color:var(--ink)}}
.crumbs [aria-current]{color:var(--ink)}

/* Product photo: opens full screen */
.product__zoom{position:absolute;inset:0;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.product__zoom-hint{position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:44px;height:44px;border-radius:9999px;
  background:var(--glass);color:var(--ink);font-size:20px;opacity:0;transition:opacity var(--dur) var(--ease);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
@media (hover:hover){.product__zoom:hover .product__zoom-hint{opacity:1}}
@media (hover:none){.product__zoom-hint{opacity:1}}
.product__zoom:focus-visible{outline:2px solid var(--focus);outline-offset:-4px;border-radius:24px}
.product__zoom:focus-visible .product__zoom-hint{opacity:1}

/* Full-screen photo viewer (js/lightbox.js) */
.lightbox{margin:0;padding:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border:0;background:rgba(0,0,0,.94);color:var(--ink)}
.lightbox[open]{display:grid;place-items:center}
.lightbox::backdrop{background:rgba(0,0,0,.6)}
html:has(.lightbox[open]){overflow:hidden}
.lightbox__img{max-width:calc(100vw - 32px);max-height:calc(100dvh - 128px);object-fit:contain;border-radius:12px;touch-action:pan-y;user-select:none}
.lightbox__close,.lightbox__nav{position:fixed;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:9999px;
  background:var(--surface-2);color:var(--ink);font-size:20px;cursor:pointer;transition:background-color var(--dur) var(--ease)}
@media (hover:hover){.lightbox__close:hover,.lightbox__nav:hover{background:var(--surface-3)}}
.lightbox__close:focus-visible,.lightbox__nav:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.lightbox__close{top:16px;right:16px}
.lightbox__nav{top:50%;margin-top:-22px}
.lightbox__nav--prev{left:16px}
.lightbox__nav--next{right:16px}
.lightbox__count{position:fixed;left:0;right:0;bottom:24px;margin:0;text-align:center;font-size:14px;line-height:20px;color:var(--muted);font-variant-numeric:tabular-nums}

/* Other gear row under a product */
.related{margin-top:var(--section);padding-top:40px;border-top:1px solid var(--surface-3)}
.related__title{margin:0;font-size:24px;line-height:32px}
.related .shop-grid{margin-top:24px}

/* Brand page: the video leads, wide; logo and name sit together under it */
.brand{max-width:1040px}
.brand .video{margin-bottom:40px}
.brand__lockup{display:flex;align-items:center;gap:24px;margin-bottom:24px}
.brand__lockup .brand__logo{width:min(160px,35%);margin:0;flex:none}
.brand__lockup .product__name{margin:0}

/* Brand wall: tiles lift on hover */
.brand-card__logo{transition:background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
@media (hover:hover){.brand-card:hover .brand-card__logo{background:var(--surface-3);box-shadow:var(--lift),0 0 0 1px var(--surface-4)}}

/* Cart: bigger line photos */
.line{grid-template-columns:80px minmax(0,1fr) auto}
@media (prefers-reduced-motion:reduce){.reveal-cards>li{opacity:1;transform:none;transition:none}.shop-card__alt,.product__zoom-hint,.brand-card__logo{transition:none}}

/* Shop: live stock (sold-out sizes, "Only N left"), delivery choice in the cart */
.pill--out span{opacity:.4;text-decoration:line-through}
.pill input:disabled{cursor:not-allowed}
.product__left{margin:-8px 0 16px;min-height:24px;font-weight:600;color:var(--primary-text)}
.cart__delivery{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0 0 16px;padding:0}
.cart__delivery legend{font-size:14px;line-height:20px;font-weight:600;color:var(--ink);padding:0;margin-bottom:8px}
.cart__delivery[hidden],.cart__delivery .pill[hidden]{display:none}

/* Owner page (/admin/) */
.adm{max-width:960px;margin:0 auto;padding:48px var(--gutter) 96px}
.adm [hidden]{display:none}
.adm h1{font-size:30px;line-height:36px;margin-bottom:8px}
.adm__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px}
.adm__msg{min-height:24px;margin:0 0 16px;font-weight:600;color:var(--primary-text)}
.adm__msg[data-kind="error"]{color:#ffb3a7}
.adm__login{display:grid;gap:16px;max-width:360px}
.adm__card{background:var(--surface);border-radius:24px;padding:24px;margin-bottom:24px;box-shadow:var(--lift)}
.adm__card h2{font-size:20px;line-height:28px;margin-bottom:16px}
.adm__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:12px 0;border-top:1px solid var(--surface-3)}
.adm__row:first-of-type{border-top:0}
.adm__label{flex:1 1 140px;font-weight:600;color:var(--ink)}
.adm__qty{display:inline-flex;align-items:center;gap:8px}
.adm__qty strong{min-width:2ch;text-align:center;font-size:20px;color:var(--ink)}
.adm__qty .qty-btn,.adm button.small{min-height:44px;min-width:44px;padding:0 14px;border:0;border-radius:12px;background:var(--surface-3);color:var(--ink);font:600 16px/24px var(--font);cursor:pointer}
.adm button.small:hover{background:var(--surface-4)}
.adm input[type="number"],.adm input[type="password"]{min-height:44px;width:110px;padding:8px 12px;border:0;border-radius:12px;background:var(--surface-2);color:var(--ink);font:400 16px/24px var(--font)}
.adm input[type="password"]{width:100%}
.adm__zero{color:#ffb3a7}
.adm__tools{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:8px}
.adm table{width:100%;border-collapse:collapse;font-size:14px;line-height:20px}
.adm th,.adm td{text-align:left;padding:8px 8px 8px 0;border-top:1px solid var(--surface-3);vertical-align:top}