/* StyleKit v55: client pages fill a laptop/desktop screen, plus hover + keyboard feedback */

/* Home columns: stacked on phones */
.sk-home-cols,.sk-hcol{display:flex;flex-direction:column;gap:14px;min-width:0}

@media (min-width:900px){
  .app:not(.wide){max-width:1180px}
  .app:not(.wide) .page{width:100%;max-width:780px;margin:0 auto;padding-left:28px;padding-right:28px;box-sizing:border-box}
  .app:not(.wide) .page.sk-wide{max-width:1180px;padding-left:36px;padding-right:36px}
  .app:not(.wide) .sk-top{margin-left:-36px;margin-right:-36px;padding-left:36px;padding-right:36px}
  .sk-home-cols{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:0 36px;align-items:start}
  .sk-hcol{gap:14px}
  .sk-hcol:last-child{padding-top:10px}
  .sk-homehead h1{font-size:44px}
  .sk-wide .sk-stack{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
  .sk-wide .sk-svcs{grid-template-columns:1fr 1fr;gap:12px}
  .sk-wide .sk-cats{gap:12px}
  .sk-wide .sk-cat{min-height:118px}
  .sk-wide .sk-promo{min-height:200px}
  .sk-wide .sk-deal{min-height:170px}
  .sk-wide .sk-appt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
}
@media (min-width:1200px){
  .app:not(.wide) .page.sk-wide{padding-left:0;padding-right:0}
}

/* Pointer feedback (mice and trackpads only; phones keep their press animations) */
@media (hover:hover) and (pointer:fine){
  .sk-cat,.sk-pcard,.sk-svc,.sk-appt,.sk-door,.sk-choice,.sk-next,.card.line,.sk-deal,.sk-promo,.btn,.chip,.sk-mini,.icon-btn,.sk-ibtn,.nav button,.list-row,.link,.sk-sh button{
    transition:transform .22s var(--sk-ease),box-shadow .22s var(--sk-ease),background-color .18s ease,border-color .18s ease,filter .18s ease}
  .sk-cat:hover,.sk-pcard:hover,.sk-svc:hover,.sk-appt:hover,.sk-door:hover,.sk-choice:hover,button.sk-next:hover{
    transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.14);border-color:rgba(127,127,127,.35)}
  .sk-deal:hover,.sk-promo:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.12)}
  .btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 10px 24px rgba(0,0,0,.16)}
  .btn:active:not(:disabled){transform:translateY(0) scale(.98)}
  .chip:hover,.sk-mini:hover,.icon-btn:hover,.sk-ibtn:hover{filter:brightness(1.08);transform:translateY(-1px)}
  .nav button:hover{background:rgba(127,127,127,.14);color:var(--ink)}
  .list-row:hover{background:rgba(127,127,127,.08);border-radius:14px}
  .link:hover,.sk-sh button:hover{text-decoration:underline}
  .sk-cat:hover .sk-cati{transform:scale(1.08)}
  .sk-cati{transition:transform .22s var(--sk-ease)}
  .sk-pcard:hover .sk-pmedia img{transform:scale(1.04)}
  .sk-pmedia img{transition:transform .5s var(--sk-ease)}
  a:hover{opacity:.85}
}

/* Keyboard users get a clear focus ring */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--berry,#8B2252);outline-offset:3px;border-radius:14px}