*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);color:var(--cream);
  font-family:Inter,system-ui,sans-serif;
  line-height:1.5;min-height:100vh;
  display:flex;justify-content:center;
  padding:0 16px 64px;
}
.wrap{width:100%;max-width:460px}

/* ── top nav ── */
#topnav{position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;gap:8px;padding:10px 16px;
  background:rgba(14,12,10,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.navlinks{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;min-width:0}
.navlinks::-webkit-scrollbar{display:none}
.navlink{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600;
  padding:7px 14px;border-radius:8px;letter-spacing:.3px;white-space:nowrap;flex:0 0 auto}
.navlink:hover{color:var(--cream)}
.navlink.active{color:var(--amber);background:var(--panel)}
.navlink.chip{margin-left:auto;background:var(--amber);color:var(--ink);font-weight:700;white-space:nowrap;flex:0 0 auto;overflow:hidden}
.navlink.chip.summoned{background:var(--green);animation:pulse 1.2s infinite}
.navlink.chip .chip-compact{display:none}
@media (max-width:480px){
  .navlink.chip{transition:padding .2s ease}
  .navlink.chip .chip-full{display:none}
  .navlink.chip .chip-compact{display:inline}
  .navlink.chip.expanded .chip-full{display:inline}
  .navlink.chip.expanded .chip-compact{display:none}
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
body{padding-top:52px}

/* ── header ── */
header{padding:38px 0 26px;text-align:center;position:relative}
/* classic red/white/blue pole — pre-rendered as raster assets (scripts/gen_pole_gif.py)
   rather than a live CSS/JS scroll animation. Every CSS technique tried (translateX inside
   an overflow:hidden window, background-position, will-change+translate3d, whole-pixel
   steps() snapping, even a plain JS requestAnimationFrame loop) stuttered on real devices;
   a pre-rendered loop decoded by the browser's own image pipeline instead of CSS paint/
   compositing did not (handoff.md.txt V2.40/41). Three assets, chosen in JS by
   paintBarberPole(): pole-closed.png (dim, static — the safe default before the shop-state
   fetch resolves, and the permanent look for a closed shop), pole-open.gif (lit, animated —
   open shop), and pole-open-static.png (lit but NOT animated — open shop under
   prefers-reduced-motion, so the colour signal survives without any motion). */
.barberpole{
  display:block;width:150px;height:24px;margin:0 auto 18px;
  transition:box-shadow .4s;
}
.barberpole.open{
  box-shadow:0 0 16px 2px rgba(44,90,160,.35);
}
.shopname{
  font-family:'Bebas Neue',sans-serif;font-size:42px;letter-spacing:1.5px;
  line-height:.95;color:var(--cream);
}
.tag{color:var(--muted);font-size:13px;letter-spacing:.3px;margin-top:6px}

/* ── step scaffold ── */
.step{display:none;animation:rise .35s ease both}
.step.active{display:block}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.step{animation:none}}

.eyebrow{
  display:flex;align-items:center;gap:10px;
  color:var(--amber);font-size:12px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;margin-bottom:16px;
}
.eyebrow .num{
  font-family:'Bebas Neue',sans-serif;font-size:15px;letter-spacing:1px;
  border:1px solid var(--amber-dim);border-radius:5px;
  width:26px;height:26px;display:grid;place-items:center;color:var(--amber);
}
.eyebrow .rule{flex:1;height:1px;background:var(--line)}

/* ── service cards ── shared shell in tokens.css (.svc), page-local delta only */
.svc{
  width:100%;text-align:left;cursor:pointer;
  padding:15px 17px;margin-bottom:10px;color:var(--cream);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  transition:border-color .15s,transform .1s,background .15s,box-shadow .15s;
}
.svc:hover{border-color:var(--amber-dim);box-shadow:0 6px 18px rgba(0,0,0,.35);transform:translateY(-1px)}
.svc:active{transform:scale(.99);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.svc .name{font-weight:600;font-size:16px}
.svc .dur{color:var(--muted);font-size:13px;margin-top:2px}
.svc .price{
  font-family:'Bebas Neue',sans-serif;font-size:24px;color:var(--amber);
  letter-spacing:.5px;white-space:nowrap;
}
/* ── loading skeleton (shown in #serviceList until the shop's services arrive) ── */
.skel{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 17px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.25)}
.skel .lines{display:flex;flex-direction:column;gap:7px}
.skel .bar{height:13px;border-radius:4px;background:var(--line);position:relative;overflow:hidden}
.skel .bar::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(243,236,225,.07),transparent);
  animation:shimmer 1.3s ease-in-out infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.skel .bar::after{animation:none}}
.svc-enter{animation:rise .3s ease both}

.svc .pleft{display:flex;align-items:center;gap:12px;min-width:0}
.svc .pimg{width:46px;height:46px;border-radius:8px;object-fit:cover;flex:none;border:1px solid var(--line)}
.svc.hasimg{cursor:pointer}
.svc.hasimg:hover{border-color:var(--amber-dim)}
/* product image lightbox — self-contained, scoped, no shared style touched */
.lbx{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;
  justify-content:center;flex-direction:column;gap:14px;z-index:1000;padding:24px}
.lbx.show{display:flex}
.lbx img{max-width:100%;max-height:76vh;border-radius:12px;border:1px solid var(--line);
  box-shadow:0 12px 44px rgba(0,0,0,.55)}
.lbx .lbxcap{color:var(--cream);font-family:'Bebas Neue',sans-serif;letter-spacing:1px;font-size:22px}
.lbx .lbxclose{position:absolute;top:16px;right:18px;width:40px;height:40px;border-radius:50%;
  background:var(--panel);border:1px solid var(--line);color:var(--cream);font-size:19px;cursor:pointer;line-height:1}

/* shop photo + address reveal — self-contained, scoped, no shared style touched */
.shopphoto{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 14px;
  border:1px solid var(--line);cursor:pointer}
.shopname.tappable{cursor:pointer}
.addrhint{display:none;background:none;border:none;font-family:inherit;cursor:pointer;padding:0;
  color:var(--amber);font-size:12.5px;letter-spacing:.3px;margin-top:8px}
.addrpanel{display:none;max-width:340px;margin:12px auto 0;text-align:center;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.addrpanel.show{display:block}
.addrpanel .addrtext{color:var(--cream);font-size:14px;line-height:1.45;margin-bottom:12px;white-space:pre-line}
.addrbtn{display:inline-block;background:var(--amber);color:var(--ink);text-decoration:none;
  font-weight:600;font-size:13px;border-radius:8px;padding:9px 16px}

/* ── barber cards (real per-barber scheduling, §9 Option A) ── */
.barbercard{
  width:100%;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 16px;margin-bottom:10px;color:var(--cream);
  display:flex;align-items:center;gap:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:border-color .15s,transform .1s,box-shadow .15s;
}
.barbercard:hover{border-color:var(--amber-dim);box-shadow:0 6px 18px rgba(0,0,0,.35);transform:translateY(-1px)}
.barbercard:active{transform:scale(.99);box-shadow:0 1px 4px rgba(0,0,0,.25)}
.barbercard .bavatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--line);background:var(--ink)}
.barbercard .bavatar-glyph{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:19px}
.barbercard .bname{font-weight:600;font-size:16px}
.barbercard.nopref{border-color:var(--amber-dim);background:var(--ink)}
.barbercard.nopref .bname{color:var(--amber)}
.barbercard.nopref .bavatar-glyph{color:var(--amber)}

/* ── barbers showcase (§9 Option B — browsable roster, "Book with Name" deep-links
     into Option A's flow above) ── */
.barbercard.showcase{cursor:default}
.barbercard .bookbtn{
  cursor:pointer;background:var(--amber);color:var(--ink);border:none;border-radius:8px;
  padding:9px 14px;font-size:13px;font-weight:700;font-family:inherit;white-space:nowrap;
  transition:filter .15s;
}
.barbercard .bookbtn:hover{filter:brightness(1.07)}

/* ── date chips ── */
.dates{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}
.date{
  cursor:pointer;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:11px 4px;text-align:center;color:var(--cream);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.date:hover{border-color:var(--amber-dim);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.date.sel{border-color:var(--amber);background:#1f1813}
.date .dow{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.date .dnum{font-family:'Bebas Neue',sans-serif;font-size:26px;line-height:1;margin-top:3px}
.date.closed{opacity:.35;pointer-events:none}

/* ── time grid — the signature ── */
.period{margin-top:22px}
.period h3{
  font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);
  margin-bottom:11px;font-weight:600;
}
.times{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.time{
  cursor:pointer;background:transparent;border:1px solid var(--line);
  border-radius:8px;padding:11px 4px;text-align:center;color:var(--cream);
  font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;
  transition:border-color .12s,background .12s,color .12s;
}
.time:hover{border-color:var(--amber);color:var(--amber)}
.time:active{background:var(--amber);color:var(--ink)}

/* ── form ── */
label{display:block;font-size:13px;color:var(--muted);margin:0 0 7px 2px;letter-spacing:.3px}
input{
  width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 15px;color:var(--cream);font-size:16px;font-family:inherit;margin-bottom:18px;
}
input:focus{outline:none;border-color:var(--amber)}
input::placeholder{color:#6b6055}
select{
  width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 15px;color:var(--cream);font-size:16px;font-family:inherit;margin-bottom:18px;
}
select:focus{outline:none;border-color:var(--amber)}

.summary{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:22px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.summary .row{display:flex;justify-content:space-between;padding:6px 0;font-size:15px}
.summary .row .k{color:var(--muted)}
.summary .row .v{font-weight:600}

/* shared button structure/color lives in tokens.css (.btn) — page-local delta only */
.btn{width:100%;font-size:16px;padding:16px;letter-spacing:.3px}
.btn:active{transform:scale(.99)}

.back{
  background:none;border:none;color:var(--muted);cursor:pointer;
  font-size:13px;font-family:inherit;padding:8px 0;margin-bottom:6px;letter-spacing:.3px;
}
.back:hover{color:var(--cream)}

.empty{color:var(--muted);text-align:center;padding:30px 0;font-size:14px}

/* ── done ── */
.done{text-align:center;padding:30px 0}
.tick{
  width:64px;height:64px;margin:0 auto 22px;border-radius:50%;
  background:rgba(95,184,122,.12);border:1px solid var(--green);
  display:grid;place-items:center;color:var(--green);font-size:30px;
}
.done h2{font-family:'Bebas Neue',sans-serif;font-size:34px;letter-spacing:1px;margin-bottom:8px}
.done p{color:var(--muted);font-size:15px}
.done .det{color:var(--cream);font-weight:600;margin-top:4px}