/* letsfly — two views, one considered choice. */
.touch-catalog { --soft: #7e9670; --medium: #b69a5d; --strong: #b8735e; --zone-color: var(--medium); }
.touch-catalog[data-level="1"], .treatment[data-level="1"] { --zone-color: var(--soft); }
.touch-catalog[data-level="2"], .treatment[data-level="2"] { --zone-color: var(--medium); }
.touch-catalog[data-level="3"], .treatment[data-level="3"] { --zone-color: var(--strong); }
.touch-catalog[data-level="0"], .treatment[data-level="0"] { --zone-color: #82969a; }
.catalog-heading { grid-template-columns: 1.2fr 1fr; gap: 8%; }
.catalog-heading .body-copy { max-width: 420px; }
.category-tabs { display: flex; gap: clamp(20px, 3vw, 44px); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; scrollbar-color: #cbd3bf transparent; }
.category-tab { position: relative; flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 8px; min-height: 55px; padding: 12px 1px 17px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: .9375rem; }
.category-tab span { font-size: .625rem; color: #88907f; }
.category-tab::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--ink); transform: scaleX(0); transition: transform .2s; }
.category-tab[aria-selected="true"] { color: var(--ink); }
.category-tab[aria-selected="true"]::after { transform: scaleX(1); }
.category-tab:focus-visible { outline-offset: -4px; }
.catalog-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(28px, 5vw, 70px); padding-top: 30px; }
.catalog-menu { min-width: 0; }
.catalog-panel[hidden] { display: none; }
.category-description { min-height: 38px; margin-bottom: 6px; font-size: .8125rem; line-height: 1.6; color: var(--muted); }
.treatment { position: relative; border-bottom: 1px solid var(--line); scroll-margin-top: 130px; }
.treatment::before { content: ""; position: absolute; inset: 0 -14px; pointer-events: none; z-index: -1; border-radius: 3px; background: #edf0e7; opacity: 0; transition: opacity .2s; }
.treatment.is-preview::before { opacity: 1; }
.treatment-button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 13px; width: 100%; min-height: 122px; padding: 23px 0; text-align: left; border: 0; background: transparent; color: inherit; cursor: pointer; }
.treatment-button:focus-visible { outline-offset: 4px; }
.treatment-number { padding-top: 6px; font-size: .625rem; color: #87907d; }
.treatment-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.treatment-title { font: 400 clamp(1.25rem, 1.7vw, 1.6rem)/1.24 var(--serif); letter-spacing: -.025em; text-wrap: pretty; }
.treatment-summary { font-size: .8125rem; line-height: 1.55; color: var(--muted); }
.treatment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .6875rem; line-height: 1.5; color: #67745e; }
.meta-divider { color: #b4bdaa; }
.intensity-tag { display: inline-flex; align-items: center; gap: 6px; }
.mini-meter { display: inline-flex; align-items: end; height: 11px; gap: 2px; }
.mini-meter i { display: block; width: 3px; height: 5px; background: #dce0d4; border-radius: 1px; }
.mini-meter i:nth-child(2) { height: 8px; }
.mini-meter i:nth-child(3) { height: 11px; }
.mini-meter[data-level="1"] i:first-child, .mini-meter[data-level="2"] i:nth-child(-n+2), .mini-meter[data-level="3"] i { background: var(--zone-color); }
.mini-meter[data-level="0"] { display: none; }
.treatment-price { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; padding-top: 2px; font: 1.35rem/1.25 var(--serif); }
.treatment-price > span:first-child { font-size: .875rem; }
.selection-mark { font: .8125rem var(--sans); align-self: center; color: var(--zone-color); margin-left: 7px; opacity: 0; transform: translate(-4px, 4px); transition: opacity .2s, transform .2s; }
.is-preview .selection-mark { opacity: 1; transform: none; }
.offer-badge { display: inline-block; padding: 4px 6px; vertical-align: middle; border-radius: 2px; color: #7b673d; background: #ebe1c5; font: .5625rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.mobile-treatment-detail { display: none; }
.catalog-tip { display: flex; gap: 10px; margin-top: 23px; color: var(--muted); font-size: .6875rem; }
.catalog-tip > span { color: #8b9a77; font-size: 1rem; line-height: 1.1; }
.touch-map { position: sticky; top: 126px; min-width: 0; }
.map-figure-block { padding: 21px 24px 19px; background: #edf0e7; border: 1px solid #e0e6d6; border-radius: 5px; }
.map-heading { display: flex; justify-content: space-between; gap: 12px; font-size: .625rem; line-height: 1.5; letter-spacing: .045em; }
.map-heading > span:first-child { text-transform: uppercase; color: #69775e; }
.map-intensity { text-align: right; }
.map-intensity::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; background: var(--zone-color); vertical-align: 1px; }
.map-views { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 17px; }
.map-view { min-width: 0; margin: 0; text-align: center; }
.touch-body { display: block; width: 100%; height: 315px; overflow: hidden; transition: opacity .3s; }
.map-view + .map-view { border-left: 1px solid #d9e0cf; }
.map-view figcaption { font-size: .625rem; color: #6e7b63; margin-top: 7px; }
.map-view.no-active-zone .touch-body { opacity: .4; }
.map-zones { fill: var(--zone-color); opacity: .58; pointer-events: none; }
.touch-region { opacity: 0; transition: opacity .28s, fill .28s; }
.touch-region.is-lit { opacity: 1; }
.map-area { min-height: 3.1em; margin: 14px 0 12px; text-align: center; font-size: .6875rem; line-height: 1.55; color: #66735c; }
.intensity-legend { padding-top: 13px; border-top: 1px solid #d7dfcc; }
.legend-title { display: block; margin-bottom: 9px; font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: #717e64; }
.intensity-legend ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 12px; }
.intensity-legend li { font-size: .625rem; color: #6c7861; }
.intensity-legend li[data-level="1"] { --swatch: var(--soft); }
.intensity-legend li[data-level="2"] { --swatch: var(--medium); }
.intensity-legend li[data-level="3"] { --swatch: var(--strong); }
.legend-swatch { position: relative; display: block; height: 3px; border-radius: 1px; margin-bottom: 6px; background: var(--swatch); opacity: .65; }
.is-active .legend-swatch { opacity: 1; }
.is-active .legend-swatch::after { content: ""; position: absolute; width: 7px; height: 7px; right: -1px; top: -2px; border-radius: 50%; background: var(--swatch); outline: 2px solid #edf0e7; }
.intensity-legend li.is-active { color: var(--ink); font-weight: 600; }
.map-details { display: grid; padding: 22px 3px 0; }
/* Measure every description in the same grid cell; only the active copy is visible. */
.map-details > *, .map-details-sizer > * { grid-area: 1 / 1; min-width: 0; }
.map-details-sizer { display: grid; visibility: hidden; pointer-events: none; }
.detail-meta { display: flex; gap: 15px; margin-bottom: 8px; font-size: .625rem; color: #7b886e; text-transform: uppercase; letter-spacing: .075em; }
.detail-meta span + span::before { content: " / "; margin-right: 15px; color: #adb5a1; }
.map-details h2 { font-size: 1.8rem; line-height: 1.2; margin-bottom: 12px; }
.map-details-content > p { font-size: .8125rem; color: var(--muted); line-height: 1.75; }
.feel-card { margin-top: 16px; padding-left: 13px; border-left: 2px solid var(--zone-color); }
.feel-label { display: block; margin-bottom: 4px; color: #7b886e; font-size: .5625rem; letter-spacing: .075em; text-transform: uppercase; }
.feel-card p { color: #65725c; font-size: .75rem; line-height: 1.65; }
.intensity-notice { max-width: 680px; margin-top: 34px; color: var(--muted); font-size: .75rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.catalog-nojs { margin-top: 30px; }
.nojs-catalog h2 { font-size: 2rem; margin-top: 26px; }
.nojs-catalog li { margin-block: 20px; }
.nojs-catalog p { font-size: .875rem; }
@media (min-width: 701px) {
  /* Keep the longest category in the layout without exposing hidden controls. */
  .catalog-menu { display: grid; }
  .catalog-panel { grid-area: 1 / 1; min-width: 0; }
  .catalog-panel[hidden] { display: block; visibility: hidden; pointer-events: none; }
  .catalog-tip { grid-area: 2 / 1; }
}
@media (min-width: 1001px) and (max-height: 850px) { .touch-body { height: 265px; } .touch-map { top: 119px; } .map-details { padding-top: 16px; } }
@media (max-width: 1000px) and (min-width: 701px) {
  .catalog-shell { gap: 25px; grid-template-columns: 1.1fr 1fr; }
  .map-figure-block { padding: 16px; }
  .touch-body { height: 260px; }
  .treatment-button { gap: 9px; grid-template-columns: 17px minmax(0, 1fr) auto; }
  .selection-mark { display: none; }
  .map-heading { flex-direction: column; gap: 5px; }
  .map-intensity { text-align: left; }
  .intensity-legend ol { gap: 8px; }
  .intensity-legend li { font-size: .5625rem; }
}
@media (max-width: 850px) { .touch-map { top: 100px; } }
@media (max-width: 700px) {
  .catalog-heading .body-copy br { display: none; }
  .category-tabs { gap: 25px; }
  .category-tab { min-height: 50px; font-size: .875rem; }
  .catalog-shell { display: flex; flex-direction: column; gap: 18px; padding-top: 20px; }
  .catalog-menu { width: 100%; }
  .touch-map { display: contents; }
  .map-figure-block { position: sticky; top: 84px; z-index: 4; order: -1; width: 100%; padding: 13px 17px 12px; box-shadow: 0 7px 14px #3442380a; }
  .map-heading { font-size: .5625rem; gap: 10px; }
  .map-views { gap: 16px; margin-top: 9px; }
  .touch-body { height: 170px; }
  .map-view figcaption { margin-top: 3px; font-size: .5625rem; }
  .map-area { min-height: 0; margin: 8px 0; font-size: .625rem; }
  .intensity-legend { padding-top: 8px; }
  .legend-title { font-size: .5625rem; line-height: 1.5; margin-bottom: 7px; letter-spacing: .06em; }
  .intensity-legend ol { gap: 9px; }
  .intensity-legend li { font-size: .625rem; white-space: nowrap; }
  .legend-swatch { margin-bottom: 4px; }
  .map-details { display: none; }
  .category-description { min-height: 0; margin-bottom: 4px; font-size: .75rem; }
  .treatment { scroll-margin-top: 320px; }
  .treatment::before { inset-inline: -10px; }
  .treatment-button { min-height: 108px; padding-block: 20px; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; }
  .treatment-title { font-size: 1.4rem; }
  .treatment-summary { font-size: .75rem; }
  .treatment-meta { font-size: .625rem; }
  .treatment-price { font-size: 1.25rem; }
  .selection-mark { display: none; }
  .treatment.is-current::before { opacity: 1; }
  .mobile-treatment-detail { display: block; max-height: 0; opacity: 0; overflow: hidden; padding: 0 0 0 28px; font-size: .8125rem; line-height: 1.75; color: var(--muted); transition: max-height .32s ease, opacity .32s ease, padding .32s ease; }
  .is-current.is-revealed .mobile-treatment-detail { max-height: 500px; opacity: 1; padding: 0 0 21px 28px; }
  .mobile-feel { margin-top: 11px; padding-left: 10px; border-left: 2px solid var(--zone-color); }
  .mobile-treatment-detail > span { display: block; font-size: .625rem; margin-top: 10px; }
  .catalog-tip { margin-top: 20px; }
  .intensity-notice { margin-top: 25px; font-size: .6875rem; }
}
@media (max-width: 620px) { .map-figure-block { top: 78px; } }
@media (max-width: 360px) {
  .map-figure-block { padding-inline: 12px; }
  .map-heading { font-size: .5rem; }
  .treatment-title { font-size: 1.25rem; }
  .treatment-button { grid-template-columns: 15px minmax(0, 1fr) auto; gap: 8px; }
  .intensity-legend ol { gap: 7px; }
  .intensity-legend li { font-size: .5625rem; }
}
@media (max-width: 700px) and (max-height: 650px) { .map-figure-block { position: static; } .treatment { scroll-margin-top: 100px; } }
@media (prefers-reduced-motion: reduce) { .touch-catalog * { transition: none; animation: none; } }
@media print { .touch-map { position: static; } .catalog-shell, .catalog-menu { display: block; } .catalog-panel[hidden] { display: block; visibility: visible; } .category-tabs, .catalog-tip { display: none; } .map-details { display: none; } .mobile-treatment-detail { display: block; } }