/* `hidden` has to beat the display rules below */
[hidden]{display:none !important}

/* ─────────────────────────────────────────────────────────────
   Media slots — photo or short video. Files live in /frontend/media/
   (signature treatments) or /frontend/images/ (category fallbacks).
   ───────────────────────────────────────────────────────────── */
.media{
  position:relative;overflow:hidden;border-radius:var(--r-md);
  background-color:var(--cream-soft);background-image:var(--linen);
  background-size:cover;background-position:center;
}
.media video,.media img,.media picture{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.media picture img{position:absolute;inset:0}

/* ─────────────────────────────────────────────────────────────
   Full menu page — Wellife-style light hero card, then the menu.
   ───────────────────────────────────────────────────────────── */
.menu-hero{max-width:var(--max);margin:14px auto 0;padding:0 14px}
.menu-hero-in{
  border-radius:var(--r-xl);color:var(--ink);text-align:center;
  padding:clamp(40px,6vw,76px) clamp(22px,5vw,64px);
  background:
    radial-gradient(60% 80% at 80% 10%, rgba(216,178,90,.28), rgba(216,178,90,0) 70%),
    radial-gradient(60% 80% at 10% 100%, rgba(201,208,180,.45), rgba(201,208,180,0) 70%),
    var(--paper);
}
.menu-hero .eyebrow{color:var(--label)}
.menu-hero .menu-script{
  font-family:'Jost',sans-serif;font-weight:400;line-height:1;letter-spacing:-.02em;
  font-size:clamp(34px,5vw,62px);color:var(--ink);margin:0 0 16px;
}
.menu-hero h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.menu-hero p{font-size:15.5px;color:var(--ink-soft);max-width:58ch;margin:0 auto}

/* the two group tabs — Spa & Traditional / Beauty */
.menu-groups{
  max-width:var(--max);margin:18px auto 0;padding:0 14px;
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
}
.mg-tab{
  cursor:pointer;font:inherit;font-size:14px;
  min-height:48px;padding:0 26px;border-radius:100px;
  background:var(--paper-2);color:var(--ink);
  border:1px solid rgba(31,26,18,.14);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.mg-tab:hover{border-color:var(--ink)}
.mg-tab.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* sticky category rail */
.cat-rail{
  position:sticky;top:var(--navh,64px);z-index:30;
  background:rgba(234,228,214,.92);backdrop-filter:blur(10px);
  margin-top:14px;
}
.cat-rail-in{
  max-width:var(--max);margin:0 auto;padding:10px 14px;
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.cat-rail-in::-webkit-scrollbar{display:none}
.cat-rail a{
  flex-shrink:0;font-size:13px;
  padding:0 16px;min-height:40px;display:inline-flex;align-items:center;
  border-radius:100px;border:1px solid rgba(31,26,18,.14);
  color:var(--ink-soft);white-space:nowrap;background:transparent;
}
.cat-rail a:hover{border-color:var(--ink);color:var(--ink)}
.cat-rail a.on{background:var(--caramel);border-color:var(--caramel);color:#fff}

/* the sheet holding the menu */
.menu-body{
  max-width:var(--max);margin:14px auto 0;
  background:var(--paper);border-radius:var(--r-xl);
  padding:clamp(34px,5vw,64px) var(--pad) clamp(50px,6vw,80px);
  overflow:hidden;
}

.mcat{scroll-margin-top:150px}
.mcat-head{max-width:640px}
.mcat-head h2{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;letter-spacing:-.01em;
  font-size:clamp(30px,4vw,48px);line-height:1.04;
}
.mcat-head p{font-size:15.5px;color:var(--ink-soft);margin:14px 0 0;max-width:52ch}
.mcat-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* pill buttons — dark filled + outline, as in the reference */
.tbtn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:0 20px;border-radius:100px;cursor:pointer;
  font:inherit;font-size:14px;font-weight:500;
  background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.tbtn:hover{background:var(--caramel);border-color:var(--caramel);color:#fff;transform:translateY(-2px)}
.tbtn-line{background:transparent;color:var(--ink)}
.tbtn-line:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* the row of treatment cards — scrolls sideways */
.trow{
  display:flex;gap:clamp(14px,1.8vw,22px);align-items:flex-start;
  overflow-x:auto;scroll-snap-type:x mandatory;
  margin:clamp(26px,4vw,40px) calc(var(--pad) * -1) 0;
  padding:4px var(--pad) 8px;scroll-padding:0 var(--pad);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.trow::-webkit-scrollbar{display:none}
.tcard{
  flex:0 0 clamp(260px,31%,380px);scroll-snap-align:start;
  display:flex;flex-direction:column;
}
.tcard-photo{
  position:relative;
  border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/1;
  background:var(--cream);
}
.tcard-photo .media{height:100%;border-radius:0;transition:transform .7s ease}
.tcard:hover .tcard-photo .media{transform:scale(1.05)}
.tcard h3{font-size:clamp(20px,1.9vw,24px);margin:18px 0 0;color:var(--ink)}
.tcard-desc{
  font-size:14.5px;line-height:1.6;color:var(--ink-soft);margin:10px 0 0;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.tcard-price{margin:10px 0 0;font-size:15px;font-weight:500;color:var(--caramel)}
.tcard-price small,.tcard-opts small{font-size:11px;font-weight:400;letter-spacing:.04em;color:var(--label)}
.tcard-actions{display:flex;gap:10px;margin-top:16px}

/* Explore → the card opens in place */
.tcard-more{display:none}
.tcard.open .tcard-desc{-webkit-line-clamp:unset;line-clamp:unset;display:block}
.tcard.open .tcard-more{display:block;animation:riseIn .45s ease both}
.tcard-inc{margin:12px 0 0;padding-left:18px;font-size:13.5px;color:var(--ink-soft)}
.tcard-inc li{padding:3px 0}
.tcard-inc b{font-weight:500;color:var(--ink)}
.tcard-opts{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid rgba(31,26,18,.1)}
.tcard-opts li{
  display:flex;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid rgba(31,26,18,.1);font-size:14px;color:var(--ink-soft);
}
.tcard-opts b{font-weight:500;color:var(--ink)}
.tcard-landed .tcard-photo{outline:3px solid var(--caramel-soft);outline-offset:3px}
.mcat .curve-nav{justify-content:flex-start;margin-top:22px}

/* prev / next pager at the foot of every category */
.mpager{
  display:flex;justify-content:space-between;gap:16px;
  margin-top:clamp(30px,5vw,46px);padding-top:20px;
  border-top:1px solid rgba(31,26,18,.1);
}
.mp-btn{
  cursor:pointer;font:inherit;background:none;border:0;padding:10px 0;
  min-height:44px;text-align:left;color:var(--ink);font-size:clamp(18px,2.4vw,22px);
}
.mp-btn small{
  display:block;font-size:10.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--label);margin-bottom:4px;
}
.mp-btn.mp-next{text-align:right;margin-left:auto}
.mp-btn:hover{color:var(--caramel)}

.menu-note{
  margin-top:clamp(30px,4vw,44px);padding:22px 24px;border-radius:var(--r-md);
  background:var(--cream-soft);font-size:14px;color:var(--ink-soft);
}
.menu-note a{color:var(--caramel);border-bottom:1px solid currentColor}

/* spa etiquette */
.etiquette{
  background:var(--bark);color:var(--on-forest);
  border-radius:var(--r-lg);padding:clamp(28px,5vw,60px);
  margin-top:clamp(40px,6vw,72px);
}
.etiquette h2{font-size:clamp(28px,4vw,40px);color:var(--paper);margin-bottom:8px}
.etiquette > p{font-size:15px;color:var(--on-forest);max-width:56ch;margin-bottom:28px}
.etq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px 32px}
.etq h3{font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--caramel-soft);margin-bottom:7px}
.etq p{font-size:14px;color:var(--on-forest);margin:0;line-height:1.65}
.etiquette footer{
  margin-top:34px;padding-top:24px;border-top:1px solid rgba(243,237,224,.18);
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:22px;color:var(--sage-light);
}

/* ── phones ──────────────────────────────────────────────── */
@media (max-width:820px){
  .menu-hero,.menu-groups{padding:0 10px}
  .menu-hero-in{padding:44px 20px;border-radius:var(--r-lg)}
  .cat-rail{top:var(--navh,56px)}
  .menu-body{margin:10px 10px 0;border-radius:var(--r-lg)}
  .tcard{flex-basis:80%}
  .mcat .curve-nav{display:none}

  /* WhatsApp button: a small round icon instead of a wide pill */
  .wa{
    width:52px;height:52px;min-height:0;padding:0;justify-content:center;
    font-size:0;letter-spacing:0;border-radius:50%;
  }
  .wa::before{
    content:"";width:24px;height:24px;background:currentColor;
    -webkit-mask:url('/assets/whatsapp.svg') center/contain no-repeat;
            mask:url('/assets/whatsapp.svg') center/contain no-repeat;
  }
}