/* SPA R7L: catalog visual refresh, non-invasive */
:root{--r7l-green:#22885c;--r7l-ink:#152b30;--r7l-muted:#65737c}
body{background:#f8faf9;color:var(--r7l-ink)}
.spa-main{max-width:1320px!important;margin:auto!important;padding:26px 22px 80px!important}
.spa-header{background:linear-gradient(115deg,rgba(21,57,46,.93),rgba(40,102,73,.76)),url('/img/spa/default.jpg') center/cover;border-radius:22px;color:#fff;padding:72px 42px 88px!important;margin:0 0 0!important;box-shadow:0 14px 40px rgba(12,54,36,.12)}
.spa-header-title{color:#fff!important;font-size:clamp(28px,3vw,46px)!important;line-height:1.2!important;margin:0 0 14px!important}
.spa-header-title i{color:#d4eddf!important}
.spa-header-sub{color:#e8f5ed!important;font-size:16px!important;max-width:690px;line-height:1.8!important}
.r7l-quick-links{display:flex;gap:12px;flex-wrap:wrap;margin:-22px 20px 32px;position:relative;z-index:1}
.r7l-quick-links span{background:white;border:1px solid #e3eee8;border-radius:999px;padding:11px 22px;box-shadow:0 6px 18px #1a553013;color:#277e57;font-weight:700;font-size:14px}
.spa-layout{gap:26px!important;align-items:start}
.spa-filter-card{border:1px solid #e4eee8!important;border-radius:18px!important;background:white!important;box-shadow:0 6px 24px #142f2110!important;padding:24px!important}
.spa-filter-card input,.spa-filter-card select{border-radius:10px!important;border:1px solid #dce6e0!important;min-height:44px!important}
.spa-toolbar{margin-bottom:20px!important}
.spa-card-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:20px!important}
.spa-card{overflow:hidden!important;border:1px solid #e6ece9!important;border-radius:16px!important;background:white!important;box-shadow:0 8px 24px #152f2410!important;transition:transform .2s,box-shadow .2s}
.spa-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px #152f2420!important}
.spa-card-img-wrap{display:block!important;aspect-ratio:1.65;overflow:hidden;background:#e9efeb}
.spa-card-img-wrap img{width:100%!important;height:100%!important;object-fit:cover!important;transition:transform .3s}
.spa-card:hover .spa-card-img-wrap img{transform:scale(1.045)}
.spa-card-body{padding:18px!important}
.spa-card-title{font-weight:800!important;font-size:17px!important}
.spa-card-title a{color:#182f34!important;text-decoration:none!important}
.spa-card-area{color:var(--r7l-muted)!important;font-size:13px!important;margin-top:7px}
.spa-card-rating{white-space:nowrap;font-size:13px!important}
.spa-card-tags{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 10px}
.spa-tag{border-radius:7px!important;padding:5px 9px!important;font-size:12px!important}
.spa-card-price{margin-top:12px!important;color:#238357!important;font-size:15px!important}
.spa-card-price strong{font-size:18px}.spa-card-price span{font-size:12px!important;color:#718079!important}
.spa-card-footer{padding:0 18px 18px!important}
.spa-card-footer .spa-btn{display:block;text-align:center;background:#fff!important;color:#208455!important;border:1px solid #54ae80!important;border-radius:10px!important;font-weight:700!important}
.spa-card-footer .spa-btn:hover,.spa-filter-actions .spa-btn-primary{background:#21875a!important;color:white!important}
@media(max-width:1100px){.spa-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:720px){.spa-main{padding:12px 14px 50px!important}.spa-header{padding:45px 24px 58px!important;border-radius:16px}.r7l-quick-links{margin:-18px 8px 22px;gap:7px}.r7l-quick-links span{padding:8px 11px;font-size:12px}.spa-layout{display:block!important}.spa-card-grid{grid-template-columns:repeat(1,minmax(0,1fr))!important}.spa-filter-card{margin-bottom:20px}.spa-toolbar{gap:12px}}

/* SPA R7L R6: structural hero, single SVG wave, no legacy overlay */
body { background-color: #f8faf9; }
.spa-main { margin-top: 36px !important; background: #f8faf9 !important; }
.spa-header.r7l-r6-hero {
  position: relative !important; isolation: isolate; overflow: hidden !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
  justify-content: center !important; box-sizing: border-box !important;
  min-height: 310px !important; margin: 0 0 28px !important;
  padding: 55px 35px 84px !important;
  border-radius: 20px 20px 0 0 !important;
  background: #183f32 !important; text-align: center !important;
}
.spa-header.r7l-r6-hero::before {
  content: ""; position: absolute; z-index: -2; inset: 0;
  background: url('/img/tourism/spa/spa-banner-r7l-r2.webp') center center / cover no-repeat;
}
.spa-header.r7l-r6-hero::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(90deg,rgba(17,54,41,.97) 0%,rgba(22,65,48,.86) 42%,rgba(18,54,40,.22) 100%);
}
.r7l-r6-hero-content { position: relative; z-index: 2; width: 100%; max-width: 1180px; }
.spa-header.r7l-r6-hero .spa-header-title {
  font-size: clamp(24px,2.5vw,36px) !important; line-height: 1.3 !important;
  max-width: 1150px !important; margin: 0 auto 14px !important;
  color: #fff !important; text-align: center !important;
}
.spa-header.r7l-r6-hero .spa-header-title i { color: #d8f0e3 !important; }
.spa-header.r7l-r6-hero .spa-header-sub {
  max-width: 900px !important; margin: 0 auto !important;
  color: #f2f9f5 !important; text-align: center !important;
}
.spa-header.r7l-r6-hero .r7l-quick-links {
  display: flex !important; justify-content: center !important; align-items: center !important;
  flex-wrap: wrap !important; gap: 12px !important;
  position: static !important; transform: none !important;
  margin: 26px 0 0 !important; padding: 0 !important; background: transparent !important;
}
.spa-header.r7l-r6-hero .r7l-quick-links span {
  display: inline-flex; align-items: center; position: static !important;
  padding: 10px 20px !important; border-radius: 999px !important;
  background: #fff !important; color: #24714f !important;
}
.spa-header.r7l-r6-hero .r7l-r6-wave {
  display: block !important; position: absolute !important; z-index: 3 !important;
  bottom: -1px !important; left: 0 !important; width: 100% !important;
  height: 76px !important; pointer-events: none !important;
}
.r7l-r6-wave-edge { fill: #e8dcb5; }
.r7l-r6-wave-fill { fill: #f8faf9; }
@media(max-width:720px) {
  .spa-main { margin-top: 18px !important; }
  .spa-header.r7l-r6-hero { min-height: 300px !important; padding: 45px 16px 74px !important; margin-bottom: 20px !important; }
  .spa-header.r7l-r6-hero .spa-header-title { font-size: clamp(23px,5.5vw,30px) !important; }
  .spa-header.r7l-r6-hero .r7l-quick-links { gap: 8px !important; margin-top: 22px !important; }
  .spa-header.r7l-r6-hero .r7l-quick-links span { padding: 8px 11px !important; font-size: 12px !important; }
  .spa-header.r7l-r6-hero .r7l-r6-wave { height: 48px !important; }
}

/* SPA R7L R7: wave/page background match — only the banner edge */
:root { --spa-r7l-page-bg: #f5f7f6; }
body:has(.spa-header.r7l-r6-hero) { background-color: var(--spa-r7l-page-bg) !important; }
.spa-main { background-color: var(--spa-r7l-page-bg) !important; }
.spa-header.r7l-r6-hero .r7l-r6-wave-fill { fill: var(--spa-r7l-page-bg) !important; }
.spa-header.r7l-r6-hero { background-color: var(--spa-r7l-page-bg) !important; }

/* SPA R7N R2R2 selector placement */
.spa-toolbar{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:10px 14px!important}
.spa-toolbar .spa-toolbar-count{margin-right:auto!important}
.spa-toolbar #spa-r7n-currency-switch{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important;margin:0!important;padding:0!important;position:static!important;z-index:auto!important;white-space:nowrap}
.spa-toolbar #spa-r7n-currency-select{min-width:105px!important;max-width:130px!important;padding:8px 10px!important}
.spa-toolbar .spa-sort{margin:0!important}
@media(max-width:640px){.spa-toolbar .spa-toolbar-count{flex-basis:100%!important}.spa-toolbar #spa-r7n-currency-switch{flex:1 1 auto!important;justify-content:flex-start!important}.spa-toolbar #spa-r7n-currency-switch span{display:none!important}.spa-toolbar .spa-sort{margin-left:auto!important}}
/* Keep the existing SVG curve and match the catalog page background */
.spa-main{background-color:#f5f7f6!important}
.spa-header.r7l-r6-hero .r7l-r6-wave-fill{fill:#f5f7f6!important}