/* Jomtien Sauna & Gym · global.css (Coastal Calm, v1.1.0; async, print-media swap). Everything below the fold.
   Fonts, tokens, header, home hero, day-pass strip, page hero, Today card and the fixed bar are in critical.css (inlined).
   Spec: ~/Desktop/Sauna Pattaya/design-system/jomtien-sauna/MASTER-coastal.md. Rules: pastels are surfaces, pine carries
   text and actions; radius 3 / 6 / 9 / 12 + the asymmetric photo corners only; subtle borders, no heavy shadows, no extra
   decorative colours; no uppercase, letter-spacing or italics on Thai; reduced motion respected. */

/* ===== component tokens ===== */
:root{
  --jss-gap-head:clamp(12px,.45vw + 10px,16px);
  --jss-gap-comp:clamp(26px,3vw,40px);
  --jss-t-reveal:360ms;--jss-ease:cubic-bezier(.22,.61,.36,1);--jss-t-hover:200ms;--jss-t-press:120ms;
  --jss-fs-h2-visit:clamp(2.75rem,1.65rem + 5.9vw,3.0625rem);
}
@media (min-width:700px){:root{--jss-fs-h2-visit:var(--jss-fs-h2-feature)}}
:root:lang(th){--jss-fs-h2-visit:var(--jss-fs-h2-feature)}
/* safety net: no heading ever falls back to UA sizes */
h3,h4{font:var(--jss-w-display) var(--jss-fs-h3)/1.15 var(--jss-font-display);letter-spacing:var(--jss-ls-h3)}

/* ===== motion, hover, press ===== */
.jss-btn{transition:background-color var(--jss-t-hover) var(--jss-ease),border-color var(--jss-t-hover) var(--jss-ease),color var(--jss-t-hover) var(--jss-ease),transform var(--jss-t-hover) var(--jss-ease)}
.jss-btn--primary:hover,.jss-btn:not(.jss-btn--ghost):not(.jss-btn--light):hover{background:var(--jss-pine-press);border-color:var(--jss-pine-press);color:var(--jss-white);transform:translateY(-1px)}
.jss-btn--ghost:hover{background:var(--jss-cloud);color:var(--jss-pine)}
.jss-btn--light:hover{background:var(--jss-sand-c);border-color:var(--jss-sand-c);color:var(--jss-pine)}
.jss-btn:active{transform:none}
a:hover{color:var(--jss-pine-press)}
.jss-tlink:hover,.jss-slink:hover,.jss-rating:hover span{text-decoration:underline;text-underline-offset:6px}
.jss-brand:hover,.jss-crumbs a:hover{color:var(--jss-pine)}
.jss-lang a:hover{text-decoration:underline;text-underline-offset:6px}
.jss-gbp:hover u{text-decoration-color:var(--jss-pine)}
@media (min-width:1024px){
  .jss-nav__list>li>a::after,.jss-nav__toggle::after{transition:width var(--jss-t-hover) var(--jss-ease)}
  .jss-nav__list>li>a:hover::after,.jss-nav__toggle:hover::after{width:100%}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){*,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
button,input,select,textarea{font:inherit;color:inherit}
iframe{display:block;max-width:100%}
main:focus{outline:0}

/* ===== display headings (eyebrow + Cormorant H2 with an italic phrase) ===== */
.jss-h2d{font:var(--jss-w-display) var(--jss-fs-h2)/1.02 var(--jss-font-display);letter-spacing:var(--jss-ls-h2)}
.jss-h2f{font:var(--jss-w-display) var(--jss-fs-h2-feature)/1.03 var(--jss-font-display);letter-spacing:var(--jss-ls-h2)}
:is(.jss-h2d,.jss-h2f) em{font-style:italic;font-weight:400}
:is(.jss-h2d,.jss-h2f) .jss-l{display:block}
:lang(th) :is(.jss-h2d,.jss-h2f){line-height:1.4}
:lang(th) :is(.jss-h2d,.jss-h2f) em{font-style:normal;font-weight:inherit}
.jss-shead{margin-bottom:26px}
.jss-shead .jss-eyebrow{margin-bottom:16px}
.jss-shead__p{margin-top:20px;max-width:350px;font-size:1rem;line-height:1.75;color:var(--jss-muted)}
.jss-shead__p .jss-l{display:inline}

/* ===== home: the experience (4 facility cards) + calm text block ===== */
.jss-exp{padding-block:var(--jss-section)}
.jss-fac{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 16px}
.jss-fac__card{display:block;color:var(--jss-pine);text-decoration:none}
.jss-fac__card:hover{color:var(--jss-pine)}
.jss-fac__img{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:7px;background:var(--jss-mist)}
.jss-fac__img picture{position:absolute;inset:0}
.jss-fac__img img{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(1.055) saturate(.94);transition:transform .45s var(--jss-ease)}
.jss-fac__num{position:absolute;top:8px;left:8px;z-index:1;padding:5px 6px;background:var(--jss-ivory);border-radius:var(--jss-r-xs);font:600 .5625rem/1 var(--jss-font-body);letter-spacing:.13em;text-transform:uppercase;color:var(--jss-pine)}
:lang(th) .jss-fac__num{font-size:.8125rem;letter-spacing:0;text-transform:none;padding:6px 8px}
.jss-fac__title{display:flex;align-items:flex-start;justify-content:space-between;gap:4px;margin-top:13px}
.jss-fac__title h3{font:500 1.4375rem/1.05 var(--jss-font-display);letter-spacing:-.024em}
.jss-fac__title .ico{width:14px;height:14px;margin-top:4px}
.jss-fac__card p{margin-top:7px;font-size:.75rem;line-height:1.7;color:var(--jss-muted)}
:lang(th) .jss-fac__card p{font-size:.9375rem}
.jss-fac__card:focus-visible{outline-offset:6px;border-radius:var(--jss-r-img)}
@media (hover:hover) and (pointer:fine){.jss-fac__card:hover .jss-fac__img img{transform:scale(1.035)}.jss-fac__card:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}}
@supports (grid-template-rows:subgrid){ /* v1.1.3: each home card spans 3 shared rows (photo, title, text), so a title that wraps to 2 lines (TH "สระว่ายน้ำ...") pushes the whole row's text down together and the descriptions stay level */
  .jss-exp .jss-fac>li{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
  .jss-exp .jss-fac__card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .jss-exp .jss-fac__card>*{align-self:start} /* a 1-line title sits at the top of the shared title row, not centred in it */
}
.jss-calm{display:grid;gap:16px;margin-top:48px;padding-top:40px;border-top:1px solid var(--jss-line)}
.jss-calm__h{font:var(--jss-w-display) var(--jss-fs-h3)/1.15 var(--jss-font-display);letter-spacing:var(--jss-ls-h3);max-width:15em}
.jss-calm__body{max-width:var(--jss-measure);color:var(--jss-muted)}
.jss-calm__body>*+*{margin-top:1em}
.jss-calm__body a{color:var(--jss-pine);text-decoration:underline;text-decoration-color:var(--jss-line-strong)}
.jss-calm__body a:hover{text-decoration-color:var(--jss-pine)}

/* ===== home: stay a little longer (mist split) ===== */
.jss-stay{background:var(--jss-mist);padding-block:36px 44px}
.jss-stay__grid{display:flex;flex-direction:column;gap:32px;align-items:stretch}
.jss-stay__img{position:relative;margin:0;height:280px;overflow:hidden;isolation:isolate;border-radius:var(--jss-r-img) var(--jss-r-img) 70px var(--jss-r-img);background:var(--jss-cloud)}
.jss-stay__img picture{position:absolute;inset:0}
.jss-stay__img img{width:100%;height:100%;object-fit:cover;object-position:40% center;filter:brightness(1.08) saturate(.9)}
.jss-stay__img::after{content:"";position:absolute;inset:55% 0 0;z-index:0;background:linear-gradient(transparent,rgb(22 42 39 / .76))}
.jss-stay__cap{position:absolute;left:16px;right:16px;bottom:22px;z-index:1;margin:0;font:400 .5625rem/1.4 var(--jss-font-body);letter-spacing:.15em;text-transform:uppercase;color:#fff}
.jss-stay__copy .jss-eyebrow{font-size:.5625rem;letter-spacing:.183em;margin-bottom:16px}
.jss-stay__copy .jss-h2f{margin-bottom:22px}
.jss-stay__copy>p:not(.jss-eyebrow){max-width:100%;margin-bottom:14px;font-size:1rem;line-height:1.75;color:var(--jss-muted)}
.jss-stay__copy .jss-tlink{margin-top:2px;font-size:.875rem;gap:16px}
.jss-stay__copy .jss-tlink .ico{width:19px;height:19px}
.jss-stay__food{display:flex;align-items:center;gap:16px;margin-top:20px;padding-top:21px;border-top:1px solid #B6C2C8}
.jss-stay__dish{width:68px;height:68px;border-radius:50%;overflow:hidden;flex:none;background:var(--jss-cloud)}
.jss-stay__dish img{width:100%;height:100%;object-fit:cover;object-position:55% 80%}
.jss-stay__food strong{display:block;margin-bottom:4px;font-size:.75rem;font-weight:500;color:var(--jss-pine)}
.jss-stay__food span{display:block;font-size:.75rem;line-height:1.65;color:var(--jss-muted)}
:lang(th) :is(.jss-stay__food strong,.jss-stay__food span){font-size:.9375rem}
:lang(th) .jss-stay__cap{font-size:.875rem;letter-spacing:0;text-transform:none}

/* ===== home: amenities strip ===== */
.jss-amen{padding-block:30px}
.jss-amen__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:23px 14px}
.jss-amen__list li{display:flex;align-items:center;gap:11px;font-size:.75rem;line-height:1.65;color:var(--jss-pine)}
.jss-amen__list .ico{width:23px;height:23px;stroke-width:1.3}
.jss-amen__list strong{display:block;font-weight:500}
.jss-amen__list span{display:block}
.jss-amen__list li>span{text-wrap:balance}
.jss-amen__list li>span>:is(span,strong){display:inline} /* v1.1.4: no ragged 3-line labels on phones */
:lang(th) .jss-amen__list li{font-size:.9375rem;line-height:1.7}

/* ===== pine visit band (components/visit-band.php: the home closing band and every inner page's final CTA) ===== */
.jss-vband{--jss-focus:var(--jss-ivory);background:var(--jss-pine);color:var(--jss-ivory);padding-block:48px}
.jss-vband .jss-eyebrow{margin-bottom:20px;color:var(--jss-mist);font-size:.5625rem;letter-spacing:.19em}
:lang(th) .jss-vband .jss-eyebrow{font-size:.9375rem;letter-spacing:0}
.jss-vband h2{font-size:var(--jss-fs-h2-visit);line-height:1.04;color:var(--jss-ivory)}
.jss-vband h2 em{font-style:italic;font-weight:400}
.jss-vband__body{margin-block:20px 24px;max-width:30em;color:var(--jss-on-pine);font-size:1rem;line-height:1.75}
.jss-vband__body>*+*{margin-top:.8em}
.jss-vband__body a{color:var(--jss-ivory)}
.jss-vband__copy>.jss-btn{margin-top:4px}
.jss-vband__copy h2+.jss-btn{margin-top:28px}
.jss-vband .jss-btn--light{min-height:52px;padding-inline:22px;gap:20px}
.jss-vband__details{display:grid;gap:25px;margin-top:36px;padding-top:28px;border-top:1px solid var(--jss-line-pine)}
.jss-vband__item{display:flex;align-items:flex-start;gap:16px}
.jss-vband__item>.ico{width:20px;height:20px;stroke-width:1.5;margin-top:2px}
.jss-vband__label{display:block;margin-bottom:8px;font:500 .5rem/1.4 var(--jss-font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--jss-mist)}
:lang(th) .jss-vband__label{font-size:.9375rem;letter-spacing:0;text-transform:none}
.jss-vband__big{font-size:1.375rem;font-weight:400;letter-spacing:-.02em;line-height:1.3;font-variant-numeric:tabular-nums}
.jss-vband__line{font-size:.9375rem;line-height:1.6;color:var(--jss-ivory)}
.jss-vband address{font-style:normal;font-size:.875rem;line-height:1.8;color:var(--jss-on-pine)}
.jss-vband__wa{display:inline-flex;align-items:center;gap:16px;min-height:44px;font-size:1rem;line-height:1.4;color:var(--jss-ivory);text-decoration:none}
.jss-vband__wa .ico{width:17px;height:17px}
.jss-vband__wa:hover{color:var(--jss-white);text-decoration:underline;text-underline-offset:6px}
.jss-vband__tel{display:flex;align-items:center;min-height:44px;font-size:.8125rem;color:var(--jss-on-pine);text-decoration:none}
.jss-vband__tel.is-solo{min-height:44px;font-size:1rem;color:var(--jss-ivory)}
.jss-vband__tel:hover{color:var(--jss-white);text-decoration:underline}
:lang(th) :is(.jss-vband__tel,.jss-vband address){font-size:.9375rem}

/* ===== FAQ, the one accordion ("Before you visit": intro column beside the list; components/faq.php) =====
   native details; the exact classes faq-q / faq-a are the audit contract; the + is two CSS bars that turn into × */
.jss-qa{padding-block:var(--jss-section)}
.jss-qa__intro .jss-eyebrow{font-size:.5625rem;letter-spacing:.167em}
.jss-qa__intro .jss-h2d{font-size:2.875rem}
.jss-qa__intro .jss-h2d .jss-l{display:inline}
.jss-qa__intro>p:not(.jss-eyebrow){margin-top:16px;max-width:26em;font-size:.9375rem;line-height:1.8;color:var(--jss-muted)}
.jss-faq{display:block;margin-top:28px;border-top:1px solid var(--jss-line-faq)}
.jss-faq__item{border-bottom:1px solid var(--jss-line-faq)}
.jss-faq__item>summary{position:relative;list-style:none;cursor:pointer;display:flex;align-items:center;min-height:72px;padding:20px 34px 20px 0;font:500 .875rem/1.6 var(--jss-font-body);color:var(--jss-pine)}
.jss-faq__item>summary::-webkit-details-marker{display:none}
.jss-faq__item>summary::before,.jss-faq__item>summary::after{content:"";position:absolute;top:50%;right:1px;width:15px;height:1.5px;margin-top:-.75px;background:var(--jss-pine);transition:transform var(--jss-t-hover) var(--jss-ease)}
.jss-faq__item>summary::after{transform:rotate(90deg)}
.jss-faq__item[open]>summary::before{transform:rotate(45deg)}
.jss-faq__item[open]>summary::after{transform:rotate(135deg)}
.jss-faq__item>summary:hover{text-decoration:underline;text-underline-offset:5px}
.jss-faq__item .faq-a{max-width:560px;padding:0 18px 24px 0;font-size:.9375rem;line-height:1.8;color:var(--jss-muted)}
.jss-faq__item .faq-a>*+*{margin-top:.8em}
.jss-faq .faq-a a{color:var(--jss-pine);text-decoration-color:var(--jss-line-strong)}
:lang(th) .jss-faq__item>summary{font-size:1rem;line-height:1.7}
:lang(th) .jss-faq__item .faq-a{font-size:1rem;line-height:1.75}
@media (min-width:700px){
  .jss-qa__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
  .jss-qa__intro{position:sticky;top:24px}
  .jss-qa__intro .jss-eyebrow{font-size:.625rem;letter-spacing:.155em}
  .jss-qa__intro .jss-h2d{font-size:var(--jss-fs-h2)}
  .jss-qa__intro .jss-h2d .jss-l{display:block}
  .jss-qa__intro>p:not(.jss-eyebrow){margin-top:24px;font-size:.875rem}
  .jss-qa .jss-faq{margin-top:0}
  .jss-faq__item>summary{min-height:74px;padding-block:22px;font-size:.8125rem;line-height:1.5}
  .jss-faq__item .faq-a{padding-right:30px;font-size:.875rem;line-height:1.85}
  .jss-vband{padding-block:72px}
  .jss-vband__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
  .jss-vband .jss-eyebrow{font-size:.625rem;letter-spacing:.2em;margin-bottom:22px}
  .jss-vband__body{margin-block:22px 26px;font-size:.875rem;line-height:1.9}
  .jss-vband .jss-btn--light{min-width:183px;min-height:54px;padding-inline:24px}
  .jss-vband__details{margin:0;padding:0 0 0 28px;border-top:0;border-left:1px solid var(--jss-line-pine);gap:28px}
  .jss-vband__item{gap:20px}
  .jss-vband__item>.ico{width:21px;height:21px}
  .jss-vband__label{margin-bottom:9px;font-size:.5625rem;letter-spacing:.167em}
  .jss-vband__big{font-size:1.25rem}
  .jss-vband address{font-size:.75rem}
  .jss-vband__tel{font-size:.75rem}
}
@media (min-width:960px){
  .jss-qa__grid{grid-template-columns:.82fr 1.18fr;gap:80px}
  .jss-faq__item>summary{font-size:.875rem}
  :lang(th) .jss-faq__item>summary{font-size:1rem}
  .jss-vband__grid{gap:70px}
  .jss-vband__details{padding-left:40px}
  .jss-vband__big{font-size:1.4375rem}
  .jss-vband address{font-size:.875rem}
}
@media (min-width:1200px){
  .jss-vband__grid{gap:120px}
  .jss-vband__details{padding-left:64px}
}

/* ===== section system (inner pages + the TH/RU home until their Coastal copy lands; MASTER-coastal §9) =====
   One rhythm: --jss-section (60 / 72 / 96) between bands; two ivory bands in a row share one gap. Inner-page H2s use the
   display face at an inner scale (36 to 52 px: pages carry many sections, the 60 px home scale would shout); the FAQ and
   the visit band keep the home's display sizes. */
:root{--jss-fs-h2-inner:clamp(2.25rem,1.6rem + 2.2vw,3.25rem)}
:root:lang(th){--jss-fs-h2-inner:clamp(1.75rem,1.45rem + 1.2vw,2.375rem)}
:root:lang(ru){--jss-fs-h2-inner:clamp(2.125rem,1.5rem + 2vw,3rem)}
.jss-sec{padding-block:var(--jss-section)}
.jss-sec--sand{background:var(--jss-cloud)}
.jss-sec--sand.jss-sec--tight{padding-block:calc(var(--jss-section) * .6)}
.jss-sec:not(.jss-sec--sand)+.jss-sec:not(.jss-sec--sand){padding-top:0}
:is(.jss-hero,.jss-phero:not(.jss-phero--text))+.jss-sec:not(.jss-sec--sand){padding-top:0}
.jss-sec:not(.jss-sec--sand)+.jss-sec:not(.jss-sec--sand):not(:has(h2)){margin-top:calc(var(--jss-s-5) - var(--jss-section))}
.jss-phero--text+.jss-sec{padding-top:clamp(24px,2vw + 12px,48px)}
.jss-sec__head{display:grid;gap:var(--jss-gap-head);margin-bottom:var(--jss-gap-comp);max-width:760px}
.jss-sec__head .jss-eyebrow{margin:0}
.jss-sec__head:has(+ .jss-prose,+ p){margin-bottom:clamp(16px,1.4vw + 8px,24px)}
.jss-sec__foot{margin-top:clamp(24px,3vw,40px)}
.jss-lead+.jss-sec__foot{margin-top:1em} /* v1.1.3 guard: a foot block straight after a lead line (its list/grid gated out) keeps paragraph spacing */
.jss-h2{font:var(--jss-w-display) var(--jss-fs-h2-inner)/1.05 var(--jss-font-display);letter-spacing:var(--jss-ls-h2);color:var(--jss-pine)}
.jss-h2 em,.jss-sec h3 em{font-style:italic;font-weight:400}
.jss-h3{font:var(--jss-w-display) var(--jss-fs-h3)/1.15 var(--jss-font-display);letter-spacing:var(--jss-ls-h3);color:var(--jss-pine)}
.jss-lead{font-size:var(--jss-fs-body);line-height:1.8;max-width:var(--jss-measure);color:var(--jss-muted)}
.jss-label{font:500 var(--jss-fs-label)/1.3 var(--jss-font-body);color:var(--jss-muted)}
.jss-note{font-size:var(--jss-fs-label);color:var(--jss-muted);line-height:1.5}
.jss-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--jss-pine);text-decoration:underline;text-decoration-color:var(--jss-line-strong)}
.jss-link:hover{text-decoration-color:var(--jss-pine)}
.jss-form__note a,.jss-checks a{display:inline-flex;align-items:center;min-height:44px}
.jss-checks:has(li>a){gap:0}
.jss-checks li:has(>a){align-items:center}
.jss-checks li:has(>a) .ico{margin-top:0}
.jss-card{background:var(--jss-white);border:1px solid var(--jss-line);border-radius:var(--jss-r)}
.jss-photo{border-radius:var(--jss-r-img);overflow:hidden;background:var(--jss-mist)}
.jss-photo img{width:100%;height:100%;object-fit:cover;filter:brightness(1.055) saturate(.94)}
.jss-photo--43{aspect-ratio:4/3}
.jss-photo--1610{aspect-ratio:16/10}
.jss-photo--11{aspect-ratio:1}
.jss-figcap{margin-top:12px;font-size:var(--jss-fs-label);color:var(--jss-muted);line-height:1.5;max-width:var(--jss-measure)}
.jss-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:var(--jss-r-btn);background:var(--jss-white);border:1px solid var(--jss-line);font-size:var(--jss-fs-label);font-weight:500;color:var(--jss-pine);line-height:1.3}
.jss-chip .ico{width:18px;height:18px}
.jss-intro{margin-bottom:clamp(28px,3vw,40px)}
/* text sections (prose with an H2, hours, address, pass includes, extras, payment, a facility block without a cleared
   photo): heading left, content right from 960 px, the calm-block split of the home page, so no band is a narrow column
   beside an empty half */
@media (min-width:960px){
  .jss-sec--split>.jss-wrap:has(>.jss-sec__head){display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);column-gap:clamp(48px,6vw,96px);align-items:start}
  .jss-sec--split>.jss-wrap>.jss-sec__head{grid-column:1;grid-row:1 / span 8;margin-bottom:0}
  .jss-sec--split>.jss-wrap:has(>.jss-sec__head)>:not(.jss-sec__head){grid-column:2;min-width:0}
  .jss-sec--split>.jss-wrap>.jss-sec__head+*{margin-top:0}
  /* "Your day here" steps without a photo split the same way: heading left, steps + note right */
  .jss-day__grid.is-solo{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);column-gap:clamp(48px,6vw,96px);row-gap:28px;align-items:start}
  .jss-day__grid.is-solo .jss-day__text{display:contents}
  .jss-day__grid.is-solo .jss-day__text>.jss-sec__head{grid-column:1;grid-row:1 / span 4}
  .jss-day__grid.is-solo .jss-day__text>:not(.jss-sec__head){grid-column:2}
}

/* ===== prose: intro zones, guides, legal (measure 34em ≈ 68 characters) ===== */
.jss-prose{max-width:var(--jss-measure);color:var(--jss-muted)}
.jss-prose>*+*{margin-top:1em}
.jss-prose h2{font:500 clamp(1.875rem,1.5rem + 1.4vw,2.5rem)/1.1 var(--jss-font-display);letter-spacing:-.015em;color:var(--jss-pine);margin-top:1.8em}
.jss-prose h3{font:500 var(--jss-fs-h3)/1.15 var(--jss-font-display);color:var(--jss-pine);margin-top:1.6em}
.jss-prose h2+*{margin-top:clamp(14px,1vw + 8px,20px)}
.jss-prose h3+*{margin-top:var(--jss-s-2)}
.jss-prose h2.jss-h2{font:500 var(--jss-fs-h2-inner)/1.05 var(--jss-font-display)}
.jss-prose>:first-child{margin-top:0}
.jss-prose ul,.jss-prose ol{padding-left:1.25em;margin-bottom:0}
.jss-prose li+li{margin-top:.45em}
.jss-prose li::marker{color:var(--jss-line-strong)}
.jss-prose strong{color:var(--jss-pine);font-weight:600}
.jss-prose a{color:var(--jss-pine);text-decoration-color:var(--jss-line-strong)}
.jss-prose a:hover{text-decoration-color:var(--jss-pine)}
.jss-prose blockquote{margin-inline:0;padding:18px 22px;background:var(--jss-white);border:1px solid var(--jss-line);border-radius:var(--jss-r-btn);color:var(--jss-pine)}
.jss-prose figure{margin-block:1.6em}
.jss-prose figure img{border-radius:var(--jss-r-img)}
.jss-prose figcaption{margin-top:10px;font-size:var(--jss-fs-label);line-height:1.5}
.jss-prose table{width:100%;border-collapse:collapse;font-size:var(--jss-fs-small)}
.jss-prose th,.jss-prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--jss-line);vertical-align:top}
.jss-prose th{color:var(--jss-pine);font-weight:600}
:lang(th) .jss-prose h2{line-height:1.4}
/* the page intro (section type "intro"): the opening paragraph reads as an editorial lead in the display face; from 960 px
   the lead sits left and the rest of the intro right, the calm-block layout of the home page */
.jss-sec--intro .jss-prose>p:first-child{font:500 clamp(1.25rem,1.1rem + .55vw,1.5rem)/1.5 var(--jss-font-display);letter-spacing:-.005em;color:var(--jss-pine)}
:lang(th) .jss-sec--intro .jss-prose>p:first-child{font-size:clamp(1.125rem,1.05rem + .3vw,1.3125rem);line-height:1.75;letter-spacing:0}
@media (min-width:960px){
  .jss-sec--intro .jss-prose{max-width:none;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(48px,6vw,96px);align-items:start}
  .jss-sec--intro .jss-prose>*{grid-column:2;max-width:var(--jss-measure)}
  .jss-sec--intro .jss-prose>p:first-child{grid-column:1;grid-row:1 / span 12;max-width:22em}
  .jss-sec--intro .jss-prose>:nth-child(2){margin-top:0}
}

/* guide / article: one reading column (34em) + the venue card aside from 1024 px */
.jss-article{display:grid;gap:clamp(32px,4vw,56px)}
.jss-article__main{display:grid;gap:clamp(24px,2vw + 12px,36px);align-content:start;min-width:0;max-width:var(--jss-measure)}
.jss-article__meta{font-size:var(--jss-fs-label);color:var(--jss-muted)}
.jss-article__meta::before,.jss-legal__meta::before{content:"";display:inline-block;width:22px;height:1px;margin-right:10px;vertical-align:.3em;background:var(--jss-pine)} /* inline rule, not flex: a flex row split the byline's nowrap span into spaced items */
.jss-answer{padding:22px 24px;background:var(--jss-mist-35);border:1px solid var(--jss-line);border-radius:28px var(--jss-r) var(--jss-r) var(--jss-r);font-size:var(--jss-fs-lead);line-height:1.75;color:var(--jss-pine)}
.jss-answer>*+*{margin-top:.8em}
.jss-answer a{color:var(--jss-pine)}
.jss-toc{padding-block:6px 10px;border-top:1px solid var(--jss-line-faq);border-bottom:1px solid var(--jss-line-faq)}
.jss-toc h2{margin:14px 0 6px;font:600 var(--jss-fs-eyebrow)/1.5 var(--jss-font-body);letter-spacing:var(--jss-ls-eyebrow);text-transform:uppercase;color:var(--jss-pine)}
.jss-toc ol{list-style:none;margin:0;padding:0;display:grid;counter-reset:jss-toc}
.jss-toc li{counter-increment:jss-toc;display:grid;grid-template-columns:34px 1fr;align-items:baseline}
.jss-toc li::before{content:counter(jss-toc,decimal-leading-zero) / "";font:500 1.0625rem/1 var(--jss-font-display);color:var(--jss-muted);font-variant-numeric:lining-nums}
.jss-toc a{display:inline-flex;align-items:center;min-height:44px;color:var(--jss-pine);text-decoration:none;font-size:var(--jss-fs-small);line-height:1.45}
.jss-toc a:hover{text-decoration:underline;text-underline-offset:5px}
.jss-sources{font-size:var(--jss-fs-label);color:var(--jss-muted);border-top:1px solid var(--jss-line);padding-top:20px}
.jss-sources :is(h2,h3){font:600 var(--jss-fs-eyebrow)/1.5 var(--jss-font-body);letter-spacing:var(--jss-ls-eyebrow);text-transform:uppercase;color:var(--jss-pine);margin-bottom:var(--jss-s-3)}
.jss-sources ol{margin:0;padding-left:1.25em;display:grid;gap:6px}
.jss-sources li::marker{color:var(--jss-line-strong)}
.jss-sources a{overflow-wrap:anywhere;color:var(--jss-pine);text-decoration-color:var(--jss-line-strong)}
.jss-venue{display:grid;gap:14px;padding:24px}
.jss-venue__top{display:flex;align-items:center;gap:12px}
.jss-venue__top b{font:500 1.5rem/1.15 var(--jss-font-display);color:var(--jss-pine)}
.jss-venue address{font-style:normal;color:var(--jss-muted);font-size:var(--jss-fs-small);line-height:1.7}
.jss-venue h2.jss-label{font-weight:600;color:var(--jss-pine)}
.jss-venue .jss-addr3 span+span{margin-top:8px;padding-top:8px;border-top:1px solid var(--jss-line)}
/* guide hub cards: text cards with the eyebrow rule, one stretched link each */
.jss-gcards{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.jss-gcard{position:relative;display:grid;gap:10px;align-content:start;padding:24px 24px 28px;background:var(--jss-white);border:1px solid var(--jss-line);border-radius:var(--jss-r);transition:background-color var(--jss-t-hover) var(--jss-ease)}
.jss-gcard::before{content:"";width:22px;height:1px;margin-bottom:6px;background:var(--jss-pine)}
.jss-gcard h2,.jss-gcard h3{font:500 var(--jss-fs-h3)/1.15 var(--jss-font-display);letter-spacing:var(--jss-ls-h3)}
.jss-gcard h2 a,.jss-gcard h3 a{color:var(--jss-pine);text-decoration:none}
.jss-gcard h2 a::after,.jss-gcard h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--jss-r)}
.jss-gcard :is(h2,h3) a:focus-visible{outline:0}
.jss-gcard:has(a:focus-visible){outline:3px solid var(--jss-focus);outline-offset:3px}
.jss-gcard p{font-size:var(--jss-fs-small);line-height:1.65;color:var(--jss-muted)}
.jss-gcard__img{position:relative;margin:-24px -24px 8px;aspect-ratio:16/9;overflow:hidden;border-radius:var(--jss-r) var(--jss-r) 0 0;background:var(--jss-mist)} /* v1.1.3: image-led guide cards, like the facility / related rows */
.jss-gcard__img picture{position:absolute;inset:0}
.jss-gcard__img img{width:100%;height:100%;object-fit:cover;filter:brightness(1.055) saturate(.94);transition:transform .45s var(--jss-ease)}
.jss-gcard:has(>.jss-gcard__img)::before{content:none}
@media (hover:hover) and (pointer:fine){.jss-gcard:hover .jss-gcard__img img{transform:scale(1.035)}}
@media (prefers-reduced-motion:reduce){.jss-gcard__img img{transition:none}.jss-gcard:hover .jss-gcard__img img{transform:none}}
@media (hover:hover) and (pointer:fine){.jss-gcard:hover{background:var(--jss-mist-35)}.jss-gcard:hover :is(h2,h3) a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}}
/* legal / privacy: the reading column with quiet section rules */
.jss-legal{max-width:var(--jss-measure)}
.jss-legal h2{font-size:clamp(1.625rem,1.4rem + .9vw,2.125rem);margin-top:2em;padding-top:1.1em;border-top:1px solid var(--jss-line)}
.jss-legal>h2:first-child,.jss-legal__meta+h2,.jss-legal>span:first-child+h2{margin-top:0;padding-top:0;border-top:0}
.jss-legal__meta{font-size:var(--jss-fs-label);color:var(--jss-muted)}
.jss-legal__meta+*{margin-top:clamp(24px,3vw,36px)}
.jss-legal dl{display:grid;gap:4px 16px}
.jss-legal dt{font-weight:600;color:var(--jss-pine)}
.jss-legal dd{margin:0 0 10px}
@media (min-width:640px){.jss-gcards{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){
  .jss-article{grid-template-columns:minmax(0,var(--jss-measure)) 320px;justify-content:center;column-gap:clamp(48px,6vw,96px);align-items:start} /* v1.1.3: centred pair (was space-between): the 544 px column sat hard left with a 290 px gap before the card and ~60% of the row empty once the card ended */
  .jss-article__aside{position:sticky;top:24px;align-self:start;display:grid;gap:20px}
  .jss-gcards{grid-template-columns:repeat(3,1fr)}
  .jss-gcards--n2,.jss-gcards--n4{grid-template-columns:repeat(2,1fr)} /* the grid follows the card count: 2 cards = 2 columns, never an empty third */
}
@media (min-width:640px){.jss-gcards--n1{grid-template-columns:minmax(0,36rem)}}

/* ===== trust line / character / who-for / promise / payment ===== */
.jss-trust{background:var(--jss-cloud)}
.jss-trust ul{list-style:none;margin:0;padding:20px 0;display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;font-size:var(--jss-fs-label);color:var(--jss-pine);font-weight:500}
.jss-trust li{display:flex;align-items:center;gap:10px;line-height:1.4}
.jss-character{font:italic 400 clamp(1.5rem,1.3rem + .8vw,2rem)/1.3 var(--jss-font-display);color:var(--jss-pine);max-width:var(--jss-measure-display);text-wrap:pretty}
:lang(th) .jss-character{font-style:normal;font-weight:500}
.jss-whofor{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.jss-promise{display:grid;gap:12px;padding:20px 22px}
.jss-promise h3{font:500 var(--jss-fs-h3)/1.15 var(--jss-font-display)}
.jss-checks{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:var(--jss-fs-small)}
.jss-checks li{display:flex;gap:10px;align-items:flex-start;color:var(--jss-pine);line-height:1.5}
.jss-checks .ico{width:20px;height:20px;margin-top:1px}
.jss-pay{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;font-size:var(--jss-fs-small);color:var(--jss-pine)}
.jss-pay li{display:flex;align-items:center;gap:8px}

/* ===== your day here (thin vertical timeline on phones, 2 columns on desktop) ===== */
.jss-day__grid{display:grid;gap:28px}
.jss-day__text,.jss-gym__text{display:contents}
.jss-day__text .jss-sec__head,.jss-gym__text .jss-sec__head{margin-bottom:0}
.jss-day__text .jss-sec__head{order:1}.jss-day__photo{order:2}.jss-steps{order:3}.jss-day__prose{order:4}.jss-cue{order:5}
.jss-gym__text .jss-sec__head{order:1}.jss-gym__photo{order:2}.jss-spec{order:3}.jss-notes{order:4}.jss-gym__more{order:5}
.jss-day__photo{aspect-ratio:4/3}
.jss-steps{list-style:none;margin:0;padding:0;display:grid;counter-reset:jss-s}
.jss-steps li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:16px;padding-bottom:20px}
.jss-steps li::before{counter-increment:jss-s;content:counter(jss-s) / "";width:40px;height:40px;border-radius:50%;background:var(--jss-mist-35);color:var(--jss-pine);display:grid;place-items:center;font:500 1.375rem/1 var(--jss-font-display);box-shadow:inset 0 0 0 1px var(--jss-line);position:relative;z-index:1}
.jss-steps li:not(:last-child)::after{content:"";position:absolute;left:19.5px;top:44px;bottom:2px;width:1px;background:var(--jss-line)}
.jss-steps strong{display:block;font:500 1.0625rem/1.3 var(--jss-font-body);color:var(--jss-pine);padding-top:8px}
.jss-steps span{display:block;color:var(--jss-muted);font-size:var(--jss-fs-small);line-height:1.6;margin-top:2px}
.jss-cue{display:flex;gap:12px;align-items:flex-start;background:var(--jss-white);border:1px solid var(--jss-line);border-radius:var(--jss-r-btn);padding:14px 16px;font-size:var(--jss-fs-small);color:var(--jss-pine);line-height:1.5}

/* ===== prices: day-pass strip (shared with the home, critical.css) + membership table + the ask row ===== */
.jss-sec--prices .jss-passes__note{margin-top:10px}
.jss-prices__grid{display:grid;gap:20px;align-items:start;margin-top:clamp(24px,3vw,40px)}
.jss-prices__grid:first-child{margin-top:0}
.jss-prices__grid>*{min-width:0}
.jss-pboard{overflow-x:auto} /* safety net: a wide board scrolls inside its card, never the page */
.jss-ptable{width:100%;border-collapse:separate;border-spacing:0}
.jss-ptable caption{text-align:left}
.jss-ptable th,.jss-ptable td{padding:15px 16px;text-align:right;border-bottom:1px solid var(--jss-line);white-space:nowrap}
.jss-ptable thead th{font:500 var(--jss-fs-label)/1.2 var(--jss-font-body);color:var(--jss-muted);padding-block:16px 12px}
.jss-ptable th[scope=row]{text-align:left;color:var(--jss-pine);font:500 1.0625rem/1.3 var(--jss-font-body)}
.jss-ptable thead th:first-child{text-align:left}
.jss-ptable tbody tr:last-child>*{border-bottom:0}
.jss-ptable td{color:var(--jss-pine);font:500 1.375rem/1.1 var(--jss-font-display);font-variant-numeric:lining-nums tabular-nums} /* a column of prices: lining tabular figures align */
:root:lang(th) .jss-ptable td{font-size:1.125rem}
.jss-ptable .na{color:var(--jss-muted);font:400 var(--jss-fs-label)/1.3 var(--jss-font-body)}
.jss-pnote{font-size:var(--jss-fs-label);color:var(--jss-muted);padding:14px 18px 16px;border-top:1px solid var(--jss-line);line-height:1.5}
.jss-ask{display:grid;gap:18px;padding:22px 24px;background:var(--jss-white);border:1px solid var(--jss-line);border-radius:var(--jss-r)}
.jss-ask__text{display:grid;gap:8px}
.jss-ask h3,.jss-ask h2{font:500 var(--jss-fs-h3)/1.15 var(--jss-font-display);letter-spacing:var(--jss-ls-h3)}
.jss-ask p{display:flex;align-items:flex-start;gap:8px;font-size:var(--jss-fs-small);line-height:1.5;color:var(--jss-muted)}
.jss-ask p .ico{width:16px;height:16px;margin-top:2px}
.jss-ask ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:var(--jss-fs-small)}
.jss-ask li{display:flex;gap:8px;align-items:center;color:var(--jss-pine);line-height:1.5}
.jss-ask li .ico{width:18px;height:18px}
.jss-ask .jss-btn{justify-self:start}
.jss-pending{padding:24px;display:grid;gap:14px;min-height:220px;align-content:start}
.jss-pending h3,.jss-pending h2{font:500 var(--jss-fs-h3)/1.15 var(--jss-font-display)}
.jss-pending p{max-width:var(--jss-measure)}
.jss-pending .jss-btn{justify-self:start}
.jss-passtypes{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.jss-passtypes li{padding:12px 14px;background:var(--jss-ivory);border:1px solid var(--jss-line);border-radius:var(--jss-r-btn);font-size:var(--jss-fs-small);color:var(--jss-pine);line-height:1.5}
.jss-passtypes b{display:block;font-weight:600}
.jss-includes{list-style:none;margin:0;padding:0;display:grid;gap:10px 24px;font-size:var(--jss-fs-small)}
.jss-includes li{display:flex;gap:10px;align-items:flex-start;color:var(--jss-pine);line-height:1.5}
.jss-includes .ico{width:20px;height:20px;margin-top:1px}
.jss-includes .is-no{color:var(--jss-muted)}
.jss-extras{list-style:none;margin:0;padding:0}
.jss-extras li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--jss-line);color:var(--jss-pine)}
.jss-extras li:last-child{border-bottom:0}
.jss-extras b{font-weight:600;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.jss-happy{padding:22px 24px;display:grid;gap:10px;background:var(--jss-mist-35);border:1px solid var(--jss-line);border-radius:var(--jss-r)}
.jss-happy__time{font:500 1.75rem/1.1 var(--jss-font-display);color:var(--jss-pine)}
.jss-today__pending{display:grid;gap:12px;font-size:var(--jss-fs-small);color:var(--jss-pine);line-height:1.5}
.jss-today__pending .jss-btn{justify-self:start;min-height:44px;padding:0 16px}
@media (max-width:1023px){ /* the board stacks into one card per pass (no sideways scroll, no tablist) */
  .jss-ptable,.jss-ptable tbody,.jss-ptable tr,.jss-ptable th,.jss-ptable td{display:block}
  .jss-ptable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .jss-ptable tr{padding:6px 0 12px;border-bottom:1px solid var(--jss-line)}
  .jss-ptable tbody tr:last-child{border-bottom:0}
  .jss-ptable th[scope=row]{border:0;padding:18px 18px 6px;font:500 var(--jss-fs-h3)/1.15 var(--jss-font-display)}
  .jss-ptable td{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border:0;padding:8px 18px;white-space:normal}
  .jss-ptable td+td{border-top:1px dashed var(--jss-line)}
  .jss-ptable td::before{content:attr(data-label);color:var(--jss-muted);font:400 var(--jss-fs-small)/1.4 var(--jss-font-body)}
  .jss-ptable td.na{display:none}
}
@media (min-width:640px){
  .jss-includes{grid-template-columns:1fr 1fr}
  .jss-passtypes{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:700px){
  .jss-ask{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:32px;padding:24px 28px}
  .jss-ask .jss-btn{justify-self:end}
}
@media (min-width:1024px){
  .jss-ptable th,.jss-ptable td{padding:17px 20px}
  :root:lang(th) :is(.jss-ptable th,.jss-ptable td){padding-inline:12px}
}

/* ===== facility cards (the home "Good things" pattern) for related links, facility tiles and also-on-site =====
   ul.jss-fac.jss-fac--n{count}: 1 to 3 cards read as photo rows on phones, then columns; 4 = the home grid. */
.jss-fac__body{min-width:0}
.jss-fac__card--text{height:100%;padding:22px 22px 24px;background:var(--jss-white);border:1px solid var(--jss-line);border-radius:var(--jss-r)}
.jss-fac__card--text .jss-fac__title{margin-top:0}
.jss-fac__card .src{display:block;margin-top:6px;font-size:var(--jss-fs-meta);color:var(--jss-muted)}
.jss-fac .jss-temp{font:500 1.25rem/1.2 var(--jss-font-display);color:var(--jss-pine);margin-bottom:6px}
.jss-sec--sand .jss-fac__num{background:var(--jss-white)}
@media (max-width:699px){
  .jss-fac.jss-fac--n1,.jss-fac.jss-fac--n2,.jss-fac.jss-fac--n3{grid-template-columns:minmax(0,1fr);row-gap:18px}
  :is(.jss-fac--n1,.jss-fac--n2,.jss-fac--n3) .jss-fac__card:not(.jss-fac__card--text){display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);column-gap:18px;align-items:center}
  :is(.jss-fac--n1,.jss-fac--n2,.jss-fac--n3) .jss-fac__img{aspect-ratio:4/3}
  :is(.jss-fac--n1,.jss-fac--n2,.jss-fac--n3) .jss-fac__card:not(.jss-fac__card--text) .jss-fac__title{margin-top:0}
  :is(.jss-fac--n1,.jss-fac--n2,.jss-fac--n3) .jss-fac__card p{font-size:.8125rem}
  :lang(th) :is(.jss-fac--n1,.jss-fac--n2,.jss-fac--n3) .jss-fac__card p{font-size:.9375rem}
}
@media (min-width:700px){
  .jss-fac.jss-fac--n1{grid-template-columns:minmax(0,26rem)}
  .jss-fac.jss-fac--n2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jss-fac.jss-fac--n3,.jss-fac.jss-fac--n5,.jss-fac.jss-fac--n6{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:960px){
  :is(.jss-fac--n1,.jss-fac--n2,.jss-fac--n3,.jss-fac--n5,.jss-fac--n6) .jss-fac__img{aspect-ratio:4/3}
  .jss-fac.jss-fac--n3,.jss-fac.jss-fac--n5,.jss-fac.jss-fac--n6{gap:32px 24px}
}

/* ===== facility blocks: the image-led split (rounded photo, asymmetric corner mirrored on flipped blocks) ===== */
.jss-fblock{display:grid;gap:28px;align-items:center}
.jss-fblock+.jss-fblock{margin-top:clamp(48px,6vw,88px)}
.jss-fblock+.jss-fblock:not(:has(h2,h3)){margin-top:var(--jss-s-5)}
.jss-fblock__media{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;isolation:isolate;border-radius:var(--jss-r-img) var(--jss-r-img) 70px var(--jss-r-img);background:var(--jss-mist)}
.jss-fblock--flip .jss-fblock__media{border-radius:var(--jss-r-img) var(--jss-r-img) var(--jss-r-img) 70px}
.jss-fblock__media picture{position:absolute;inset:0}
.jss-fblock__media img{width:100%;height:100%;object-fit:cover;filter:brightness(1.055) saturate(.94)}
.jss-fblock__body{display:grid;gap:18px;align-content:start;min-width:0}
.jss-fblock__body>p{max-width:var(--jss-measure);color:var(--jss-muted)}
.jss-fblock__body .jss-eyebrow{margin:0}
.jss-fblock__body.jss-prose>*+*{margin-top:0}
.jss-fblock__body a{color:var(--jss-pine);text-decoration-color:var(--jss-line-strong)}
.jss-specs{display:grid;margin:4px 0 0;border-top:1px solid var(--jss-line)}
.jss-specs>div{display:grid;grid-template-columns:minmax(120px,40%) 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--jss-line);font-size:var(--jss-fs-small)}
.jss-specs dt{color:var(--jss-muted);font-weight:500}
.jss-specs dd{color:var(--jss-pine);font-weight:500}
@media (min-width:768px){
  .jss-fblock{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(40px,6vw,96px)}
  .jss-fblock--flip{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
  .jss-fblock--flip .jss-fblock__media{order:2}
  .jss-fblock__media{border-radius:var(--jss-r) var(--jss-r) var(--jss-r-stay) var(--jss-r)}
  .jss-fblock--flip .jss-fblock__media{border-radius:var(--jss-r) var(--jss-r) var(--jss-r) var(--jss-r-stay)}
}

/* ===== gym block ===== */
.jss-gym__grid{display:grid;gap:24px}
.jss-gym__photo{aspect-ratio:16/10;border-radius:var(--jss-r-img) var(--jss-r-img) 70px var(--jss-r-img)}
.jss-spec{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;font-size:var(--jss-fs-small);color:var(--jss-pine)}
.jss-spec li{display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.jss-spec li .ico{width:18px;height:18px;margin-top:2px}
@media (min-width:768px){.jss-gym__photo{border-radius:var(--jss-r) var(--jss-r) var(--jss-r-stay) var(--jss-r)}}

/* ===== house rules ("Before you go in"): numbered hairline rows beside the changing-room photo ===== */
.jss-before{display:grid;gap:32px}
.jss-change{margin:0}
.jss-change .jss-photo{aspect-ratio:4/3;border-radius:var(--jss-r-img) var(--jss-r-img) var(--jss-r-img) 70px}
.jss-change figcaption{margin-top:14px;font-size:var(--jss-fs-label);color:var(--jss-muted);line-height:1.5;max-width:var(--jss-measure-sub)}
.jss-rows{list-style:none;margin:0;padding:0;display:grid;counter-reset:jss-r;align-content:start;border-top:1px solid var(--jss-line-faq)}
.jss-rows li{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--jss-line-faq)}
.jss-rows li::before{counter-increment:jss-r;content:counter(jss-r,decimal-leading-zero) / "";font:500 1.5rem/1 var(--jss-font-display);color:var(--jss-pine);font-variant-numeric:lining-nums}
.jss-rows h3,.jss-rows h2{font:500 var(--jss-fs-h3)/1.15 var(--jss-font-display);letter-spacing:var(--jss-ls-h3)}
.jss-rows li:only-child{grid-template-columns:1fr}
.jss-rows li:only-child::before{content:none}
.jss-rows p{font-size:var(--jss-fs-small);color:var(--jss-muted);margin-top:6px;line-height:1.7;max-width:var(--jss-measure)}
@media (min-width:768px){.jss-change .jss-photo{border-radius:var(--jss-r) var(--jss-r) var(--jss-r) var(--jss-r-stay)}}
@media (min-width:1024px){
  .jss-before{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(48px,6vw,96px);align-items:start}
  .jss-before--single{align-items:center}
  .jss-gym__grid{grid-template-columns:5fr 7fr;column-gap:64px;align-items:center}
  .jss-gym__text{display:grid;gap:24px;grid-column:1;grid-row:1}
  .jss-gym__photo{grid-column:2;grid-row:1}
  .jss-gym__grid.is-solo{grid-template-columns:minmax(0,46rem)}
}

/* ===== menu (restaurant): pill tabs, readable name / price rows at the reading measure, kitchen + menu-checked line ===== */
.jss-tabs__list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.jss-tabs__tab{min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid var(--jss-line-faq);background:transparent;color:var(--jss-pine);font:500 max(.875rem,var(--jss-fs-label))/1.2 var(--jss-font-body);cursor:pointer;transition:background-color var(--jss-t-hover) var(--jss-ease),border-color var(--jss-t-hover) var(--jss-ease)}
.jss-tabs__tab:hover{border-color:var(--jss-pine)}
.jss-tabs__tab[aria-selected=true]{background:var(--jss-pine);border-color:var(--jss-pine);color:var(--jss-white)}
.jss-tabs__panel+.jss-tabs__panel{margin-top:32px}
.jss-js .jss-tabs.is-ready .jss-tabs__panel+.jss-tabs__panel{margin-top:0}
.jss-tabs__h{font:500 var(--jss-fs-h3)/1.15 var(--jss-font-display);margin-bottom:8px}
.jss-tabs.is-ready .jss-tabs__h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.jss-tabs__panel:focus-visible{outline-offset:6px;border-radius:var(--jss-r-btn)}
.jss-mlist{list-style:none;margin:0;padding:0;max-width:40rem;border-top:1px solid var(--jss-line)}
.jss-mlist li{display:grid;grid-template-columns:1fr auto;column-gap:24px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--jss-line)}
.jss-mlist__name{font:500 1.0625rem/1.4 var(--jss-font-body);color:var(--jss-pine)}
.jss-mlist__price{font:500 1.0625rem/1.4 var(--jss-font-body);color:var(--jss-pine);white-space:nowrap;text-align:right;font-variant-numeric:lining-nums tabular-nums}
.jss-mlist__desc{grid-column:1 / -1;margin-top:4px;max-width:var(--jss-measure);font-size:var(--jss-fs-small);line-height:1.6;color:var(--jss-muted)}
@media (max-width:699px){ /* v1.1.4: menu categories as one swipeable row */
  .jss-tabs__list{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;margin-inline:calc(var(--jss-gutter)*-1);padding-inline:var(--jss-gutter);scroll-padding-inline:var(--jss-gutter);-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--jss-gutter),#000 calc(100% - var(--jss-gutter)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--jss-gutter),#000 calc(100% - var(--jss-gutter)),transparent)}
  .jss-tabs__list::-webkit-scrollbar{display:none}
  .jss-tabs__tab{flex:0 0 auto;white-space:nowrap;scroll-snap-align:start}
}
.jss-tabs__meta{display:flex;flex-wrap:wrap;gap:2px 8px;margin-top:20px;max-width:40rem;font-size:var(--jss-fs-label);line-height:1.6;color:var(--jss-muted)}
.jss-food__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.jss-food__grid>*,.jss-tabs{min-width:0} /* v1.1.4: the swipeable tab row must not widen its grid column */
.jss-food__side .jss-photo{border-radius:var(--jss-r-img)}
@media (min-width:768px){
  .jss-food__grid{grid-template-columns:minmax(0,1fr) minmax(220px,300px);column-gap:clamp(40px,6vw,96px);align-items:start}
  .jss-food__side{position:sticky;top:24px}
}

/* ===== contact: map placeholder panel (no embed until the code exists; consent-gated when it does), NAP, hours table ===== */
.jss-visit__grid{display:grid;gap:24px;align-items:stretch}
.jss-map__frame{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--jss-r-img) var(--jss-r-img) var(--jss-r-img) 70px;background:var(--jss-mist)}
.jss-map__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.jss-map__frame:not([data-src]){aspect-ratio:auto;min-height:220px}
.jss-map__ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:18px;padding:24px;text-align:center;color:var(--jss-pine);font-size:var(--jss-fs-small);line-height:1.5}
.jss-map__ph>.ico{box-sizing:content-box;width:22px;height:22px;padding:14px;border:1px solid #8FA3B1;border-radius:50%}
.jss-map__ph .jss-btn--ghost{background:var(--jss-ivory);border-color:var(--jss-ivory)}
.jss-map__ph .jss-btn--ghost:hover{background:var(--jss-white);border-color:var(--jss-white)}
.jss-map__frame.has-photo{aspect-ratio:4/3;min-height:0} /* v1.1.3: photo backdrop behind the click-to-open facade */
.jss-map__bg{position:absolute;inset:0}
.jss-map__bg picture{position:absolute;inset:0}
.jss-map__bg img{width:100%;height:100%;object-fit:cover;filter:brightness(1.04) saturate(.94)}
.jss-map__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,40,38,0) 35%,rgba(20,40,38,.42) 100%)}
.has-photo .jss-map__ph{place-content:end center;padding-bottom:clamp(20px,4vw,32px)}
.has-photo .jss-map__ph>.ico{background:var(--jss-ivory);border-color:var(--jss-ivory)}
.jss-visit__head{margin-bottom:var(--jss-gap-comp)}
.jss-nap{display:grid;gap:16px;align-content:center}
.jss-nap address{font-style:normal;color:var(--jss-pine);line-height:1.75}
.jss-nap address b{font-weight:600}
.jss-nap__tel{display:inline-flex;align-items:center;min-height:44px}
.jss-nap__line{font-size:var(--jss-fs-small);color:var(--jss-muted)}
.jss-nap .jss-ctas{margin-top:4px}
.jss-addr3 span{display:block}
.jss-hours-card{max-width:34rem}
.jss-hours-card+.jss-checks{margin-top:var(--jss-s-4)}
.jss-hours{width:100%;border-collapse:collapse;font-size:var(--jss-fs-small)}
.jss-hours th,.jss-hours td{padding:13px 18px;border-bottom:1px solid var(--jss-line);text-align:left}
.jss-hours th{color:var(--jss-pine);font-weight:500}
.jss-hours td{color:var(--jss-pine);text-align:right;font-variant-numeric:lining-nums tabular-nums}
.jss-hours tr:last-child>*{border-bottom:0}
.jss-hours .is-today>*{background:var(--jss-mist-35)}
.jss-hours .is-today th{font-weight:600}
.jss-hours caption{text-align:left;padding:16px 18px 6px;font:500 1.25rem/1.2 var(--jss-font-display);color:var(--jss-pine)}
@media (min-width:1024px){
  .jss-visit__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,5vw,80px)}
  .jss-map__frame{aspect-ratio:16/9;border-radius:var(--jss-r) var(--jss-r) var(--jss-r) var(--jss-r-stay)}
}

/* ===== gallery + native dialog lightbox ===== */
.jss-gallery{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.jss-gallery__item{display:grid;gap:8px;align-content:start}
@media (max-width:1023px){.jss-gallery>li:first-child:nth-last-child(2n+1){grid-column:1/-1}.jss-gallery>li:first-child:nth-last-child(2n+1) .jss-gallery__link{aspect-ratio:16/10}} /* odd count on 2 columns: the first photo spans the row, so none sits alone at the end */
.jss-gallery__link{position:relative;display:block;border-radius:var(--jss-r-img);overflow:hidden;aspect-ratio:4/3;background:var(--jss-mist);cursor:zoom-in}
.jss-gallery__item.is-square .jss-gallery__link img{object-position:center 40%}
.jss-gallery__link picture{position:absolute;inset:0}
.jss-gallery__link img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--jss-ease)}
.jss-gallery figcaption{font-size:var(--jss-fs-meta);color:var(--jss-muted);line-height:1.5}
@media (hover:hover) and (pointer:fine){.jss-gallery__link:hover img{transform:scale(1.035)}}
.jss-lightbox{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0;border:0;background:rgb(25 52 47 / .95);color:var(--jss-ivory)}
.jss-lightbox::backdrop{background:rgb(25 52 47 / .6)}
.jss-lightbox[open]{display:grid;grid-template-rows:auto 1fr auto}
.jss-lightbox__bar{display:flex;justify-content:flex-end;gap:8px;padding:12px}
.jss-lightbox figure{display:grid;place-items:center;min-height:0;padding:0 12px}
.jss-lightbox img{max-width:100%;max-height:calc(100vh - 160px);max-height:calc(100dvh - 160px);width:auto;height:auto;border-radius:var(--jss-r);object-fit:contain}
.jss-lightbox figcaption{padding:12px 16px 20px;text-align:center;font-size:var(--jss-fs-small);color:var(--jss-ivory);line-height:1.5}
.jss-lightbox__btn{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--jss-line-pine);background:var(--jss-ivory);color:var(--jss-pine);cursor:pointer;padding:0}
.jss-lightbox__btn .ico{width:22px;height:22px}
.jss-lightbox__nav{display:flex;justify-content:center;gap:12px;padding-bottom:16px}
.jss-lightbox,.jss-on-dark{--jss-focus:var(--jss-ivory)}
.jss-on-dark a:not(.jss-btn){color:var(--jss-ivory)}

/* ===== ask-before-you-come mini form (messenger-first, no email path) ===== */
.jss-form{display:grid;gap:16px;max-width:560px}
.jss-field{display:grid;gap:6px}
.jss-field label,.jss-field legend{font:600 var(--jss-fs-small)/1.3 var(--jss-font-body);color:var(--jss-pine)}
.jss-field small{font-size:var(--jss-fs-label);color:var(--jss-muted)}
.jss-input,.jss-select,.jss-textarea{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--jss-line-strong);border-radius:var(--jss-r-btn);background:var(--jss-white);color:var(--jss-pine);font-size:var(--jss-fs-body);line-height:1.4}
.jss-textarea{min-height:120px;resize:vertical}
.jss-select{appearance:none;padding-right:44px;background:var(--jss-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2324433E' stroke-width='1.65' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat}
.jss-input:hover,.jss-select:hover,.jss-textarea:hover{border-color:var(--jss-pine)}
.jss-input:focus-visible,.jss-select:focus-visible,.jss-textarea:focus-visible{outline:3px solid var(--jss-focus);outline-offset:2px;border-color:var(--jss-pine)}
.jss-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.jss-form .jss-btn{justify-self:start}
.jss-form .jss-btn[aria-busy=true]{opacity:.7;cursor:progress}
.jss-form__msg{font-size:var(--jss-fs-small);color:var(--jss-pine);line-height:1.5;min-height:1.5em}
.jss-form__msg.is-ok{padding:10px 14px;background:var(--jss-white);border:1px solid var(--jss-line);border-left:3px solid var(--jss-ok);border-radius:var(--jss-r-btn)}
.jss-form__msg.is-err{padding:10px 14px;background:var(--jss-white);border:1px solid var(--jss-line);border-left:3px solid var(--jss-pine);border-radius:var(--jss-r-btn)}
.jss-form__note{font-size:var(--jss-fs-label);color:var(--jss-muted)}

/* ===== consent banner ===== */
.jss-consent{position:fixed;left:12px;right:12px;bottom:calc(var(--jss-bar-h) + 12px + env(safe-area-inset-bottom));z-index:70;max-width:560px;margin-inline:auto;background:var(--jss-white);border:1px solid var(--jss-line);border-radius:var(--jss-r);box-shadow:var(--jss-shadow-2);padding:16px;display:grid;gap:12px;font-size:var(--jss-fs-small);color:var(--jss-pine);line-height:1.5}
.jss-consent__btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.jss-consent .jss-btn{min-height:48px;padding:0 12px}
.jss-consent p{margin:0}
.jss-consent a{color:var(--jss-pine);font-weight:600}

/* ===== header dropdown (desktop) ===== */
@media (min-width:1024px){
  .jss-nav__drop{position:absolute;top:100%;left:-20px;min-width:280px;padding:8px;background:var(--jss-white);border:1px solid var(--jss-line);border-radius:var(--jss-r);box-shadow:var(--jss-shadow-2);z-index:55}
  .jss-nav__item.is-open>.jss-nav__drop,html:not(.jss-js) .jss-nav__item:focus-within>.jss-nav__drop{display:grid}
  .jss-nav__toggle .ico{transition:transform var(--jss-t-hover) var(--jss-ease)}
  .jss-nav__toggle[aria-expanded=true] .ico{transform:rotate(180deg)}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){.jss-nav__item.has-dropdown:hover>.jss-nav__drop{display:grid}}
.jss-nav__drop a{display:grid;gap:2px;min-height:44px;padding:10px 12px;border-radius:var(--jss-r-btn);color:var(--jss-pine);text-decoration:none;font:500 .875rem/1.3 var(--jss-font-body);white-space:normal}
.jss-nav__drop a:hover{background:var(--jss-cloud);color:var(--jss-pine)}
.jss-nav__drop a[aria-current]{background:var(--jss-mist-35)}
.jss-nav__fact{font:400 var(--jss-fs-meta)/1.4 var(--jss-font-body);color:var(--jss-muted)}

/* ===== mobile menu panel (native <dialog>, sibling of the header; opens under a header-like top row) ===== */
.jss-sheet{position:fixed;inset:0 0 auto 0;margin:0;width:100%;max-width:100%;height:auto;max-height:100vh;max-height:100dvh;border:0;padding:0;background:var(--jss-ivory);color:var(--jss-pine);overflow-y:auto;overscroll-behavior:contain;box-shadow:var(--jss-shadow-2)}
.jss-sheet::backdrop{background:rgb(36 67 62 / .28)}
.jss-sheet__top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--jss-head-h);border-bottom:1px solid var(--jss-line-faq)}
.jss-sheet__in{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.jss-sheet__nav ul{list-style:none;margin:0;padding:0;display:grid}
.jss-sheet__nav a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--jss-line);color:var(--jss-pine);text-decoration:none;font:400 1rem/1.4 var(--jss-font-body)}
.jss-sheet__nav a[aria-current]{text-decoration:underline;text-underline-offset:6px}
.jss-sheet__group{margin:0;padding-top:18px;padding-bottom:4px;font:600 var(--jss-fs-eyebrow)/1.5 var(--jss-font-body);letter-spacing:var(--jss-ls-eyebrow);text-transform:uppercase;color:var(--jss-muted)}
.jss-sheet__group+ul a{padding-left:16px}
.jss-sheet__langs{display:flex;align-items:center;gap:24px;min-height:44px;margin-top:14px;font:500 .875rem/1 var(--jss-font-body)}
.jss-sheet__langs>span{margin-right:auto;font-size:.75rem;color:var(--jss-muted)}
.jss-sheet__langs a{display:inline-flex;align-items:center;justify-content:center;min-width:30px;min-height:44px;color:var(--jss-pine);text-decoration:none}
.jss-sheet__langs a[aria-current]{text-decoration:underline;text-underline-offset:6px}
.jss-sheet__meta{margin-top:14px;font-size:var(--jss-fs-label);color:var(--jss-muted);line-height:1.6}
.jss-sheet .jss-ctas{margin-top:18px}
.jss-sheet .jss-btn{min-height:48px}
.jss-close{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--jss-line-faq);border-radius:50%;background:transparent;color:var(--jss-pine);cursor:pointer;flex:none}
.jss-close .ico{width:20px;height:20px}
:lang(th) .jss-sheet__group{letter-spacing:0;text-transform:none}
.jss-locked,.jss-locked body{overflow:hidden}

/* ===== footer (stone) ===== */
.jss-foot{background:var(--jss-stone);color:var(--jss-pine);font-size:.75rem}
.jss-foot__top{display:grid;grid-template-columns:1fr 1fr;gap:32px 20px;padding-block:36px}
.jss-foot__brand{grid-column:1/-1;display:grid;gap:16px;align-content:start}
.jss-foot__row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.jss-foot .jss-brand{gap:8px}
.jss-foot .jss-roundel{width:36px;height:36px}
.jss-foot .jss-brand__name{font-size:1.375rem}
.jss-foot .jss-brand__sub{margin-top:5px;font-size:.4375rem;letter-spacing:.23em}
.jss-foot__tag{max-width:160px;font-size:.625rem;line-height:1.8;color:var(--jss-muted-deep);text-align:right}
.jss-foot address{font-style:normal;font-size:.75rem;line-height:1.8;color:var(--jss-muted-deep)}
.jss-foot address a{display:inline-block;padding-block:14px;margin-block:-14px;color:var(--jss-pine)} /* 44 px target without changing the line rhythm */
.jss-foot h2{margin:0 0 12px;font:600 .6875rem/1.5 var(--jss-font-body);letter-spacing:.025em;color:var(--jss-pine)}
.jss-foot ul{list-style:none;margin:0;padding:0}
.jss-foot__col a{display:block;min-height:44px;padding-block:max(0px,calc((44px - 1.4em) / 2));color:var(--jss-pine);text-decoration:none;font-size:.75rem;line-height:1.4}
.jss-foot__col a .ico{display:inline-block;width:12px;height:12px;margin-left:10px;vertical-align:-.1em} /* inline, so a label that wraps (TH "646 รีวิวบน Google") keeps its arrow beside the last word */
.jss-foot__col a:hover{text-decoration:underline;text-underline-offset:4px}
.jss-foot .jss-gbp{min-height:44px;font-size:.75rem;color:var(--jss-pine)}
.jss-foot .jss-gbp u{text-decoration:none}
.jss-foot .jss-gbp small{display:none}
.jss-foot__base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 20px;padding-block:16px;border-top:1px solid #C3B9B0;font-size:.625rem;line-height:1.5;color:var(--jss-muted-deep)}
.jss-foot__base a,.jss-foot__base .jss-linkbtn{display:inline-flex;align-items:center;min-height:44px;color:var(--jss-muted-deep);text-decoration:none}
.jss-foot__base a:hover,.jss-foot__base .jss-linkbtn:hover{color:var(--jss-pine);text-decoration:underline}
.jss-foot__base>span:last-child{flex:1 0 100%}
.jss-foot__langs{display:flex;flex-wrap:wrap;column-gap:14px}
.jss-foot__langs a{min-width:24px;justify-content:center}
.jss-linkbtn{background:none;border:0;padding:0;color:var(--jss-pine);cursor:pointer;font:inherit}
:lang(th) .jss-foot{font-size:.9375rem}
:lang(th) :is(.jss-foot__col a,.jss-foot address,.jss-foot__base,.jss-foot__tag,.jss-foot h2){font-size:.9375rem}
@media (max-width:699px){.jss-foot{padding-bottom:calc(var(--jss-bar-h) + env(safe-area-inset-bottom))}}
@media (hover:hover) and (pointer:fine){.jss-foot__col a{min-height:30px;padding-block:max(0px,calc((30px - 1.4em) / 2))}}

/* ===== 404: a calm branded page (eyebrow + Cormorant H1, one line, the roundel on a mist circle, recovery rows, CTAs) ===== */
.jss-404{padding-block:clamp(32px,5vw,72px) var(--jss-section)}
.jss-404__grid{display:grid;gap:36px}
.jss-404__copy{min-width:0}
.jss-404 .jss-eyebrow{margin-bottom:14px}
.jss-404__h1{font:var(--jss-w-display) var(--jss-fs-h1)/var(--jss-lh-h1) var(--jss-font-display);letter-spacing:var(--jss-ls-h1)}
.jss-404__copy>p:not(.jss-eyebrow){margin-top:18px;max-width:30em;font-size:var(--jss-fs-body);line-height:1.75;color:var(--jss-muted)}
.jss-404__ctas{display:flex;flex-wrap:wrap;align-items:center;column-gap:22px;row-gap:6px;margin-top:28px}
.jss-404__art{display:none}
.jss-404__links{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--jss-line-faq)}
.jss-404__links li{border-bottom:1px solid var(--jss-line-faq)}
.jss-404__links a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:12px 0;color:var(--jss-pine);text-decoration:none;font:500 1rem/1.4 var(--jss-font-body)}
.jss-404__links a:hover{text-decoration:underline;text-underline-offset:5px}
.jss-404__links .ico{width:18px;height:18px}
@media (min-width:700px){
  .jss-404__grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);column-gap:clamp(40px,6vw,96px);align-items:center}
  .jss-404__art{display:grid;place-items:center;justify-self:end;width:min(100%,300px);aspect-ratio:1;border-radius:50%;background:var(--jss-mist)}
  .jss-404__art .jss-roundel{width:96px;height:96px}
  .jss-404__links{grid-column:1/-1;grid-template-columns:1fr 1fr;column-gap:48px;border-top:0}
  .jss-404__links li:nth-child(-n+2){border-top:1px solid var(--jss-line-faq)}
}

/* ===== subtle reveal (figures, photo tiles, cards only; from .4 never 0; no JS = all visible) ===== */
.jss-motion [data-reveal-pending]{opacity:.4;transform:translateY(12px);transition:opacity var(--jss-t-reveal) var(--jss-ease),transform var(--jss-t-reveal) var(--jss-ease)}
.jss-motion [data-reveal-pending].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.jss-motion [data-reveal-pending]{opacity:1;transform:none}} /* reduce switched on mid-visit: photos never stay dimmed */

/* ===== responsive ===== */
@media (max-width:359px){
  .jss-fac__title h3{font-size:1.3125rem}
  .jss-foot__row{display:block}
  .jss-foot__tag{margin-top:16px;max-width:none;text-align:left}
}
@media (min-width:640px){
  .jss-trust ul{grid-template-columns:repeat(3,1fr)}
  .jss-gallery{gap:16px}
}
@media (min-width:700px){
  .jss-shead{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;margin-bottom:40px}
  .jss-shead__p{margin:0;max-width:380px;padding-bottom:4px;font-size:.8125rem;line-height:1.85}
  .jss-shead__p .jss-l{display:block}
  .jss-fac{row-gap:32px;column-gap:20px}
  .jss-fac__img{aspect-ratio:4/3;border-radius:var(--jss-r-img)}
  .jss-fac__num{top:14px;left:14px;padding:6px 9px;font-size:.5625rem;letter-spacing:.155em}
  .jss-fac__title{align-items:center;gap:8px;margin-top:19px}
  .jss-fac__title h3{font-size:1.75rem;letter-spacing:-.018em;line-height:1.15}
  .jss-fac__title .ico{width:18px;height:18px;margin-top:0}
  .jss-fac__card p{margin-top:6px;font-size:.875rem}
  .jss-calm{grid-template-columns:.82fr 1.18fr;column-gap:48px;align-items:start}
  .jss-stay{padding-block:64px}
  .jss-stay__grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px}
  .jss-stay__img{height:460px;border-radius:var(--jss-r) var(--jss-r) var(--jss-r-stay) var(--jss-r)}
  .jss-stay__cap{left:24px;right:24px;bottom:25px;font-size:.5625rem;letter-spacing:.17em}
  .jss-stay__copy .jss-eyebrow{font-size:.625rem;letter-spacing:.155em;margin-bottom:18px}
  .jss-stay__copy .jss-h2f{margin-bottom:24px}
  .jss-stay__copy>p:not(.jss-eyebrow){max-width:370px;margin-bottom:16px;font-size:.875rem;line-height:1.8}
  .jss-stay__food{margin-top:26px;padding-top:23px}
  .jss-stay__dish{width:60px;height:60px}
  .jss-stay__food strong{font-size:.6875rem}
  .jss-stay__food span{font-size:.6875rem}
  .jss-amen__list{gap:24px}
  .jss-amen__list li{justify-content:flex-start;padding-left:20px;gap:16px;line-height:1.75}
  .jss-amen__list li:nth-child(even){border-left:1px solid var(--jss-line)}
  .jss-amen__list .ico{width:26px;height:26px}
  .jss-amen__list li>span>:is(span,strong){display:block}
  .jss-foot__top{grid-template-columns:1.5fr 1fr 1fr;gap:24px;padding-block:52px 44px}
  .jss-foot__brand{grid-column:auto;display:block}
  .jss-foot .jss-brand{gap:12px}
  .jss-foot .jss-roundel{width:48px;height:48px}
  .jss-foot .jss-brand__name{font-size:1.75rem}
  .jss-foot .jss-brand__sub{margin-top:8px;font-size:.5625rem;letter-spacing:.27em}
  .jss-foot__row{display:block}
  .jss-foot__tag{max-width:none;margin-top:18px;font-size:.75rem;text-align:left}
  .jss-foot address{margin-top:10px}
  .jss-foot__top>.jss-foot__col:last-child{grid-column:2/-1}
  .jss-foot__base>span:last-child{flex:0 1 auto}
}
@media (min-width:960px){
  .jss-shead__p{font-size:.9375rem}
  .jss-fac{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .jss-fac__img{aspect-ratio:4/4.5}
  .jss-fac__title h3{font-size:1.5625rem}
  .jss-fac__card p{font-size:.8125rem;line-height:1.7}
  .jss-calm{column-gap:80px}
  .jss-stay__grid{gap:64px}
  .jss-stay__img{height:455px}
  .jss-stay__copy .jss-h2f{font-size:var(--jss-fs-h2-feature)}
  .jss-stay__copy>p:not(.jss-eyebrow){font-size:.9375rem}
  .jss-stay__dish{width:76px;height:76px}
  .jss-stay__food strong{font-size:.75rem}
  .jss-amen{padding-block:38px}
  .jss-amen__list{grid-template-columns:repeat(4,1fr)}
  .jss-amen__list li{justify-content:center;padding-left:0;font-size:.6875rem}
  .jss-amen__list li+li{border-left:1px solid var(--jss-line)}
  .jss-foot__top{grid-template-columns:1.6fr 1.05fr 1.05fr .8fr;gap:28px}
  .jss-foot__top>.jss-foot__col:last-child{grid-column:auto}
}
@media (min-width:1024px){
  .jss-trust ul{display:flex;flex-wrap:wrap;justify-content:flex-start;padding:24px 0;gap:16px 32px}
  .jss-trust li{flex:0 1 auto;text-wrap:balance}
  .jss-day__grid{grid-template-columns:6fr 5fr;column-gap:72px;align-items:start}
  .jss-day__text{display:grid;gap:32px;grid-column:1;grid-row:1;align-content:start}
  .jss-day__photo{grid-column:2;grid-row:1;position:sticky;top:24px}
  .jss-steps{grid-template-columns:1fr 1fr;column-gap:32px}
  .jss-steps li{padding-bottom:24px}
  .jss-steps li::after{display:none}
  .jss-gallery{grid-template-columns:repeat(3,1fr);gap:20px}
  .jss-consent{bottom:24px;left:24px;right:auto;margin:0}
  .jss-lightbox__nav{position:absolute;inset:50% 12px auto;justify-content:space-between;padding:0;transform:translateY(-50%);pointer-events:none}
  .jss-lightbox__nav .jss-lightbox__btn{pointer-events:auto}
}
@media (min-width:1200px){
  .jss-fac{gap:24px}
  .jss-fac__title h3{font-size:1.75rem}
  .jss-stay__grid{gap:100px}
  .jss-foot__top{gap:50px}
}

/* ===== print: everything visible, no floating chrome ===== */
@media print{
  body{background:var(--jss-white)}
  .jss-bar,.jss-consent,.jss-menu,.jss-sheet,.jss-head__act,.jss-lightbox{display:none!important}
  [data-reveal-pending]{opacity:1!important;transform:none!important}
  .jss-vband{background:none;color:var(--jss-pine)}
}

/* ===== v1.1.4 type & spacing layer (reasons in critical.css; numbers in docs/build/typography/v114-desktop-pass.md) ===== */
/* inner H2 46 px (was 52): 8-12 sections a page read as chapters at 52 beside 16 px text; article / legal H2 one step, 36 */
:root{--jss-fs-h2-inner:clamp(2.25rem,1.6rem + 1.75vw,2.875rem)}
:root:lang(ru){--jss-fs-h2-inner:clamp(2.125rem,1.5rem + 1.6vw,2.75rem)}
.jss-prose h2,.jss-legal h2{font-size:clamp(1.75rem,1.45rem + 1vw,2.25rem)}
/* reading text: body ink (support lines keep muted-deep, notes keep muted) */
:is(.jss-prose,.jss-calm__body,.jss-lead,.jss-fblock__body>p,.jss-faq__item .faq-a,.jss-stay__copy>p:not(.jss-eyebrow),.jss-qa__intro>p:not(.jss-eyebrow),.jss-steps span,.jss-ask p,.jss-rows p,.jss-404__copy>p:not(.jss-eyebrow)){color:var(--jss-text-body)}
.jss-shead__p,.jss-gcard p,.jss-mlist__desc{color:var(--jss-muted-deep)}
/* one eyebrow everywhere (was 9 / 10 / 11 px with .155-.2em tracking) */
:is(.jss-stay__copy,.jss-vband,.jss-qa__intro,.jss-shead,.jss-calm,.jss-sec__head,.jss-404__copy,.jss-exp) .jss-eyebrow{font-size:var(--jss-fs-eyebrow);letter-spacing:var(--jss-ls-eyebrow)}
.jss-vband__label{font-size:.6875rem;letter-spacing:var(--jss-ls-eyebrow)}
.jss-vband__tel{font-size:.875rem}
/* FAQ: answers are reading text, questions one step under body */
.jss-faq__item>summary{font-size:.9375rem}
.jss-faq__item .faq-a{max-width:var(--jss-measure);font-size:var(--jss-fs-body);line-height:1.75}
/* small UI text floors */
.jss-fac__card p{font-size:.8125rem;text-wrap:balance}
.jss-amen__list li{font-size:.8125rem}
.jss-stay__food strong{font-size:.875rem}
.jss-stay__food span{font-size:.8125rem}
.jss-stay__copy>p:not(.jss-eyebrow){font-size:var(--jss-fs-body)}
/* footer: 10-12 px was below a comfortable desktop size; links 14, headings 13, base 12 / 13 */
.jss-foot{font-size:.875rem}
.jss-foot h2{font-size:.8125rem;letter-spacing:.02em}
.jss-foot__col a,.jss-foot address{font-size:.875rem}
.jss-foot__tag{font-size:.75rem}
.jss-foot__base{font-size:.75rem}
/* rhythm: two sections on the same surface are one topic apart, not a band apart: 80 px instead of 96 at desktop */
.jss-sec:not(.jss-sec--sand)+.jss-sec:not(.jss-sec--sand):has(h2){margin-top:calc(var(--jss-section) * -.1667)}
@media (min-width:960px){
  .jss-fac__card p{font-size:.9375rem;line-height:1.6}
  .jss-amen__list li{font-size:.875rem}
  .jss-shead__p,.jss-qa__intro>p:not(.jss-eyebrow){font-size:1rem}
  .jss-vband__label{font-size:.75rem}
  .jss-faq__item>summary{font-size:1rem}
  .jss-foot__tag,.jss-foot__base{font-size:.8125rem}
  /* one split grid: heading column takes the slack, the reading column is the measure (33rem, 17 px: max line ~70 characters) and ends on the container
     edge, so prose, FAQ lists, forms and tables share one right edge (prose stopped at 1196 px, FAQ at 1360 px) */
  :root{--jss-read-col:min(33rem,58%)}
  .jss-sec--split>.jss-wrap:has(>.jss-sec__head),.jss-sec--intro .jss-prose,.jss-calm,.jss-qa__grid{grid-template-columns:minmax(0,1fr) minmax(0,var(--jss-read-col))}
  .jss-sec--split .jss-prose,.jss-sec--intro .jss-prose>:not(:first-child),.jss-calm__body,.jss-qa__grid .jss-faq__item .faq-a{max-width:none}
}

/* ===== v1.1.5 sitemap page for people (/sitemap/, /th/sitemap/, /ru/sitemap/) =====
   Groups in a calm grid (1 / 2 / 3 columns), each link with its page's one-line summary; same type scale and tiers as v1.1.4 */
.jss-smap__intro{max-width:var(--jss-measure);margin-bottom:clamp(32px,4vw,48px);color:var(--jss-text-body)}
.jss-smap{display:grid;gap:40px 48px;align-items:start}
.jss-smap__group{min-width:0}
.jss-smap__h{margin:0;padding-bottom:14px;border-bottom:1px solid var(--jss-line-faq);font:500 var(--jss-fs-h3)/1.15 var(--jss-font-display);letter-spacing:var(--jss-ls-h3);color:var(--jss-pine)}
.jss-smap__list{list-style:none;margin:0;padding:0}
.jss-smap__list li{border-bottom:1px solid var(--jss-line)}
.jss-smap__link{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding-top:12px;font:500 1rem/1.4 var(--jss-font-body);color:var(--jss-pine);text-decoration:none}
.jss-smap__link .ico{width:16px;height:16px;flex:none;transition:transform var(--jss-t-hover) var(--jss-ease)}
.jss-smap__link:hover span{text-decoration:underline;text-underline-offset:4px}
.jss-smap__link:hover .ico{transform:translateX(3px)}
.jss-smap__desc{margin:0;padding-bottom:16px;font-size:var(--jss-fs-small);line-height:1.6;color:var(--jss-muted-deep);text-wrap:pretty}
:lang(th) .jss-smap__h{line-height:1.4}
:lang(th) .jss-smap__link{font-size:1.0625rem;line-height:1.6}
@media (prefers-reduced-motion:reduce){.jss-smap__link .ico{transition:none}.jss-smap__link:hover .ico{transform:none}}
@media (min-width:700px){.jss-smap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.jss-smap{grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 56px}}

/* ===== v1.1.5 fixes from the final audit ===== */
/* FAQ heading on inner pages uses the inner H2 size (it was a fixed 46 px: Thai FAQ H2 44 px beside 28-32 px headings) */
body:not(.jss-page-home) .jss-qa__intro .jss-h2d{font-size:var(--jss-fs-h2-inner)}
/* the "first visit" steps block joins the one split grid (it kept the old .82 / 1.18 columns) */
@media (min-width:960px){
  .jss-day__grid.is-solo{grid-template-columns:minmax(0,1fr) minmax(0,var(--jss-read-col))}
  .jss-day__grid.is-solo .jss-prose{max-width:none}
}
/* a gallery of four photos sits in one row on desktop (three columns left a lone fourth photo) */
@media (min-width:1024px){.jss-gallery:has(>li:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}}

/* v1.1.5 (verification round) */
/* home FAQ heading follows the H2 token on phones too (a fixed 46 px made the Thai home FAQ heading bigger than the H1) */
.jss-qa__intro .jss-h2d{font-size:var(--jss-fs-h2)}
body:not(.jss-page-home) .jss-qa__intro .jss-h2d{font-size:var(--jss-fs-h2-inner)}
/* galleries fill every row on desktop: 3n+1 photos -> the first spans the row, 3n+2 -> the first spans two columns */
@media (min-width:1024px){
  .jss-gallery:has(>li:nth-child(4):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .jss-gallery>li:first-child:nth-last-child(3n+1):not(:only-child){grid-column:1/-1}
  .jss-gallery>li:first-child:nth-last-child(3n+1):not(:only-child) .jss-gallery__link{aspect-ratio:21/9}
  .jss-gallery>li:first-child:nth-last-child(3n+2){grid-column:span 2}
  .jss-gallery>li:first-child:nth-last-child(3n+2) .jss-gallery__link{aspect-ratio:41/15} /* two 4:3 tiles plus the gap wide, one tile tall: the row stays level */
}
/* footer tagline sits under the logo on phones (a 160 px right column squeezed the Russian line into four pieces) */
@media (max-width:699px){
  .jss-foot__row{display:block}
  .jss-foot__tag{max-width:none;margin-top:14px;text-align:left}
}

/* contents list: one- and two-line items start at the same height, so the rhythm reads even */
.jss-toc a{align-items:flex-start;padding-block:11px}

/* v1.1.5 final: an extras value that is words, not a price, may wrap (TH "สแกนจ่าย Thai QR (พร้อมเพย์)" ran out of its card) */
.jss-extras li>span{min-width:0}
.jss-extras b{white-space:normal;text-align:right;text-wrap:balance}
/* contact band: a phone row without a label centres its icon, and its 44 px tap area no longer widens the gap above it */
.jss-vband__item:has(>div>.jss-vband__tel.is-solo:only-child){align-items:center}
.jss-vband__item:has(>div>.jss-vband__tel.is-solo:only-child)>.ico{margin-top:0}
.jss-vband__tel.is-solo:only-child{margin-block:-10px}

/* guide article: the single phone column may shrink below its widest unbreakable line (it computed to 313 px in a 280 px column at 320 px) */
.jss-article{grid-template-columns:minmax(0,1fr)}
@media (min-width:960px){.jss-article{grid-template-columns:minmax(0,var(--jss-measure)) 320px}}
/* v1.1.5 final: single-column phone grids can always shrink to the column (an implicit auto column grew to the widest
   unbreakable line: 303 px in a 280 px column on /ru/gym/ at 320 px); headings under 360 px step down after the v1.1.4 tokens */
@media (max-width:767px){.jss-gym__grid,.jss-day__grid,.jss-visit__grid,.jss-checks,.jss-stay__grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:359px){:root{--jss-fs-h2-inner:2rem}:root:lang(ru){--jss-fs-h2-inner:1.875rem}}
/* equipment list: two shrinkable columns; one column under 360 px, where "Велотренажёры" plus its icon is wider than half the column */
.jss-spec{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:359px){.jss-spec{grid-template-columns:minmax(0,1fr)}}

/* v1.1.6: the registered company name after the © line. Desktop: one line with a dot. Phones: its own line, no dot
   (a wrapped line otherwise left the dot hanging at the end of the first line). */
@media (max-width:699px){.jss-foot__sep{display:none}.jss-foot__legal{display:block}}
.jss-foot__legalnav{display:inline-flex;flex-wrap:wrap;align-items:center;column-gap:20px}
/* v1.1.6 final review: on phones the last footer column (Keep in touch) sits alone on its row, so it takes the full row and
   the rating link no longer leaves 'Google' on a line of its own. */
@media (max-width:699px){.jss-foot__top>.jss-foot__col:last-child{grid-column:1/-1}}
/* v1.1.6 final review: Thai facility titles on small phones fit "heading word + และ" on one line (18 px under 360, 21 px to 389),
   and under 360 px the menu tabs wrap into rows, so every category is visible (a swipe row showed only two of eight). */
@media (max-width:359px){:lang(th) .jss-fac__title h3{font-size:1.125rem}
  .jss-tabs__list{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0;-webkit-mask-image:none;mask-image:none}
  .jss-tabs__tab{white-space:normal}}
@media (min-width:360px) and (max-width:389px){:lang(th) .jss-fac__title h3{font-size:1.3125rem}}
/* v1.1.9 (towels + water review): the includes lists are one column (a two-column grid squeezed the towel label next to
   a half-empty column), each pass group is clearly separated, the towel photo sits above the lists, the help-card ticks align
   to their first line when a label wraps, and the Thai price-table card heading uses the Thai sans (the serif '+' was tiny). */
@media (min-width:640px){.jss-includes{grid-template-columns:minmax(0,1fr)}}
.jss-includes+.jss-h3{margin-top:28px}
.jss-h3+.jss-includes{margin-top:10px}
.jss-includes__fig{margin:0 0 24px;aspect-ratio:4/3;overflow:hidden;border-radius:var(--jss-r-img);background:var(--jss-mist)}
.jss-includes__fig picture,.jss-includes__fig img{display:block;width:100%;height:100%;object-fit:cover}
.jss-ask li{align-items:flex-start}
.jss-ask li .ico{margin-top:2px}
.jss-ask__lead{display:block!important;margin:2px 0 -2px;color:var(--jss-pine)!important;font-weight:500}
@media (max-width:1023px){:lang(th) .jss-ptable th[scope=row]{font-family:var(--jss-font-body);font-weight:600}}