.com-spas__card-img { height: 220px; object-fit: cover; }
.com-spas__hero { max-height: 420px; width: 100%; object-fit: cover; }
.com-spas__gallery-img { height: 140px; width: 100%; object-fit: cover; }
.com-spas__amenities .badge { font-weight: 500; }
.com-spas__price { font-weight: 600; }
.com-spas__hours td, .com-spas__hours th { padding: .25rem .5rem; }
.com-spas__pagination .pagination { justify-content: center; }
.com-spas__comparebar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    display: flex; align-items: center; justify-content: center;
    padding: .6rem 1rem; background: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .15);
}
.com-spas__compare-check {
    padding-left: calc(1.5em + .5rem);
    padding-top: .25rem;
    margin-bottom: .5rem;
}
.com-spas__card-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.com-spas__priceoffer { font-size: 1.15rem; }
.com-spas__availability {
    font-size: .85rem;
    color: #0d6efd;
    text-decoration: underline;
    margin-left: .5rem;
    white-space: nowrap;
}

.mod-spas-services__emoji { font-size: 1.8rem; line-height: 1; margin-bottom: .5rem; }
.mod-spas-services__card { transition: transform .15s, box-shadow .15s; }
.mod-spas-services__card:hover { transform: translateY(-2px); box-shadow: 0 .25rem .75rem rgba(0,0,0,.08); }

/* ---- List/Map toggle (spas) ---- */
.pf-map { height: 420px; z-index: 1; }
@media (max-width: 767.98px) { .pf-map { height: 320px; } }
#pfMap[hidden], #pfListGrid[hidden] { display: none !important; }
#pfSortBar[hidden] { display: none !important; }
#pfMap:not([hidden]) ~ #pfEmpty { display: none !important; }
.pf-map-pop { width: 200px; }
.pf-map-pop img { width: 100%; height: 110px; object-fit: cover; border-radius: 6px; margin-bottom: .4rem; }
.pf-map-pop strong { display: block; font-size: .9rem; }
.leaflet-container { font: inherit; }

.com-spas__filters {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .6rem .75rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding: .8rem 1rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
}

/* Pill selects (area / service / sort) */
.com-spas__filters select,
#pfSortBar select {
    appearance: none; -webkit-appearance: none;
    border: 1px solid #dee2e6; border-radius: 999px;
    padding: .45rem 2.2rem .45rem 1rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23495057' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right .9rem center;
    font-size: .9rem; font-weight: 500; color: #212529;
    max-width: 100%; cursor: pointer;
}
.com-spas__filters select:focus,
#pfSortBar select:focus {
    outline: 0; border-color: #0d6efd;
    box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
}

/* Price chips */
.com-spas__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.com-spas__chip {
    border: 1px solid #dee2e6; background: #fff;
    border-radius: 999px; padding: .42rem .95rem;
    font-size: .85rem; font-weight: 500; color: #495057;
    line-height: 1.2; cursor: pointer; transition: all .15s ease;
}
.com-spas__chip:hover { border-color: #adb5bd; color: #212529; }
.com-spas__chip.is-active { background: #212529; border-color: #212529; color: #fff; }

#pf-reset { border: 0; background: none; color: #6c757d; font-size: .85rem; padding: .25rem .5rem; cursor: pointer; text-decoration: underline; }
#pf-reset:hover { color: #212529; }

/* ==========================================================================
   Spas Bangkok theme layer  (appended to the functional rules above)
   Reads the --spa-* tokens from the template's user.css; every token has a
   fallback so the component also looks right without the preset.
   No PHP/markup changes are required.
   ========================================================================== */
.com-spas,.com-spas__comparebar,.com-spas__stickycta,.pf-map-pop,.mod-spas-services,.mod-spas-areas,[class*="mod-spas-"]{
  --sp-deep:var(--spa-deep,#0b3d3a); --sp-deep2:var(--spa-deep-2,#082d2b);
  --sp-deep-rgb:var(--spa-deep-rgb,11,61,58); --sp-deep2-rgb:var(--spa-deep-2-rgb,8,45,43);
  --sp-teal:var(--spa-teal,#0f766e); --sp-teal-rgb:var(--spa-teal-rgb,15,118,110);
  --sp-gold:var(--spa-gold,#b8893b); --sp-gold-text:var(--spa-gold-text,#8a6322);
  --sp-gold-l:var(--spa-gold-light,#d9b872); --sp-gold-hover:var(--spa-gold-hover,#e6d0a2);
  --sp-gold-rgb:var(--spa-gold-rgb,184,137,59); --sp-gold-l-rgb:var(--spa-gold-light-rgb,217,184,114);
  --sp-cream:var(--spa-cream,#f6f1e7);
  --sp-paper:var(--spa-paper,#fbf9f4); --sp-ink:var(--spa-ink,#1f2d2c);
  --sp-muted:var(--spa-muted,#5b6b69); --sp-line:var(--spa-line,#e3ddcf);
  --sp-radius:var(--spa-radius,.75rem);
  --sp-shadow:var(--spa-shadow,0 1px 2px rgba(var(--sp-deep-rgb),.06),0 8px 20px rgba(var(--sp-deep-rgb),.07));
  --sp-head:var(--cassiopeia-font-family-headings,Georgia,serif);
  --bs-light-bg-subtle:var(--sp-cream);--light-bg-subtle:var(--sp-cream);
}

/* ---- Headings --------------------------------------------------------- */
.com-spas h1.page-heading,.com-spas .com-spas-compare__h1{
  font-family:var(--sp-head);font-weight:400;color:var(--sp-deep);margin-bottom:1.25rem;
}
.com-spas h1.page-heading::after,.com-spas .com-spas-compare__h1::after{
  content:"";display:block;width:3rem;height:3px;margin-top:.7rem;background:var(--sp-gold);border-radius:2px;
}
.com-spas h2.h4,.com-spas h2.h5,.com-spas h3.h5,.com-spas .com-spas-compare__selector-title{
  font-family:var(--sp-head);font-weight:400;color:var(--sp-deep);
}

/* ---- Filter bar, pills, chips ---------------------------------------- */
.com-spas .com-spas__filters{
  background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);
  box-shadow:var(--sp-shadow);padding:.9rem 1.1rem;
}
.com-spas .com-spas__filters select,.com-spas #pfSortBar select{
  border-color:var(--sp-line);color:var(--sp-ink);background-color:var(--sp-paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230b3d3a' stroke-width='2' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}
.com-spas .com-spas__filters select:hover,.com-spas #pfSortBar select:hover{border-color:var(--sp-teal)}
.com-spas .com-spas__filters select:focus,.com-spas #pfSortBar select:focus{
  border-color:var(--sp-teal);box-shadow:0 0 0 .2rem rgba(var(--sp-teal-rgb),.18);
}
.com-spas .com-spas__chip{border-color:var(--sp-line);background:var(--sp-paper);color:var(--sp-muted)}
.com-spas .com-spas__chip:hover{border-color:var(--sp-teal);color:var(--sp-deep)}
.com-spas .com-spas__chip.is-active{background:var(--sp-deep);border-color:var(--sp-deep);color:var(--sp-gold-l)}
.com-spas #pf-reset{color:var(--sp-muted)}
.com-spas #pf-reset:hover{color:var(--sp-teal)}
.com-spas #pfCount{color:var(--sp-muted)!important}

/* ---- Listing cards (grid + module/card layout) ------------------------ */
.com-spas .com-spas__card,.com-spas-card{
  border:1px solid var(--sp-line);border-radius:var(--sp-radius);background:#fff;
  box-shadow:var(--sp-shadow);overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.com-spas .com-spas__card:hover,.com-spas-card:hover{
  transform:translateY(-3px);border-color:rgba(var(--sp-gold-rgb),.55);
  box-shadow:0 2px 4px rgba(var(--sp-deep-rgb),.06),0 16px 32px rgba(var(--sp-deep-rgb),.12);
}
.com-spas .com-spas__card .card-title,.com-spas-card .card-title{font-family:var(--sp-head);font-weight:400;line-height:1.25}
.com-spas .com-spas__card .card-title a,.com-spas-card .card-title a{color:var(--sp-deep);text-decoration:none}
.com-spas .com-spas__card .card-title a:hover,.com-spas-card .card-title a:hover{color:var(--sp-teal)}
.com-spas .com-spas__price,.com-spas-card .fw-bold{color:var(--sp-deep)}
.com-spas .com-spas__priceoffer{color:var(--sp-gold-text);font-weight:700}
.com-spas .com-spas__card .btn-outline-primary,.com-spas-card .btn-outline-primary{border-radius:999px;padding-inline:1rem}
.com-spas .com-spas__compare-check{border-top:1px solid var(--sp-line);margin:0;padding-top:.6rem;padding-bottom:.6rem;background:var(--sp-paper)}
.com-spas .com-spas__availability{color:var(--sp-teal)}

/* Rating / featured / category badges → gold + cream (override Bootstrap !important) */
.com-spas .badge.text-bg-warning,.com-spas-card .badge.text-bg-warning,
.com-spas .badge.bg-warning,.com-spas-card .badge.bg-warning{
  background-color:var(--sp-gold-l)!important;color:var(--sp-deep)!important;font-weight:700;
}
.com-spas .badge.text-bg-secondary,.com-spas-card .badge.bg-secondary{
  background-color:var(--sp-cream)!important;color:var(--sp-deep)!important;border:1px solid var(--sp-line);font-weight:600;
}
.com-spas .badge.text-bg-light{background-color:var(--sp-cream)!important;color:var(--sp-deep)!important;border-color:var(--sp-line)!important;font-weight:500}
.com-spas .com-spas__amenities .badge{font-weight:500}

/* ---- List / Map toggle + map ----------------------------------------- */
.com-spas .pf-view-toggle .btn{border-radius:0;padding-inline:1.1rem}
.com-spas .pf-view-toggle .btn:first-child{border-radius:999px 0 0 999px}
.com-spas .pf-view-toggle .btn:last-child{border-radius:0 999px 999px 0}
.com-spas .pf-view-toggle .btn.active{background:var(--sp-deep);border-color:var(--sp-deep);color:var(--sp-gold-l)}
.com-spas .pf-map{border:1px solid var(--sp-line);border-radius:var(--sp-radius);box-shadow:var(--sp-shadow)}
.pf-map-pop strong{font-family:var(--sp-head);font-weight:400;color:var(--sp-deep);font-size:1rem}
.leaflet-popup-content-wrapper{border-radius:.75rem}
.leaflet-container a{color:var(--sp-teal)}

/* ---- Compare bar + sticky booking bar -------------------------------- */
html .com-spas__comparebar,html .com-spas__stickycta{
  background:var(--sp-deep);color:var(--sp-cream);border-top:2px solid var(--sp-gold);
  box-shadow:0 -6px 20px rgba(0,0,0,.22);
}
.com-spas__comparebar .btn-primary{background:var(--sp-gold-l);border-color:var(--sp-gold-l);color:var(--sp-deep);font-weight:700}
.com-spas__comparebar .btn-primary:hover{background:#fff;border-color:#fff}
.com-spas__comparebar .btn-outline-secondary,.com-spas__stickycta .btn-close{
  --bs-btn-color:var(--sp-cream);--btn-color:var(--sp-cream);--bs-btn-border-color:rgba(246,241,231,.45);--btn-border-color:rgba(246,241,231,.45);
  --bs-btn-hover-bg:rgba(246,241,231,.12);--btn-hover-bg:rgba(246,241,231,.12);--bs-btn-hover-color:#fff;--btn-hover-color:#fff;--bs-btn-hover-border-color:var(--sp-gold-l);--btn-hover-border-color:var(--sp-gold-l);
}
.com-spas__stickycta .btn-close{filter:invert(1) grayscale(1) brightness(2);opacity:.8}
.com-spas__stickytext{font-family:var(--sp-head);font-weight:400;font-size:1.05rem}

/* ---- Detail page hero ------------------------------------------------- */
.com-spas .com-spas__hero{background:var(--sp-deep);border-radius:var(--sp-radius);box-shadow:var(--sp-shadow)}
.com-spas .com-spas__hero-scrim{
  background:linear-gradient(180deg,rgba(var(--sp-deep2-rgb),.55) 0%,rgba(var(--sp-deep2-rgb),.10) 42%,rgba(var(--sp-deep2-rgb),.88) 100%);
}
.com-spas .com-spas__hero-meta{color:var(--sp-gold-l);font-weight:700;letter-spacing:.16em;font-size:.78rem}
.com-spas .com-spas__hero-title{font-family:var(--sp-head);font-weight:400;color:#fff}
.com-spas .com-spas__hero-badge{
  background:rgba(var(--sp-deep2-rgb),.55);border:1px solid rgba(var(--sp-gold-l-rgb),.55);color:var(--sp-cream);
}
.com-spas .com-spas__hero .btn-outline-light{
  --bs-btn-border-color:rgba(246,241,231,.6);--btn-border-color:rgba(246,241,231,.6);--bs-btn-hover-bg:var(--sp-cream);--btn-hover-bg:var(--sp-cream);--bs-btn-hover-color:var(--sp-deep);--btn-hover-color:var(--sp-deep);
  backdrop-filter:blur(4px);
}
/* affiliate booking buttons (btn-warning) — gold CTA, also in the sticky bar */
.com-spas .btn-warning,.com-spas__stickycta .btn-warning{
  background:var(--sp-gold-l);border-color:var(--sp-gold-l);color:var(--sp-deep);font-weight:700;letter-spacing:.02em;
}
.com-spas .btn-warning:hover,.com-spas__stickycta .btn-warning:hover{background:var(--sp-gold-hover);border-color:var(--sp-gold-hover);color:var(--sp-deep)}
.com-spas .btn-success{ /* compare "add" etc. — keep brand colour, not Bootstrap green */
  --bs-btn-bg:var(--sp-teal);--btn-bg:var(--sp-teal);--bs-btn-border-color:var(--sp-teal);--btn-border-color:var(--sp-teal);--bs-btn-hover-bg:var(--sp-deep);--btn-hover-bg:var(--sp-deep);--bs-btn-hover-border-color:var(--sp-deep);--btn-hover-border-color:var(--sp-deep);
  --bs-btn-color:#fff;--btn-color:#fff;--bs-btn-hover-color:#fff;--btn-hover-color:#fff;
}
.com-spas .btn-outline-secondary{--bs-btn-color:var(--sp-muted);--btn-color:var(--sp-muted);--bs-btn-border-color:var(--sp-line);--btn-border-color:var(--sp-line);
  --bs-btn-hover-bg:var(--sp-cream);--btn-hover-bg:var(--sp-cream);--bs-btn-hover-color:var(--sp-deep);--btn-hover-color:var(--sp-deep);--bs-btn-hover-border-color:var(--sp-gold);--btn-hover-border-color:var(--sp-gold)}

/* ---- Detail page body ------------------------------------------------- */
.com-spas .com-spas__description{line-height:1.75}
.com-spas .com-spas__sidecard,.com-spas .com-spas__compare-invite,.com-spas-prices .card{
  border:1px solid var(--sp-line);border-radius:var(--sp-radius);box-shadow:var(--sp-shadow);background:#fff;
}
.com-spas .com-spas__compare-invite{background:var(--sp-cream);border-color:rgba(var(--sp-gold-rgb),.4)}
.com-spas .com-spas__contact [class^="icon-"]{color:var(--sp-teal);margin-right:.35rem}
.com-spas .com-spas__gallery-img{border-radius:.6rem;transition:transform .18s ease}
.com-spas a:hover>.com-spas__gallery-img{transform:scale(1.02)}

/* ---- Tables (services, hours, prices, compare) ----------------------- */
.com-spas .table{
  --bs-table-bg:transparent;--table-bg:transparent;--bs-table-border-color:var(--sp-line);--table-border-color:var(--sp-line);
  --bs-table-striped-bg:rgba(246,241,231,.65);--table-striped-bg:rgba(246,241,231,.65);--bs-table-hover-bg:rgba(246,241,231,.9);--table-hover-bg:rgba(246,241,231,.9);
}
.com-spas .table>thead th{color:var(--sp-deep);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;border-bottom-color:var(--sp-gold)}
.com-spas .com-spas__hours th{color:var(--sp-deep)}
.com-spas-prices .card.border-primary{border-color:var(--sp-gold)!important;box-shadow:0 0 0 1px var(--sp-gold),var(--sp-shadow)}
.com-spas-prices .small.text-uppercase{color:var(--sp-gold-text)!important;letter-spacing:.14em;font-weight:700}
.com-spas-prices .h4{font-family:var(--sp-head);font-weight:400;color:var(--sp-deep)}

/* ---- Compare page ----------------------------------------------------- */
.com-spas .com-spas-compare__table{border-color:var(--sp-line);background:#fff;border-radius:var(--sp-radius);overflow:hidden}
.com-spas .com-spas-compare__paramhead,.com-spas .com-spas-compare__param{background:var(--sp-cream);color:var(--sp-deep)}
.com-spas .com-spas-compare__imgwrap{background:var(--sp-cream);border-radius:.6rem}
.com-spas .com-spas-compare__title{font-family:var(--sp-head);font-weight:400;color:var(--sp-deep)}
.com-spas .com-spas-compare__form{background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);padding:.9rem 1.1rem;box-shadow:var(--sp-shadow)}
.com-spas .com-spas-compare__insights li::marker{color:var(--sp-gold)}

/* ---- Alerts ----------------------------------------------------------- */
.com-spas .alert-info{
  --bs-alert-color:var(--sp-deep);--alert-color:var(--sp-deep);--bs-alert-bg:var(--sp-cream);--alert-bg:var(--sp-cream);--bs-alert-border-color:rgba(var(--sp-gold-rgb),.4);--alert-border-color:rgba(var(--sp-gold-rgb),.4);
  border-left:4px solid var(--sp-gold);
}

@media (max-width:575.98px){
  .com-spas .com-spas__filters{padding:.75rem}
  .com-spas .com-spas__chips{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .com-spas .com-spas__card,.com-spas-card,.com-spas .com-spas__gallery-img{transition:none}
  .com-spas .com-spas__card:hover,.com-spas-card:hover{transform:none}
}

/* ---- Areas module (mod_spas_areas) ------------------------------------ */
.mod-spas-areas__heading{font-family:var(--sp-head);font-weight:400;color:var(--sp-deep);margin:0 0 1.25rem}
.mod-spas-areas__heading::after{content:"";display:block;width:3rem;height:3px;margin-top:.7rem;background:var(--sp-gold);border-radius:2px}
.mod-spas-areas__card{
  position:relative;display:flex;align-items:center;gap:1rem;height:100%;padding:1rem 1.1rem;
  background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);box-shadow:var(--sp-shadow);
  color:var(--sp-ink);text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.mod-spas-areas__card:hover,.mod-spas-areas__card:focus-visible{
  transform:translateY(-3px);border-color:rgba(var(--sp-gold-rgb),.6);color:var(--sp-ink);text-decoration:none;
  box-shadow:0 2px 4px rgba(var(--sp-deep-rgb),.06),0 14px 28px rgba(var(--sp-deep-rgb),.12);
}
.mod-spas-areas__card:focus-visible{outline:2px solid var(--sp-teal);outline-offset:2px}
.mod-spas-areas__icon{
  flex:none;display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;
  font-size:1.3rem;line-height:1;color:var(--sp-deep);background:var(--sp-cream);
  border:1px solid rgba(var(--sp-gold-rgb),.45);transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.mod-spas-areas__icon svg{display:block}
.mod-spas-areas__card:hover .mod-spas-areas__icon,.mod-spas-areas__card:focus-visible .mod-spas-areas__icon{
  background:var(--sp-deep);border-color:var(--sp-deep);color:var(--sp-gold-l);
}
.mod-spas-areas__text{flex:1;min-width:0}
.mod-spas-areas__name{display:block;font-family:var(--sp-head);font-size:1.15rem;line-height:1.2;color:var(--sp-deep);overflow-wrap:anywhere}
.mod-spas-areas__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .65rem;margin-top:.25rem;font-size:.85rem;color:var(--sp-muted)}
.mod-spas-areas__count{font-weight:700;color:var(--sp-gold-text)}
.mod-spas-areas__price{white-space:nowrap}
.mod-spas-areas__card::after{
  content:"";flex:none;width:.55rem;height:.55rem;border-top:2px solid var(--sp-gold);border-right:2px solid var(--sp-gold);
  transform:rotate(45deg);opacity:.65;transition:transform .18s ease,opacity .18s ease;
}
.mod-spas-areas__card:hover::after,.mod-spas-areas__card:focus-visible::after{opacity:1;transform:translateX(3px) rotate(45deg)}
/* Dark zones (module placed inside .spa-dark / .spa-band) */
.spa-dark .mod-spas-areas__heading,.spa-band .mod-spas-areas__heading{color:var(--sp-cream)}
.spa-dark .mod-spas-areas__card,.spa-band .mod-spas-areas__card{
  background:rgba(var(--sp-deep2-rgb),.55);border-color:rgba(var(--sp-gold-l-rgb),.3);box-shadow:none;color:var(--sp-cream);
}
.spa-dark .mod-spas-areas__card:hover,.spa-band .mod-spas-areas__card:hover,
.spa-dark .mod-spas-areas__card:focus-visible,.spa-band .mod-spas-areas__card:focus-visible{border-color:var(--sp-gold-l);box-shadow:0 14px 28px rgba(0,0,0,.28)}
.spa-dark .mod-spas-areas__card:focus-visible,.spa-band .mod-spas-areas__card:focus-visible{outline-color:var(--sp-gold-l)}
.spa-dark .mod-spas-areas__name,.spa-band .mod-spas-areas__name{color:var(--sp-cream)}
.spa-dark .mod-spas-areas__meta,.spa-band .mod-spas-areas__meta{color:rgba(246,241,231,.78)}
.spa-dark .mod-spas-areas__count,.spa-band .mod-spas-areas__count{color:var(--sp-gold-l)}
.spa-dark .mod-spas-areas__icon,.spa-band .mod-spas-areas__icon{background:rgba(255,255,255,.06);border-color:rgba(var(--sp-gold-l-rgb),.45);color:var(--sp-gold-l)}
.spa-dark .mod-spas-areas__card:hover .mod-spas-areas__icon,.spa-band .mod-spas-areas__card:hover .mod-spas-areas__icon,
.spa-dark .mod-spas-areas__card:focus-visible .mod-spas-areas__icon,.spa-band .mod-spas-areas__card:focus-visible .mod-spas-areas__icon{background:var(--sp-gold-l);border-color:var(--sp-gold-l);color:var(--sp-deep)}
.spa-dark .mod-spas-areas__card::after,.spa-band .mod-spas-areas__card::after{border-color:var(--sp-gold-l)}
@media (prefers-reduced-motion:reduce){
  .mod-spas-areas__card,.mod-spas-areas__icon,.mod-spas-areas__card::after{transition:none}
  .mod-spas-areas__card:hover,.mod-spas-areas__card:focus-visible{transform:none}
}

/* ---- Services module (mod_spas_services) ------------------------------ */
.mod-spas-services__heading{font-family:var(--sp-head);font-weight:400;color:var(--sp-deep);margin:0 0 1.25rem}
.mod-spas-services__heading::after{content:"";display:block;width:3rem;height:3px;margin-top:.7rem;background:var(--sp-gold);border-radius:2px}
.mod-spas-services__card{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;height:100%;
  padding:1.3rem .9rem 1.1rem;text-align:center;
  background:#fff;border:1px solid var(--sp-line);border-radius:var(--sp-radius);box-shadow:var(--sp-shadow);
  color:var(--sp-ink);text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.mod-spas-services__card:hover,.mod-spas-services__card:focus-visible{
  transform:translateY(-3px);border-color:rgba(var(--sp-gold-rgb),.6);color:var(--sp-ink);text-decoration:none;
  box-shadow:0 2px 4px rgba(var(--sp-deep-rgb),.06),0 14px 28px rgba(var(--sp-deep-rgb),.12);
}
.mod-spas-services__card:focus-visible{outline:2px solid var(--sp-teal);outline-offset:2px}
.mod-spas-services__icon{
  display:grid;place-items:center;width:3.5rem;height:3.5rem;margin-bottom:.25rem;border-radius:50%;
  font-size:1.5rem;line-height:1;color:var(--sp-deep);background:var(--sp-cream);
  border:1px solid rgba(var(--sp-gold-rgb),.45);transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.mod-spas-services__icon svg{display:block}
.mod-spas-services__card:hover .mod-spas-services__icon,.mod-spas-services__card:focus-visible .mod-spas-services__icon{
  background:var(--sp-deep);border-color:var(--sp-deep);color:var(--sp-gold-l);
}
.mod-spas-services__name{font-family:var(--sp-head);font-size:1.12rem;line-height:1.25;color:var(--sp-deep);overflow-wrap:anywhere}
.mod-spas-services__num{
  display:inline-block;margin-top:auto;padding:.15rem .65rem;border-radius:999px;
  background:var(--sp-cream);border:1px solid var(--sp-line);
  font-size:.76rem;font-weight:700;color:var(--sp-gold-text);
}
.mod-spas-services__name+.mod-spas-services__num{margin-top:.35rem}
/* Dark zones (module placed inside .spa-dark / .spa-band) */
.spa-dark .mod-spas-services__heading,.spa-band .mod-spas-services__heading{color:var(--sp-cream)}
.spa-dark .mod-spas-services__card,.spa-band .mod-spas-services__card{
  background:rgba(var(--sp-deep2-rgb),.55);border-color:rgba(var(--sp-gold-l-rgb),.3);box-shadow:none;color:var(--sp-cream);
}
.spa-dark .mod-spas-services__card:hover,.spa-band .mod-spas-services__card:hover,
.spa-dark .mod-spas-services__card:focus-visible,.spa-band .mod-spas-services__card:focus-visible{border-color:var(--sp-gold-l);box-shadow:0 14px 28px rgba(0,0,0,.28)}
.spa-dark .mod-spas-services__card:focus-visible,.spa-band .mod-spas-services__card:focus-visible{outline-color:var(--sp-gold-l)}
.spa-dark .mod-spas-services__name,.spa-band .mod-spas-services__name{color:var(--sp-cream)}
.spa-dark .mod-spas-services__icon,.spa-band .mod-spas-services__icon{background:rgba(255,255,255,.06);border-color:rgba(var(--sp-gold-l-rgb),.45);color:var(--sp-gold-l)}
.spa-dark .mod-spas-services__card:hover .mod-spas-services__icon,.spa-band .mod-spas-services__card:hover .mod-spas-services__icon,
.spa-dark .mod-spas-services__card:focus-visible .mod-spas-services__icon,.spa-band .mod-spas-services__card:focus-visible .mod-spas-services__icon{background:var(--sp-gold-l);border-color:var(--sp-gold-l);color:var(--sp-deep)}
.spa-dark .mod-spas-services__num,.spa-band .mod-spas-services__num{background:rgba(255,255,255,.06);border-color:rgba(var(--sp-gold-l-rgb),.3);color:var(--sp-gold-l)}
@media (max-width:575.98px){.mod-spas-services__card{padding:1.1rem .6rem .95rem}.mod-spas-services__name{font-size:1rem}}
@media (prefers-reduced-motion:reduce){
  .mod-spas-services__card,.mod-spas-services__icon{transition:none}
  .mod-spas-services__card:hover,.mod-spas-services__card:focus-visible{transform:none}
}

/* ---- Spa cards module (mod_spas_cards) + shared card layout ------------- */
.com-spas-card>a{display:block;overflow:hidden;background:var(--sp-cream)}
.com-spas-card .card-img-top{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease}
.com-spas-card:hover .card-img-top{transform:scale(1.04)}
.com-spas-card .card-body{padding:1rem 1.1rem 1.15rem}
.com-spas-card .card-title{font-size:1.2rem}
.com-spas-card .card-title a:focus-visible{outline:2px solid var(--sp-teal);outline-offset:2px;border-radius:.2rem}
.com-spas-card .text-muted{color:var(--sp-muted)!important}
.com-spas-card .fw-bold{margin-top:.4rem;font-size:1.02rem}
.com-spas-card .card-text{color:var(--sp-ink);opacity:.85}
.mod-spas-cards__head{margin:0 0 1.25rem}
.mod-spas-cards__label{
  display:inline-block;margin:0 0 .65rem;padding:.2rem .8rem;border-radius:999px;
  background:var(--sp-cream);border:1px solid rgba(var(--sp-gold-rgb),.5);
  font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sp-gold-text);
}
.mod-spas-cards__heading{font-family:var(--sp-head);font-weight:400;color:var(--sp-deep);margin:0}
.mod-spas-cards__heading::after{content:"";display:block;width:3rem;height:3px;margin-top:.7rem;background:var(--sp-gold);border-radius:2px}
.mod-spas-cards__viewall{margin-top:1.5rem;text-align:center}
.mod-spas-cards__viewall .btn{border-radius:999px;padding:.55rem 1.7rem}
/* Wide cards (Spa of the day, or Layout = Wide) */
.mod-spas-cards--wide .mod-spas-cards__grid{max-width:60rem}
@media (min-width:768px){
  .mod-spas-cards--wide .com-spas-card{flex-direction:row}
  /* The photo fills its column and is cropped (cover): a tall portrait photo can no longer stretch the card */
  .mod-spas-cards--wide .com-spas-card>a{position:relative;flex:0 0 44%;max-width:44%;min-height:18rem}
  .mod-spas-cards--wide .com-spas-card>a .card-img-top{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 35%}
  .mod-spas-cards--wide .com-spas-card .card-body{flex:1;align-self:center;padding:1.75rem 2rem}
  .mod-spas-cards--wide .com-spas-card .card-title{font-size:1.65rem}
  .mod-spas-cards--wide .com-spas-card .card-text{font-size:1rem}
  .mod-spas-cards--wide .com-spas-card .fw-bold{font-size:1.15rem}
}
/* Dark zones (module placed inside .spa-dark / .spa-band) */
.spa-dark .mod-spas-cards__heading,.spa-band .mod-spas-cards__heading{color:var(--sp-cream)}
.spa-dark .mod-spas-cards__label,.spa-band .mod-spas-cards__label{background:rgba(255,255,255,.06);border-color:rgba(var(--sp-gold-l-rgb),.45);color:var(--sp-gold-l)}
.spa-dark .com-spas-card,.spa-band .com-spas-card{
  background:rgba(var(--sp-deep2-rgb),.55);border-color:rgba(var(--sp-gold-l-rgb),.3);box-shadow:none;color:var(--sp-cream);
}
.spa-dark .com-spas-card:hover,.spa-band .com-spas-card:hover{border-color:var(--sp-gold-l);box-shadow:0 14px 28px rgba(0,0,0,.28)}
.spa-dark .com-spas-card .card-title a,.spa-band .com-spas-card .card-title a{color:var(--sp-cream)}
.spa-dark .com-spas-card .card-title a:hover,.spa-band .com-spas-card .card-title a:hover{color:var(--sp-gold-l)}
.spa-dark .com-spas-card .text-muted,.spa-band .com-spas-card .text-muted{color:rgba(246,241,231,.78)!important}
.spa-dark .com-spas-card .fw-bold,.spa-band .com-spas-card .fw-bold{color:var(--sp-gold-l)}
.spa-dark .com-spas-card .card-text,.spa-band .com-spas-card .card-text{color:var(--sp-cream)}
.spa-dark .mod-spas-cards__viewall .btn-outline-primary,.spa-band .mod-spas-cards__viewall .btn-outline-primary{
  --bs-btn-color:var(--sp-gold-l);--btn-color:var(--sp-gold-l);--bs-btn-border-color:var(--sp-gold-l);--btn-border-color:var(--sp-gold-l);--bs-btn-hover-bg:var(--sp-gold-l);--btn-hover-bg:var(--sp-gold-l);--bs-btn-hover-color:var(--sp-deep);--btn-hover-color:var(--sp-deep);--bs-btn-hover-border-color:var(--sp-gold-l);--btn-hover-border-color:var(--sp-gold-l);
}
@media (prefers-reduced-motion:reduce){.com-spas-card .card-img-top{transition:none}.com-spas-card:hover .card-img-top{transform:none}}

/* ---- Landing pages: intro text, related links, bottom text -------------- */
.com-spas .com-spas__intro{max-width:46rem;font-size:1.02rem}
.com-spas .com-spas__related h2{font-family:var(--sp-head);font-weight:400;color:var(--sp-deep);margin:1.5rem 0 .65rem}
.com-spas .com-spas__related-list{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 .5rem;padding:0;list-style:none}
.com-spas .com-spas__related-list a{
  display:inline-block;padding:.35rem .95rem;border:1px solid var(--sp-line);border-radius:999px;background:#fff;
  color:var(--sp-deep);font-size:.9rem;text-decoration:none;transition:border-color .18s ease,color .18s ease;
}
.com-spas .com-spas__related-list a:hover,.com-spas .com-spas__related-list a:focus-visible{border-color:var(--sp-gold);color:var(--sp-teal)}
.com-spas .com-spas__outro{max-width:46rem}

/* Stacked wide card (phones): crop the photo to a fixed shape whatever its orientation */
@media (max-width:767.98px){
  .mod-spas-cards--wide .com-spas-card .card-img-top{aspect-ratio:16/10;object-position:50% 35%}
}
/* Book now / View details row, services call-to-action, spa's own service names */
.com-spas__card-actions .btn{white-space:nowrap}
.com-spas__cta-row{margin:1rem 0 0}
.com-spas__service-alias{font-style:italic}

/* ---- Featured pill (text, so it is never confused with the star of the rating) ---- */
.com-spas .com-spas__featured{
  display:inline-block;margin:0 0 .4rem;padding:.2rem .65rem;border-radius:999px;
  background:var(--sp-deep);color:var(--sp-gold-l);font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;
}
/* ---- Official vs our price ---------------------------------------------- */
.com-spas .com-spas__price-old{margin-right:.45rem;color:var(--sp-muted);font-size:.9em;white-space:nowrap}
.com-spas .com-spas__price-old s{text-decoration-thickness:1px}
.com-spas .com-spas__price-now{color:var(--sp-deep);white-space:nowrap}
.com-spas .com-spas__save,.com-spas-card .com-spas__save{
  background:var(--sp-gold-l);color:var(--sp-deep);font-size:.72rem;font-weight:700;letter-spacing:.02em;vertical-align:.1em;margin-left:.35rem;
}
/* ---- "View all" link under the areas / services cards --------------------- */
.mod-spas-areas__all,.mod-spas-services__all{margin-top:1.25rem;text-align:center}
.mod-spas-areas__all .btn,.mod-spas-services__all .btn{border-radius:999px;padding:.5rem 1.6rem}
/* ---- Hub layouts (all services / all areas, with descriptions) -------------- */
.mod-spas-hub__heading{font-family:var(--sp-head);font-weight:400;color:var(--sp-deep);margin:0 0 1rem}
.mod-spas-hub__group{font-family:var(--sp-head);font-weight:400;font-size:1.4rem;color:var(--sp-deep);margin:2.25rem 0 1rem}
.mod-spas-hub__group::after{content:"";display:block;width:2.5rem;height:3px;margin-top:.55rem;background:var(--sp-gold);border-radius:2px}
.mod-spas-hub__section:first-of-type .mod-spas-hub__group{margin-top:.5rem}
.mod-spas-hub__item{
  display:flex;flex-direction:column;height:100%;padding:1.1rem 1.25rem;background:#fff;
  border:1px solid var(--sp-line);border-radius:var(--sp-radius);box-shadow:var(--sp-shadow);
}
.mod-spas-hub__top{display:flex;align-items:baseline;justify-content:space-between;gap:.75rem}
.mod-spas-hub__name{margin:0;font-family:var(--sp-head);font-weight:400;font-size:1.2rem;line-height:1.25}
.mod-spas-hub__name a{color:var(--sp-deep);text-decoration:none}
.mod-spas-hub__name a:hover,.mod-spas-hub__name a:focus-visible{color:var(--sp-teal)}
.mod-spas-hub__count{flex:none;padding:.12rem .6rem;border:1px solid var(--sp-line);border-radius:999px;background:var(--sp-cream);font-size:.74rem;font-weight:700;color:var(--sp-gold-text)}
.mod-spas-hub__text{margin:.6rem 0 0;color:var(--sp-muted);font-size:.92rem;line-height:1.55}
.mod-spas-hub__more{margin-top:auto;padding-top:.9rem}
.mod-spas-hub__more .btn{border-radius:999px}
.spa-dark .mod-spas-hub__heading,.spa-band .mod-spas-hub__heading,.spa-dark .mod-spas-hub__group,.spa-band .mod-spas-hub__group{color:var(--sp-cream)}
.spa-dark .mod-spas-hub__item,.spa-band .mod-spas-hub__item{background:rgba(var(--sp-deep2-rgb),.55);border-color:rgba(var(--sp-gold-l-rgb),.3);box-shadow:none}
.spa-dark .mod-spas-hub__name a,.spa-band .mod-spas-hub__name a{color:var(--sp-cream)}
.spa-dark .mod-spas-hub__text,.spa-band .mod-spas-hub__text{color:rgba(246,241,231,.78)}
.spa-dark .mod-spas-hub__count,.spa-band .mod-spas-hub__count{background:rgba(255,255,255,.06);border-color:rgba(var(--sp-gold-l-rgb),.3);color:var(--sp-gold-l)}

/* ---- Nearest BTS / MRT station -------------------------------------------- */
.com-spas .com-spas__station,.com-spas-card .com-spas__station{color:var(--sp-muted);line-height:1.35}
.com-spas .com-spas__hero-station{color:#fff;font-weight:700;font-size:.95rem;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.com-spas .com-spas__stations li{padding:.15rem 0}
.spa-dark .com-spas-card .com-spas__station,.spa-band .com-spas-card .com-spas__station{color:rgba(246,241,231,.78)}
/* ---- Service page: price table + packages ---------------------------------- */
.com-spas .com-spas__price-table th{font-size:.8rem;font-weight:600;color:var(--sp-muted);white-space:nowrap}
.com-spas .com-spas__price-table .com-spas__pt-group th{background:var(--sp-cream);color:var(--sp-deep);font-size:.9rem;border-top:2px solid var(--sp-line)}
.com-spas .com-spas__package{border-color:var(--sp-line);color:var(--sp-ink);transition:border-color .15s,box-shadow .15s}
.com-spas .com-spas__package:hover{border-color:var(--sp-teal);box-shadow:var(--sp-shadow)}
.com-spas .com-spas__package .card-title{color:var(--sp-deep)}
.com-spas .com-spas__package-price strong{color:var(--sp-deep)}
.com-spas .com-spas__package-delta{color:var(--sp-gold-text);font-weight:600}
.com-spas .com-spas__inclusion{font-weight:500;background:var(--sp-cream);color:var(--sp-deep);border:1px solid var(--sp-line)}
.com-spas .com-spas__inclusion .fa-check{color:var(--sp-teal);font-size:.8em;margin-right:.15rem}

/* ---- Treatment guide ------------------------------------------------------- */
.com-spas__guide{margin:1.25rem 0}
.com-spas__guide .spas-guide__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:1rem}
.com-spas__guide .spas-guide__chips{display:flex;flex-wrap:wrap;gap:.4rem}
.com-spas__guide .spas-guide__chip{border:1px solid var(--sp-line);background:var(--sp-cream);color:var(--sp-deep);border-radius:999px;padding:.25rem .8rem;font-size:.85rem;font-weight:600}
.com-spas__guide button.spas-guide__chip{cursor:pointer}
.com-spas__guide button.spas-guide__chip:hover{border-color:var(--sp-teal)}
.com-spas__guide .spas-guide__q{font-size:1.25rem;margin:0 0 .35rem;color:var(--sp-deep)}
.com-spas__guide .spas-guide__q:focus{outline:none}
.com-spas__guide .spas-guide__hint{margin:0 0 .85rem}
.com-spas__guide .spas-guide__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.75rem}
.com-spas__guide .spas-guide__grid.is-compact{grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr))}
.com-spas__guide .spas-guide__opt{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;text-align:left;width:100%;padding:.9rem 1rem;border:1px solid var(--sp-line);border-radius:.75rem;background:#fff;color:var(--sp-ink);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.com-spas__guide .spas-guide__opt:hover,.com-spas__guide .spas-guide__opt:focus-visible{border-color:var(--sp-teal);box-shadow:var(--sp-shadow)}
.com-spas__guide .spas-guide__opt.is-package{background:var(--sp-cream)}
.com-spas__guide .spas-guide__opt.is-ghost{background:transparent;border-style:dashed;justify-content:center}
.com-spas__guide .spas-guide__opt-title{font-weight:700;color:var(--sp-deep)}
.com-spas__guide .spas-guide__opt-desc{font-size:.85rem;color:var(--sp-muted)}
.com-spas__guide .spas-guide__opt-add{font-size:.88rem;font-weight:600;color:var(--sp-teal)}
.com-spas__guide .spas-guide__opt-meta{font-size:.82rem;color:var(--sp-muted)}
.com-spas__guide .spas-guide__opt-delta{font-size:.82rem;font-weight:600;color:var(--sp-gold-text)}
.com-spas__guide .spas-guide__other-wrap{margin-top:.9rem;max-width:22rem}
.com-spas__guide .spas-guide__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1rem;margin-top:.75rem}
.com-spas__guide .spas-guide__card{display:flex;flex-direction:column;border:1px solid var(--sp-line);border-radius:.75rem;overflow:hidden;background:#fff}
.com-spas__guide .spas-guide__img{width:100%;aspect-ratio:16/9;object-fit:cover}
.com-spas__guide .spas-guide__card-body{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.com-spas__guide .spas-guide__card-title{font-size:1.05rem;margin:0;color:var(--sp-deep)}
.com-spas__guide .spas-guide__card-title a{text-decoration:none;color:inherit}
.com-spas__guide .spas-guide__sub,.com-spas__guide .spas-guide__desc,.com-spas__guide .spas-guide__price{margin:0}
.com-spas__guide .spas-guide__desc{font-size:.9rem}
.com-spas__guide .spas-guide__old{color:var(--sp-muted);margin-right:.2rem}
.com-spas__guide .spas-guide__now{color:var(--sp-deep);font-size:1.1rem}
.com-spas__guide .spas-guide__actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:.5rem}
.com-spas__guide .spas-guide__more{margin-top:1rem}
.com-spas__guide .spas-guide__none{padding:1rem;background:var(--sp-cream);border-radius:.5rem}
.com-spas__guide.is-spa{padding:1rem;border:1px solid var(--sp-line);border-radius:.75rem;background:#fff}
.com-spas-guide__toggle{margin:1rem 0}
.com-spas-guide__toggle summary{cursor:pointer;font-weight:600;color:var(--sp-teal)}
.com-spas .com-spas__svc-desc{margin-top:.25rem}
.com-spas .com-spas__svc-desc summary{cursor:pointer;color:var(--sp-teal);font-size:.85rem}
.com-spas .com-spas__svc-desc p{margin:.35rem 0 0;font-size:.9rem;color:var(--sp-ink)}
.com-spas__guide .spas-guide__group{font-size:.95rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--sp-muted);margin:1.4rem 0 .6rem;padding-bottom:.3rem;border-bottom:1px solid var(--sp-line)}
.com-spas__guide .spas-guide__group:first-of-type{margin-top:.6rem}
.com-spas__guide .spas-guide__group.is-popular-h{color:var(--sp-teal);border-bottom-color:var(--sp-teal)}
.com-spas__guide .spas-guide__group.is-popular-h::before{content:"★ ";}
.com-spas__guide .spas-guide__grid.is-popular{grid-template-columns:repeat(auto-fill,minmax(16rem,1fr))}
.com-spas__guide .spas-guide__opt.is-popular{border:2px solid var(--sp-teal);background:linear-gradient(180deg,#fff 0%,var(--sp-cream) 100%);box-shadow:0 2px 10px rgba(var(--sp-teal-rgb),.12)}
.com-spas__guide .spas-guide__opt.is-popular .spas-guide__opt-title{font-size:1.1rem}