/* St Annes "What brings you in?" appointment picker (TEST build). Built by stannes-services.js above the three cards. */
.sp{max-width:980px;margin:0 auto clamp(22px,3vw,34px)}
.sp__label{text-align:center;font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.15rem,2.2vw,1.4rem);font-weight:600;color:#2A1F1A;margin:0 0 14px}
.sp__chips{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.6vw,18px);list-style:none;margin:0;padding:0}
.sp__chips>li{margin:0;padding:0;min-width:0;list-style:none}
.sp__chip{
  width:100%;height:100%;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;
  padding:12px 16px;border:0;border-radius:20px;font-family:'Outfit',sans-serif;color:#2A1F1A;
  background:linear-gradient(160deg,#FCF8F3,#F3E9DD);
  box-shadow:4px 4px 10px rgba(148,124,100,.28),-4px -4px 10px rgba(255,255,255,.95);
  transition:box-shadow .2s ease,transform .2s ease,background .2s ease}
.sp__chip:hover{transform:translateY(-2px)}
.sp__ph{flex:0 0 54px;width:54px;height:54px;border-radius:50%;overflow:hidden;
  box-shadow:inset 3px 3px 7px rgba(148,124,100,.30),inset -3px -3px 7px rgba(255,255,255,.9);padding:4px;background:#F3E9DD}
.sp__ph img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.sp__txt{display:block;font-weight:600;font-size:1rem;line-height:1.3}
.sp__txt small{display:block;font-weight:400;font-size:.82rem;color:#7A6B5E;margin-top:2px}
.sp__chip[aria-pressed="true"]{
  background:linear-gradient(160deg,#EFE6DB,#E8DCCD);transform:none;
  box-shadow:inset 3px 3px 8px rgba(148,124,100,.34),inset -3px -3px 8px rgba(255,255,255,.9),0 0 0 2px #E6B85C}
.sp__chip:focus-visible{outline:2px solid #E6B85C;outline-offset:3px}

.sp__rec{margin:clamp(14px,2vw,20px) auto 0;max-width:760px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:clamp(14px,2vw,20px) clamp(16px,2.6vw,26px);border-radius:20px;border:1px solid rgba(201,162,91,.45);
  background:rgba(255,255,255,.7);text-align:left}
.sp__rec[hidden]{display:none}
.sp__rec.is-swap{animation:spIn .28s ease both}
.sp__recmain{min-width:0;flex:1 1 260px}
.sp__reck{font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#C9A25B;margin:0 0 3px}
.sp__rect{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.15rem,2.2vw,1.4rem);font-weight:600;color:#2A1F1A;margin:0}
.sp__recp{font-size:.95rem;color:#5C5048;margin:2px 0 0}
.sp__recprice{display:flex;flex-wrap:wrap;gap:2px 18px;margin-top:6px}
.sp__recprice span{white-space:nowrap}
.sp__recp b{font-family:'Playfair Display',Georgia,serif;color:#2A1F1A}
.sp__btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 26px;border-radius:999px;font-family:'Outfit',sans-serif;font-weight:600;font-size:1rem;text-decoration:none;white-space:nowrap;
  color:#fff;background:linear-gradient(160deg,#5A3A74,#482C5B 55%,#3A2349);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 22px rgba(72,44,91,.30);transition:transform .2s,background .2s}
.sp__btn:hover{transform:translateY(-1px);background:linear-gradient(160deg,#654183,#52316A 55%,#412855)}
.sp__btn:focus-visible{outline:2px solid #E6B85C;outline-offset:3px}
@keyframes spIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* the card that fits gets a gold ring; the others step back but stay clickable */
.has-sp .clv-svc{transition:opacity .3s ease,filter .3s ease,outline-color .3s ease}
.has-sp .clv-svc.is-pick{outline:2px solid #E6B85C;outline-offset:4px}
.has-sp .clv-svc.is-dim{opacity:.5;filter:saturate(.75)}
.has-sp .clv-svc.is-dim:hover{opacity:.9}

@media(max-width:760px){
  .sp__chips{grid-template-columns:1fr}
  .sp__chip{padding:10px 14px;border-radius:18px}
  .sp__rec{flex-direction:column;align-items:stretch;text-align:center}
  .sp__recmain{flex:0 0 auto}
  .sp__recprice{justify-content:center}
  .sp__btn{width:100%}
}
@media(prefers-reduced-motion:reduce){.sp__rec.is-swap{animation:none}.has-sp .clv-svc,.sp__chip{transition:none}}