/* Spa menu — book-style split view. Brand inks only; Grey is used as a rule, never
   as text (it measures 3.00:1 on white and fails the 4.5:1 body minimum). */
#os-menu-split{font-family:'Philosopher',Georgia,serif;padding:28px 20px 48px;background:#fff;}
#os-menu-split .osms-inner{max-width:1120px;margin:0 auto;}

#os-menu-split .osms-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 22px;}
#os-menu-split .osms-pill{appearance:none;border:1px solid #939598;background:#fff;color:#004214;
  font-family:inherit;font-size:15px;font-weight:700;padding:9px 18px;border-radius:999px;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease;}
#os-menu-split .osms-pill:hover{border-color:#2D803B;}
#os-menu-split .osms-pill.is-active{background:#004214;border-color:#004214;color:#fff;}
#os-menu-split .osms-pill:focus-visible{outline:3px solid #2D803B;outline-offset:2px;}

#os-menu-split .osms-split{display:grid;gap:24px;grid-template-columns:minmax(260px,380px) 1fr;align-items:start;}

/* Index: the whole point is to stop the page being one long scroll, so it scrolls
   inside itself on desktop and the detail pane stays put. */
#os-menu-split .osms-index{max-height:560px;overflow-y:auto;border-top:1px solid #939598;}
/* Prices vary from "R600/75min" to "R250/30 min (no gel paint) | R350/45 min (with
   gel paint)". Without wrapping, the long ones crush the treatment name into a
   one-word-per-line column. The row wraps and the price drops beneath instead. */
#os-menu-split .osms-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:2px 12px;width:100%;text-align:left;appearance:none;border:0;border-bottom:1px solid #939598;
  background:transparent;font-family:inherit;padding:13px 10px;cursor:pointer;color:#231F20;
  transition:background .14s ease;}
#os-menu-split .osms-row:hover{background:#F5F9F5;}
#os-menu-split .osms-row.is-active{background:#E5EFE7;}
#os-menu-split .osms-row.is-active .osms-row-name{color:#004214;}
#os-menu-split .osms-row:focus-visible{outline:3px solid #2D803B;outline-offset:-3px;}
#os-menu-split .osms-row-name{font-size:16px;font-weight:700;line-height:1.3;flex:1 1 60%;min-width:0;}
#os-menu-split .osms-row-price{font-size:13px;color:#2D803B;font-weight:700;flex:0 1 auto;
  text-align:right;line-height:1.35;}

#os-menu-split .osms-pane{position:sticky;top:20px;background:#F5F9F5;border-radius:14px;padding:20px;}
#os-menu-split .osms-img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px;
  display:block;margin:0 0 16px;background:#E5EFE7;}
#os-menu-split .osms-name{margin:0 0 4px;font-size:clamp(20px,3vw,28px);font-weight:700;color:#004214;line-height:1.2;}
#os-menu-split .osms-price{margin:0 0 12px;font-size:17px;font-weight:700;color:#2D803B;}
#os-menu-split .osms-detail{margin:0 0 18px;font-size:16px;line-height:1.6;color:#231F20;}
#os-menu-split .osms-cta{margin:0;}
#os-menu-split .osms-btn{display:inline-block;background:#2D803B;color:#fff;text-decoration:none;
  padding:13px 26px;border-radius:999px;font-weight:700;font-size:16px;transition:background .16s ease;}
#os-menu-split .osms-btn:hover{background:#246a31;}
#os-menu-split .osms-btn:focus-visible{outline:3px solid #004214;outline-offset:2px;}

@media (max-width:820px){
  #os-menu-split .osms-split{grid-template-columns:1fr;}
  /* On a phone a sticky pane would cover the list it is meant to explain. */
  #os-menu-split .osms-pane{position:static;order:-1;}
  #os-menu-split .osms-index{max-height:none;}
}
@media (prefers-reduced-motion:reduce){
  #os-menu-split .osms-pill,#os-menu-split .osms-row,#os-menu-split .osms-btn{transition:none;}
}