/* Tsarsky Relax — страница программы v2 (пилот)
   Источник: Claude Design handoff, "Программа - мобайл", варианты 2a/3a/5a. */

.tsr-program {
	--tsr-pink: #E5197F;
	--tsr-pink-dark: #B01167;
	--tsr-pink-bg: #F6E7EE;
	--tsr-pink-border: rgba(229,25,127,.22);
	--tsr-text: #181818;
	--tsr-page-bg: #F1F1F1;
	--tsr-tile-bg: #E9E9E9;
	--tsr-segment-bg: #E4E4E4;
	--tsr-black: #1A1A1A;
	--tsr-black-deep: #0B0B0C;
	--tsr-card-black: #121214;
	--tsr-ph-bg: #E1E1E1;
	--tsr-radius-btn: 10px;
	--tsr-radius-pill: 100px;
	--tsr-radius-tile: 12px;
	--tsr-radius-card: 16px;
	--tsr-radius-block: 18px;
	font-family: 'Jost', system-ui, sans-serif;
	color: var(--tsr-text);
	background: var(--tsr-page-bg);
	max-width: 1440px;
	margin: 0 auto;
	padding: 28px 60px 0;
	box-sizing: border-box;
}
.tsr-program * { box-sizing: border-box; }
.tsr-program h1, .tsr-program h2 { font-family: 'Playfair Display', serif; font-weight: 500; margin: 0; }
.tsr-program p { text-wrap: pretty; }
.tsr-eyebrow, .tsr-eyebrow-pink {
	display: flex; align-items: center; gap: 10px;
	font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
	margin-bottom: 18px;
}
.tsr-eyebrow { color: rgba(24,24,24,.42); }
.tsr-eyebrow-pink { color: var(--tsr-pink-dark); }
.tsr-eyebrow::before, .tsr-eyebrow-pink::before {
	content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--tsr-pink); flex: none;
}

/* --- hero ---
   Hero has a fixed height, like the reference — the booking card is what
   adapts to match it (align-items:stretch on .tsr-layout), not the other way
   round. Card content is sized to actually fit inside that height (see the
   trimmed spacing below), rather than growing past it and dragging the hero
   along with it. */
.tsr-hero__media {
	position: relative; height: 460px; border-radius: 20px; overflow: hidden;
	background: var(--tsr-black-deep); color: #F1F1F1;
}
.tsr-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tsr-hero__scrim {
	position: absolute; left: 0; right: 0; top: 45%; bottom: 0;
	background: linear-gradient(180deg, rgba(11,11,12,0) 0%, rgba(11,11,12,.85) 60%, #0B0B0C 100%);
}
.tsr-hero__text { position: absolute; left: 28px; right: 28px; bottom: 26px; }
.tsr-hero__title { font-size: 52px; line-height: 1.04; letter-spacing: -.015em; margin-bottom: 10px; }
.tsr-hero__subtitle { font-size: 16px; line-height: 1.5; color: rgba(241,241,241,.65); max-width: 560px; }

/* --- generic placeholder --- */
.tsr-placeholder {
	background: var(--tsr-ph-bg);
	background-image: repeating-linear-gradient(135deg, rgba(24,24,24,.05) 0 2px, transparent 2px 9px);
	display: flex; align-items: center; justify-content: center;
	color: rgba(24,24,24,.35); font: 400 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .12em;
	width: 100%; height: 100%;
}

/* --- layout: hero + booking card share row 1 at equal height, everything else spans row 2 ---
   DOM order is hero, sidebar, content — that's also the correct mobile stacking
   order, so mobile just needs `display:flex; flex-direction:column`, no reordering.
   Desktop needs each piece pinned to its grid cell explicitly (not left to
   default auto-placement), since hero+sidebar sit side by side in row 1 while
   content alone spans both columns in row 2. `align-items: stretch` (the grid
   default) makes the card match the hero's height exactly, like the source
   design — no `position: sticky` here, the source design doesn't use it either,
   and it fought with the grid row and overlapped content below while scrolling. */
.tsr-layout { display: grid; grid-template-columns: 1fr 420px; gap: 36px 48px; align-items: stretch; }
.tsr-hero { grid-column: 1; grid-row: 1; }
.tsr-sidebar { grid-column: 2; grid-row: 1; }
.tsr-content { grid-column: 1 / -1; grid-row: 2; min-width: 0; }

/* --- badges: категория + количество мастеров, вверху карточки записи --- */
.tsr-badges { display: flex; gap: 8px; margin-bottom: 14px; }
.tsr-badge {
	font: 500 10.5px/1 Jost, sans-serif; letter-spacing: .16em; text-transform: uppercase;
	padding: 8px 13px; border-radius: var(--tsr-radius-pill);
}
.tsr-badge--fill { background: var(--tsr-pink); color: #fff; }
.tsr-badge--outline { border: 1px solid rgba(24,24,24,.18); color: rgba(24,24,24,.7); }

/* --- duration switcher --- */
.tsr-switcher { display: flex; gap: 8px; padding: 4px; border-radius: var(--tsr-radius-pill); background: var(--tsr-segment-bg); margin: 16px 0; }
.tsr-switcher--vertical { flex-direction: row; }
.tsr-switcher__btn {
	flex: 1; border: 0; background: transparent; cursor: pointer;
	border-radius: var(--tsr-radius-pill); padding: 10px 8px; text-align: left; font-family: Jost, sans-serif;
}
.tsr-switcher__btn.is-active { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.tsr-switcher__label { display: block; font-size: 13.5px; font-weight: 500; color: rgba(24,24,24,.55); white-space: nowrap; }
.tsr-switcher__price { display: block; font-size: 17px; font-weight: 600; margin-top: 4px; color: var(--tsr-text); white-space: nowrap; }
.tsr-switcher__relax { display: block; font-size: 12.5px; margin-top: 6px; color: var(--tsr-pink-dark); white-space: nowrap; }
.tsr-sidebar .tsr-switcher { background: transparent; padding: 0; gap: 8px; }
.tsr-sidebar .tsr-switcher__btn { border-radius: var(--tsr-radius-tile); border: 1px solid rgba(24,24,24,.12); padding: 12px 10px; }
.tsr-sidebar .tsr-switcher__btn.is-active { border-color: var(--tsr-pink); background: var(--tsr-pink-bg); }

/* --- info tiles ---
   .tsr-tiles делится 1fr/420px, как и .tsr-layout, но с тем же 14px отступом
   везде — три тайла выглядят одним равномерным рядом. Из-за этого край
   «Формата» уже не пиксель-в-пиксель под краем карточки записи (для этого
   пришлось бы растянуть зазор между Акцией и Форматом до 48px, а это ломает
   ровные интервалы между тайлами — выбрал ровные интервалы, они важнее).
   На мобайле .tsr-tiles__left становится прозрачной (display:contents),
   «Формат» переезжает внутрь тайла «Мастера» — см. медиа-запрос ниже. */
.tsr-tiles { display: grid; grid-template-columns: 1fr 420px; gap: 14px; margin: 30px 0; }
.tsr-tiles__left { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tsr-tile { padding: 16px 18px; border-radius: var(--tsr-radius-tile); background: var(--tsr-tile-bg); }
.tsr-tile__label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(24,24,24,.42); }
.tsr-tile__value { font-size: 17px; margin-top: 6px; }
.tsr-tile__note { font-size: 12px; margin-top: 4px; color: rgba(24,24,24,.5); }
.tsr-tile--format-nested { display: none; }
.tsr-tile--promo { position: relative; overflow: hidden; background: var(--tsr-pink-bg); border: 1px solid var(--tsr-pink-border); }
.tsr-tile--promo .tsr-tile__label { color: var(--tsr-pink-dark); }
.tsr-tile--promo__stamp {
	position: absolute; right: -14px; top: -14px; width: 96px;
	opacity: .55; transform: rotate(-8deg); pointer-events: none;
}

/* --- lead paragraph --- */
.tsr-lead { font-size: 17px; line-height: 1.65; color: rgba(24,24,24,.75); max-width: 760px; margin: 32px 0; }

/* --- what's included --- */
.tsr-included { margin: 32px 0; border-radius: var(--tsr-radius-block); background: var(--tsr-pink-bg); border: 1px solid var(--tsr-pink-border); padding: 30px 30px 32px; }
.tsr-included__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 34px; }
.tsr-included__list li { position: relative; padding-left: 17px; font-size: 16px; line-height: 1.45; }
.tsr-included__list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: rgba(229,25,127,.55); }

/* --- how the visit goes --- */
.tsr-visit { margin: 38px 0; }
.tsr-visit__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tsr-step { padding: 22px 20px; border-radius: 14px; background: #fff; border: 1px solid rgba(24,24,24,.07); }
.tsr-step__num { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(24,24,24,.2); font-size: 12px; color: rgba(24,24,24,.6); margin-bottom: 12px; }
.tsr-step__title { font-size: 16px; margin-bottom: 5px; }
.tsr-step__text { font-size: 14px; line-height: 1.5; color: rgba(24,24,24,.5); }

/* --- masters --- */
.tsr-masters { margin: 38px 0; }
.tsr-row-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.tsr-row-head .tsr-eyebrow { margin-bottom: 0; }
.tsr-row-head a { font-size: 14px; color: #C2185B; text-decoration: none; }
.tsr-masters__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.tsr-master-card { display: block; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(24,24,24,.08); text-decoration: none; color: var(--tsr-text); transition: border-color .15s; }
.tsr-master-card:hover { border-color: rgba(229,25,127,.4); }
.tsr-master-card__photo { aspect-ratio: 3/4; overflow: hidden; }
.tsr-master-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tsr-master-card__name { font-size: 17px; padding: 14px 16px 0; }
.tsr-master-card__link { font-size: 13px; color: #C2185B; padding: 4px 16px 16px; }

/* --- loyalty --- */
.tsr-loyalty { margin: 56px 0; border-radius: var(--tsr-radius-block); background: #fff; border: 1px solid rgba(24,24,24,.09); overflow: hidden; }
.tsr-loyalty__head { position: relative; overflow: hidden; padding: 34px 340px 28px 40px; border-bottom: 1px solid rgba(24,24,24,.08); }
.tsr-loyalty__head img {
	position: absolute; right: 0; top: 0; width: 340px; height: 100%; object-fit: cover; object-position: 50% 52%;
	-webkit-mask-image: linear-gradient(to left, #000 60%, transparent);
	mask-image: linear-gradient(to left, #000 60%, transparent);
}
.tsr-loyalty__badge { display: inline-block; font: 500 10.5px/1 Jost, sans-serif; letter-spacing: .18em; text-transform: uppercase; padding: 8px 14px; border-radius: var(--tsr-radius-pill); background: rgba(229,25,127,.1); color: #C2185B; margin-bottom: 16px; }
.tsr-loyalty__head h2 { font-size: 36px; line-height: 1.1; margin-bottom: 8px; }
.tsr-loyalty__head p { margin: 0; font-size: 16px; color: rgba(24,24,24,.5); }
.tsr-loyalty__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.tsr-loyalty__item { padding: 30px 26px 32px; border-right: 1px solid rgba(24,24,24,.08); }
.tsr-loyalty__item:last-child { border-right: 0; }
.tsr-loyalty__num { font-family: 'Playfair Display', serif; font-size: 34px; color: #C2185B; margin-bottom: 10px; }
.tsr-loyalty__title { font-size: 16px; margin-bottom: 8px; }
.tsr-loyalty__item p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(24,24,24,.5); }
.tsr-loyalty__foot { display: flex; align-items: center; justify-content: center; gap: 26px; padding: 20px 40px; background: #EDEDED; border-top: 1px solid rgba(24,24,24,.08); font-size: 15px; color: rgba(24,24,24,.55); }
.tsr-loyalty__foot a { color: #C2185B; text-decoration: none; }

/* --- booking (form section) --- */
.tsr-booking { scroll-margin-top: 20px; margin: 56px -60px 0; background: var(--tsr-black); color: #F1F1F1; padding: 52px 60px 54px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 60px; align-items: center; }
.tsr-booking h2 { font-size: 42px; line-height: 1.05; margin-bottom: 10px; color: #F1F1F1; }
.tsr-booking .tsr-eyebrow-pink { color: var(--tsr-pink); }
.tsr-booking__intro ul { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 16px; color: rgba(241,241,241,.7); }
.tsr-booking__intro li::before { content: '— '; color: var(--tsr-pink); }
.tsr-booking__summary { margin-top: 22px; font-size: 14px; color: rgba(241,241,241,.45); }

/* CF7 form styling inside the black booking block.
   CF7 (this version) doesn't wrap fields in <p>, and renders radio options as
   <span class="wpcf7-list-item"><input><span class="wpcf7-list-item-label">
   with no <label> at all — so both need real wrapper markup in the form
   template (.tsr-form-row / .tsr-seg-row) and styling target the actual
   rendered elements, not the ones a default CF7 template would produce. */
.tsr-booking .wpcf7-form-control-wrap { display: block; }
.tsr-booking .wpcf7 input[type=text],
.tsr-booking .wpcf7 input[type=tel] {
	width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(255,255,255,.16);
	color: #F1F1F1; font-family: Jost, sans-serif; font-size: 16px; padding: 14px 2px; outline: none;
}
.tsr-booking .wpcf7 input[type=text]:focus,
.tsr-booking .wpcf7 input[type=tel]:focus { border-bottom-color: var(--tsr-pink); }
.tsr-form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }

.tsr-seg-row { display: flex; align-items: center; gap: 18px; margin-top: 22px; flex-wrap: wrap; }
.tsr-seg-row__label { flex: none; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: rgba(241,241,241,.45); }
.tsr-seg, .tsr-seg-sub { display: flex; gap: 8px; flex: 1; max-width: 420px; flex-wrap: wrap; }
.tsr-seg .wpcf7-list-item, .tsr-seg-sub .wpcf7-list-item {
	position: relative; margin: 0; display: flex; align-items: center; justify-content: center;
	height: 42px; padding: 0 16px; border-radius: var(--tsr-radius-pill); border: 1px solid rgba(255,255,255,.16);
	font-size: 12.5px; cursor: pointer; color: rgba(241,241,241,.75);
}
.tsr-seg .wpcf7-list-item input, .tsr-seg-sub .wpcf7-list-item input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tsr-seg .wpcf7-list-item.tsr-checked, .tsr-seg-sub .wpcf7-list-item.tsr-checked { border-color: var(--tsr-pink); background: rgba(229,25,127,.16); color: #fff; }
.tsr-seg-sub { display: none; margin-top: 12px; }
.tsr-seg-sub.is-visible { display: flex; }

.tsr-form-submit-row { display: flex; align-items: center; gap: 24px; margin-top: 26px; flex-wrap: wrap; }
.tsr-form-consent { font-size: 13px; line-height: 1.5; color: rgba(241,241,241,.4); max-width: 260px; }
.tsr-form-consent a { color: rgba(241,241,241,.6); }

.tsr-booking .wpcf7-submit,
.tsr-btn-primary {
	display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 44px; border: 0;
	border-radius: var(--tsr-radius-pill); background: var(--tsr-pink); color: #fff; font-family: Jost, sans-serif;
	font-size: 12.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; text-decoration: none;
	white-space: nowrap; transition: background .15s;
	/* Браузер вешает на <input type=submit> свою тень (rgba(255,255,255,.8) 0 1px 0)
	   — наследие «выпуклых» системных кнопок. Под белым текстом она читается как
	   ореол, поэтому сбрасываем; ссылке .tsr-btn-primary это ничего не меняет. */
	text-shadow: none; -webkit-appearance: none; appearance: none;
}
/* Наведение затемняет, а не осветляет (--tsr-pink-dark — тот же тон, что у
   «Приобрести сертификат» и «Заказать звонок»), и цвет текста повторяется явно:
   у темы есть a:hover { color:#B6728A }, а он специфичнее одного класса и иначе
   перекрашивает белую надпись в блёклый розовый. Видно это не только под
   курсором — после клика по якорной ссылке hover залипает до движения мыши,
   и кнопка так и остаётся выцветшей. :focus/:active — по той же причине. */
.tsr-booking .wpcf7-submit:hover, .tsr-btn-primary:hover,
.tsr-booking .wpcf7-submit:focus, .tsr-btn-primary:focus,
.tsr-booking .wpcf7-submit:active, .tsr-btn-primary:active {
	background: var(--tsr-pink-dark); color: #fff;
}
.tsr-booking .wpcf7-form > p:last-of-type { margin-top: 26px; display: flex; align-items: center; }

/* --- other programs --- */
.tsr-others { margin: 56px 0 0; }
.tsr-others__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tsr-other-card { display: block; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(24,24,24,.07); text-decoration: none; color: var(--tsr-text); }
.tsr-other-card__photo { height: 170px; overflow: hidden; }
.tsr-other-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tsr-other-card__body { padding: 16px 18px 18px; }
.tsr-other-card__title { font-size: 17px; }
.tsr-other-card__price { font-size: 14px; color: rgba(24,24,24,.5); margin-top: 5px; }

/* --- telegram cta --- */
.tsr-telegram { margin: 56px 0 0; position: relative; overflow: hidden; border-radius: var(--tsr-radius-block); background: #fff; border: 2px solid var(--tsr-black); display: grid; grid-template-columns: 1.1fr .9fr; min-height: 300px; }
.tsr-telegram__body { padding: 44px 44px 46px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.tsr-telegram__body h2 { font-weight: 400; font-size: 40px; line-height: 1.1; margin-bottom: 16px; }
.tsr-telegram__body p { margin: 0 0 28px; font-size: 16px; line-height: 1.6; color: rgba(24,24,24,.55); max-width: 400px; }
.tsr-telegram__link { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: var(--tsr-radius-btn); background: #181818; color: #F1F1F1; text-decoration: none; font-size: 15px; }
.tsr-telegram__photo { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- SEO block --- */
.tsr-seo-block { margin: 56px 0 0; border-radius: var(--tsr-radius-card); background: var(--tsr-tile-bg); padding: 30px 34px 34px; }
.tsr-seo-block__content { font-size: 14px; line-height: 1.7; color: rgba(24,24,24,.55); }
.tsr-seo-block__content p:first-child { margin-top: 0; }

/* --- map ---
   Внутри .tsr-map__embed живёт виджет Яндекс-конструктора (тот же, что раньше
   стоял в футере). Конструктор рендерит iframe с зашитыми в URL размерами,
   поэтому распираем его до размеров контейнера явно. */
.tsr-map { position: relative; height: 340px; margin: 56px -60px 0; overflow: hidden; background: var(--tsr-ph-bg); }
.tsr-map__embed { position: absolute; inset: 0; }
.tsr-map__embed iframe,
.tsr-map__embed ymaps { width: 100% !important; height: 100% !important; border: 0; }
.tsr-map__card { position: absolute; z-index: 2; left: 60px; top: 50%; transform: translateY(-50%); width: 340px; padding: 24px 24px 26px; border-radius: var(--tsr-radius-card); background: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.12); }
.tsr-map__card h3 { font-size: 24px; margin-bottom: 10px; }
.tsr-map__card a { display: flex; align-items: center; justify-content: center; height: 48px; margin-top: 18px; border-radius: var(--tsr-radius-pill); background: var(--tsr-black); color: #fff; text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

/* --- footer (по референсу, заменяет светлый футер темы на этих страницах) ---
   Живёт вне .tsr-program (footer.php), поэтому переменные --tsr-* сюда не
   наследуются — значения только явные. */
/* Старый светлый футер темы (.tsr-f2) выводится и здесь — он нужен на мобильной
   ширине, где просили футер «как на главной». На десктопе показываем вместо него
   референсный тёмный .tsr-footer. */
.vs_footer_left.tsr-f2 { display: none; }

.tsr-footer { background: #1A1A1A; color: #F1F1F1; padding: 56px 60px 40px; font-family: 'Jost', system-ui, sans-serif; }
.tsr-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 40px; max-width: 1440px; margin: 0 auto; }
.tsr-footer__brand { font: 500 16px/1 Jost, sans-serif; letter-spacing: .34em; margin-bottom: 18px; }
.tsr-footer__about { font-size: 14px; line-height: 1.6; color: rgba(241,241,241,.5); max-width: 280px; }
.tsr-footer__title { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(241,241,241,.4); margin-bottom: 16px; }
.tsr-footer__list { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.tsr-footer__list a { color: #F1F1F1; text-decoration: none; }
.tsr-footer__list span { color: rgba(241,241,241,.6); }
.tsr-footer__list--muted a { color: rgba(241,241,241,.85); }
.tsr-footer__list a:hover, .tsr-footer__legal a:hover { text-decoration: underline; }
.tsr-footer__socials { display: flex; flex-direction: column; gap: 10px; }
.tsr-footer__socials a { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 100px; border: 1px solid rgba(255,255,255,.16); font-size: 14px; color: #F1F1F1; text-decoration: none; }
.tsr-footer__divider { height: 1px; background: rgba(255,255,255,.1); margin: 36px auto 20px; max-width: 1440px; }
.tsr-footer__legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(241,241,241,.42); max-width: 1440px; margin: 0 auto; }
.tsr-footer__legal-links { display: flex; gap: 24px; flex-wrap: wrap; }
.tsr-footer__legal a { color: rgba(241,241,241,.6); text-decoration: none; }

/* --- sidebar booking card --- */
.tsr-booking-card {
	height: 100%; box-sizing: border-box; display: flex; flex-direction: column;
	background: #fff; border: 1px solid rgba(24,24,24,.09); border-radius: 20px;
	box-shadow: 0 6px 26px rgba(0,0,0,.07); padding: 22px 22px 20px;
}
.tsr-booking-card .tsr-eyebrow { margin-bottom: 10px; }
.tsr-booking-card__total { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 0 12px; padding-top: 12px; border-top: 1px solid rgba(24,24,24,.08); }
.tsr-booking-card__total-label { font-size: 14px; color: rgba(24,24,24,.5); }
.tsr-booking-card__total-price { font-family: 'Playfair Display', serif; font-size: 30px; }
/* пустое пространство карточки уходит сюда, кнопки всегда прижаты к низу */
.tsr-booking-card__spacer { flex: 1; min-height: 12px; }
.tsr-booking-card .tsr-btn-primary { width: 100%; margin-bottom: 8px; }
.tsr-btn-outline { display: flex; align-items: center; justify-content: center; height: 50px; border-radius: var(--tsr-radius-pill); border: 1px solid rgba(24,24,24,.16); color: var(--tsr-black); text-decoration: none; font-size: 16px; }

/* =========================== MOBILE =========================== */
@media (max-width: 900px) {
	.tsr-program { padding: 16px 16px 0; }
	.tsr-hero__media { min-height: 360px; border-radius: 18px; }
	.tsr-hero__img { height: 360px; }
	.tsr-hero__title { font-size: 28px; }

	/* DOM order is hero, sidebar, content — already the right mobile stacking
	   order (hero, then duration/price card, then everything else, like 2a),
	   so a plain flex column with no reordering is enough here. */
	.tsr-layout { display: flex; flex-direction: column; gap: 0; }
	.tsr-sidebar { position: static; margin: 18px 0 0; }
	.tsr-booking-card { box-shadow: none; border-radius: 18px; }
	.tsr-booking-card .tsr-btn-primary { padding: 0 20px; font-size: 11.5px; letter-spacing: .1em; }

	/* «Формат» переезжает внутрь тайла «Мастера» на мобайле — своей плашки не нужно */
	.tsr-tiles { grid-template-columns: 1fr 1fr; }
	.tsr-tiles__left { display: contents; }
	.tsr-tile--format-standalone { display: none; }
	.tsr-tile--format-nested {
		display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(24,24,24,.08);
	}
	.tsr-tile--format-nested .tsr-tile__value { font-size: 14px; }
	.tsr-lead { font-size: 14.5px; }
	.tsr-included { padding: 20px 18px 22px; }
	.tsr-included__list { grid-template-columns: 1fr; }
	.tsr-visit__grid { grid-template-columns: 1fr; }
	.tsr-masters__grid { grid-template-columns: repeat(2, 1fr); }
	.tsr-loyalty { margin: 30px 0; }
	/* на мобайле фото уходит вниз обычным блоком на всю ширину, не в маску справа */
	.tsr-loyalty__head { padding: 20px 18px 16px; }
	.tsr-loyalty__head h2 { font-size: 24px; }
	.tsr-loyalty__head img {
		position: static; display: block; width: 100%; height: 130px; margin-top: 14px;
		border-radius: 10px; -webkit-mask-image: none; mask-image: none;
	}
	.tsr-loyalty__grid { grid-template-columns: 1fr; }
	.tsr-loyalty__item { border-right: 0; border-bottom: 1px solid rgba(24,24,24,.08); }
	.tsr-booking { margin: 30px -16px 0; padding: 24px 18px 22px; grid-template-columns: 1fr; border-radius: 18px; gap: 20px; }
	.tsr-booking h2 { font-size: 26px; }
	/* тезисы: плотнее между собой и меньше воздуха до/после */
	.tsr-booking__intro ul { margin-top: 16px; gap: 8px; }
	.tsr-booking__summary { margin-top: 14px; }
	.tsr-form-row { grid-template-columns: 1fr; gap: 2px; }

	/* «Как связаться» уходит над кнопками, сами кнопки — жёстко одной строкой:
	   flex:1 + nowrap + суженные паддинги, чтобы «Мессенджер» влезал на 360px. */
	.tsr-seg-row { flex-direction: column; align-items: stretch; gap: 10px; }
	.tsr-seg-row__label { order: -1; }
	.tsr-seg, .tsr-seg-sub { max-width: none; flex-wrap: nowrap; gap: 6px; }
	.tsr-seg .wpcf7-list-item, .tsr-seg-sub .wpcf7-list-item {
		flex: 1; min-width: 0; padding: 0 6px; font-size: 11.5px; white-space: nowrap;
	}

	.tsr-form-submit-row { flex-direction: column; align-items: center; gap: 14px; }
	.tsr-form-consent { text-align: center; max-width: none; }
	.tsr-others__grid { grid-template-columns: repeat(2, 1fr); }
	.tsr-telegram { grid-template-columns: 1fr; }
	.tsr-telegram__photo { order: -1; height: 220px; }
	.tsr-telegram__body { padding: 24px 20px; }
	.tsr-telegram__body h2 { font-size: 24px; }
	.tsr-telegram__link { align-self: center; }
	.tsr-seo-block { padding: 18px 16px 20px; }

	/* Карта во всю высоту, как на главной; от карточки оставляем только кнопку —
	   заголовок с адресом дублировал бы контакты, которые тут же ниже в футере. */
	.tsr-map { margin: 30px -16px 0; height: auto; overflow: visible; background: none; }
	.tsr-map__embed { position: static; height: 400px; }
	.tsr-map__card {
		position: static; transform: none; width: auto; margin: 12px 16px 0;
		padding: 0; background: none; box-shadow: none; border-radius: 0;
	}
	.tsr-map__card h3,
	.tsr-map__card > div { display: none; }
	.tsr-map__card a { margin-top: 0; }

	/* Футер на мобильной — светлый, как на главной; тёмный референсный прячем. */
	.tsr-footer { display: none; }
	.vs_footer_left.tsr-f2 { display: flex; }
}