/* 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). */
/* 98px of empty page sat between the banner and the category pills, measured at
   1440x800. On an 800px screen 527px was spent before the first treatment
   appeared -- two thirds of the window on furniture. */
#os-menu-split{font-family:'Philosopher',Georgia,serif;padding:14px 20px 40px;background:#fff;
  /* ONE height for both columns. The list is the measure -- the owner's point:
     the card should stop where the list stops. Declared once so the two can
     never drift apart when either is adjusted. */
  --osms-h:560px;}
#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;}

/* stretch, not start: the grid row is sized by the list, and the card fills it.
   That is what makes the two bottoms line up without either knowing the other's
   height -- an arithmetic guess at the card height was 4px out and would drift
   again the moment the caption's font or the list height changed. */
#os-menu-split .osms-split{display:grid;gap:24px;grid-template-columns:minmax(260px,380px) 1fr;align-items:stretch;}
/* macOS hides overlay scrollbars until you already scroll, so the styled webkit
   thumb below measured ZERO width and the only hint that 38 more treatments
   existed was a small caption. Reserve a real track. */
#os-menu-split .osms-scroll{scrollbar-width:thin;scrollbar-color:#c7cdc8 transparent;}

/* 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-indexcol{position:relative;display:flex;flex-direction:column;min-width:0;}
.osms-count{font-family:'Philosopher',Georgia,serif;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:#2D803B;padding:0 2px 8px;}
/* The scroller, and the two fades that say which way there is more. They are on
   the WRAPPER, not the scrolling box, or they would scroll away with the rows. */
.osms-scroll{position:relative;max-height:560px;overflow-y:auto;border-top:1px solid #939598;
  scrollbar-width:thin;scrollbar-color:#939598 transparent;}
.osms-scroll::-webkit-scrollbar{width:8px;}
.osms-scroll::-webkit-scrollbar-thumb{background:#c7cdc8;border-radius:999px;}
.osms-scroll::-webkit-scrollbar-thumb:hover{background:#939598;}
.osms-indexcol::after,.osms-indexcol::before{content:"";position:absolute;left:0;right:8px;
  height:46px;pointer-events:none;opacity:0;transition:opacity .2s ease;}
.osms-indexcol::after{bottom:0;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.96));}
.osms-indexcol::before{top:26px;background:linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.96));}
.osms-indexcol.has-more::after{opacity:1;}
.osms-indexcol.has-above::before{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .osms-indexcol::after,.osms-indexcol::before{transition:none;}
}
.osms-index{}
/* 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;}

/* A CARD THAT CHANGES SIZE ON EVERY ARROW PRESS IS THE WRONG CARD.
   The image was set to stretch across the text rows, so a short description gave
   a short image and a long one gave a tall image: pressing the arrow moved the
   photograph, the position counter and the Book button all at once. Sports
   Massage rendered 246px shorter than Bamboo. Nothing about the treatment
   should change the furniture around it.
   So the panel is a FIXED height -- the same height as the list beside it, which
   is what the owner asked for: the list is the mark the card stops at, and the
   two bottoms line up whatever is selected. Image on top at a fixed height,
   description underneath it, and the only thing that varies is how much of the
   description is visible: a long one scrolls inside its own box rather than
   pushing the button down the page. */
#os-menu-split .osms-pane{position:sticky;top:20px;background:#F5F9F5;border-radius:14px;padding:16px 18px;
  align-self:stretch;min-height:0;display:flex;flex-direction:column;gap:6px;}
#os-menu-split .osms-img{flex:0 0 auto;width:100%;height:250px;object-fit:cover;border-radius:10px;
  display:block;margin:0 0 10px;background:#E5EFE7;}
#os-menu-split .osms-name{flex:0 0 auto;margin:0;font-size:clamp(20px,3vw,28px);font-weight:700;color:#004214;line-height:1.2;}
#os-menu-split .osms-price{flex:0 0 auto;margin:0;font-size:17px;font-weight:700;color:#2D803B;}
/* The only elastic part. min-height:0 is required or a flex item refuses to
   shrink below its content and the panel grows anyway -- the default that
   quietly defeats every fixed-height flex layout. */
#os-menu-split .osms-detail{flex:1 1 auto;min-height:0;overflow-y:auto;margin:0;
  font-size:15.5px;line-height:1.6;color:#231F20;}
#os-menu-split .osms-cta{flex:0 0 auto;margin:0;}
/* "Book this atPlattekloof". The label is a text node ending in a space
   followed by a <strong>, which reads correctly -- but brand-2026.css forces
   .osms-btn to display:inline-flex !important, and a flex container DISCARDS
   whitespace between its items. gap restores the space when the rule wins, and
   the trailing space still renders if it does not, so both cases are right. */
#os-menu-split .osms-btn{display:inline-block;gap:.32em;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. */
  /* On a phone the card is the whole screen, so a fixed height would clip the
     description instead of fitting it. Let it grow. */
  #os-menu-split .osms-pane{position:static;order:-1;height:auto;}
  #os-menu-split .osms-img{height:200px;margin:0 0 12px;}
  #os-menu-split .osms-detail{overflow:visible;}
  #os-menu-split .osms-index{max-height:none;}
  /* No scroll box inside the scrolling page on a phone: a thumb on the list moved
     the list, not the page, and the page felt stuck (27 Sep 2026 mobile sweep).
     The list runs full length; updateCount() then reads "19 treatments". */
  #os-menu-split .osms-scroll{max-height:none;overflow:visible;}
}
@media (prefers-reduced-motion:reduce){
  #os-menu-split .osms-pill,#os-menu-split .osms-row,#os-menu-split .osms-btn{transition:none;}
}

/* --- Stepping through treatments ------------------------------------------
 * Arrows on the detail panel, not a carousel replacing the menu. The list stays
 * on screen so treatments can still be compared; these are for the visitor who
 * would rather be walked through than scroll. Position is stated because an
 * arrow with no sense of progress is a trapdoor.
 */
#os-menu-split .osms-nav{flex:0 0 auto;display:flex;align-items:center;gap:10px;margin:2px 0 10px;}
#os-menu-split .osms-nav-btn{appearance:none;width:34px;height:34px;flex:0 0 auto;border:1px solid #cfdccf;
  background:#fff;color:#004214;border-radius:999px;cursor:pointer;font-size:19px;line-height:1;
  font-family:inherit;display:flex;align-items:center;justify-content:center;}
#os-menu-split .osms-nav-btn:hover{border-color:#2D803B;background:#F0F5F0;}
#os-menu-split .osms-nav-btn:focus-visible{outline:3px solid #2D803B;outline-offset:2px;}
#os-menu-split .osms-nav-pos{font-size:13px;color:#4F4F4F;letter-spacing:.04em;}

@media (max-width:820px){
}