@font-face {
	font-family: 'Circe';
	src: local('Circe Light'), local('Circe-Light'),
		url('../fonts/Circe-Light.woff') format('woff'),
		url('../fonts/Circe-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'Circe';
	src: local('Circe Bold'), local('Circe-Bold'),
		url('../fonts/Circe-Bold.woff') format('woff'),
		url('../fonts/Circe-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

html {
	color: #000;
	font-size: 1rem;
	line-height: 1.3;
	-moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
	scroll-padding-top: 120px;
}

html:focus-within {
	scroll-behavior: smooth;
}
/*	Если делать фикс шапку через pos: sticky, то нужно задавать min-height 100vh.
	Высота нужна, если нам нужно на ПК прибить книзу footer с помощью flex для коротких стр. */
html, body {
	min-height: 100vh;
	-webkit-overflow-scrolling: touch;
}

main {
	flex: 1;
}

::-moz-selection {
	color: #fff;
	background: #555;
	text-shadow: none;
}

::selection {
	color: #fff;
	background: #555;
	text-shadow: none;
}

:lang(en) {
	quotes: "“" "”";
}

:lang(ru) {
	quotes: "«" "»";
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #e5e5e5;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

textarea {
	resize: vertical;
}

input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: auto;
	display: none;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body, input, textarea {
	background-color: #fff;
	-webkit-text-size-adjust: none;
			text-size-adjust: none;
}

body {
	font-family: 'Circe', sans-serif;
	font-weight: 300;
}

@media (min-width: 768px) {
	body {
		font-size: 1.125rem;
	}
}

button, input, textarea {
	border: 0;
	border-radius: 0;
	background-color: transparent;
}

button:not(:disabled),
label,
[role="button"],
[role="link"],
[class*="btn"]:not(.btns-group) {
	cursor: pointer;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

input,
textarea,
button,
button:focus {
	font-family: inherit;
-webkit-appearance: none;
   -moz-appearance: none;
	    appearance: none;
	       outline: none;
}
	
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width:576px) { 
	select,
	textarea,
	input {
		font-size: 16px !important;
	}
}

:invalid {
	box-shadow: none;
}

select {outline: none;}

[class*="container-"], .mx-n20, .scroller {
	--bs-gutter-x: 2rem;
}

h1,
.h1 {
	font-size: 2.5rem;
	line-height: 1.1;
}

h2,
.h2 {
	font-size: 1.625rem;
	line-height: 1.1;
}

h3,
.h3 {
	font-size: 1.25rem;
}

@media (min-width: 576px) {
	h1,
	.h1	{
		font-size: 2.5rem;
	}
	h2,
	.h2 {
		font-size: 1.75rem;
	}
}

@media (min-width: 992px) {
	h1,
	.h1 {
		font-size: 3rem;
	}
	h2,
	.h2 {
		font-size: 2.25rem;
	}
	h3,
	.h3 {
		font-size: 1.375rem;
	}
}

.small, small {
	font-size: 80%;
}

a, img, button, input, textarea, svg, [class*="btn"], [role="link"], .p-link, .o-hover, .dropdown-menu, .dropdown-ico, .dropdown-item, .block-radio {
 -webkit-transition: all .15s ease;
         transition: all .15s ease;
}

a {
	color: inherit;
	text-decoration: none;
	text-underline-offset: .2em;
	text-decoration-thickness: 1px;
}

.scroller {
	overflow-x: scroll;
	overflow-y: hidden;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

@media (min-width: 576px) {
	.scroller-sm {
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
}

@media (min-width: 768px) {
	.scroller-md {
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
}

[class*="scroller"]::-webkit-scrollbar {
	display: none;
}

.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}

.p-link {
	color: inherit;
	cursor: pointer;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: .25em;
	text-decoration-thickness: 1px;
}

.u-line {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

.no-u-line {
	text-decoration: none;
}

.stretched-link:before {
	content:'';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
}

.hr-dashed {
	border-top: 1px dashed #d1d1d1;
}

[class*="border"] {
	--border-color: #717171;
}

.border,
.border-y,
.border-top {
	border-top: 1px solid var(--border-color);
}

.border,
.border-y,
.border-bottom {
	border-bottom: 1px solid var(--border-color);
}

.border,
.border-x,
.border-left {
	border-left: 1px solid var(--border-color);
}

.border,
.border-x,
.border-right {
	border-right: 1px solid var(--border-color);
}

.radius-1 {
	border-radius: 8px;
}

.radius-2 {
	border-radius: 16px;
}

.object-fit {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.gap-10 {
	gap: .625rem;
}

.gap-20 {
	gap: 1.25rem;
}

.gap-30 {
	gap: 1.875rem;
}

.gap-40 {
	gap: 2.5rem;
}

.gap-50 {
	gap: 3.125rem;
}

.c-black {
	color: #000;
}

.c-white {
	color: #fff;
}

.c-gray {
	color: #555;
}

.c-gray-2 {
	color: #959595;
}

.c-gray-dark {
	color: #5b5b5b;
}

.c-green {
	color: #196466;
}

.c-pink {
	color: #991f3c;
}

.c-orange {
	color: #e58d4d;
}

.bg-black {
	background-color: #161616;
}

.bg-white {
	background-color: #fff;
}

.bg-gray {
	background-color: #f9f9f9;
}

.bg-gray-2 {
	background-color: #f2f2f2;
}

.bg-pink {
	background-color: #fff4f4;
}

.bg-lilac {
	background-color: #fcf1ff;
}

.bg-gold {
	background-color: #ffe588;
}

.bg-gradient-pink {
	background: linear-gradient(180deg, #f7e7fd 0%, #fff4ed 100%);
}

.bg-gradient-pink-2 {
	background: linear-gradient(160deg, #f7e7fd 0%, #fff4ed 100%);
}

.font-accent {
	font-weight: 500;
}

.font-2 {
	font-family: "Cormorant Garamond", serif;
	font-optical-sizing: auto;
	font-weight: 500;
}

.fs-12 {
	font-size: 12px;
}

.fs-13 {
	font-size: 13px;
}

.fs-14 {
	font-size: 14px;
}

.fs-16,
.fs-16-18 {
	font-size: 16px;
}

.fs-18 {
	font-size: 18px;
}

.fs-20,
.fs-20-24 {
	font-size: 20px;
}

.fs-22 {
	font-size: 22px;
}

.fs-24 {
	font-size: 24px;
}

.fs-26 {
	font-size: 26px;
}

.fs-28 {
	font-size: 28px;
}

.fs-30 {
	font-size: 30px;
}

@media (min-width: 768px) {
	.fs-16-18 {
		font-size: 18px;
	}
	
	.fs-20-24 {
		font-size: 24px;
	}
}

.fw-300 {
	font-weight: 300;
}

.fw-350 {
	font-weight: 350;
}

.fw-400 {
	font-weight: 400;
}

/* [new] 10px — отступ подписи под иллюстрацией на мобилке; на ≥992 перебивается mb-lg-3 */
.mb-10 {
	margin-bottom: 10px;
}

b,
strong,
.fw-700 {
	font-weight: bold;
}

.lh-1 {
	line-height: 1;
}

.lh-1_2 {
	line-height: 1.2;
}

.lh-1_5 {
	line-height: 1.5;
}

.lh-1_75 {
	line-height: 1.75;
}

.o-10 {
	opacity: .1;
}

.o-15 {
	opacity: .15;
}

.o-25 {
	opacity: .25;
}

.o-5 {
	opacity: .5;
}

.o-75 {
	opacity: .75;
}

.o-8 {
	opacity: .8;
}

@media (max-width: 575px) {
	.mx-n20 {
		margin-left: calc(-.5 * var(--bs-gutter-x));
		margin-right: calc(-.5 * var(--bs-gutter-x));
	}
	.tac-sm {
		text-align: center;
	}
}

@media (max-width: 768px) {
	.mx-md-n20 {
		margin-left: calc(-.5 * var(--bs-gutter-x));
		margin-right: calc(-.5 * var(--bs-gutter-x));
	}
	.tac-md {
		text-align: center;
	}
}

@media (max-width: 992px) {
	.tac-lg {
		text-align: center;
	}
}

.mh-360 {
	min-height: 360px;
}

.mw-360 {
	max-width: 360px;
}

.mw-440 {
	max-width: 440px;
}

.mw-540 {
	max-width: 540px;
}

.mw-600 {
	max-width: 600px;
}

.mw-800 {
	max-width: 800px;
}

/* кнопки */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--btn-color, #fff);
	background-color: var(--btn-bg, transparent);
	border: var(--btn-border-width) solid var(--btn-color, var(--btn-border-color));
	border-radius: var(--btn-border-radius, 6px);
	height: var(--btn-height);
	padding: var(--btn-padding-y, 0) var(--btn-padding-x, 0);
	white-space: nowrap;
	line-height: normal;
	z-index: 5;
	transition: color .15s ease-in-out,
				background-color .15s ease-in-out,
				border-color .15s ease-in-out,
				box-shadow .15s ease-in-out,
				opacity .15s ease-in-out;
}

.btn-disabled,
.btn:disabled {
	cursor: default;
	opacity: .5;
	pointer-events: none;
}

.btn-primary {
	--btn-height: 50px;
	--btn-bg: #196466;
	font-size: 20px;
}

.btn-blank {
	color: #aa7d68;
	border: 1px solid #d1d1d1;
	border-radius: 5px;
	padding: 4px 14px;
}

.btn-arrow {
	color: #aa7d68;
	background-color: #fff;
	border-radius: 6px;
	font-size: 14px;
	padding: 4px 16px;
}

.btn-arrow.active {
	color: #fff;
	background-color: #aa7d68;
	border-color: #aa7d68;
}

.btn-phone {
	--btn-color: #196466;
	--btn-border-width: 1px;
	--btn-height: 50px;
	font-size: 20px;
}

.link-arrow:after,
.btn-arrow:after {
	content: "";
	position: relative;
	display: inline-block;
	border-top: 2px solid;
	border-right: 2px solid;
	width: 8px;
	height: 8px;
	top: 3px;
	margin-left: 4px;
	transform: rotate(45deg) translateY(-50%);
}

.btn-fulltext {
	gap: 8px;
}

.btn-fulltext:after {
	content: "";
	display: inline-block;
	position: relative;
	border: solid;
	border-width: 0 2px 2px 0;
	padding: 3px;
	top: -3px;
	vertical-align: middle;
	transform: rotate(45deg);
	transition: all .15s ease .1s;
	transform-origin: center;
}

.btn-fulltext.active:after {
	transform: rotate(-135deg);
	top: 2px;
}

.btn-menu-more span {
	border-bottom: 1px dotted;
}

.btn-180 {
	min-width: 180px;
}

.btn-100,
.btn-m100 {
	width: 100%;
}

@media (min-width: 576px) {
	.btn-m100 {
		width: auto;
	}
}

@media (min-width: 768px) {
	.btn-arrow {
		font-size: 16px;
	}
}

@media (min-width: 992px) {
	.btn-primary,
	.btn-phone {
		--btn-height: 60px;
		font-size: 24px;
	}
}

/* hovers */
@media (any-hover: hover) {
	a:not(.btn):hover,
	a.c-green:hover,
	.c-green[role="button"]:hover {
		color: #000;
	}

	.c-green-hover:hover,
	a.c-green-hover:hover,
	a.c-white:hover {
		color: #aa7d68;
	}
	
	.o-hover:hover {
		opacity: .6;
	}

	/* [new] ховеры кнопок по макету (Ховер основная / второстепенная кнопка) */
	.btn-primary:hover {
		background-color: #369294;
	}

	.btn-primary:active,
	.btn-primary.active	{
		background-color: #369294;
	}

	.btn-phone:hover {
		--btn-color: #369294;
	}

	.btn-blank:hover {
		color: #fff;
		background-color: #aa7d68;
		border-color: #c8957e;
	}

	.btn-arrow:hover {
		color: #fff;
		background-color: #aa7d68;
		border-color: #aa7d68;
	}
}

/* форма */
::placeholder {
	color: #000;
}

.form .btn-check {
	--btn-color: #000;
	--btn-height: 50px;
	--btn-padding-x: 20px;
	--btn-border-radius: 30px;
	background-color: #fff;
	box-shadow: 2px 2px 8px 0 rgba(0,0,0, .1);
}

.form .btn-check:has(input:checked) {
	background-color: #f0ede9;
	box-shadow: inset 2px 2px 8px 0 rgba(0,0,0, .1);
}

.form-check {
	position: relative;
	display: block;
	padding-left: 1.25rem;
}

.form-check-inline {
	display: -ms-inline-flexbox;
	display: inline-flex;
	-ms-flex-align: center;
	align-items: center;
	padding-left: 0;
	margin-right: .75rem;
}

.form-check-input {
	padding: 0;
	margin: 0;
	opacity: 0;
	position: absolute;
	z-index: 100;
	width: 16px;
	height: 16px;
	border: none;
	left: 0;
	top: 7px;
-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
		transform: translateY(-50%);
}

.form-check-label .radio {
	display: inline-block;
	border: 1px solid #222;
	width: 16px;
	height: 16px;
	margin-right: 10px;
	border-radius: 50%;
-webkit-transform: translateY(15%);
	-ms-transform: translateY(15%);
		transform: translateY(15%);
}

.form-check-label [type='radio']:checked + span {
	-webkit-box-shadow: inset 0 0 0 4px #fff,inset 0 0 0 10px #222;
            box-shadow: inset 0 0 0 4px #fff,inset 0 0 0 10px #222;
}

.block-radio {
	border: 1px solid transparent;
}

.block-radio.selected {
	border-color: #222;
}

.block-radio:not(.selected) {
	opacity: .5;
}

.block-radio .radio-group {
	top: 0;
	left: -7px;
	bottom: 0;
	height: 14px;
	margin: auto;
}

.block-radio .radio {
	transform: none;
}

.form-check-label .checkbox {
	display: inline-block;
	border: 1px solid #222;
	width: 14px;
	height: 14px;
	margin-right: 10px;
-webkit-transform: translateY(15%);
	-ms-transform: translateY(15%);
		transform: translateY(15%);
}

.form-check-label [type='checkbox']:checked + span:after {
	content: "";
	position: absolute;
	display: block;
	width: 5px;
	height: 10px;
	border-bottom: 2px solid #222;
	border-right: 2px solid #222;
	top: 0;
	left: 4px;
-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
		transform: rotate(45deg);
}

.form-row {
	display: -ms-flexbox;
	display: flex;
-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -5px;
	margin-left: -5px;
}

.form-row > .col, 
.form-row > [class*="col-"] {
	padding-right: 5px;
	padding-left: 5px;
}

.form-group {
	margin-bottom: 1.5rem;
}

.form-control {
	display: block;
	width: 100%;
	padding: 5px;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	border-bottom: 1px solid #d9d9d9;
	
-webkit-transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
		transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-control:focus,
.form-group:focus-within .form-control,
.form-control.input-filled {
	box-shadow: 0 0 0 2px var(--input-focus);
	border-color: #999;
}

@media (min-width: 992px) {
	.form-control {
		font-size: 1.125rem;
	}
}

textarea.form-control {
    height: auto;
}

.search-input {
	display: block;
	width: 100%;
	padding: 1rem 2.75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	background: #fff url(../img/ico-search.svg) no-repeat 15px center;
	box-shadow: 0 0 0 1px #e5e5e5;
	border-radius: 8px;
	
-webkit-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
		transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

@media (max-width: 575px) {
	.search-input {
		padding: .8rem 6.25rem .8rem 2.75rem;
	}

	.search-input + .search-btn {
		position: absolute;
		top: 3px;
		bottom: 3px;
		right: 3px;
	}
	
	.search-btn .btn-primary {
		padding-left: 20px;
		padding-right: 20px;
	}
}

.form-inline {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-ms-flex-align: center;
	align-items: center;
}

.form-inline .form-group {
	display: -ms-flexbox;
	display: flex;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	-ms-flex-align: center;
	align-items: center;
	margin-bottom: 0;
}

.form-inline label {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-bottom: 0;
}

.form-inline .form-control {
	display: inline-block;
	width: auto;
	vertical-align: middle;
}

.form-control:focus + .placeholder,
/* .form-control:valid + .placeholder, */
.form-control.input-filled + .placeholder {
	top: -12px;
	font-size: 12px;
	opacity: .75;
}

.placeholder {
	position: absolute;
	left: 0;
	top: 7px;
	color: #888;
	pointer-events: none;
-webkit-transition: all .2s ease;
		transition: all .2s ease;
}

.input-error,
.input-error:focus,
.form-error .form-control:invalid{
	border-color: #ff3f28;
}

.error-msg {
	color: #ff3f28;
	font-size: 14px;
	line-height: 1;
	margin-top: 6px;
	animation: Hint_show .15s ease-in forwards;
}

@keyframes Hint_show {
	0% {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.ul-columns {
	margin: -5px 0;
}

.ul-columns li {
	padding: 5px 0;
}
	
@media (min-width: 576px) {
	.ul-columns {
		columns: 2
	}
}

@media (min-width: 768px) {
	.ul-columns {
		columns: 3
	}
}

@media (min-width: 992px) {
	.ul-columns {
		columns: 4
	}
}

/* ------------------------------------------------ */

/* Крошки */
.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.breadcrumb-item:not(:last-child):after {
	content: "/";
	color: #d9d9d9;
	padding-right: .5rem;
	padding-left: .5rem;
}

.breadcrumb-item:first-child {
	display: none;
}

.breadcrumb-item + .breadcrumb-item {
	display: flex;
}

/* -- Шапка -- */
.header {
	background-color: #fff;
	border-bottom: 1px solid #d9d9d9;
	position: sticky;
	top: 0;
	z-index: 10;
}

.header .header-inner {
	background-color: #fff;
	margin-left: calc(var(--bs-gutter-x) * -.5);
	margin-right: calc(var(--bs-gutter-x) * -.5);
	padding: 10px calc(var(--bs-gutter-x) * .5);
	position: relative;
	z-index: 10;
}

.header .header-menu .active {
	color: #000;
}

/* [new] Тёмная шапка (страница «2 Направление медицины» и др. — по классу .header-dark).
   Логотип и иконка телефона — отдельные светлые ассеты в разметке (logo-white.svg, ico-phone-light.svg),
   т.к. многоцветный SVG нельзя перекрасить одним свойством. Остальные цвета — здесь */
.header-dark,
.header-dark .header-inner {
	background-color: #000;
}

.header-dark {
	border-bottom-color: rgba(255, 255, 255, .12);
}

/* полоски гамбургера (мобилка) — кремовые, как в макете */
.header-dark .header-hamburger span {
	background-color: #ffd39f;
}

/* разделители «|» и текст телефона лежат на чёрной полосе — делаем светлыми */
.header-dark .header-inner .c-gray {
	color: rgba(255, 255, 255, .5);
}

.header-dark .tar .c-pink {
	color: #fff;
}

@media (min-width: 992px) {
	/* меню кремовое только на десктопе: на мобилке оно раскрывается белой панелью,
	   там цвет ссылок остаётся штатным (зелёным) */
	.header-dark .header-menu a {
		color: #ffd39f;
	}

	.header-dark .header-menu .active,
	.header-dark .header-menu a.active {
		color: #fff;
	}
}

@media (any-hover: hover) {
	.header .logo:hover {
		opacity: .6;
	}

	.header .header-menu a:hover {
		text-decoration: underline;
	}
}

/* кнопка меню */
.header-hamburger {
	display: block;
	background-color: transparent;
	width: 20px;
	height: 20px;
	top: 0;
	bottom: 0;
	margin: auto;
}

.header-hamburger span {
	display: block;
	height: 3px;
	width: 100%;
	background-color: #196466;
	border-radius: 10px;
	position: absolute;
	left: 0;
	transition: all .2s ease-in-out;
}

.header-hamburger span:first-child {
	top: 2px;
}

.header-hamburger span:nth-child(2) {
	top: 9px;
	width: 70%;
}

.header-hamburger span:last-child {
	top: 16px;
}

.header-hamburger.open span:first-child {
-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	position: absolute;
	top: 10px;
}

.header-hamburger.open span:last-child {
-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	position: absolute;
	top: 10px;
}

.header-hamburger.open span:nth-child(2) {
	opacity: 0;
}

/* Фон-подложка под шапкой и частью контента */
.bg-header {
	background-color: #f3f3f6;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}

@media (max-width: 991px) {
	.header .header-bottom {
		position: absolute;
		background-color: #fff;
		/* border-top: 1px solid #e7e7e7; */
		max-height: calc(100vh - 72px);
		/* высота по содержимому: в макете 2740:11465 от текста до краёв панели 30 сверху и 40 снизу (у ссылок свои 8px) */
		padding-top: 22px;
		padding-bottom: 32px;
		overflow-y: auto;
		top: 100%;
		left: 0;
		right: 0;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		overscroll-behavior-y: contain;
		z-index: 555;
		
-webkit-overflow-scrolling: touch;
		transition: all .15s ease;
	}

	.open-menu {
		overflow: hidden;
		max-width: 100%;
		width: 100%;
	}

	.open-menu .header .header-bottom {
		opacity: 1;
		visibility: visible;
		pointer-events: all;
	}
	/* меню */
	.header .header-menu li.more > a span {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 47px;
		z-index: 100;
	}

	.header .header-menu li.more > a span:after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		right: 20px;
		bottom: 0;
		width: 7px;
		height: 7px;
		margin: auto;
		border: 2px solid;
		border-bottom: none;
		border-right: none;
		transform: rotate(135deg);
		transition: all .1s ease-in-out;
	}
	
	.header .header-menu li.more > a.active span:after {
		transform: rotate(45deg);
	}

	.header .header-bottom nav > ul > li a {
		display: block;
		padding-left: calc(var(--bs-gutter-x) * .5);
		padding-right: calc(var(--bs-gutter-x) * .5);
		text-align: right;
	}
	
	.header .header-menu > li > a {
		padding-top: 8px;
		padding-bottom: 8px;
	}
	
	.header .header-menu li.more > a {
		display: block;
		position: relative;
	}
	
	.header .header-menu li.more > ul {		
		display: block;
		max-height: 0;
		visibility: hidden;
		opacity: 0;
		transition: all .3s ease;
	}
	
	.header .header-menu li.more > ul.dn {
		background-color: #f5f5f5;
		border-bottom: 1px solid #e7e7e7;
		margin-top: -1px;
	}
	
	.header .header-menu li.more > ul.dn > li:first-child {
		padding-top: 7px;
	}
	
	.header .header-menu li.more > ul.dn > li:last-child {
		padding-bottom: 7px;
	}
	
	.header .header-menu li.more > ul.dn > li a {
		padding-top: 7px;
		padding-bottom: 7px;
	}
	
	.header .header-menu li.more > ul.dn ul {
		padding-left: 10px;
	}
	
	/* -- menu show -- */
	.header .header-menu li.more .active + ul {
		display: block;
		max-height: 100rem;
		visibility: visible;
		opacity: 1;
	}
	
	.header .header-menu li.more .active + ul.dn {
		margin-top: 0;
	}

	.menu-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0, .35);
		z-index: 2;
		visibility: hidden;
		opacity: 0;
	}
	
	.menu-overlay.show {
		visibility: visible;
		opacity: 1;
		transition: all .2s ease-in-out;
	}
}

@media (min-width: 992px) {
	main,
	body:not(.compensate-for-scrollbar) {
		overflow-x: hidden;
	}

	.bg-header {
		top: -100vh;
		left: -100%;
		right: -100%;
		/* bottom: -20px; */
	}
	
	.bg-header.bg-header-image {
		top: -100%;
	}
	
	.bg-header.bg-header-image {
		background: var(--bg-header-image) no-repeat center /cover;
		filter: brightness(.5);
	}

	.bg-header.bg-header-image + .page-header .breadcrumb-wrap,
	.bg-header.bg-header-image + .page-header .page-title,
	.bg-header.bg-header-image + .page-header .page-description {
		color: #fff;
	}

	.header .logo {
		transform: translateY(-1px);
	}

	.header .header-inner {
		padding-top: 20px;
		padding-bottom: 20px;
	}
}

/* -- Главная -- */
/* Слайдер на главной */
.main-slider {
	padding-top: 48px;
}

.main-slider .swiper-pagination-bullets {
	display: flex;
	justify-content: center;
	position: absolute;
	z-index: 9;
}

.main-slider .swiper-pagination-bullet {
	position: relative;
	--swiper-pagination-bullet-size: 22px;
	--swiper-pagination-bullet-horizontal-gap: 0;
	--swiper-pagination-bullet-inactive-opacity: 1;
	--swiper-pagination-bullet-inactive-color: transparent;
}

.main-slider .swiper-pagination-bullet-active {
	--swiper-pagination-color: transparent;
}

.main-slider .swiper-pagination-bullet:after {
	content: "";
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #d9d9d9;
	width: 9px;
	height: 9px;
	border: 2px solid transparent;
	opacity: 1;
	transition: all .15s ease;
}

.main-slider .swiper-pagination-bullet-active:after {
	background-color: transparent;
	border-color: #aa7d68;
	width: 12px;
	height: 12px;
}

.main-slider .offer-promotion {
	position: relative;
	z-index: 2;
}

.main-slider .offer-promotion .title {
	font-size: 40px;
	line-height: 1;
}

.main-slider .offer-promotion .price div:first-child {
	font-size: 28px;
}

.main-slider .offer-promotion .price div:last-child {
	font-size: 14px;
}

.main-slider .offer-promotion .price,
.main-slider .offer-promotion .btn-primary {
	padding: 20px;
}

.main-slider .offer-promotion .btn-primary {
	border-radius: 4px;
	line-height: 1;
}

.main-slider .offer-promotion .expires {
	color: #363636;
}

.main-slider .slide-image .leaf {
	z-index: 1;
}

.main-slider .slide-image .leaf-1 {
	/* width: 100px; */
	width: clamp(100px, 30%, 126px);
	bottom: 100px;
	left: -80px;
}

.main-slider .slide-image .leaf-2 {
	/* width: 135px; */
	width: clamp(135px, 40%, 282px);
	bottom: 0;
	left: 180px;
	margin: auto;
	right: 0;
}

.main-slider .slide-image .leaf-3 {
	/* width: 120px; */
	width: clamp(120px, 45%, 320px);
	top: 0;
	right: -50px;
}

@media (min-width: 576px) {
	.main-slider .swiper-pagination-bullets {
		--swiper-pagination-bottom: 20px;
	}

	.main-slider .offer-promotion .title {
		font-size: 48px;
	}
}

@media (min-width: 768px) {
	.main-slider .offer-promotion .title {
		font-size: 62px;
	}
	
	.main-slider .offer-promotion .text {
		font-size: 20px;
	}
	
	.main-slider .offer-promotion .price div:first-child {
		font-size: 42px;
		line-height: 1;
	}

	.main-slider .offer-promotion .price div:last-child {
		font-size: 18px;
	}

	.main-slider .slide-image .leaf-1 {
		bottom: 100px;
		left: -80px;
	}

	.main-slider .slide-image .leaf-2 {
		bottom: 0;
		left: 180px;
		margin: auto;
		right: 0;
	}

	.main-slider .slide-image .leaf-3 {
		top: 0;
		right: -100px;
	}
}

@media (min-width: 991px) {
	.main-slider {
		margin-top: -237px;
		padding-top: 337px;
		border-radius: 0 0 50% 50% / 0 0 7% 7%;
	}
	
	.main-slider .swiper-pagination-bullets {
		--swiper-pagination-bottom: 40px;
	}

	.main-slider .slide {
		padding-bottom: 100px;
	}

	.main-slider .slide-image {
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 1;
		user-select: none;
	}
	
	.main-slider .offer-promotion .title {
		max-width: 600px;
	}
}

@media (min-width: 1024px) {
	.main-slider .offer-promotion .title {
		font-size: 72px;
	}
}
/* /Слайдер на главной */

/* Описание и локация клиники */
.location-clinic p + p {
	margin-top: 16px;
}

.location-clinic .location-desc {
	top: 50%;
	left: 28%;
	right: 20%;
	transform: translateY(-45%);
}

/* глобальные [табы] */
.scroller.tabs {
	white-space: wrap;
}

.tab-pane + .tab-pane {
	display: none;
}

/* Направления услуг [табы] */
.clinic-services-tabs .tabs .tab-btn {
	color: #999;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
}

.clinic-services-tabs .tabs .tab-btn.active {
	background-color: #f7e7fd;
	border-radius: 10px 10px 0 0;
}

.clinic-services-tabs .tabs .tab-btn .tab-ico svg {
	width: 40px;
}

.clinic-services-tabs .tabs .tab-btn.active .tab-ico {
	color: #c594d8;
}

.clinic-services-tabs .tabs .tab-btn.active .tab-title {
	color: #000;
	font-weight: 700;
}

/* контент в табе */
.clinic-services-tabs .tab-pane {
	z-index: 1;
}

.clinic-services-tabs .tab-pane .title {
	font-size: 36px;
	line-height: 1;
}

.clinic-services-tabs .tab-pane .subtitle {
	font-size: 22px;
	line-height: 1.2;
}

.clinic-services-tabs .tab-pane .tab-image {
	right: 0;
	bottom: 0;
	z-index: -1;
	transform: translateX(40%);
}

@media (min-width: 768px) {
	.clinic-services-tabs .tabs-content {
		border-radius: 10px;
	}

	.clinic-services-tabs .tabs .tab-btn {
		font-size: inherit;
		gap: 10px;
	}
	.clinic-services-tabs .tabs .tab-btn .tab-ico svg {
		width: auto;
	}
	
	.clinic-services-tabs .tab-pane .title {
		font-size: 48px;
	}
	
	.clinic-services-tabs .tab-pane .subtitle {
		font-size: 28px;
	}
	
	.clinic-services-tabs .tab-pane .text {
		font-size: 20px;
	}
}

@media (min-width: 1024px) {
	.clinic-services-tabs .tab-pane .tab-image {
		transform: none;
	}
}

/* Фото клиники на главной [cлайдер] */
.clinic-photos .clinic-photos-slider .carousel__slide {
	--carousel-slide-width: 70%;
	padding-left: 5px;
	padding-right: 5px;
}

.clinic-photos .photo:after {
	content: "Увеличить";
	color: #826906;
	position: absolute;
	background: #fff url("../img/ico-plus.svg") no-repeat 10px center;
	border-radius: 50rem;
	padding: 10px 20px 8px 46px;
	width: max-content;
	height: max-content;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 2;
	visibility: hidden;
	opacity: 0;
	transform: scale(.9);
	transition: opacity .4s ease, transform .2s ease;
}

@media (any-hover: hover) {
	.clinic-photos .photo:hover img {
		filter: brightness(0.5);
	}

	.clinic-photos .photo:hover:after {
		transform: scale(1);
		visibility: visible;
		opacity: 1;
	}
}

@media (min-width: 576px) {
	.clinic-photos .clinic-photos-slider .carousel__slide {
		--carousel-slide-width: calc(100% / 2);
	}
}

@media (min-width: 768px) {
	.clinic-photos .clinic-photos-slider .carousel__slide {
		--carousel-slide-width: calc(100% / 3);
		padding-left: 10px;
		padding-right: 10px;
	}
}

@media (min-width: 992px) {
	.clinic-photos .clinic-photos-slider .carousel__slide {
		--carousel-slide-width: calc(100% / 5);
	}
}

/* Карта клиники на главной */
.clinic-map  {
	height: 100%;
	min-height: 300px;
	min-width: 350px;
}

@media (min-width: 768px) {
	.clinic-map  {
		min-height: 520px;
	}
}

@media (min-width: 992px) {
	.clinic-map  {
		min-height: 600px;
	}
}

/* Плитка спец. предложений [секция] */
.spec-offers-tile .offer-item .offer-title {
	font-size: 20px;
	line-height: 1.2;
}

.spec-offers-tile .offer-item .offer-price .price-new {
	font-size: 24px;
}

.price-old {
	text-decoration: line-through;
}

.spec-offers-tile .offer-item .badge-percent {
	display: inline-block;
	flex-shrink: 0;
	background-color: #ffedae;
	border-radius: 50rem;
	width: 28px;
	height: 28px;
	font-size: 14px;
	text-align: center;
	line-height: 30px;
}

.tooltip {
	background-color: #fff;
	box-shadow: 0 4px 9px 0 rgba(0,0,0, .13);
	max-width: 220px;
	padding: 10px 15px;
	display: none;
}

.tooltip[data-show] {
	display: block;
}

.arrow,
.arrow:before {
	position: absolute;
	width: 8px;
	height: 8px;
	background: inherit;
}

.arrow {
	visibility: hidden;
}

.arrow:before {
	content: "";
	visibility: visible;
	transform: rotate(45deg);
}

.tooltip[data-popper-placement^='top'] > .arrow {
	bottom: -4px;
}

.tooltip[data-popper-placement^='bottom'] > .arrow {
	top: -4px;
}

.tooltip[data-popper-placement^='left'] > .arrow {
	right: -4px;
}

.tooltip[data-popper-placement^='right'] > .arrow {
	left: -4px;
}

@media (any-hover: hover) {
	.spec-offers-tile .offer-item:hover {
		border-color: #e9c1af;
		box-shadow: 0px 4px 14px 0px rgba(170, 125, 104, 0.18);
		transition: border-color .15s ease, box-shadow .15s ease;
	}
}

@media (min-width: 768px) {
	.spec-offers-tile .offer-item .offer-title {
		font-size: 22px;
	}
	
	.spec-offers-tile .offer-item .offer-price .price-new {
		font-size: 26px;
	}
}

/* Баннер - бесплатная консультация [блок] */
.clinic-free-consult .title {
	font-size: 24px;
	line-height: 1.2;
}

.clinic-free-consult .bg-image {
	background: url(../img/free-consult-bg.png) no-repeat bottom / contain;
	background-size: 120%;
}

.clinic-free-consult .right {
	margin-top: 40%;
}

@media (min-width: 480px) {
	.clinic-free-consult .bg-image {
		background-size: contain;
	}
}

@media (min-width: 768px) {
	.clinic-free-consult .title {
		font-size: 28px;
	}
	
	.clinic-free-consult .desc {
		font-size: 20px;
	}
	
	.clinic-free-consult .bg-image {
		background-position: right;
	}
	
	.clinic-free-consult .right {
		margin-top: 0;
	}
}

/* Баннер - доктор консультация [секция] */
.clinic-doctor-consult {
	background-color: #f7efe6;
}

.clinic-doctor-consult .form .btns-group {
	gap: 20px;
}

@media (min-width: 992px) {
	.clinic-doctor-consult .form .btns-group {
		gap: 40px;
	}
}

@media (min-width: 1200px) {
	.clinic-doctor-consult .photo-wrap {
		margin-left: 140px;
	}
}

/* Отзывы о клинике [слайдер] */
.clinic-reviews .reviews-video-slider .carousel__slide {
	--carousel-slide-width: 70%;
}

.clinic-reviews .reviews-video-slider .carousel__nav {
	display: none;
}

/* Закругленный outline не работает в iOS сафари и хром (старый баг) */
/* .clinic-reviews .review-item { */
	/* border-radius: 50%; */
	/* outline: 4px solid rgba(255,255,255,.33); */
	/* outline-offset: -14px; */
/* } */

.clinic-reviews .reviews-video-slider .review-item:before {
	content: "";
	position: absolute;
	border-radius: 50%;
	border: 3px solid rgba(255,255,255,.33);
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	transition: border .15s;
}

.clinic-reviews .review-item .photo {
	border-radius: 50%;
}

.ico-play {
	color: #826906;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #fff;
	width: 70px;
	height: 70px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	inset: 0;
	margin: auto;
	transition: all .15s;
}

@media (any-hover: hover) {
	.video:hover .ico-play,
	.clinic-reviews .reviews-video-slider .review-item:hover .ico-play {
		background-color: #c34e95;
		box-shadow: 0px 4px 24px 0px #ffa0c2 inset;
	}
	
	.video:hover .ico-play svg,
	.clinic-reviews .reviews-video-slider .review-item:hover .ico-play svg {
		color: #fff;
	}
	
	.clinic-reviews .reviews-video-slider .review-item:hover:before {
		border-color: #c34e95;
	}
	
	.video:hover img {
		filter: brightness(.75);
	}
}

@media (min-width: 576px) {
	.clinic-reviews .reviews-video-slider .carousel__slide {
		--carousel-slide-width: 60%;
	}
	
	.ico-play {
		width: 90px;
		height: 90px;
	}
}

@media (min-width: 768px) {
	.clinic-reviews .reviews-video-slider .carousel__slide {
		--carousel-slide-width: calc(100% / 3);
	}
}

@media (min-width: 992px) {
	.clinic-reviews .reviews-video-slider .carousel__nav {
		display: block;
	}
	
	.clinic-reviews .reviews-video-slider .carousel__dots {
		display: none;
	}
}

/* Результаты работы [слайдер] */
.service-results .service-results-slider .result-photos img,
.service-results .service-results-slider .result-desc {
	border-radius: 10px;
}

.service-results .service-results-slider .result-badge {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	background-color: #363636;
	border-radius: 80px;
	font-size: 14px;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
}

.service-results .service-results-slider .result-badge:before {
	content: "\2194\FE0E"; /* \FE0E - убирает превращение стрелки "↔" в эмозди на мобилах */
	position: absolute;
	font-size: 20px;
	left: 50%;
	transform: translateX(-50%);
}

.service-results .service-results-slider .result-badge span {
	flex: 1;
	padding: 0 5px;
}

.service-results .service-results-slider .result-badge span:last-child {
	padding-left: 10px;
}

.service-results .service-results-slider .f-carousel__nav .f-button.is-next,
.service-results .service-results-slider .f-carousel__nav .f-button.is-prev {
	top: auto;
	transform: translateY(50%);
}

@media (max-width: 991px) {
	.service-results .service-results-slider .carousel__button.is-prev,
	.service-results .service-results-slider .carousel__button.is-next {
		top: auto;
		transform: translateY(50%);
	}
}

@media (min-width: 768px) {
	.service-results .service-results-slider .result-photos img,
	.service-results .service-results-slider .result-desc {
		border-radius: 40px;
	}
	
	.service-results .service-results-slider .result-badge {
		width: 180px;
		font-size: 18px;
		bottom: 45px;
	}
}

@media (min-width: 991px) {
	.service-results .service-results-slider .f-carousel__nav .f-button.is-next,
	.service-results .service-results-slider .f-carousel__nav .f-button.is-prev {
		display: none;
	}
}

/* Баннер - журнала/блога [блок] */
.banner-magazine .bg-image {
	/* background: url(../img/banner-magazine-bg.png) no-repeat right / contain; */
	background: url(../img/banner-magazine-bg2.png) no-repeat right -100px bottom -160px;
	background-size: 300px;
	height: 100%;
}

.banner-magazine .content {
	padding-bottom: 140px;
}

.clinic-banners [class*="col"] .banner-magazine .content {
	max-width: 360px;
}

.banner-magazine .content {
	max-width: 800px;
}

/* смещение на главной стр. */
.main-page.clinic-banners {
	position: relative;
	z-index: 1;
	margin-bottom: -80px;
}

@media (min-width: 576px) {
	.banner-magazine .bg-image {
		background-size: auto;
	}
	
	.banner-magazine .content {
		padding-bottom: 100px;
	}
}

@media (min-width: 768px) {	
	.banner-magazine .content {
		padding-bottom: 0;
	}
}

/* Баннер - узнать точную стоимость [блок] */
.banner-request .content {
	max-width: 600px;
	position: relative;
	z-index: 1;
}

.clinic-banners [class*="col"] .banner-request .content {
	max-width: 360px;
}

.banner-request .title {
	font-size: 32px;
	line-height: 1.2;
}

.banner-request .bg-image {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 77px;
	height: 77px;
	border-radius: 50%;
	right: -10px;
	transform: translate(10px, 15px) scale(.7);
}

/* круги */
.banner-request .bg-image .circle,
.banner-request .bg-image .circle:before,
.banner-request .bg-image .circle:after {
	position: absolute;
	border: 1px solid;
	border-radius: 50%;
}

.banner-request .bg-image .circle {
	--circle-size: 230px;
	width: var(--circle-size);
	height: var(--circle-size);
	border-color: rgba(255,255,255, .7)
}

.banner-request .bg-image .circle:before,
.banner-request .bg-image .circle:after {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.banner-request .bg-image .circle:before {
	--circle-size: 330px;
	content: "";
	width: var(--circle-size);
	height: var(--circle-size);
	border-color: rgba(255,255,255, .5)
}

.banner-request .bg-image .circle:after {
	--circle-size: 430px;
	content: "";
	width: var(--circle-size);
	height: var(--circle-size);
	border-color: rgba(255,255,255, .3)
}

@media (min-width: 576px) {
	.banner-request .bg-image {
		transform: none;
	}
}

@media (min-width: 768px) {
	.banner-request .title {
		font-size: 36px;
	}

	.clinic-banners [class*="col"] .banner-request .title {
		font-size: 26px;
	}
}

/* Баннер - промо услуг [блок] */
.banner-promo {
	z-index: 1;
}

.banner-promo .title {
	font-size: 26px;
	line-height: 1.2;
}

.banner-promo .bg-image {
	background: linear-gradient(270deg, #fafafa, transparent); /* убрать если не надо */
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	filter: blur(3px) contrast(.5) brightness(1.5);
	transition: filter 1s ease, opacity 1s ease;
}

.banner-promo .slide-content {
	opacity: 0;
	transform: translateX(100px);
	transition: opacity 1s ease, transform 1s cubic-bezier(0, 0, .2, 1);
}

.banner-promo.is-selected .slide-content {
	opacity: 1;
	transform: translateX(0);
}

@media (max-width: 575px) {
	.banner-promo .bg-image {
		filter: blur(3px) contrast(.5) brightness(1.5);
	}
}

@media (min-width: 576px) {
	.banner-promo .bg-image {
		opacity: 0;
	}

	.banner-promo.is-selected .bg-image {
		filter: none;
		opacity: 1;
	}
}

/* [слайдер] */
.promo-services-slider .carousel__dots {
	top: calc(100% - 3rem);
}

@media (min-width: 768px) {
	.banner-promo .title {
		font-size: 36px;
	}
	
	.banner-promo .text {
		font-size: 20px;
	}
}


/* Доктора клиники */
.clinic-doctors .doctor-item .photo {
	border-radius: 50%;
	max-width: 295px;
	width: 100%;
}

.clinic-doctors .doctors-slider .doctor-item .photo {
	outline: 3px solid transparent;
	outline-offset: -13px;
}

.clinic-doctors .doctor-item .spec {
	font-size: 14px;
}

/* [слайдер] */
.clinic-doctors .doctors-slider .carousel__slide {
	--carousel-slide-width: 70%;
}

.clinic-doctors .doctors-slider .carousel__nav {
	display: none;
}

.clinic-doctors .doctors-slider .carousel__button.is-prev,
.clinic-doctors .doctors-slider .carousel__button.is-next {
	transform: translateY(calc(-50% - 40px));
}

@media (any-hover: hover) {
	.clinic-doctors .doctors-slider .doctor-item:hover  {
		color: #c34e95;
	}

	.clinic-doctors .doctors-slider .doctor-item:hover .photo {
		outline-color: #c34e95; 
	}
}

@media (min-width: 576px) {
	.clinic-doctors .doctors-slider .carousel__slide {
		--carousel-slide-width: 60%;
	}
}

@media (min-width: 768px) {
	.clinic-doctors .doctors-slider .carousel__slide {
		--carousel-slide-width: calc(100% / 3);
	}
	
	.clinic-doctors .doctor-item .name {
	font-size: 18px;
	}

	.clinic-doctors .doctor-item .spec {
		font-size: 16px;
	}
}

@media (min-width: 992px) {
	.clinic-doctors .doctors-slider .carousel__nav {
		display: block;
	}
	
	.clinic-doctors .doctors-slider .carousel__dots {
		display: none;
	}

	.has-dots {
		margin-bottom: 0;
	}
}

/* Общие настройки слайдера (для докторов, видео-отзывов и т.п.) */
.carousel__slide {
	padding-top: 0;
	padding-bottom: 0;
}

.carousel__nav .carousel__button {
	--carousel-button-color: #fff;
	--carousel-button-bg: #c34e95;
	--carousel-button-width: 45px;
	--carousel-button-height: 45px;
	z-index: 2;
}

.carousel__nav .carousel__button svg {
	--carousel-button-svg-stroke-width: 2;
	--carousel-button-svg-width: auto;
	--carousel-button-svg-height: auto;
}

.f-carousel__nav .f-button svg {
	--f-button-svg-stroke-width: 2;
	--f-button-svg-width: auto;
	--f-button-svg-height: auto;
}

@media (any-hover: hover) {
	.carousel__nav .carousel__button:hover {
		color: #c34e95;
		background-color: #fff;
		border: 2px solid;
	}
}

.carousel__button.is-prev,
.is-horizontal .f-carousel__nav .f-button.is-prev {
	left: 0;
}

.carousel__button.is-next,
.is-horizontal .f-carousel__nav .f-button.is-next {
	right: 0;
}

.carousel__dots,
.f-carousel__dots {
	top: calc(100% + 2rem);
}

.carousel__dots .carousel__dot:after {
	background-color: #d9d9d9;
	width: 9px;
	height: 9px;
	border: 2px solid transparent;
	opacity: 1;
	transition: all .15s ease;
}

.carousel__dots .carousel__dot.is-selected:after,
.f-carousel__dots li.is-current .f-carousel__dot {
	background-color: transparent;
	border: 2px solid #aa7d68;
	width: 12px;
	height: 12px;
}

.f-carousel__dots {
	--f-carousel-dot-opacity: 1;
	--f-carousel-dot-color: #d9d9d9;
	--f-carousel-dot-width: 9px;
	--f-carousel-dot-height: 9px;
	--f-carousel-dots-width: 22px;
	--f-carousel-dots-height: 22px;
}

.carousel__nav .carousel__button {
	--carousel-button-color: #fff;
	--carousel-button-bg: #c34e95;
	--carousel-button-width: 45px;
	--carousel-button-height: 45px;
	z-index: 2;
}

.f-carousel__nav .f-button {
	--f-button-color: #fff;
	--f-button-bg: #c34e95;
	--f-button-active-bg: #c34e95;
	--f-button-width: 45px;
	--f-button-height: 45px;
	--f-button-border-radius: 50%;
}

@media (min-width: 768px) {
	.carousel__nav .carousel__button {
		--carousel-button-width: 65px;
		--carousel-button-height: 65px;
	}
}

@media (min-width: 1200px) {
	.carousel__button.is-prev {
		left: 35px;
	}

	.carousel__button.is-next {
		right: 35px;
	}
}

/* О клинике [секция] */

/* Приемущества клиники [секция] */
.clinic-benefits .benefits-item:before {
	content: url(../img/ico-benefits-marker.svg);
}

/* Приемущества процедуры [секция] */
.clinic-benefits-procedure .benefits-procedure-item .title {
	font-size: 20px;
	line-height: 1.2;
}

@media (min-width: 768px) {
	.clinic-benefits-procedure .benefits-procedure-item .title {
		font-size: 22px;
	}
	
	.clinic-benefits-procedure .benefits-procedure-item .desc {
		font-size: 18px;
	}
}

/* Табы услуг [секция] */
.clinic-promo-tabs .tabs .tab-btn {
	color: inherit;
	border-bottom: 1px solid #e5e5e5;
}

.clinic-promo-tabs .tabs .tab-btn.active {
	color: #aa7d68;
	border-color: #aa7d68;
}

.clinic-promo-tabs .tabs .tabs-inner {
	/* вариант подчеркивания без border у кнопки */
	/* box-shadow: inset 0px -1px 0 0 #e2e2e2; */
}

/* v2 */
.clinic-promo-tabs-v2 .tabs .tab-btn {
	color: inherit;
}

.clinic-promo-tabs-v2 .tabs .tab-btn.active {
	color: #aa7d68;
	background-color: #fff;
}

@media (min-width: 768px) {
	.clinic-promo-tabs-v2 .tabs .tab-btn {
		text-align: left;
	}
	
	.clinic-promo-tabs-v2 .tabs-content .ul-columns {
		columns: 2;
	}
}

@media (min-width: 992px) {
	.clinic-promo-tabs-v2 .tabs-content .ul-columns {
		columns: 3;
	}
}

/* плитка карточек услуг */
.services-tile .services-item {
	min-height: 275px;
	padding: 24px;
	position: relative;
	z-index: 1;
}

.services-tile .services-item .title {
	font-size: 22px;
}

.services-tile .services-item .links li {
	padding: 5px 0;
}

.services-tile .services-item .cover {
	top: 0;
	right: 0;
	bottom: 0;
	left: 50%;
	z-index: -1;
}

.services-tile .services-item .cover:before {
	content: "";
	position: absolute;
	background: linear-gradient(90deg, #F9F9F9 0%, rgba(249, 249, 249, 0) 100%);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
	
@media (min-width: 768px) {
	.page-description {
		font-size: 18px;
	}
	
	.services-tile .services-item .title {
		font-size: 26px;
	}
}

@media (min-width: 992px) {
	.services-tile .services-item {
		padding: 30px;
	}

	.services-tile .services-item .links-columns {
		columns: 2;
		max-width: 80%;
	}
}

@media (min-width: 1200px) {
	.services-tile .services-item .links-columns {
		max-width: 70%;
	}
}

/* -- Акции (стр. акции) -- */
.clinic-promo-price {
	background-color: #fff;
	box-shadow: 0 4px 4px 0 rgba(0,0,0, .05);
}

.clinic-promo-price .price-wrap {
	background-image: linear-gradient(to right, #999 50%, transparent 0%);
	background-position: bottom;
	background-size: 6px 1px;
	background-repeat: repeat-x;
}

.clinic-promo-price .price-wrap .price-sale {
	background-color: #ffe588;
	padding: 6px 10px 3px;
}

.clinic-promo-price .price-wrap .price-sale .badge-percent {
	display: inline-block;
	background-color: #fff;
	border-radius: 50rem;
	width: 28px;
	height: 28px;
	font-size: 14px;
	text-align: center;
	line-height: 30px;
}

.badge-discount {
	color: #fff;
	display: inline-block;
	background-color: #fb5ebd;
	border-radius: 50rem;
	font-size: 14px;
	line-height: 1;
	padding: 6px;
}

.clinic-promo-price .price-wrap .price-actual {
	font-size: 22px;
}

@media (min-width: 768px) {
	.clinic-promo-price .price-wrap .price-actual {
		font-size: 26px;
	}
}

/* Оформление текстового контента стр. и блога */
.section-py {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

.content-section .row {
	row-gap: 30px;
}

.content-section .content-unit .scroller {
	margin-right: calc(-.5 * var(--bs-gutter-x));
	padding-right: calc(.5 * var(--bs-gutter-x));
}

.content-section .price-table > div {
	padding: 10px 0;
}

.content-section .price-table > div:first-child {
	padding-top: 0;
}

.content-section .price-table > div:last-child {
	padding-bottom: 0;
}

.content-section .price-table > div + div {
	border-top: 1px solid #d9d9d9;
}

/* [new] 3.1.1 Статья — старая цена в таблице цен без зачёркивания — просто серым 14px */
.price-table .price-old {
	text-decoration: none;
}

.clinic-blog-page .page-author .ava-doc {
	border-radius: 50%;
	width: 60px;
}

.page-text h2 {
	position: relative;
	font-size: 1.625rem;
	margin-bottom: 30px;
}

.page-text h2 span {
	background-color: #fff;
	padding-right: 10px;
}

.page-text h2:has(span)::after {
	content: "";
	background-color: #000;
	height: 1px;
	position: absolute;
	left: 0;
	right: calc(var(--bs-gutter-x) * -.5);
	bottom: 10px;
	z-index: -1;
}

.page-text h3:not(:first-child) {
	font-size: 20px;
	line-height: 1.2;
	margin-top: 16px;
	margin-bottom: 5px;
}

.page-text h2:not(:first-child) {
	margin-top: 30px;
}

.page-text h2:not(:first-child) + h2,
.page-text h3 + h2:not(:first-child) {
	margin-top: 0;
}

.page-text p:not(:last-child),
.page-text ul:not(:last-child),
.page-text ol:not(:last-child),
.page-text img:not(:last-child) {
	margin-bottom: 16px;
}

.page-text li:not(:last-child) {
	margin-bottom: 10px;
}

.page-text p:empty {
	min-height: 0;
	margin: 0;
	padding: 0
}

.page-text li ul {
	margin-top: 16px;
}

.page-text:not(.sitemap) ul:not(.ul-styled-positive),
.page-text:not(.sitemap) ol {
	display: flow-root;
}

.page-text ul:not([class]) li {
	position: relative;
	font-size: .875rem;
	padding-left: 20px;
}

.page-text ul:not([class]) li:before {
	content: "";
	position: absolute;
	background-color: #196466;
	border-radius: 50%;
	width: 10px;
	height: 10px;
	left: 0;
	top: 5px; /* центр круга на 10px от верха строки — как в макете */
}

.page-text ol {
	counter-reset: myCounter;
}

.page-text ol li {
	position: relative;
	padding-left: 35px;
}

.page-text ol li:before {
	--marker-size: 25px;
	counter-increment: myCounter;
	content: counter(myCounter);
	position: absolute;
	background: linear-gradient(160deg, #efefef 0%, #efefef 100%);
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	line-height: var(--marker-size);
	text-align: center;
	width: var(--marker-size);
	height: var(--marker-size);
	left: 0;
	top: 0;
}

.page-text .ul-styled-positive > li {
	background-color: #f1f9f0;
	border-radius: 10px;
	position: relative;
	padding: 10px;
	padding-left: 46px;
}

.page-text .ul-styled-positive > li:before {
	position: absolute;
	content: url(../img/ico-check.svg);
	margin-left: -34px;
}

.page-text .ul-styled-negative > li {
	border-radius: 10px;
	padding-left: 35px;
}

.page-text .ul-styled-negative > li:before {
	position: absolute;
	content: url(../img/ico-cancel.svg);
	margin-left: -35px;
}

.page-text .ul-styled-steps {
	counter-reset: myCounter2;
}

.page-text .ul-styled-steps h3 {
	font-size: 22px;
	line-height: 1.2;
}

.page-text .ul-styled-steps h3:before {
	--marker-size: 42px;
	counter-increment: myCounter2;
	content: counter(myCounter2);
	display: block;
	background: linear-gradient(160deg, #f7e7fd 0%, #fff4ed 100%);
	border-radius: 50%;
	font-size: 14px;
	line-height: var(--marker-size);
	text-align: center;
	width: var(--marker-size);
	height: var(--marker-size);
	margin-bottom: 12px;
}

.page-text .ul-styled-steps > li {
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	padding: 24px 35px;
	margin-bottom: 24px;
}

.page-text .ul-styled-steps > li p {
	color: #8e8e8e;
	margin-top: 12px;
}

.page-text:not(.sitemap) p a {
	color: #991f3c;
	text-decoration: underline;
}

.page-text blockquote {
	position: relative;
	background: linear-gradient(180deg, #f7e7fd 0%, #fff4ed 100%);
	border-radius: 10px;
	font-size: 20px;
	text-align: center;
	padding: 40px 20px;
	margin: 24px 0;
}

.page-text blockquote:before {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 10px;
	right: 10px;
	border: 1px solid #fff;
	border-radius: 6px;
}

.page-text img {
	width: 100%;
}

@media (any-hover: hover) {
	.page-text:not(.sitemap) p a:hover {
		color: #000;
	}
}

@media (min-width: 768px) {	
	.page-text p,
	.page-text ul,
	.page-text ol {
		font-size: 18px;
	}
	
	.page-text ul:not([class]) li:before {
		top: 6px; /* по макету центр круга на 11px от верха строки 18/1.3; было 8px — буллит сидел на 2px ниже */
	}
	
	.page-text .ul-styled-steps h3 {
		display: flex;
		align-items: center;
		font-size: 24px;
		gap: 12px;
	}
	
	.page-text .ul-styled-steps h3:before {
		margin-bottom: 0;
	}
	
	.page-text blockquote {
		font-size: 24px;
	}
		
	.page-text img.fl,
	.page-text img.fr {
		width: 50%;
	}

	.page-text img.fr {
		margin-left: 40px;
	}

	.page-text img.fl {
		margin-right: 40px;
	}
	
	.clinic-blog-page .page-author .ava-doc {
		width: 90px;
	}
}

@media (min-width: 992px) {
	.section-py {
		padding-top: 3.125rem;
		padding-bottom: 3.125rem;
	}
	
	.content-section .row {
		row-gap: 40px;
	}
		
	.page-text h2 {
		font-size: 2.25rem;
	}
	
	.page-text h2 span {
		padding-right: 20px;
	}
	
	.page-text h2:has(span)::after {
		right: 0;
	}
	
	.page-text ul:not([class]) li {
		font-size: 1.125rem;
	}

	.page-text img.fl,
	.page-text img.fr {
		width: 40%;
	}
}

/* Отзывы текстовые [слайдер] + [колонки] */
.review-item .review-footer:before {
	content: "";
	display: block;
	border-top: 1px solid #e5e5e5;
	width: 65px;
	margin-bottom: 16px;
}

.reviews-text-tile .review-item + .review-item {
	margin-top: 16px;
}

.review-item .review-text {
	position: relative;
	min-height: 100px;
	max-height: 100px;
	overflow: hidden;
	transition: all .5s ease-out;
}

.review-item .review-text:after {
	content:"";
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	height: 40px;
	transition: all .35s ease .1s;
	background: linear-gradient(0deg, #fff 20%, rgba(255,255,255, 0));
}

.review-item .review-text.opened:after {
	opacity: 0;
	visibility: hidden;
}

.review-item .review-text.opened {
	max-height: 100vh;
}

.grid-col-2 {
	display: none;
}

@media (min-width: 768px) {
	.grid-col-2 {
		display: block;
	}
	
	.reviews-text-tile .review-item + .review-item {
		margin-top: 24px;
	}
}

/* слайдер */
.clinic-reviews .reviews-text-slider .carousel__slide {
	--carousel-slide-width: 100%;
	padding: 0;
	margin: 0 .75rem;
}

.clinic-reviews .reviews-text-slider .carousel__nav {
	display: none;
}

.reviews-text-slider .carousel__nav .carousel__button {
	--carousel-button-width: 55px;
	--carousel-button-height: 55px;
}

@media (min-width: 768px) {
	.clinic-reviews .reviews-text-slider .carousel__slide {
		--carousel-slide-width: 70%;
	}
	
	.reviews-text-slider .carousel__viewport:before,
	.reviews-text-slider .carousel__viewport:after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		width: 20%;
		z-index: 1;
	}

	.reviews-text-slider .carousel__viewport:before {
		background: linear-gradient(to right, #fff 10%, rgba(249, 249, 249, 0) 100%);
		left: 0;
	}

	.reviews-text-slider .carousel__viewport:after {
		background: linear-gradient(to left, #fff 10%, rgba(249, 249, 249, 0) 100%);
		right: 0;
	}

	.clinic-reviews .reviews-text-slider .carousel__nav {
		display: block;
	}

	.reviews-text-slider .carousel__dots {
		display: none;
	}
}

@media (min-width: 768px) {
	.clinic-reviews .reviews-text-slider .carousel__slide {
		--carousel-slide-width: 60%;
	}
}

@media (min-width: 1200px) {
	.reviews-text-slider .carousel__button.is-prev {
		left: 0;
	}
	
	.reviews-text-slider .carousel__button.is-next {
		right: 0;
	}
}

/* -- Блог -- */
/* -- [new] 3 Журнал / 3.1.1 Статья (макет «2026 NEW») -- */
/* подрезает вынос фона акции за правый край, чтобы не появлялся горизонтальный скролл */
.clinic-blog {
	overflow: hidden;
}

.blog-categories {
	gap: 5px;
	line-height: 1.3;
}

/* пока плитка в одну колонку — превью только у первой карточки (как в мобильном макете).
   С 576px плитка становится двухколоночной (col-sm-6), и превью нужны всем: иначе ряд рвётся.
   Карточка рядом с акцией лежит во всю ширину до 768px — ей превью возвращаем только там */
.clinic-blog .blog-posts-tile .blog-post-item:not(:first-child) .cover,
.clinic-blog .blog-akcia-aside .blog-post-item .cover {
	display: none;
}

@media (min-width: 576px) {
	.clinic-blog .blog-posts-tile .blog-post-item:not(:first-child) .cover,
	.clinic-blog .blog-akcia-aside .blog-post-item .cover {
		display: block;
	}
}

/* «Показать ещё» — кнопка, а не ссылка: снимаем дефолтные стили button */
.btn-blog-more {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	line-height: 1.1;
	cursor: pointer;
}

/* фикс. высота превью + object-fit: cover — картинки любых размеров не ломают ряды */
.blog-post-item .cover {
	height: 270px;
}

@media (any-hover: hover) {
	.blog-post-item:hover .cover img {
		transform: scale(1.05);
	}
}

@media (max-width: 575px) {
	.blog-post-item .cover {
		--bs-gutter-x: 2.5rem;
		margin-left: calc(-.5 * var(--bs-gutter-x));
		margin-right: calc(-.5 * var(--bs-gutter-x));
	}
}

@media (min-width: 576px) {	

}

@media (min-width: 768px) {
	/* на планшете список рубрик лежит во всю ширину — разбиваем на 2 колонки, а не ленту */
	.blog-categories {
		display: block;
		columns: 2;
		column-gap: 40px;
	}

	.blog-categories li {
		break-inside: avoid;
		margin-bottom: 10px;
	}
}

@media (min-width: 992px) {
	.blog-posts-tile {
		--bs-gutter-x: 2.5rem;
	}

	/* на десктопе снова боковая колонка в одну ленту */
	.blog-categories {
		display: flex;
		columns: auto;
		gap: 5px;
		padding-left: 20px;
		border-left: 1px solid #555;
	}

	.blog-categories li {
		margin-bottom: 0;
	}

	.blog-post-item .cover {
		height: 190px;
	}

}

/* крупное превью — только с xl, где раскладка 3+2 (col-xl-4 / col-xl-6).
   На 992–1199 плитка ещё по 2 в ряд, и разная высота превью ломала бы ряды */
@media (min-width: 1200px) {
	.blog-post-item-lg .cover {
		height: 300px;
	}
}

/* [new] 3 Журнал — Блок акция */
.blog-akcia {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 30px;
	min-height: 500px;
	padding: 20px 20px 30px;
	background-color: #f7efe6;
	overflow: hidden;
}

@media (min-width: 992px) {
	.blog-akcia-aside {
		width: 254px;
	}

	/* Фон акции уходит за правый край экрана (как в макете) */
	.blog-akcia-col {
		position: relative;
		padding-right: 0;
	}

	.blog-akcia-col:after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 100%;
		width: 100vw;
		background-color: #f7efe6;
	}
}

.blog-akcia .title {
	font-size: 26px;
	line-height: 1.1;
}

/* в макете процент выровнен по ВЕРХУ заголовка, а не по базовой линии */
.blog-akcia .title .discount {
	font-size: .645em;
	vertical-align: top;
}

.blog-akcia .lead,
.blog-akcia .gift {
	font-size: 16px;
	line-height: 1.3;
}

.blog-akcia .gift {
	border-left: 2px solid #991f3c;
	padding-left: 10px;
}

.blog-akcia .rate {
	color: #000;
}

.blog-akcia .price-row {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

.blog-akcia .price-new,
.blog-akcia .price-old {
	font-size: 40px;
	line-height: 1.1;
}

/* Прозрачность — только на тексте старой цены, чтобы линия зачёркивания осталась насыщенной */
.blog-akcia .price-old {
	position: relative;
	color: rgba(0, 0, 0, .4);
	text-decoration: none;
}

.blog-akcia .price-old:after {
	content: "";
	position: absolute;
	left: -4px;
	right: -4px;
	top: 50%;
	height: 5px;
	background-color: #991f3c;
	transform: translateY(-50%) rotate(-20deg);
}

.blog-akcia .btn-akcia {
	width: 100%;
}

.blog-akcia .compare {
	display: block;
	font-size: 20px;
	text-align: center;
}

/* [new] 3.1.1 Статья — Первый экран: фото по макету 360×240 (мобилка) / 840×630 (десктоп).
   Пропорции заданы жёстко + object-fit: cover — картинка любого размера из CMS кадрируется правильно */
.article-hero .cover {
	aspect-ratio: 360 / 240;
}

@media (min-width: 992px) {
	.article-hero .cover {
		aspect-ratio: 840 / 630;
	}
}

/* [new] 3.1.1 Статья — Юнит CTA (цитата врача) */
.cta-quote-unit {
	position: relative;
	overflow: hidden;
	border-top: 1px solid #d9d9d9;
	border-bottom: 1px solid #d9d9d9;
	background-color: #fff;
}

.cta-quote {
	position: relative;
	z-index: 2;
}

.cta-quote .quote-text {
	font-size: 19px;
	line-height: 1.3;
}

/* SVG из Figma идут с preserveAspectRatio="none" и 100% размерами — задаём обе стороны явно */
.cta-quote .q-open,
.cta-quote .q-close {
	width: 12px;
	height: 11px;
}

/* аватарка врача — только на мобилке (на десктопе вместо неё большое фото) */
.cta-quote .ava-doc {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border: 2px solid #196466;
	border-radius: 50%;
	background-color: #f9f9f9;
	object-fit: cover;
}

.cta-quote .q-open {
	display: block;
	margin-bottom: 10px;
}

.cta-quote .q-close {
	display: inline-block;
	margin-left: 6px;
	vertical-align: baseline;
}

.cta-quote .cta-btn {
	width: 100%;
}

.cta-quote-unit .doctor {
	display: none;
}

@media (min-width: 992px) {
	/* текст и фото — доли контейнера с потолком в px (56% + 42% = 98%, между ними всегда
	   ~2% зазор). Раньше оба были фиксированы (текст 730px, фото 564px): при контейнере
	   уже 1294px фото левым краем наезжало на текст и автора. Теперь наезда нет ни на одной
	   ширине, а на широком экране оба упираются в свои px и стоят как в макете */
	.cta-quote {
		width: min(730px, 56%);
	}

	.cta-quote .quote-text {
		font-size: 24px;
	}

	.cta-quote .q-open,
	.cta-quote .q-close {
		width: 18px;
		height: 16px;
	}

	.cta-quote .q-open {
		position: absolute;
		left: -28px;
		top: -9px;
		margin-bottom: 0;
	}

	.cta-quote .cta-btn {
		--btn-height: 60px;
		width: 400px;
		font-size: 24px;
	}

	.cta-quote-unit .doctor {
		display: block;
		position: absolute;
		top: -50px; /* компенсирует padding секции: фото прижато к верху юнита, как в макете */
		right: 0;
		width: min(564px, 42%);
		aspect-ratio: 564 / 423;
	}

	.cta-quote-unit .doctor img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: bottom right;
	}
}

/* [new] 3.1.1 Статья — Юнит Вопросы и ответы: десктоп — таблица «вопрос | ответ», мобилка — аккордеон */
.faq-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.faq-row {
	padding-bottom: 15px;
	border-bottom: 1px solid #d9d9d9;
}

.faq-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* вопрос — обычный текст; кликабелен только на мобилке (аккордеон) */
.faq-q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	cursor: pointer;
}

.faq-q .q-text {
	font-size: 20px;
	line-height: 1;
}

/* свёрнуто — бирюзовый плюс, раскрыто — бордовый крестик (тот же плюс, повёрнутый на 45°).
   Плюс собран из двух полос на псевдоэлементе — иконка не дублируется в разметке */
.faq-q::after {
	content: "";
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	background-color: currentColor;
	color: #196466;
	-webkit-mask: linear-gradient(currentColor, currentColor) center/2px 12px no-repeat,
		linear-gradient(currentColor, currentColor) center/12px 2px no-repeat;
	mask: linear-gradient(currentColor, currentColor) center/2px 12px no-repeat,
		linear-gradient(currentColor, currentColor) center/12px 2px no-repeat;
	transition: transform .2s ease, color .2s ease;
}

.faq-row.is-open .faq-q::after {
	color: #991f3c;
	transform: rotate(45deg);
}

.faq-a {
	display: none;
	font-size: 16px;
	line-height: 1.3;
	padding-top: 5px;
}

.faq-row.is-open .faq-a {
	display: block;
}

@media (min-width: 992px) {
	.faq-list {
		gap: 15px;
	}

	.faq-row {
		display: flex;
		align-items: flex-start;
		gap: 40px;
		padding-bottom: 20px;
	}

	.faq-q {
		flex: 0 0 400px;
		width: 400px;
		cursor: default;
	}

	.faq-q .q-text {
		font-size: 26px;
	}

	/* на десктопе аккордеона нет — плюс не нужен */
	.faq-q::after {
		display: none;
	}

	/* на десктопе ответы всегда раскрыты */
	.faq-a {
		display: block;
		flex: 1 1 auto;
		font-size: 18px;
		padding-top: 5px;
	}
}

/* [new] 3.1.1 Статья — Акции по центру (слайдер) */
.akcia-slider-unit {
	position: relative;
	overflow: hidden;
}

.akcia-slider .carousel__slide {
	--carousel-slide-width: 100%;
	padding-left: 0;
	padding-right: 0;
	/* carousel.css вешает на слайд overflow-y:auto + overscroll-behavior:contain —
	   при наведении курсора колесо крутит слайд, а не страницу, и прокрутка «залипает».
	   Контенту слайда внутренний скролл не нужен — снимаем */
	overflow: visible;
}

.btn-akcia-slider {
	display: none;
}

.akcia-slider-scrollbar {
	position: relative;
	width: 330px;
	max-width: calc(100% - 30px);
	height: 5px;
	margin: 15px auto 15px;
	border-radius: 5px;
	background-color: #f3f3f6;
}

.akcia-slider-scrollbar .drag {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 5px;
	background-color: #196466;
	transition: left .3s ease;
}

@media (min-width: 992px) {
	/* фон = цвет боковых плашек: при малом числе слайдов слайдер не заполняет обе стороны сразу,
	   и пустая область остаётся неотличимой от плашки (в макете фон #f9f9f9 не виден — его перекрывают плашки) */
	.akcia-slider-unit {
		background-color: #f0e6dc;
	}

	.akcia-slider .carousel__slide {
		--carousel-slide-width: 1000px;
	}

	/* по бокам видны только пустые кремовые плашки — контент соседних слайдов скрыт (как в макете) */
	.akcia-slider .carousel__slide .blog-akcia {
		transition: background-color .3s ease;
	}

	.akcia-slider .carousel__slide:not(.is-selected) .blog-akcia {
		background-color: #f0e6dc;
	}

	.akcia-slider .carousel__slide:not(.is-selected) .content,
	.akcia-slider .carousel__slide:not(.is-selected) .cta,
	.akcia-slider .carousel__slide:not(.is-selected) .image {
		visibility: hidden;
	}

	/* базовый transition: all (a, img, button…) распространяется и на visibility,
	   а она держится в «visible» до конца перехода — при листании ссылки и фото
	   уезжающего слайда мелькают поверх плашки. Гасим переход именно у них */
	.akcia-slider .carousel__slide:not(.is-selected) .blog-akcia * {
		transition: none;
	}

	.btn-akcia-slider {
		display: block;
		position: absolute;
		padding: 0;
		border: 0;
		background: none;
		top: 50%;
		/* ниже шапки (.header — z-index: 10): при равном z-index стрелки, лежащие ниже
		   в документе, наезжали на прилипшую шапку */
		z-index: 5;
		width: 64px;
		height: 64px;
		cursor: pointer;
	}

	.btn-akcia-slider img {
		display: block;
		width: 100%;
		height: 100%;
	}

	/* На широких экранах стрелки стоят у краёв активного слайда (572px от центра).
	   Когда окно уже ~1208px, 572px выносят стрелку за край и overflow:hidden её режет —
	   поэтому позицию зажимаем краями видимой области (инсет 15 + половина стрелки 32 = 47px):
	   стрелка либо на «дизайнерских» 572px, либо прижата к краю экрана, но НЕ за ним */
	.btn-akcia-next {
		left: min(calc(50% + 572px), calc(100% - 47px));
		transform: translate(-50%, -50%);
	}

	.btn-akcia-prev {
		left: max(calc(50% - 572px), 47px);
		transform: translate(-50%, -50%) scaleX(-1);
	}
}

/* [new] 3 Журнал — Ещё статьи (мозаика), раскрывается по «Показать ещё».
   Карточка — тот же .blog-post-item, что и в сетке статей; тут только размеры по макету */
.blog-more .blog-post-item .cover {
	--bs-gutter-x: 2.5rem;
	margin-left: calc(-.5 * var(--bs-gutter-x));
	margin-right: calc(-.5 * var(--bs-gutter-x));
}

.blog-more .blog-post-item .title {
	font-size: 20px;
}

/* планшет: карточки встают в сетку — вынос картинки за края только на мобилке */
@media (min-width: 768px) {
	.blog-more .blog-post-item .cover {
		height: 218px;
		margin-left: 0;
		margin-right: 0;
	}

	.blog-more .blog-post-item-lg .cover {
		height: 260px;
	}

	.blog-more .blog-post-item .title {
		font-size: 22px;
	}
}

@media (min-width: 992px) {
	.blog-more .blog-post-item .cover {
		height: 218px;
		margin-left: 0;
		margin-right: 0;
	}

	.blog-more .blog-post-item .title {
		font-size: 26px;
	}

	.blog-more .blog-post-item-lg .cover {
		height: 300px;
	}

	.blog-more .blog-post-item-lg .title {
		font-size: 36px;
	}
}

/* [new] Заголовок юнита (общий) — h2 span + линия из .page-text (см. .page-text h2:has(span)) */
/* маска линии у span'а белая; на секции с серым фоном подгоняем под фон */
.bg-gray .page-text h2 span {
	background-color: #f9f9f9;
}

/* линия рисуется с z-index: -1 и уходит под фон секции, если он задан.
   isolation создаёт у заголовка свой контекст наложения — линия снова видна */
.bg-gray .page-text h2 {
	isolation: isolate;
}

/* подзаголовок идёт вплотную под заголовком — гасим отступ h2 из .page-text */
.page-text h2:has(+ .unit-sub) {
	margin-bottom: 4px;
}

.unit-sub {
	font-size: 16px;
}

@media (min-width: 992px) {
	.unit-sub {
		font-size: 18px;
	}
}

/* [new] 3 Журнал — Юнит Популярные статьи (слайдер) */
.popular-articles {
	overflow: hidden;
}

/* карточки продолжаются за правый край контейнера до края экрана (обрезает секция).
   Carousel сам строит .carousel__viewport с overflow: hidden — снимаем и его */
.popular-slider,
.popular-slider .carousel__viewport {
	overflow: visible;
}

/* линия в заголовке тоже доходит до края экрана (в макете блок линии 1293px при контенте 1280) */
.popular-articles .page-text h2:has(span)::after {
	right: -100vw;
}

/* слайд = карточка 280px + отступ 15px (у Carousel зазор задаётся паддингом слайда) */
.popular-slider .carousel__slide {
	--carousel-slide-width: 295px;
	position: relative;
	padding-left: 0;
	padding-right: 15px;
	overflow: visible;
}

.popular-slider .article-title {
	font-size: 20px;
}

@media (min-width: 992px) {
	/* карточка 510px + отступ 40px */
	.popular-slider .carousel__slide {
		--carousel-slide-width: 550px;
		padding-right: 40px;
	}

	.popular-slider .article-title {
		font-size: 26px;
	}

	/* разделитель — по центру отступа между карточками */
	.popular-slider .carousel__slide:not(:last-child):after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: 20px;
		width: 1px;
		background-color: #c9c9c9;
	}
}

/* [new] 3 Журнал — Юнит Красота */
.author {
	line-height: 1.3;
}

.beauty-feature .cover {
	height: 270px;
}

.beauty-feature .feature-title {
	font-size: 26px;
	color: #000;
}

.beauty-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.beauty-list .beauty-row {
	padding-bottom: 10px;
	border-bottom: 1px solid #d9d9d9;
}

.beauty-list .beauty-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.beauty-list .row-title {
	font-size: 20px;
}

@media (min-width: 992px) {
	.beauty-feature .cover {
		height: 468px;
	}

	.beauty-feature .feature-title {
		font-size: 36px;
	}

	.beauty-list .beauty-row {
		padding-bottom: 15px;
	}

	.beauty-list .row-title {
		font-size: 26px;
	}
}

/* [new] 3 Журнал — Юнит Журнал о красоте */
/* кадр по макету 840×583 (не пропорции самого файла): широкое фото подрезается по бокам,
   окно смещено влево — как в макете (картинка масштабируется по высоте, срез ~200px справа) */
.beauty-journal .cover {
	aspect-ratio: 840 / 583;
}

.beauty-journal .cover img {
	object-position: 6% center;
}

.beauty-journal .lead {
	font-size: 16px;
}

.authors-box {
	display: flex;
	flex-direction: column;
	gap: 25px;
	padding: 15px;
}

.authors-box .box-title {
	font-size: 26px;
}

.authors-inner {
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 100%;
}

.authors-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.authors-list .author-item {
	padding-bottom: 10px;
	border-bottom: 1px solid #d9d9d9;
}

.authors-list .author-item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.authors-list .author-name {
	font-size: 16px;
}

.authors-box .all-authors {
	font-size: 20px;
}

/* мобилка: серая плашка во всю ширину экрана (в макете x=-15, 360px), текст — по краю контента */
@media (max-width: 767px) {
	.authors-box {
		margin: 0 -1rem;
		padding: 15px 1rem;
	}
}

/* планшет: блок авторов лежит во всю ширину — список в 2 колонки, а не одной лентой */
@media (min-width: 768px) and (max-width: 991px) {
	.authors-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 40px;
	}
}

@media (min-width: 992px) {
	.beauty-journal .lead {
		font-size: 18px;
	}

	.authors-box {
		gap: 30px;
		padding: 20px;
	}

	.authors-box .box-title {
		font-size: 36px;
	}

	.authors-inner {
		gap: 40px;
	}

	.authors-list {
		gap: 15px;
	}

	.authors-list .author-item {
		padding-bottom: 15px;
	}

	.authors-list .author-name {
		font-size: 18px;
	}

	.authors-box .all-authors {
		font-size: 26px;
	}
}

/* планшет: раскладка десктопная (текст + цена слева, фото справа), но всё уменьшено */
@media (min-width: 768px) {
	.blog-akcia {
		gap: 20px;
		min-height: 420px;
		padding: 30px 30px 40px;
	}

	.blog-akcia .content,
	.blog-akcia .cta {
		position: relative;
		z-index: 2;
	}

	.blog-akcia .content {
		max-width: 62%;
	}

	.blog-akcia .cta {
		width: 62%;
	}

	.blog-akcia .title {
		font-size: 28px;
	}

	.blog-akcia .price-row {
		flex-direction: row;
		align-items: flex-start;
		gap: 16px;
	}

	.blog-akcia .price-new,
	.blog-akcia .price-old {
		font-size: 34px;
	}

	.blog-akcia .image {
		position: absolute;
		right: -10px;
		bottom: 0;
		width: 34%;
		height: 300px;
	}

	.blog-akcia .image img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: bottom;
	}
}

@media (min-width: 992px) {
	.blog-akcia {
		gap: 20px;
		min-height: 540px;
		padding: 50px 50px 60px;
	}

	.blog-akcia .content,
	.blog-akcia .cta {
		position: relative;
		z-index: 2;
	}

	.blog-akcia .content {
		max-width: 600px;
	}

	.blog-akcia .cta {
		width: 421px;
	}

	.blog-akcia .title {
		font-size: 36px;
	}

	.blog-akcia .lead,
	.blog-akcia .gift {
		font-size: 18px;
	}

	.blog-akcia .price-row {
		flex-direction: row;
		align-items: flex-start;
		gap: 20px;
	}

	.blog-akcia .price-new,
	.blog-akcia .price-old {
		font-size: 48px;
	}

	.blog-akcia .price-old:after {
		height: 6px;
	}

	.blog-akcia .btn-akcia {
		--btn-height: 60px;
		font-size: 24px;
	}

	.blog-akcia .compare {
		font-size: 26px;
	}

	.blog-akcia .image {
		position: absolute;
		right: -40px;
		bottom: 0;
		width: 417px;
		height: 500px;
	}

	.blog-akcia .image img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: bottom;
	}
}

/* [new] 3.1 Тэг — описание рубрики в правой колонке плитки анонсов */
.tag-description {
	line-height: 1.3;
}

/* [new] 3.1 Тэг — Юнит Описание направления (иллюстрация + текст + врезка | услуги и цены) */
/* линия у заголовка «Услуги и цены» уходит к краю экрана (в макете 1293px при колонке 620) */
.napravlenie-unit {
	overflow: hidden;
}

.napravlenie-unit .services-prices h2:has(span)::after {
	right: -100vw;
}

.napravlenie-figure {
	margin: 0 0 20px;
}

/* кадр по макету 620×465 (десктоп) / 360×270 (мобилка) — пропорции те же 4:3 */
.napravlenie-figure .cover {
	aspect-ratio: 620 / 465;
	margin-bottom: 10px;
}

/* на мобилке иллюстрация выходит за края экрана (в макете x=-15 при контейнере 330) */
@media (max-width: 767px) {
	.napravlenie-figure .cover {
		--bs-gutter-x: 2rem;
		margin-left: calc(-.5 * var(--bs-gutter-x));
		margin-right: calc(-.5 * var(--bs-gutter-x));
	}
}

.napravlenie-text p:last-of-type {
	margin-bottom: 20px;
}

/* врезка — линии сверху и снизу, текст по центру */
.napravlenie-quote {
	font-size: 20px;
	line-height: 1.3;
	text-align: center;
	padding: 20px 10px 25px;
	border-top: 1px solid #555;
	border-bottom: 1px solid #555;
}

.services-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.service-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid #d9d9d9;
}

.service-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.service-name,
.service-price {
	font-size: 20px;
	line-height: 1.3;
}

/* по макету мобилки название ~230px, цена ~80px из 330 — цена переносится в две строки */
.service-name {
	flex: 1 1 auto;
}

.service-price {
	flex: 0 0 auto;
	width: 24%;
	color: #000;
	text-align: right;
}

@media (min-width: 768px) {
	.service-price {
		width: auto;
		white-space: nowrap;
	}
}

/* значок рубля мельче суммы */
.service-price .cur {
	font-size: 14px;
}

@media (min-width: 768px) {
	.napravlenie-quote,
	.service-name,
	.service-price {
		font-size: 24px;
	}
}

/* -- [new] 2 Направление медицины (макет «2026 NEW») -- */
/* [new] 2 Направление медицины — Первый экран */
/* в макете подложка первого экрана бежевая (#f7efe6 под белым слоем 40%), а не серая как в журнале */
.bg-header-cream {
	background-color: #faf5f0;
}

/* [new] 2 Направление медицины — Юнит Группы услуг (слайдер, баннеры) */
/* баннеры продолжаются за правый край контейнера до края экрана (обрезает секция) */
.service-groups {
	overflow: hidden;
}

.service-groups-slider,
.service-groups-slider .carousel__viewport {
	overflow: visible;
}

/* слайд = баннер 280px + отступ 20px (у Carousel зазор задаётся паддингом слайда) */
.service-groups-slider .carousel__slide {
	--carousel-slide-width: 300px;
	position: relative;
	max-width: none;
	padding: 0 20px 0 0;
	overflow: visible;
}

.service-group-card .cover {
	aspect-ratio: 620 / 465;
}

.service-group-card .title {
	font-size: 26px;
	line-height: 1.1;
	margin-top: 15px;
}

.service-group-card .links {
	gap: 10px;
	margin-top: 5px;
}

.service-group-card .links a {
	font-size: 20px;
	line-height: 1;
}

@media (min-width: 768px) {
	/* баннер 360px + отступ 40px */
	.service-groups-slider .carousel__slide {
		--carousel-slide-width: 400px;
		padding-right: 40px;
	}
}

@media (min-width: 992px) {
	/* баннер 620px + отступ 40px + разделитель + отступ 40px */
	.service-groups-slider .carousel__slide {
		--carousel-slide-width: 701px;
		padding-right: 81px;
	}

	/* разделитель между баннерами — посередине зазора */
	.service-groups-slider .carousel__slide::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: 40px;
		width: 1px;
		background-color: #d9d9d9;
	}

	.service-group-card .title {
		font-size: 36px;
		margin-top: 20px;
	}

	.service-group-card .links {
		gap: 15px;
	}

	.service-group-card .links a {
		font-size: 26px;
	}
}

/* [new] 2 Направление медицины — Полезные статьи (боковая колонка) */
.useful-articles {
	background-color: #f9f9f9;
	padding: 20px;
}

/* на мобилке серые панели выходят на всю ширину экрана (в макете x=0 при контейнере 330) */
@media (max-width: 767px) {
	.useful-articles,
	.med-detail .guide-box {
		--bs-gutter-x: 2rem;
		margin-left: calc(-.5 * var(--bs-gutter-x));
		margin-right: calc(-.5 * var(--bs-gutter-x));
	}

	/* превью первой статьи — в край экрана (в макете фото full-bleed, текст с отступами).
	   Панель уже во всю ширину, поэтому гасим её паддинг 20px по бокам именно у картинки */
	.useful-articles .item-cover .cover {
		margin-left: -20px;
		margin-right: -20px;
	}
}

.useful-articles .ttl {
	font-size: 26px;
	margin-bottom: 20px;
}

.useful-articles .list {
	gap: 15px;
}

.useful-articles .item {
	padding-bottom: 15px;
	border-bottom: 1px solid #d9d9d9;
}

.useful-articles .item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* превью только у первой статьи (по макету) — кадр 360×260 */
.useful-articles .item-cover .cover {
	aspect-ratio: 360 / 260;
}

.useful-articles .title {
	font-size: 20px;
}

@media (any-hover: hover) {
	.useful-articles .item:hover .cover img {
		transform: scale(1.05);
	}
}

@media (min-width: 992px) {
	.useful-articles .ttl {
		font-size: 36px;
		margin-bottom: 30px;
	}

	.useful-articles .title {
		font-size: 26px;
	}
}

/* [new] 2 Направление медицины — Описание направления (кратко/подробно) */
/* подзаголовок юнита («Когда стоит задуматься», «Гид для новичка») — H3 макета:
   Cormorant Garamond Medium 26/36, без линии. Не Circe Bold, как заголовок секции */
.page-text h3.font-2 {
	font-size: 26px;
	line-height: 1;
	margin-top: 40px;
	margin-bottom: 20px;
}

.page-text h3.font-2:first-child {
	margin-top: 0;
}

@media (min-width: 992px) {
	.page-text h3.font-2 {
		font-size: 36px;
		margin-bottom: 30px;
	}
}

/* врезка .napravlenie-quote переиспользована со страницы тэга — здесь только отступы в потоке текста */
.med-brief .napravlenie-quote,
.med-detail .napravlenie-quote {
	margin-top: 30px;
}

.med-brief .page-text h2:not(:first-child) {
	margin-top: 40px;
}

/* [new] 2 Направление медицины — «Гид для новичка» */
.med-detail .guide-box {
	background-color: #f9f9f9;
	padding: 15px;
}

/* список методик: на мобилке лента с горизонтальной прокруткой, с 992px — колонка */
.guide-list {
	display: flex;
	gap: 15px;
	margin-top: 30px;
	padding: 20px 10px 25px;
	border-top: 1px solid #555;
	border-bottom: 1px solid #555;
	overflow-x: auto;
	scrollbar-width: none;
}

.guide-list::-webkit-scrollbar {
	display: none;
}

.guide-item {
	flex: 0 0 auto;
	width: 260px;
}

.guide-item .name {
	font-size: 18px;
	line-height: 1.3;
}

/* с планшета панель занимает всю ширину — списку хватает места на колонку, лента не нужна */
@media (min-width: 768px) {
	.med-detail .guide-box {
		padding: 20px;
	}

	.guide-list {
		flex-direction: column;
		gap: 20px;
		overflow-x: visible;
	}

	.guide-item {
		width: auto;
	}
}

/* [new] 2 Направление медицины — Юнит Консультация и лечение */
.clinics-list {
	margin-top: 40px;
}

/* мобилка: название → адрес → ссылки → рейтинг (порядок по мобильному макету) */
.clinic-row {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.clinic-row + .clinic-row {
	margin-top: 25px;
}

.clinic-row .clinic-name-col a {
	line-height: 1.3;
}

.clinic-row .clinic-links {
	order: 1;
	margin-top: 15px;
}

.clinic-row .rating {
	order: 2;
}

.clinic-links a,
.clinic-links .sep {
	font-size: 20px;
	line-height: 1;
}

.clinic-links .sep {
	color: #d9d9d9;
}

/* наклейка «Выбор редакции» — на мобилке по центру под контентом, на десктопе справа от списка */
.clinics-unit .sticker {
	margin: 30px auto 0;
	width: 180px;
}

.clinics-unit .sticker img {
	width: 100%;
}

.rating .rate {
	gap: 5px;
}

/* иконка, а не контентная картинка: гасим margin-bottom из .page-text img:not(:last-child),
   иначе он растягивает строку рейтинга и сбивает выравнивание по нижнему краю */
.clinics-unit .rating .pin {
	width: 20px;
	height: 25px;
	margin-bottom: 0;
}

.rating .reviews {
	margin-top: 5px;
}

/* пять звёзд — одна иконка, размноженная маской: шаг 28px (звезда 24.4 + зазор 3.6),
   ширина 136px = 5 звёзд без хвостового зазора. Пятью <img> строка разъезжается по вертикали.
   Маска — инлайн data:-картинка, а не файл: на масках браузер требует same-origin,
   и при открытии страницы напрямую с диска (file://) внешний svg блокируется, а звёзды пропадают */
.stars {
	width: 136px;
	height: 23px;
	background-color: #ffcc00;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='23' viewBox='0 0 28 23'%3E%3Cpath d='M12.22 0L15.35 7.79L23.73 8.4L17.34 13.87L19.31 22.05L12.22 17.6L5.13 22.05L7.1 13.87L0.71 8.4L9.09 7.79L12.22 0Z'/%3E%3C/svg%3E") repeat-x left center;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='23' viewBox='0 0 28 23'%3E%3Cpath d='M12.22 0L15.35 7.79L23.73 8.4L17.34 13.87L19.31 22.05L12.22 17.6L5.13 22.05L7.1 13.87L0.71 8.4L9.09 7.79L12.22 0Z'/%3E%3C/svg%3E") repeat-x left center;
	-webkit-mask-size: 28px 23px;
	mask-size: 28px 23px;
}

/* с планшета — сетка по макету: слева название и адрес, справа рейтинг и часы, ссылки под ними */
@media (min-width: 768px) {
	.clinic-row {
		display: grid;
		grid-template-columns: 62% 1fr;
		gap: 10px;
	}

	.clinic-row .clinic-name-col {
		grid-column: 1;
		grid-row: 1;
	}

	.clinic-row .rating {
		grid-column: 2;
		grid-row: 1;
		order: 0;
	}

	.clinic-row .clinic-address {
		grid-column: 1;
		grid-row: 2;
	}

	.clinic-row .clinic-worktime {
		grid-column: 2;
		grid-row: 2;
	}

	.clinic-row .clinic-links {
		grid-column: 1 / -1;
		grid-row: 3;
		order: 0;
		margin-top: 20px;
	}
}

@media (min-width: 992px) {
	.clinic-links a,
	.clinic-links .sep {
		font-size: 26px;
	}

	/* наклейка прижата к низу контента (в макете её низ совпадает с низом блока) */
	.clinics-unit .sticker {
		position: absolute;
		right: calc(var(--bs-gutter-x) * .5);
		bottom: 0;
		width: 220px;
		margin: 0;
	}

	.clinics-unit .rating .pin {
		width: 25px;
		height: 31px;
	}
}

/* [new] 2 Направление медицины — Юнит Услуги и цены (по группам услуг) слайдер */
.prices-unit {
	overflow: hidden;
}

/* линия заголовка доходит до края экрана (в макете 1780px при контейнере 1280) */
.prices-unit .page-text h2:has(span)::after {
	right: -100vw;
}

.prices-slider,
.prices-slider .carousel__viewport {
	overflow: visible;
}

/* слайд = колонка 330px + отступ 40px */
.prices-slider .carousel__slide {
	--carousel-slide-width: 370px;
	position: relative;
	max-width: none;
	padding: 0 40px 0 0;
	overflow: visible;
}

.prices-group .ttl {
	font-size: 26px;
	margin-bottom: 20px;
}

.prices-slider-scrollbar {
	margin-left: 0;
	margin-right: 0;
}

@media (min-width: 768px) {
	/* колонка 620px (полный контент) + отступ 40px. Раньше было 400px — колонка уже
	   контента (название 380 + цена nowrap ~180), и цена налезала на соседнюю колонку.
	   Слайдер сам прокручивается, поэтому широкий слайд, вылезающий за контейнер, — это норм */
	.prices-slider .carousel__slide {
		--carousel-slide-width: 660px;
		padding-right: 40px;
	}

	.prices-slider .carousel__slide::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		right: 20px;
		width: 1px;
		background-color: #d9d9d9;
	}
}

@media (min-width: 992px) {
	/* колонка 620px + отступ 40px + разделитель + отступ 40px */
	.prices-slider .carousel__slide {
		--carousel-slide-width: 701px;
		padding-right: 81px;
	}

	.prices-slider .carousel__slide::after {
		right: 40px;
	}

	.prices-group .ttl {
		font-size: 36px;
		margin-bottom: 30px;
	}

	.prices-slider-scrollbar {
		display: none;
	}
}

/* -- [new] 2.1. Услуга (макет «2026 NEW») -- */
/* [new] 2.1. Услуга — Иллюстрация с подписью (переиспользует .napravlenie-figure) */
.svc-figure {
	margin: 0 0 20px;
}

.svc-figure .cover {
	aspect-ratio: 620 / 465;
	margin-bottom: 10px;
}

/* подпись под иллюстрацией — по центру (как в макете) */
.svc-figure figcaption {
	text-align: center;
}

/* большая иллюстрация внутри левой колонки (840×630 по макету) */
.svc-figure.svc-figure-lg .cover {
	aspect-ratio: 840 / 630;
}

/* на мобилке иллюстрация выходит за края экрана (в макете x=-15 при контейнере 330) */
@media (max-width: 767px) {
	.svc-figure .cover {
		--bs-gutter-x: 2rem;
		margin-left: calc(-.5 * var(--bs-gutter-x));
		margin-right: calc(-.5 * var(--bs-gutter-x));
	}
}

/* врезка «Кому и зачем» — рамка сверху/снизу, текст ПО ЛЕВОМУ краю 24px
   (в отличие от .napravlenie-quote на странице тэга, где текст по центру) */
.svc-quote {
	margin: 30px 0;
	padding: 15px 10px;
	border-top: 1px solid #555;
	border-bottom: 1px solid #555;
	font-size: 20px;
	line-height: 1.3;
}

@media (min-width: 992px) {
	.svc-quote {
		font-size: 24px;
	}
}

/* серый инфо-бокс (Противопоказания #f3f3f6, Реабилитация #f9f9f9):
   заголовок Cormorant + буллит-список с бордовыми точками */
.info-box {
	margin: 30px 0;
	padding: 20px;
	background-color: #f9f9f9;
}

.info-box.info-box-cool {
	background-color: #f3f3f6;
}

.info-box > :first-child {
	margin-top: 0;
}

.info-box > :last-child {
	margin-bottom: 0;
}

/* заголовки внутри бокса — Cormorant Medium (h3 берёт 26/36 из .page-text h3.font-2) */
.info-box h3.font-2 {
	margin: 0 0 20px;
}

.info-box h4.font-2 {
	font-size: 26px;
	line-height: 1;
	margin: 30px 0 15px;
}

/* буллиты по умолчанию бирюзовые (из .page-text — положительные списки, «Что помогает»).
   Бордовые — у «запрещающих» списков: Противопоказания (.info-box-cool) и «Чего нельзя» (.list-dont) */
.info-box-cool ul:not([class]) li:before,
.list-dont ul:not([class]) li:before {
	background-color: #991f3c;
}

/* [new] 2.1. Услуга — «Какие проблемы решает»: слайдер тот же (.popular-slider), но карточка
   = заголовок Cormorant 26/36 ЧЁРНЫЙ + описание Circe чёрное (не заголовок+дата, как в журнале) */
.problems-unit .popular-slider .article-title {
	color: #000;
	font-size: 26px;
}

@media (min-width: 992px) {
	.problems-unit .popular-slider .article-title {
		font-size: 36px;
	}
}

/* [new] 2.1. Услуга — список «Виды пластики век» (термин Bold чёрный + описание серым, без бокса) */
.term-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.term-list .term {
	display: block;
	font-weight: bold;
	font-size: 18px;
	line-height: 1.3;
}

.term-list .desc {
	display: block;
	color: #555;
	font-size: 14px;
	line-height: 1.3;
}

/* [new] 2.1. Услуга — Юнит «Процедуры и цены» (список «Анонс акции») */
.promo-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-top: 20px;
}

.promo-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid #d9d9d9;
}

.promo-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.promo-name .name {
	font-size: 20px;
	line-height: 1.3;
}

.promo-name .discount,
.zapis-modal .name .discount {
	font-size: .645em;
	font-weight: bold;
	vertical-align: top;
	white-space: nowrap;
}

/* «Виды и методы»: на мобилке между последним боксом контента и «Полезными статьями» — 40px
   (по макету). Убираем нижний margin последнего бокса и задаём вертикальный gutter ряда 40px
   (на десктопе gutter гасится отрицательным margin ряда — колонки идут в строку) */
.svc-brief .col-lg-8 > .info-box:last-child {
	margin-bottom: 0;
}

.svc-brief .row {
	--bs-gutter-y: 2.5rem;
}

/* бейдж-подарок — тонкая бордовая линия слева, текст жирный */
.promo-gift {
	display: inline-block;
	margin-top: 10px;
	padding-left: 10px;
	border-left: 2px solid #991f3c;
	font-size: 14px;
	font-weight: bold;
	line-height: 1.3;
}

/* [new] длинная подпись: жирным только начало в <b>, остальное — обычным начертанием */
.promo-gift:has(b) {
	font-weight: inherit;
}

/* Мобилка (база): цены в один столбец — новая цена, под ней зачёркнутая, затем рассрочка.
   На десктопе (см. @media ниже) строка перестраивается в две колонки. */
.promo-prices {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	white-space: nowrap;
}

.promo-old {
	flex: 0 0 auto;
}

.promo-prices .new {
	font-weight: bold;
	font-size: 20px;
	line-height: 1.3;
}

.promo-prices .new .cur,
.promo-old .cur {
	font-size: 14px;
}

.promo-prices .rate {
	color: #555;
	font-size: 14px;
	line-height: 1.3;
}

/* старая цена — светлая, с диагональной бордовой чертой (как у .blog-akcia .price-old) */
.promo-old .old {
	position: relative;
	display: inline-block;
	font-size: 20px;
	line-height: 1.3;
	color: rgba(0, 0, 0, .4);
}

.promo-old .old:after {
	content: "";
	position: absolute;
	left: -2px;
	right: -2px;
	top: 50%;
	height: 3px;
	background-color: #991f3c;
	transform: translateY(-50%) rotate(-15deg);
}

/* Планшет/десктоп: возвращаем две колонки — [новая цена + рассрочка] и [старая цена].
   Рассрочка (.rate) занимает всю ширину и переносится под новую цену, старая цена
   остаётся справа от новой. */
@media (min-width: 768px) {
	.promo-prices {
		display: grid;
		grid-template-columns: auto auto;
		grid-template-areas:
			"new old"
			"rate old";
		justify-content: flex-end;
		align-items: start;
		column-gap: 20px;
		row-gap: 0;
	}

	.promo-prices .new {
		grid-area: new;
		text-align: right;
	}

	.promo-prices .rate {
		grid-area: rate;
		text-align: right;
	}

	.promo-old {
		grid-area: old;
	}

	/* строки без старой цены: одна колонка, цена и рассрочка выравниваются вправо */
	.promo-prices:not(:has(.promo-old)) {
		grid-template-columns: auto;
		grid-template-areas:
			"new"
			"rate";
	}
}

@media (min-width: 992px) {
	.promo-name .name {
		font-size: 24px;
	}

	.promo-prices .new,
	.promo-old .old {
		font-size: 24px;
	}

	.promo-prices {
		column-gap: 30px;
	}
}

/* [new] 2.1. Услуга — Юнит «Результаты лечения» (слайдер до/после).
   Механика та же, что у .akcia-slider: слайд 1000px по центру, кремовые плашки по бокам,
   стрелки 50%±572 (зажаты краями), на мобилке — скролл-полоса вместо стрелок */
.results-slider-unit {
	position: relative;
}

/* кремовые боковые плашки — только на полосе слайдера (заголовок/подпись остаются на белом) */
.results-slider-band {
	position: relative;
}

.results-slider .carousel__slide {
	--carousel-slide-width: 100%;
	padding-left: 0;
	padding-right: 0;
	overflow: visible;
}

/* мобилка: фото (две рядом) сверху, подпись снизу; десктоп — в строку */
.result-block {
	display: flex;
	flex-direction: column;
	background-color: #f9f9f9;
}

/* до/после — две картинки рядом */
.result-block .ba {
	display: flex;
	height: 300px;
	min-width: 0;
}

.result-block .ba .oh {
	flex: 1 1 0;
	min-width: 0;
}

.result-block .ba img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* правая текстовая панель */
.result-block .result-text {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	padding: 20px;
}

.result-block .result-text .proc {
	color: #991f3c;
	font-size: 20px;
	line-height: 1.3;
}

.result-block .result-text .doc {
	color: #196466;
	font-size: 14px;
	line-height: 1.3;
}

.btn-results-slider {
	display: none;
}

@media (min-width: 992px) {
	.results-slider-band {
		background-color: #f0e6dc;
		overflow: hidden;
	}

	.results-slider .carousel__slide {
		--carousel-slide-width: 1000px;
	}

	/* контент соседних слайдов скрыт — видны только пустые кремовые плашки (как в макете) */
	.results-slider .carousel__slide:not(.is-selected) .result-block {
		visibility: hidden;
	}

	/* глобальный transition: all .15s на img/a анимирует и visibility — контент уезжающего
	   слайда мелькает поверх плашки при листании. Гасим переход на скрытом поддереве (как у акций) */
	.results-slider .carousel__slide:not(.is-selected) .result-block * {
		transition: none;
	}

	.result-block {
		flex-direction: row;
		height: 540px;
	}

	.result-block .ba {
		flex: 1 1 auto;
		height: auto;
	}

	.result-block .result-text {
		flex: 0 0 auto;
		width: 260px;
	}

	.result-block .result-text .proc {
		font-size: 24px;
	}

	.btn-results-slider {
		display: block;
		position: absolute;
		top: 50%;
		z-index: 5;
		width: 64px;
		height: 64px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}

	.btn-results-slider img {
		display: block;
		width: 100%;
		height: 100%;
	}

	.btn-results-next {
		left: min(calc(50% + 572px), calc(100% - 47px));
		transform: translate(-50%, -50%);
	}

	.btn-results-prev {
		left: max(calc(50% - 572px), 47px);
		transform: translate(-50%, -50%) scaleX(-1);
	}
}

/* -- Футер -- */
.footer [class*="border"] {
	--border-color: #d9d9d9;
}

@media (min-width: 768px) {
	.footer .link-address {
		font-size: 20px;
	}
}

/* -- 404 -- */
.page-404 .bg-flowers {
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
	height: 458px;
	padding-bottom: 50px;
}

.page-404 .bg-flowers:before,
.page-404 .bg-flowers:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-position: right top;
	background-repeat: no-repeat;
	background-size: contain;
}

.page-404 .bg-flowers:before {
	background-image: url(../img/bg-flowers.png);
	mix-blend-mode: color-burn;
}

.page-404 .bg-flowers:after {
	background-image: url(../img/bg-flowers-2.png);
	opacity: .6;
	z-index: -1;
}

.page-404 .bg-flowers > div {
	z-index: 5;
}

/* -- Кнопка беспл. консультакция -- */
.widget-free-cousult {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 50;
}

.btn-free-cousult {
	color: #fff;
	position: relative;
	background: linear-gradient(90deg, #00a8e5 0%, #00c990 100%);
	border-radius: 10rem;
	padding: 19px;
	overflow: hidden;
	gap: 8px;
}

.btn-free-cousult::after {
	content: "";
	position: absolute;
	background: linear-gradient(90deg, #46b7ef 0%, #810add 100%);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	z-index: -1;
	animation: fadeGradient 4s infinite;
}

@keyframes fadeGradient {
	0%, 100% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
}

@media (any-hover: hover) {
	.btn-free-cousult:hover {
		color: #00b6c1;
		background: #fff;
		box-shadow: inset 0 0 0 3px #00b6c1;
		transition: none;
	}

	.btn-free-cousult:hover::after {
		display: none;
	}
}

@media (min-width: 992px) {
	.widget-free-cousult {
		right: 30px;
		bottom: 30px;
	}
	
	.widget-free-cousult .btn-free-cousult {
		font-size: 1.375rem;
		padding: 19px 28px;
	}
}

/* -- Fancybox -- */
.fancybox__container {
	--fancybox-bg: rgba(39,36,23, .82);
	--fancybox-content-color: #000;
	z-index: 10100;
}

.fancybox__thumbs .carousel__slide .fancybox__thumb:after {
	--fancybox-accent-color: #c34e95;
	border-width: 4px;
}

.fancybox__container .fancybox__nav .carousel__button {
	--carousel-button-bg: #97ae08;
	--carousel-button-border-radius: 8px;
	--carousel-button-svg-filter: none;
	transition: all .15s ease;
}

@media (any-hover: hover) {
	.fancybox__container .fancybox__nav .carousel__button:hover {
		--carousel-button-bg: #b6cf1c;
	}
}

/* modal window */
.fancybox__content :focus {
	outline: 0 !important;
}

.modal-box > .carousel__button.is-close {
	--carousel-button-bg: rgba(0,0,0,.5);
	--carousel-button-svg-filter: none;
	--carousel-button-width: 32px;
	--carousel-button-height: 32px;
	--carousel-button-svg-width: 14px;
	--carousel-button-svg-height: 14px;
	--carousel-button-svg-stroke-width: 3;
	top: 20px;
	right: 20px;
}

/* -- Доп. кастом -- */
/* анимация */
@keyframes float {
	0%,to {
		transform: rotate(-1deg) translate(-.1rem,1rem)
	}

	50% {
		transform: rotate(2deg)
	}

	75% {
		transform: rotate(.5deg) translate(.25rem,.5rem)
	}
}

.animate-float {
	animation: float 8s ease infinite;
}

@keyframes string {
	25% {
		transform: translate(.02rem,-.05rem) scaleY(1.03) scaleX(1.02)
	}

	50% {
		transform: translate(.1rem,.1rem) scaleY(1.05) scaleX(.95)
	}

	75% {
		transform: translate(.05rem,.05rem) scaleY(.96) scaleX(1)
	}
}

.animate-string {
	animation: string .25s ease-in-out infinite;
}

@keyframes blur-in {
	0% {
		filter: brightness(1) blur(10px);
		transform: scale(.94)
	}

	10% {
		filter: brightness(1.15) blur(5px);
		transform: scale(.98)
	}

	to {
		filter: brightness(1) blur(0);
		transform: scale(1)
	}
}

.animate-blur-in {
	animation: blur-in 1s cubic-bezier(0,.55,.45,1);
}
/* -- [new] 2.1.1 Процедура -- */

/* [new] 2.1.1 Процедура — скидка в заголовке первого экрана (как .promo-name .discount).
   inline-block даёт точку переноса: на узких экранах «-60%» уходит на свою строку
   (как в мобильном макете), а не вылезает за экран приклеенной к слову */
.page-header h1 .discount {
	display: inline-block;
	font-size: .645em;
	font-weight: bold;
	vertical-align: top;
	white-space: nowrap;
}

/* [new] 2.1.1 Процедура — Юнит Цена (CTA) */
/* фото прижато к низу секции, поэтому вертикальные отступы лежат на колонке текста */
.price-cta-content {
	padding-top: 40px;
	padding-bottom: 40px;
}

.price-cta .akcia-head {
	gap: 25px;
	/* овал наклейки выходит за строку вниз — отступ до списка держит зазор из макета */
	margin-bottom: 40px;
}

/* наклейка «Акция!» — бордовый овал на CSS, поверх — анимированный блик */
.badge-akcia {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 54px;
}

.badge-akcia:before,
.badge-akcia:after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 140px;
	height: 100px;
	border-radius: 50%;
	background-color: #991f3c;
}

/* блик: светлая полоса пробегает по овалу */
.badge-akcia:after {
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .35) 50%, rgba(255, 255, 255, 0) 58%);
	background-size: 250% 100%;
	animation: badge-shine 3.5s ease-in-out infinite;
}

@keyframes badge-shine {
	0% { background-position: 150% 0; }
	60%, 100% { background-position: -50% 0; }
}

.badge-akcia span {
	position: relative;
	color: #fff;
	font-size: 26px;
	line-height: 1;
}

.price-cta .akcia-title {
	font-size: 26px;
	line-height: 1;
}

/* список «что входит» — буллиты стандартные, но текст крупнее, чем в инфо-боксах */
.price-cta ul:not([class]) li {
	font-size: 16px;
}

.price-cta .prices {
	margin-top: 40px;
}

.price-cta .price-new {
	font-size: 40px;
	line-height: 1.1;
}

.price-cta .price-new .cur,
.price-cta .price-old .cur {
	font-size: .5em;
}

.price-cta .rate {
	color: #555;
	font-size: 16px;
	font-weight: 350;
}

/* старая цена — светлый текст, насыщенная диагональная черта (как .promo-old .old).
   Глобальный .price-old даёт text-decoration: line-through — гасим, зачёркивание только диагональю */
.price-cta .price-old {
	position: relative;
	color: rgba(0, 0, 0, .4);
	font-weight: 350;
	font-size: 40px;
	line-height: 1.1;
	text-decoration: none;
}

.price-cta .price-old:after {
	content: "";
	position: absolute;
	left: -6px;
	right: -6px;
	top: 50%;
	height: 3px;
	background-color: #991f3c;
	transform: translateY(-50%) rotate(-10deg);
}

.price-cta .btns-row {
	margin-top: 20px;
}

.price-cta .photo-col {
	align-self: flex-end;
}

.price-cta .photo {
	display: block;
	width: 100%;
	aspect-ratio: 437 / 524;
	object-fit: cover;
	object-position: top;
}

@media (min-width: 992px) {
	.price-cta-content {
		padding-top: 85px;
		padding-bottom: 70px;
	}

	.price-cta .akcia-head {
		gap: 30px;
		margin-bottom: 60px;
	}

	.badge-akcia {
		width: 180px;
		height: 64px;
	}

	.badge-akcia:before,
	.badge-akcia:after {
		width: 180px;
		height: 130px;
	}

	.badge-akcia span,
	.price-cta .akcia-title {
		font-size: 36px;
	}

	.price-cta ul:not([class]) li {
		font-size: 18px;
	}

	.price-cta .prices {
		margin-top: 60px;
	}

	.price-cta .price-new,
	.price-cta .price-old {
		font-size: 48px;
	}

	.price-cta .rate {
		font-size: 18px;
	}

	.price-cta .btns-row {
		margin-top: 30px;
	}

	.price-cta .btn {
		--btn-height: 60px;
		font-size: 24px;
	}
}

/* [new] 2.1.1 Процедура — «Этапы коррекции» (нумерованные шаги, на мобилке и планшете — горизонтальная лента) */
.stages .num {
	flex: 0 0 20px;
	color: #196466;
	font-size: 26px;
	line-height: 1;
}

.stages .stage-body {
	padding-top: 6px;
}

.stages .stage-title {
	font-size: 20px;
	line-height: 1;
	margin-bottom: 4px;
}

@media (min-width: 992px) {
	.stages .num {
		flex-basis: 40px;
		font-size: 36px;
	}

	.stages .stage-body {
		padding-top: 10px;
	}

	.stages .stage-title {
		font-size: 26px;
	}
}

/* [new] 2.1.1 Процедура — Юнит За и против (Показания | Противопоказания) */
.pros-cons-unit li {
	line-height: 1.3;
}

.pros-cons-unit li:not(:last-child) {
	margin-bottom: 20px;
}

/* во втором столбце (противопоказания) буллиты бордовые */
.pros-cons-unit .contra ul:not([class]) li:before {
	background-color: #991f3c;
}

/* [new] 2.1.1 Процедура — Юнит Вопросы и ответы (таблица вопрос | ответ, без аккордеона) */
.qa-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.qa-unit .qa-row {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding-bottom: 20px;
	border-bottom: 1px solid #d9d9d9;
}

.qa-unit .qa-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.qa-unit .question {
	font-size: 20px;
	line-height: 1;
}

@media (min-width: 992px) {
	.qa-unit .qa-row {
		flex-direction: row;
		gap: 40px;
	}

	.qa-unit .question {
		flex: 0 0 400px;
		font-size: 26px;
	}

	.qa-unit .answer {
		padding-top: 5px;
	}
}

/* [new] 2.1.1 Процедура — «Какие проблемы решает»: зазоры карточек по макету
   (карточка 510 + 40 до линии + 41 после; на мобилке 280 + 16/15) */
.problems-unit .popular-slider .carousel__slide {
	--carousel-slide-width: 311px;
	padding-right: 31px;
}

.problems-unit .popular-slider .carousel__slide:not(:last-child):after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 15px;
	width: 1px;
	background-color: #c9c9c9;
}

@media (min-width: 992px) {
	.problems-unit .popular-slider .carousel__slide {
		--carousel-slide-width: 591px;
		padding-right: 81px;
	}

	.problems-unit .popular-slider .carousel__slide:not(:last-child):after {
		right: 40px;
	}
}

/* [new] 2.1.1 Процедура — «Варианты процедуры»: список «Анонс акции» с описанием.
   Имена и цены чёрные Circe Light (на десктопе 24px), описание вплотную к имени */
.promo-variants .promo-prices .new {
	font-weight: 350;
}

@media (min-width: 992px) {
	.promo-variants .promo-name .name,
	.promo-variants .promo-prices .new {
		font-size: 24px;
	}
}

/* [new] 2.x Услуга/Направление/Процедура — линии заголовков юнитов уходят за правый
   край экрана (в макете линия 1293px при контенте 1280 — как у .popular-articles).
   Описания (.med-*, .svc-brief, .svc-detail) и «Консультация и лечение» — до края контента, в списке их нет.
   overflow: hidden на секциях гасит горизонтальный скролл от линии */
.svc-intro,
.svc-brief,
.svc-detail,
.med-brief,
.med-detail,
.service-groups,
.prices-unit,
.clinics-unit,
.results-slider-unit {
	overflow: hidden;
}

@media (min-width: 768px) {
	.svc-intro .page-text h2:has(span)::after,
	.service-groups .page-text h2:has(span)::after,
	.prices-unit .page-text h2:has(span)::after,
	.results-slider-unit .page-text h2:has(span)::after {
		right: -100vw;
	}
}

/* -- [new] 2.2 {Направление медицины} цены -- */

/* [new] 2.2 Цены — группы услуг: список «Анонс акции» (как «Процедуры и цены» на услуге),
   но имена и цены на десктопе крупнее — 24px */
.price-group + .price-group {
	margin-top: 40px;
}

@media (min-width: 992px) {
	.price-groups .promo-name .name,
	.price-groups .promo-prices .new,
	.price-groups .promo-old .old {
		font-size: 24px;
	}
}

/* [new] 2.2 Цены — карточка клиники (название, время, адрес, рейтинг Яндекса, кнопки) */
.clinic-card {
	display: block;
	background-color: #f9f9f9;
	padding: 15px;
}

.clinic-card .rating {
	margin-top: 25px;
}

.clinic-card .btns {
	margin-top: 40px;
	gap: 20px;
}

/* иконка, а не контентная картинка — как у .clinics-unit .rating .pin */
.clinic-card .rating .pin {
	width: 20px;
	height: 25px;
	margin-bottom: 0;
}

@media (min-width: 992px) {
	.clinic-card {
		padding: 20px;
	}

	.clinic-card .rating {
		margin-top: 30px;
	}

	.clinic-card .btns {
		margin-top: 30px;
		gap: 25px;
	}

	.clinic-card .rating .pin {
		width: 25px;
		height: 31px;
	}

	.clinic-card .btn {
		--btn-height: 60px;
		font-size: 24px;
	}
}

/* [new] 2.2 Цены — примечание «Низкие цены — высокое качество» под карточкой */
.lowprice-note {
	margin-top: 40px;
}

.lowprice-note h3.font-2 {
	margin-bottom: 10px;
}

@media (min-width: 992px) {
	.lowprice-note {
		padding: 0 20px;
	}
}

/* [new] промо-листы: цена без скидки — не жирная. Утилита fw-350 в разметке проигрывала
   по специфичности правилу .promo-prices .new (bold) — фикс для 2.1/2.1.1/2.2 разом */
.promo-prices .new.fw-350 {
	font-weight: 350;
}

/* -- [new] 7.3 404-ошибка -- */
/* кнопка «на главную»: фиксированная ширина из макета, на десктопе крупная (60/24) */
.error-unit .btn {
	width: 290px;
	margin-top: 30px;
}

@media (min-width: 992px) {
	.error-unit .btn {
		--btn-height: 60px;
		margin-top: 40px;
		font-size: 24px;
	}
}

/* полоса первого экрана на страницах БЕЗ хлебных крошек (404, контакты, карта сайта) —
   той же высоты, что на страницах с крошками и примечанием: заголовок по вертикали встаёт
   на место h1 (под скрытыми крошками), низ полосы совпадает */
.head-no-crumbs .page-header {
	min-height: 140px;
	align-content: center;
}

@media (min-width: 992px) {
	.head-no-crumbs .page-header {
		min-height: 167px;
	}
}

/* -- [new] 1.1. Спецпроект (инфо-лендинг) -- */

/* [new] 1.1. Спецпроект — «Процедуры и цены»: категория услуги под названием
   (на мобилке чёрная, на десктопе серая — по макетам) */
.promo-cat {
	font-size: 14px;
	line-height: 1.3;
}

@media (min-width: 992px) {
	.promo-cat {
		color: #555;
	}
}

/* [new] 1.1. Спецпроект — ссылка «Все акции» под списком акций (только мобилка) */
.svc-promo .all-akcii {
	margin-top: 30px;
	font-size: 20px;
	line-height: 1;
}

/* [new] 1.1. Спецпроект — врезки в потоке текста центрированные (.napravlenie-quote),
   в макете отступ от текста 30px */
.svc-intro .napravlenie-quote,
.spec-brief .napravlenie-quote {
	margin-top: 30px;
}

/* [new] 1.1. Спецпроект — «Консультация и лечение (3)»: упрощённые строки клиник
   (название + направление + рейтинг) с разделителями; линия заголовка заканчивается
   на краю контейнера (в отличие от базового .clinics-unit, где уходит за экран) */
.clinics-brief .clinic-row {
	padding-bottom: 15px;
	border-bottom: 1px solid #d9d9d9;
}

.clinics-brief .clinic-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.clinics-brief .clinic-row + .clinic-row {
	margin-top: 15px;
}

/* мобилка: строка в два столбца — название слева, рейтинг (без звёзд) колонкой 85px справа,
   «650 отзывов в Яндексе» переносится на две строки */
@media (max-width: 767px) {
	.clinics-brief .clinic-row {
		flex-direction: row;
		justify-content: space-between;
		gap: 10px;
	}

	.clinics-brief .rating {
		flex: 0 0 85px;
	}

	.clinics-brief .stars {
		display: none;
	}
}

@media (min-width: 768px) {
	.clinics-brief .clinic-row {
		padding-bottom: 20px;
	}

	.clinics-brief .clinic-row + .clinic-row {
		margin-top: 20px;
	}
}

@media (min-width: 768px) {
	.clinics-unit.clinics-brief .page-text h2:has(span)::after {
		right: 0;
	}
}

@media (min-width: 992px) {
	/* наклейка на уровне верха списка клиник (в макете top 154 от верха юнита) */
	.clinics-unit.clinics-brief .sticker {
		top: 104px;
		bottom: auto;
	}
}

/* [new] 1.1. Спецпроект — юниты «врезка/список/иллюстрация справа»: текст col-8 +
   aside col-4 (на мобилке aside идёт НАД текстом — в markup он первый, на десктопе
   order-lg-last). Зазор между aside и текстом на мобилке 30px */
.aside-unit .row {
	--bs-gutter-y: 1.875rem;
}

/* врезка-цитата: рамки сверху/снизу, текст по левому краю (в отличие от .napravlenie-quote) */
.aside-quote {
	padding: 10px;
	border-top: 1px solid #555;
	border-bottom: 1px solid #555;
	font-size: 19px;
	line-height: 1.3;
}

@media (min-width: 992px) {
	.aside-quote {
		font-size: 24px;
	}
}

/* врезка-список: та же рамка, внутри обычный ul с зелёными буллитами из .page-text */
.aside-list {
	padding: 10px;
	border-top: 1px solid #555;
	border-bottom: 1px solid #555;
}

.aside-list ul {
	margin: 0;
}

/* иллюстрация с подписью в aside: пропорции 4:3 (400×300), без нижнего отступа фигуры */
.aside-figure {
	margin: 0;
}

.aside-figure .cover {
	aspect-ratio: 4 / 3;
}

/* -- [new] 4. Акции -- */

/* [new] 4 Акции — «Сроки акций (дисклеймер)»: бирюзовая полоса, внутри белая карточка */
.akcii-note-unit {
	background-color: #196466;
	padding: 10px 0;
}

.akcii-note {
	background-color: #fff;
	padding: 20px;
	overflow: hidden;
}

.akcii-note .note-title {
	font-size: 19px;
	line-height: 1.3;
	/* заголовок не должен подлезать под крестик */
	padding-right: 40px;
}

.akcii-note .note-text {
	line-height: 1.3;
}

/* крестик — две полоски (правило «повторяющуюся иконку рисуем в CSS») */
.btn-note-close {
	position: absolute;
	top: 25px;
	right: 30px;
	width: 16px;
	height: 16px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.btn-note-close::before,
.btn-note-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 19px;
	height: 1.5px;
	margin: -1px 0 0 -9.5px;
	border-radius: 1px;
	background-color: #196466;
}

.btn-note-close::before {
	transform: rotate(45deg);
}

.btn-note-close::after {
	transform: rotate(-45deg);
}

@media (min-width: 768px) {
	.akcii-note-unit {
		padding: 20px 0;
	}

	.akcii-note {
		/* карточка шире текстовой колонки: в макете 1360 при контенте 1280 */
		margin-left: calc(-.5 * var(--bs-gutter-x));
		margin-right: calc(-.5 * var(--bs-gutter-x));
		padding: 15px 40px;
	}

	.akcii-note .note-title {
		font-size: 24px;
		padding-right: 0;
	}

	.akcii-note .note-text {
		max-width: 620px;
	}

	.btn-note-close {
		top: 50%;
		right: 40px;
		width: 20px;
		height: 20px;
		margin-top: -10px;
	}

	.btn-note-close::before,
	.btn-note-close::after {
		width: 24px;
		margin-left: -12px;
	}
}

@media (min-width: 1400px) {
	/* контейнер зафиксирован (1320) — карточка выходит за него на 40px с каждой стороны,
	   и текст встаёт ровно по краю контента, как в макете */
	.akcii-note {
		margin-left: -40px;
		margin-right: -40px;
	}
}

/* [new] 4 Акции — заголовок направления перед слайдером акций (отдельная секция,
   т.к. у слайдера свой фон и overflow). Линия уходит за правый край экрана
   (в макете 1598px при контенте 1280) */
.akcia-head-unit {
	overflow: hidden;
	padding: 40px 0;
}

.akcia-head-unit .page-text h2 {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.akcia-head-unit {
		padding: 50px 0 40px;
	}

	.akcia-head-unit .page-text h2:has(span)::after {
		right: -100vw;
	}
}

/* -- [new] Модальные окна записи и дисклеймер cookies (общие для всех страниц) -- */

/* [new] Модалка — Fancybox вешает .fancybox__content на сам блок, поэтому ширина и фон
   задаются здесь, а отступы — в .zapis-modal/.sent-modal (перебивают штатные 44px) */
.modal-box {
	width: 1060px;
	max-width: 100%;
	background-color: #fff;
}

/* на мобилке окно во всю ширину экрана (в макете 360 при экране 360) —
   снимаем штатные отступы слайда Fancybox */
@media (max-width: 767px) {
	.fancybox__slide:has(> .modal-box) {
		padding: 0;
	}
}

/* штатная кнопка закрытия Fancybox перекрашена под макет: тонкий бирюзовый крестик
   20×20 в поле 40×40 (правило «не заводить свою кнопку, если она уже есть») */
.fancybox__container .modal-box > .carousel__button.is-close {
	--carousel-button-bg: transparent;
	--carousel-button-svg-filter: none;
	color: #196466;
	--carousel-button-width: 40px;
	--carousel-button-height: 40px;
	--carousel-button-svg-width: 20px;
	--carousel-button-svg-height: 20px;
	--carousel-button-svg-stroke-width: 1.5;
	/* центр крестика в 40px от верха и правого края окна, как в макете */
	top: 20px;
	right: 20px;
}

/* [new] Модалка записи на приём (с акцией и без) */
.zapis-modal {
	padding: 100px 15px;
}

.zapis-modal .modal-title {
	font-size: 40px;
	font-weight: bold;
	line-height: 1.1;
	text-align: center;
}

.zapis-modal .subject-label {
	margin-top: 50px;
	font-size: 16px;
}

.zapis-modal .modal-subject {
	margin-top: 15px;
}

.zapis-modal .name {
	font-size: 26px;
	line-height: 1.1;
}

/* подарок — та же врезка с бордовой линией слева, что и в блоке акции */
.zapis-modal .gift {
	margin-top: 5px;
	padding-left: 10px;
	border-left: 2px solid #991f3c;
	font-size: 14px;
	line-height: 1.3;
}

.zapis-modal .prices {
	display: flex;
	align-items: flex-start;
	gap: 30px;
}

.zapis-modal .price-new {
	font-size: 40px;
	line-height: 1.1;
	white-space: nowrap;
}

/* «₽» в цене мельче самой суммы (по макету 24 при 48 / 19 при 40) */
.zapis-modal .price-new .cur,
.zapis-modal .price-old .cur {
	font-size: 19px;
	line-height: 1.3;
}

.zapis-modal .rate {
	display: block;
	color: #555;
	font-size: 16px;
	line-height: 1.3;
}

/* старая цена: светлое начертание, прозрачный текст и насыщенная диагональ поверх
   (тот же приём, что в .blog-akcia .price-old) */
.zapis-modal .price-old {
	position: relative;
	color: rgba(0, 0, 0, .4);
	font-size: 40px;
	font-weight: 300;
	line-height: 1.1;
	text-decoration: none;
	white-space: nowrap;
}

.zapis-modal .price-old:after {
	content: "";
	position: absolute;
	left: -3px;
	right: -3px;
	top: 50%;
	height: 2px;
	background-color: #991f3c;
	transform: translateY(-50%) rotate(-10deg);
}

.zapis-modal .subject-note {
	margin-top: 10px;
}

.zapis-modal .modal-form {
	margin-top: 50px;
}

.zapis-modal .modal-form .form-control {
	padding: 10px;
}

.zapis-modal .modal-policy {
	margin-top: 15px;
}

.zapis-modal .modal-clinic {
	margin-top: 30px;
}

.zapis-modal .clinic-name {
	font-size: 19px;
	line-height: 1.3;
}

.zapis-modal .clinic-dir {
	font-size: 16px;
	line-height: 1.3;
}

.zapis-modal .clinic-address {
	margin-top: 10px;
}

.zapis-modal .rating .pin {
	width: 20px;
	height: 25px;
	margin-bottom: 0;
}

/* [new] Модалка «Ваш запрос отправлен!» */
.sent-modal {
	padding: 100px 15px;
	text-align: center;
}

.sent-modal .modal-title {
	font-size: 40px;
	font-weight: bold;
	line-height: 1.1;
}

.sent-modal .modal-text {
	margin-top: 25px;
	font-size: 16px;
	line-height: 1.3;
}

@media (min-width: 768px) {
	.zapis-modal {
		padding: 60px 110px 80px;
	}

	.zapis-modal .modal-title {
		font-size: 48px;
	}

	.zapis-modal .subject-label {
		margin-top: 60px;
		font-size: 18px;
	}

	.zapis-modal .modal-subject {
		margin-top: 20px;
	}

	.zapis-modal .name {
		font-size: 36px;
	}

	.zapis-modal .gift {
		padding-left: 15px;
		margin-top: 0;
	}

	.zapis-modal .prices {
		gap: 40px;
	}

	.zapis-modal .price-new,
	.zapis-modal .price-old {
		font-size: 48px;
	}

	.zapis-modal .price-new .cur,
	.zapis-modal .price-old .cur {
		font-size: 24px;
	}

	.zapis-modal .rate {
		font-size: 18px;
	}

	.zapis-modal .modal-form {
		margin-top: 60px;
	}

	.zapis-modal .modal-clinic {
		margin-top: 40px;
	}

	.zapis-modal .clinic-name {
		font-size: 24px;
	}

	.zapis-modal .clinic-dir {
		font-size: 18px;
	}

	/* кнопки в модалке крупнее базовых: 60px и 24px по макету */
	.zapis-modal .btn {
		--btn-height: 60px;
		font-size: 24px;
	}

	.sent-modal {
		padding: 60px 110px 80px;
	}

	.sent-modal .modal-title {
		font-size: 48px;
	}

	.sent-modal .modal-text {
		margin-top: 30px;
		font-size: 18px;
	}
}

/* [new] Дисклеймер cookies — фиксированная плашка внизу экрана */
.cookie-note {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 30px;
	z-index: 1000;
}

.cookie-note[hidden] {
	display: none;
}

.cookie-note .cookie-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	background-color: #fff;
	border: 1px solid #196466;
	padding: 15px;
}

.cookie-note .cookie-text {
	font-size: 19px;
	line-height: 1.3;
	text-align: center;
}

.cookie-note .cookie-btns {
	display: flex;
	gap: 10px;
	width: 270px;
	max-width: 100%;
}

.cookie-note .btn {
	--btn-height: 30px;
	flex: 1 0 0;
	font-size: 16px;
}

@media (min-width: 768px) {
	.cookie-note {
		bottom: 50px;
	}

	.cookie-note .cookie-box {
		flex-direction: row;
		justify-content: space-between;
		padding: 20px;
	}

	.cookie-note .cookie-text {
		font-size: 24px;
		text-align: left;
	}

	.cookie-note .cookie-btns {
		gap: 20px;
	}

	.cookie-note .btn {
		--btn-height: 40px;
		font-size: 18px;
	}
}

/* -- [new] 7.2 Карта сайта -- */

/* [new] 7.2 Карта сайта — блок рубрики: заголовок раздела + список ссылок без маркеров */
.sitemap-unit {
	padding: 40px 0;
}

.sitemap-group + .sitemap-group {
	margin-top: 30px;
}

/* заголовок раздела мельче обычного заголовка юнита и без линии (в макете 20/26px) */
.sitemap-unit .page-text h2 {
	font-size: 20px;
	line-height: 1;
	margin: 0 0 10px;
}

.sitemap-links {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
}

/* .page-text li даёт 10px снизу — здесь зазор задаёт gap списка */
.page-text .sitemap-links li {
	margin-bottom: 0;
	font-size: 16px;
	line-height: 1.3;
}

@media (min-width: 768px) {
	.sitemap-unit {
		padding: 50px 0;
	}

	.sitemap-group + .sitemap-group {
		margin-top: 40px;
	}

	.sitemap-unit .page-text h2 {
		font-size: 26px;
		margin-bottom: 15px;
	}

	.page-text .sitemap-links li {
		font-size: 18px;
	}
}

/* -- [new] 7.1 Контакты -- */

/* [new] 7.1 Контакты — «Связаться с редакцией»: тот же кремовый юнит с формой и фото,
   что CTA-баннер, но заголовок 36px, без выбора направления и с примечанием по левому краю */
.redaction-consult .unit-title {
	font-size: 26px;
	line-height: 1.1;
}

.redaction-consult .form {
	max-width: 620px;
}

@media (min-width: 768px) {
	.redaction-consult .unit-title {
		font-size: 36px;
	}
}

/* фото в макете 480×450 (десктоп) и 330×309 в ширину колонки (мобилка) — жёстко задаём
   пропорции, чтобы картинка из CMS не растягивала секцию */
.redaction-consult .photo {
	width: 100%;
	aspect-ratio: 330 / 309;
	object-fit: cover;
	object-position: center top;
}

@media (min-width: 992px) {
	.redaction-consult .photo-wrap {
		display: flex;
		justify-content: flex-end;
	}

	.redaction-consult .photo {
		width: 480px;
		height: 450px;
		aspect-ratio: auto;
	}
}


/* -- [new] 5. Клиники-партнёры -- */

/* [new] 5 Клиники-партнёры — Лента предложений
   геометрия слайдера взята у «Какие проблемы решает» (.problems-unit): карточка 510+81 / 280+31 */
.offers-strip .article-desc {
	color: #000;
}

/* [new] 5 Клиники-партнёры — Юнит Список клиник */
/* строка-клиника: разделитель под каждой кроме последней, шаг 10px (в «Консультации и лечении» 25) */
.clinic-list-unit .clinic-row {
	padding-bottom: 20px;
	border-bottom: 1px solid #d9d9d9;
}

.clinic-list-unit .clinic-row + .clinic-row {
	margin-top: 10px;
}

.clinic-list-unit .clinic-row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* на мобилке между адресом и рейтингом в макете 15px (у остальных строк шаг 10) */
.clinic-list-unit .clinic-row .rating {
	margin-top: 5px;
}

@media (min-width: 768px) {
	/* в макете колонка названия 550px из 840 */
	.clinic-list-unit .clinic-row {
		grid-template-columns: 65% 1fr;
	}

	.clinic-list-unit .clinic-row .rating {
		margin-top: 0;
	}
}

/* [new] 5 Клиники-партнёры — Юнит Как стать партнёром (СТА) */
.partner-cta {
	padding-top: 2.5rem;
	background-color: #f3f3f6;
	overflow: hidden;
}

.partner-cta .page-text h2 {
	margin-bottom: 25px;
}

.partner-cta p {
	margin-bottom: 30px;
}

.btn-partner {
	width: 100%;
}

/* фото-вырезка: на мобилке под кнопкой во всю ширину колонки и прижата к низу секции.
   Селектор с именем секции — иначе `.page-text img {width:100%}` перебивает ширину */
.partner-cta .partner-cta-photo {
	width: 100%;
	margin-top: 30px;
	aspect-ratio: 561 / 355; /* кадр из макета: люди по пояс, обрезка снизу */
}

/* в макете картинка вставлена в кадр 561×355 на все 100% по обеим сторонам (в Figma `size-full`,
   без обрезки), поэтому fill, а не cover из утилиты .object-fit: при cover люди обрезаются
   и «зумятся», при contain — уменьшаются и не добивают до краёв кадра */
.partner-cta .partner-cta-photo img {
	object-fit: fill;
	margin-bottom: 0;
}

/* планшет: макета нет, раскладка мобильная — но фото во всю ширину колонки становится
   огромным (736×466), поэтому ограничиваем его размером из макета и центруем */
@media (min-width: 768px) {
	.partner-cta .partner-cta-photo {
		max-width: 561px;
		margin-left: auto;
		margin-right: auto;
	}
}

@media (min-width: 992px) {
	.partner-cta {
		padding-bottom: 2.5rem;
	}

	.partner-cta .page-text h2 {
		margin-bottom: 30px;
	}

	.partner-cta p {
		margin-bottom: 40px;
	}

	.partner-cta-text {
		width: 57%; /* в макете 730 из 1280 */
		min-height: 305px; /* секция в макете 385: текст 305 + отступы 2×40, иначе фото обрезается сверху */
	}

	.btn-partner {
		--btn-height: 60px;
		width: 400px;
		font-size: 24px;
	}

	/* в макете фото 561×355 прижато к низу секции и доходит до правого края контента */
	.partner-cta .partner-cta-photo {
		position: absolute;
		right: 0;
		bottom: -2.5rem;
		width: 44%; /* в макете 561 из 1280 */
		margin-top: 0;
	}
}


/* -- [new] 5.1. Клиника (лендинг) -- */

/* [new] 5.1 Клиника — Рейтинги на внешних площадках */
.clinic-ratings .row {
	--bs-gutter-y: 30px;
}

/* мобилка: иконка площадки слева от оценки, блок 200px по центру экрана (по макету) */
.rating-card {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	width: 200px;
	margin: 0 auto;
}

.rating-card .logo-ico {
	width: 48px;
	height: 48px;
}

.rating-score {
	line-height: 1.1;
}

.rating-score .score {
	font-size: 40px;
}

.rating-score .of {
	font-size: 16px;
}

/* звёзды мельче, чем в общем .stars: ячейка маски 23.5 (звезда 20.5 + зазор 3) */
.clinic-ratings .stars {
	width: 114px;
	height: 20px;
	margin: 5px 0;
	-webkit-mask-size: 23.5px 20px;
	mask-size: 23.5px 20px;
}

.rating-card .reviews {
	font-size: 16px;
}

@media (min-width: 768px) {
	/* в макете три колонки по 400 с зазором 40 — оставляем штатный гаттер 32px:
	   40px даёт строке отрицательные поля 20px при padding контейнера 16px, т.е. горизонтальный скролл */
	.rating-card {
		flex-direction: column;
		gap: 20px;
		width: auto;
		margin: 0;
	}

	/* бокс логотипа 70px: логотипы площадок разной высоты, выравниваем по центру */
	.rating-card .rating-logo {
		display: flex;
		align-items: center;
		height: 70px;
	}

	.rating-card .logo-wide {
		max-width: 100%;
		height: auto;
	}

	.rating-score .score {
		font-size: 48px;
	}

	.rating-score .of {
		font-size: 18px;
	}

	.clinic-ratings .stars {
		width: 136px;
		height: 23px;
		-webkit-mask-size: 28px 23px;
		mask-size: 28px 23px;
	}

	.rating-card .reviews {
		font-size: 18px;
	}
}

/* [new] 5.1 Клиника — О клинике (видео) */
/* кадр 16:9 с затемнением: ролик открывается в Fancybox (data-type="iframe"), как на боевом сайте */
.clinic-video {
	margin: 0 0 30px;
}

.clinic-video .video-frame {
	position: relative;
	aspect-ratio: 16 / 9;
}

.clinic-video .video-frame:after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, .5);
}

.clinic-video .video-frame img {
	margin-bottom: 0;
}

.clinic-video .video-play {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: auto;
	width: 48px;
	height: 48px;
}

.clinic-video .video-play img {
	width: 100%;
	height: 100%;
}

.clinic-video .video-caption {
	margin-top: 10px;
}

/* мобилка: видео во всю ширину экрана (в макете выходит за поля контейнера) */
@media (max-width: 767.98px) {
	.clinic-video .video-frame {
		margin-left: calc(-.5 * var(--bs-gutter-x));
		margin-right: calc(-.5 * var(--bs-gutter-x));
	}
}

@media (min-width: 992px) {
	.clinic-video {
		margin-bottom: 40px;
	}

	.clinic-video .video-play {
		width: 140px;
		height: 140px;
	}
}

/* [new] 5.1 Клиника — Юнит Врачи (лента карточек) */
.doctors-unit {
	overflow: hidden;
}

/* карточки продолжаются за правый край контейнера до края экрана */
.doctors-slider,
.doctors-slider .carousel__viewport {
	overflow: visible;
}

/* слайд = карточка 280px + отступ 20px */
.doctors-slider .carousel__slide {
	--carousel-slide-width: 300px;
	max-width: none;
	padding: 0 20px 0 0;
	overflow: visible;
}

.doctor-block .cover {
	aspect-ratio: 1;
	border-bottom: 1px solid #555;
}

.doctor-text {
	margin-top: 20px;
}

.doctor-name {
	line-height: 1.3;
}

.doctor-badge {
	display: inline-block;
	margin-top: 10px;
	padding: 2px 15px;
	color: #fff;
	background-color: #196466;
}

@media (min-width: 992px) {
	/* карточка 400px + отступ 40px */
	.doctors-slider .carousel__slide {
		--carousel-slide-width: 440px;
		padding-right: 40px;
	}

	/* линия заголовка уходит за правый край экрана (в макете блок линии 2031 при контенте 1280) */
	.doctors-unit .page-text h2:has(span)::after {
		right: -100vw;
	}
}

/* [new] 5.1 Клиника — Виджет отзывов Яндекс.Карт */
/* код виджета отдаёт конструктор Яндекса с инлайн-стилями (560×800 фикс.) — переносим их
   в классы и делаем ширину резиновой, чтобы виджет вписывался в колонку 400px и в мобилку */
.yreviews {
	position: relative;
	width: 100%;
	max-width: 560px;
	height: 600px;
	overflow: hidden;
}

.yreviews-frame {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid #e6e6e6;
	border-radius: 8px;
}

/* обязательная ссылка на карточку организации из кода Яндекса */
.yreviews-link {
	position: absolute;
	left: 0;
	bottom: 8px;
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-height: 14px;
	padding: 0 16px;
	overflow: hidden;
	color: #b3b3b3;
	font-size: 10px;
	line-height: 14px;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (min-width: 992px) {
	.yreviews {
		height: 800px;
	}
}

/* -- [new] 6 Врачи -- */

/* [new] 6 Врачи — Врачи по направлениям */
/* заголовок группы = h2 БЕЗ span (без линии) + название клиники Cormorant под ним вплотную */
.doctors-list-unit .doctors-group h2 {
	margin-bottom: 0;
}

.doctors-list-unit .doctors-group:not(:first-child) {
	margin-top: 40px;
}

.doctors-group-clinic {
	font-size: 26px;
	line-height: 1;
}

.doctors-table {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 25px;
}

/* строка врача: имя + специальность, ниже бейдж автора; разделитель у всех, кроме последней */
.doctor-line {
	padding-bottom: 10px;
	border-bottom: 1px solid #d9d9d9;
}

.doctor-line:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

/* в макете бокс имени налезает на специальность на 5px (mb -5) — иначе строка выше на 5px */
.doctor-line-desc a {
	line-height: 1.3;
	margin-bottom: -5px;
}

/* бейдж переиспользован с карточки врача (5.1 Клиника), здесь свой отступ */
.doctor-line .doctor-badge {
	margin-top: 5px;
}

@media (min-width: 768px) {
	/* с планшета бейдж уезжает вправо: колонка описания 480 + колонка бейджа 207 (в макете 840) */
	.doctor-line {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 20px;
	}

	.doctor-line-desc {
		flex: 1 1 auto;
		max-width: 480px;
	}

	.doctor-line .doctor-badge {
		flex: 0 0 207px;
		text-align: center;
	}

	.doctors-table {
		gap: 15px;
		margin-top: 30px;
	}
}

@media (min-width: 992px) {
	.doctors-group-clinic {
		font-size: 36px;
	}

	.doctors-list-unit .doctors-group:not(:first-child) {
		margin-top: 40px;
	}
}

/* [new] 6 Врачи — Анонс публикации (заголовок + дата + автор) */
/* внутри серой панели «Последние публикации» и без панели — в «Все статьи автора» на карточке врача */
.pub-list {
	gap: 10px;
}

.pub-item {
	padding-bottom: 10px;
	border-bottom: 1px solid #d9d9d9;
}

.pub-item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.pub-title {
	font-size: 20px;
}

.pub-date {
	margin-top: 3px;
}

.pub-author {
	margin-top: 15px;
}

.pub-all {
	font-size: 20px;
	margin-top: 15px;
}

/* панель «Последние публикации» — каркас .useful-articles, но на мобилке поле 15px (в макете) */
@media (max-width: 767px) {
	.publications {
		padding: 15px;
	}
}

.publications .ttl {
	margin-bottom: 25px;
}

@media (min-width: 992px) {
	.pub-list {
		gap: 15px;
	}

	.pub-item {
		padding-bottom: 15px;
	}

	.pub-title {
		font-size: 26px;
	}

	.pub-author {
		margin-top: 20px;
	}

	.pub-all {
		font-size: 26px;
		margin-top: 25px;
	}

	.publications .ttl {
		margin-bottom: 30px;
	}
}

/* -- [new] 6.1 Карточка врача (автора) -- */

/* [new] 6.1 Карточка врача — Автор и его соцсети */
/* фото квадратное, снизу линия как у карточки врача в клинике (.doctor-block .cover) */
.doctor-photo {
	aspect-ratio: 1;
	margin-bottom: 30px;
	border-bottom: 1px solid #555;
}

.doctor-socials {
	margin-top: 30px;
}

/* бейдж автора в первом экране: в макете отступ 5px на мобилке и 10px на десктопе */
@media (max-width: 767px) {
	.page-header .doctor-badge {
		margin-top: 5px;
	}
}

/* [new] 6.1 Карточка врача — Образование */
.edu-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.edu-row {
	display: flex;
	gap: 5px;
	line-height: 1.3;
}

.edu-year {
	flex: 0 0 60px;
}

@media (min-width: 992px) {
	.edu-list {
		gap: 15px;
	}

	.edu-row {
		gap: 10px;
	}

	.edu-year {
		flex: 0 0 70px;
	}
}

/* [new] 6.1 Карточка врача — Дипломы (слайдер сканов в серой панели) */
/* панель — тот же каркас .useful-articles, что у «Последних публикаций» */
.diplomas-slider {
	overflow: hidden;
}

.diplomas-slider .carousel__slide {
	--carousel-slide-width: 100%;
	max-width: none;
	padding: 0;
}

.diploma .cover {
	aspect-ratio: 580 / 497;
}

.diploma-caption {
	margin-top: 15px;
	line-height: 1.3;
}

/* полоса прокрутки видна на всех ширинах (в макете есть и на десктопе), дорожка #d9d9d9 */
.diplomas-scrollbar {
	position: relative;
	height: 5px;
	margin-top: 30px;
	border-radius: 5px;
	background-color: #d9d9d9;
}

.diplomas-scrollbar .drag {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	border-radius: 5px;
	background-color: #196466;
	transition: left .3s ease;
}

@media (max-width: 767px) {
	/* серая панель дипломов выходит на всю ширину экрана, как и панель публикаций */
	.diplomas {
		padding: 15px;
	}
}

/* -- [new] 1. Главная -- */

/* [new] 1 Главная — Строка блоков (крупный анонс: фото + текстовая панель)
   Мобилка: фото 360×270 во всю ширину, под ним текст; десктоп: фото 840×630 слева,
   панель 440 справа, текст прижат к низу */
.home-hero {
	background-color: #f3f3f6;
}

.home-hero .cover {
	aspect-ratio: 4 / 3;
}

.home-hero-text {
	padding: 20px 15px;
}

.home-hero .title {
	font-size: 26px;
	line-height: 1.1;
}

.home-hero-date {
	margin-top: 1px;
}

/* заголовок с датой и автор разнесены по краям текстового блока (в макете 15px на мобилке,
   на десктопе — по краям бокса 340px) */
.home-hero-align {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* на мобилке блок выходит на всю ширину экрана (в макете 360 при экране 360) */
@media (max-width: 767px) {
	.home-hero {
		margin-left: calc(var(--bs-gutter-x) * -.5);
		margin-right: calc(var(--bs-gutter-x) * -.5);
	}
}

@media (min-width: 768px) {
	.home-hero {
		display: flex;
		align-items: stretch;
	}

	/* 840 из 1280 контейнера */
	.home-hero .cover {
		flex: 0 0 65.625%;
	}

	.home-hero-text {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		padding: 20px;
	}

	.home-hero-align {
		min-height: 250px;
		justify-content: space-between;
		gap: 20px;
	}
}

@media (min-width: 992px) {
	.home-hero-text {
		padding: 40px;
	}

	.home-hero-align {
		min-height: 340px;
	}

	.home-hero .title {
		font-size: 36px;
	}
}

/* [new] 1 Главная — Юнит с анонсами (сетка анонсов + «Горящие предложения») */
/* линия заголовка «Специальные цены» уходит за правый край экрана (в макете 1434px в колонке 620) */
.home-anons-unit {
	overflow: hidden;
}

/* вертикальные зазоры по макету: между колонками юнита 40, между карточками 30 (на десктопе 40) */
.home-anons-row {
	--bs-gutter-y: 40px;
}

.home-anons-tile {
	--bs-gutter-y: 30px;
}

@media (min-width: 992px) {
	.home-anons-tile {
		--bs-gutter-y: 40px;
	}
}

/* карточка = .blog-post-item с блога; здесь под заголовком дата и автор, а не рубрика */
.home-anons-tile .anons-date {
	margin-top: 3px;
}

.home-anons-tile .author {
	margin-top: 15px;
}

/* на мобилке в макете у анонсов нет превью (только текст), а заголовок мельче — 20px */
@media (max-width: 767px) {
	.home-anons-tile .blog-post-item .cover {
		display: none;
	}

	.home-anons-tile .blog-post-item .title {
		font-size: 20px;
	}
}

@media (min-width: 768px) {
	.home-anons-tile .author {
		margin-top: 10px;
	}
}

@media (min-width: 992px) {
	/* превью 290×218 (в блоге 190 — там колонка уже) */
	.home-anons-tile .blog-post-item .cover {
		height: 218px;
	}
}

/* «Показать ещё» под сеткой анонсов (в макете 30px на мобилке и 40px на десктопе) */
.home-anons-more {
	margin-top: 30px;
}

@media (min-width: 992px) {
	.home-anons-more {
		margin-top: 40px;
	}
}

/* заголовок в две строки: «Специальные цены» и бордовое «до 31 мая!», линия — от второй строки */
.home-offers .hot-title {
	margin-bottom: 20px;
	line-height: 1;
}

@media (min-width: 768px) {
	.home-offers h2:has(span)::after {
		right: -100vw;
	}
}

.home-offers-all {
	margin-top: 20px;
	font-size: 20px;
	line-height: 1;
}

@media (min-width: 992px) {
	.home-offers-all {
		margin-top: 40px;
		font-size: 26px;
	}
}

/* [new] 1 Главная — Заголовок (слоган на светлой плашке) */
.home-lead {
	background-color: #f3f3f6;
	padding: 50px 0;
}

.home-lead h1 {
	margin-bottom: 0;
	font-size: 36px;
	line-height: 1.1;
}

@media (min-width: 992px) {
	.home-lead {
		padding: 70px 0;
	}

	.home-lead h1 {
		font-size: 48px;
	}
}

/* [new] 1 Главная — Юнит Популярные услуги (лента колонок по направлениям).
   Механика та же, что у «Услуги и цены» (.prices-slider): свободная прокрутка,
   стрелок нет, на мобилке — индикатор прокрутки */
.napr-unit {
	overflow: hidden;
}

.napr-slider,
.napr-slider .carousel__viewport {
	overflow: visible;
}

/* лента отбивается от заголовка так же, как контент других юнитов (30/40 по макету) */
.napr-slider {
	margin-top: 30px;
}

/* слайд = колонка 250px + отступ 30px */
.napr-slider .carousel__slide {
	--carousel-slide-width: 280px;
	max-width: none;
	padding: 0 30px 0 0;
	overflow: visible;
}

.napr-block {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.napr-title {
	font-size: 26px;
}

.napr-sub {
	font-size: 16px;
	line-height: 1.3;
	margin-top: 1px;
}

.napr-links {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 19px;
	line-height: 1.3;
}

.napr-more {
	margin-top: 15px;
	font-size: 20px;
}

.napr-slider-scrollbar {
	margin-left: 0;
	margin-right: 0;
}

@media (min-width: 768px) {
	/* колонка 400px + отступ 40px */
	.napr-slider .carousel__slide {
		--carousel-slide-width: 440px;
		padding-right: 40px;
	}

	.napr-slider {
		margin-top: 40px;
	}

	.napr-block {
		gap: 20px;
	}

	.napr-title {
		font-size: 36px;
	}

	.napr-sub {
		font-size: 18px;
	}

	.napr-links {
		font-size: 24px;
	}

	/* «Ещё услуги по <направлению>» — в макете строка не переносится (в Figma текст nowrap
	   и при необходимости выходит в 40px зазор между колонками). При очень длинном названии
	   направления строка может подойти вплотную к соседней колонке — это осознанно, как в макете */
	.napr-more {
		margin-top: 20px;
		font-size: 26px;
		white-space: nowrap;
	}
}