/* StyleKit v56/v57: UI fixes (Apple HIG + UX review) and photo heroes, layered over v55 */

/* 1. Service tiles show a drawn icon, sized to sit with the label */
.sk-cati{color:var(--ink);font-weight:800}
.sk-cati svg{width:22px;height:22px;display:block}

/* 2. Scrolling chip and tab rows: fade the right edge so a cut-off word reads as "more this way" */
.scroll-x,.sk-chips{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);padding-right:36px}
/* with a mouse, sideways scrolling is awkward: let tab and chip rows wrap instead (the day picker keeps scrolling) */
@media (min-width:900px) and (hover:hover){.scroll-x:not(:has(.day)),.sk-chips{-webkit-mask-image:none;mask-image:none;padding-right:4px;flex-wrap:wrap;overflow:visible}}

/* 3. Booking card facts wrap instead of cutting off ("Being pick…") */
.sk-meta b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2;overflow-wrap:anywhere}

/* 4. "Use my location" stays on one line */
.sk-near .btn{white-space:nowrap;flex-shrink:0}

/* 5. iPad portrait: client and stylist pages use more of the screen (the welcome page stays full screen) */
@media (min-width:700px) and (max-width:899px){
  .app:not(.wide):not(:has(.sk-h49c)){max-width:680px}
}

/* 6. Laptop and desktop: the floating tab bar becomes a left side rail for every role,
      so it never covers the content (matches the store and admin screens) */
@media (min-width:1100px){
  .app:not(.wide):has(>.navwrap){padding-left:112px}
  .app:not(.wide)>.navwrap{left:max(16px,calc(50vw - 590px));right:auto;top:0;bottom:0;width:92px;padding:16px 0;align-items:flex-start;justify-content:flex-start}
  html body .app:not(.wide) .nav{flex-direction:column;justify-content:flex-start;width:88px;max-width:none;height:auto;max-height:calc(100vh - 32px);overflow:auto;margin-top:calc(74px + var(--safe-t,0px));gap:4px;border-radius:26px}
  html body .app:not(.wide) .nav button{flex:0 0 auto;height:70px;width:100%}
  .app:not(.wide):has(>.navwrap) .page{padding-bottom:48px}
}

/* 7. Laptop: a lone booking card no longer stretches across the whole screen */
@media (min-width:900px){
  .app:not(.wide) .page.sk-wide>.sk-appt{width:100%;max-width:720px}
}

/* ===== v57: photo heroes ===== */

/* pause / play control shared by both heroes */
.sk-mo{position:absolute;z-index:3;width:44px;height:44px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(28,28,30,.62);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background-color .15s ease,transform .15s ease}
.sk-mo:hover{background:rgba(58,58,60,.8)}
.sk-mo:active{transform:scale(.94)}
.sk-mo:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* the corridor (laptop welcome) */
.sk-stream{position:absolute;inset:0;overflow:hidden;container-type:inline-size;pointer-events:none}
.sk-stream-cam,.sk-stream-3d{position:absolute;inset:0}
.sk-stream-3d{transform-style:preserve-3d}
.sk-stream-card{position:absolute;left:50%;overflow:hidden;background:#1C1C1E;-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform}
.sk-stream-card img{display:block;width:100%;height:100%;object-fit:cover}
.sk-stream.is-paused .sk-stream-card{animation-play-state:paused!important}

/* the curved row (phone and iPad welcome) */
.sk-curve{position:relative;width:100%;height:100%;overflow:hidden;container-type:size}
.sk-curve-band{position:absolute;inset:0;pointer-events:none;transition:opacity .5s ease}
.sk-curve-tile{position:absolute;transform-style:preserve-3d}
.sk-curve-sl{position:absolute;top:0;overflow:hidden;background:#1C1C1E}
.sk-curve-sl.l{border-radius:12px 0 0 12px}
.sk-curve-sl.r{border-radius:0 12px 12px 0}
.sk-curve-sl img{position:absolute;top:0;max-width:none;object-fit:cover;-webkit-user-drag:none}
.sk-curve.is-paused .sk-curve-tile{animation-play-state:paused!important}

/* reduced motion: both heroes hold still as a finished picture, and the control is not needed */
@media (prefers-reduced-motion:reduce){
  .sk-stream-card,.sk-curve-tile{animation-play-state:paused!important}
  .sk-mo{display:none}
}

/* phone welcome: the band runs edge to edge under the top bar */
.sk-h57-band{position:relative;flex:none;height:clamp(200px,28svh,290px);margin:-4px -16px -2px}
.sk-h57-mo{right:10px;bottom:6px;background:transparent;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.sk-h57-mo::before{content:"";position:absolute;inset:5px;z-index:-1;border-radius:50%;background:rgba(28,28,30,.6);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.sk-h57-mo:hover{background:transparent}
.sk-h57-mo svg{width:14px;height:14px}
@media (max-height:700px){.sk-h57-band{height:clamp(170px,27svh,200px)}}
@media (min-width:600px) and (max-width:1023px){
  .sk-h49c>.sk-h57-band{margin:0 -24px 4px;height:clamp(300px,31svh,400px)}
  .sk-h57-mo{right:20px;bottom:10px}
}

/* laptop welcome: the corridor fills the first screen, copy above and below its centre */
@media (min-width:1024px){
  .app:not(.wide):has(.skw){max-width:none}
  .skw>.skw-hero57{position:relative;isolation:isolate;overflow:hidden;max-width:none;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:24px;text-align:center;min-height:clamp(620px,calc(100svh - 84px),980px);padding:clamp(20px,4vh,44px) 48px clamp(28px,5vh,56px)}
  .skw-hero57>.sk-stream{z-index:-2}
  .skw-hero57::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(46% 32% at 50% 12%,rgba(11,11,12,.9),rgba(11,11,12,.55) 52%,transparent 78%),radial-gradient(50% 36% at 50% 90%,rgba(11,11,12,.92),rgba(11,11,12,.6) 50%,transparent 80%),linear-gradient(#0B0B0C,transparent 12%,transparent 88%,#0B0B0C)}
  .skw-57-top,.skw-57-bot{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:880px;animation:skCardIn .5s cubic-bezier(.32,.72,0,1) .05s both}
  .skw-57-bot{gap:16px;animation-delay:.15s}
  .skw-hero57 .skw-h{text-shadow:0 2px 30px rgba(0,0,0,.55)}
  .skw-hero57 .skw-p{max-width:36em;text-shadow:0 1px 16px rgba(0,0,0,.7)}
  .skw-hero57 .skw-ctas{justify-content:center;margin-top:4px}
  .skw-hero57 .skw-note{text-shadow:0 1px 12px rgba(0,0,0,.8)}
  .skw-57-mo{right:24px;bottom:24px}
  /* "How it works" now carries the app preview */
  .skw-how57{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:56px;align-items:center}
  .skw-how57 h2{margin-bottom:24px}
  .skw-how57 .skw-steps{grid-template-columns:1fr;gap:12px}
  .skw-how57 .skw-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:18px;row-gap:4px;align-items:start;padding:22px 24px;border-radius:24px}
  .skw-how57 .skw-n{grid-row:1 / 3;margin:0}
  .skw-how57 .skw-steps b{align-self:center}
  .skw-how57 .skw-cats{margin-top:22px}
  .skw-how57 .skw-art{height:min(680px,calc(100svh - 120px));min-height:540px}
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){.skw-57-top,.skw-57-bot{animation:none}}
/* browsers without container units (iOS 15 and older) skip the moving photos and keep the plain welcome */
@supports not (width:1cqw){.sk-h57-band,.skw-hero57>.sk-stream,.skw-57-mo{display:none}}