/* Start:/local/templates/v1/css/normalize.css?17893752016251*/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
    margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
    background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
    border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
    display: none;
}
/* End */


/* Start:/local/templates/v1/js/swiper/swiper-bundle.css?178937520123564*/
/**
 * Swiper 11.1.1
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2024 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: April 9, 2024
 */

/* FONT_START */
@font-face {
  font-family: 'swiper-icons';
  src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');
  font-weight: 400;
  font-style: normal;
}
/* FONT_END */
:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
}
.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
/* CSS Mode */
.swiper-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}
.swiper-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-css-mode.swiper-horizontal > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-css-mode.swiper-vertical > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper {
  scroll-snap-type: none;
}
.swiper-css-mode.swiper-free-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: none;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper::before {
  content: '';
  flex-shrink: 0;
  order: 9999;
}
.swiper-css-mode.swiper-centered > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always;
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-horizontal > .swiper-wrapper::before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before);
}
.swiper-css-mode.swiper-centered.swiper-vertical > .swiper-wrapper::before {
  width: 100%;
  min-width: 1px;
  height: var(--swiper-centered-offset-after);
}
/* Slide styles start */
/* 3D Shadows */
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, 0.15);
}
.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s infinite linear;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */
.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
.swiper-virtual.swiper-css-mode .swiper-wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
  height: 1px;
  width: var(--swiper-virtual-size);
}
.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
  width: 1px;
  height: var(--swiper-virtual-size);
}
:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 10px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: var(--swiper-navigation-top-offset, 50%);
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev.swiper-button-hidden,
.swiper-button-next.swiper-button-hidden {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}
.swiper-navigation-disabled .swiper-button-prev,
.swiper-navigation-disabled .swiper-button-next {
  display: none !important;
}
.swiper-button-prev svg,
.swiper-button-next svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: center;
}
.swiper-rtl .swiper-button-prev svg,
.swiper-rtl .swiper-button-next svg {
  transform: rotate(180deg);
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: var(--swiper-navigation-sides-offset, 10px);
  right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-lock {
  display: none;
}
/* Navigation font start */
.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  font-variant: initial;
  line-height: 1;
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: 'prev';
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: var(--swiper-navigation-sides-offset, 10px);
  left: auto;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: 'next';
}
/* Navigation font end */
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
.swiper-pagination-disabled > .swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  /*background: var(--swiper-pagination-bullet-inactive-color, #000);*/
  /*opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);*/
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
          appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet:only-child {
  display: none !important;
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  /*background: var(--swiper-pagination-color, var(--swiper-theme-color));*/
}
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
  display: block;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform,
        200ms top;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform,
        200ms left;
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform,
    200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: var(--swiper-pagination-progressbar-size, 4px);
  left: 0;
  top: 0;
}
.swiper-vertical > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
  width: var(--swiper-pagination-progressbar-size, 4px);
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-lock {
  display: none;
}
:root {
  /*
  --swiper-scrollbar-border-radius: 10px;
  --swiper-scrollbar-top: auto;
  --swiper-scrollbar-bottom: 4px;
  --swiper-scrollbar-left: auto;
  --swiper-scrollbar-right: 4px;
  --swiper-scrollbar-sides-offset: 1%;
  --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
  --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
  --swiper-scrollbar-size: 4px;
  */
}
.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
}
.swiper-scrollbar-disabled > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important;
}
.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  position: absolute;
  left: var(--swiper-scrollbar-sides-offset, 1%);
  bottom: var(--swiper-scrollbar-bottom, 4px);
  top: var(--swiper-scrollbar-top, auto);
  z-index: 50;
  height: var(--swiper-scrollbar-size, 4px);
  width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-vertical > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-vertical {
  position: absolute;
  left: var(--swiper-scrollbar-left, auto);
  right: var(--swiper-scrollbar-right, 4px);
  top: var(--swiper-scrollbar-sides-offset, 1%);
  z-index: 50;
  width: var(--swiper-scrollbar-size, 4px);
  height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}
/* Zoom container styles start */
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* Zoom container styles end */
.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}
/* a11y */
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}
.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}
.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-fade .swiper-slide-active {
  pointer-events: auto;
}
.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-cube {
  overflow: visible;
}
.swiper-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}
.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible;
}
.swiper-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  z-index: 0;
}
.swiper-cube .swiper-cube-shadow:before {
  content: '';
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  filter: blur(50px);
}
.swiper-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}
/* Cube slide shadows start */
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* Cube slide shadows end */
.swiper-flip {
  overflow: visible;
}
.swiper-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  z-index: 1;
}
.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
/* Flip slide shadows start */
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
/* Flip slide shadows end */
.swiper-creative .swiper-slide {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height;
}
.swiper-cards {
  overflow: visible;
}
.swiper-cards .swiper-slide {
  transform-origin: center bottom;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
}

/* End */


/* Start:/local/templates/v1/js/fancybox/fancybox.css?178937520125343*/
:root{--f-spinner-width: 36px;--f-spinner-height: 36px;--f-spinner-color-1: rgba(0, 0, 0, 0.1);--f-spinner-color-2: rgba(17, 24, 28, 0.8);--f-spinner-stroke: 2.75}.f-spinner{margin:auto;padding:0;width:var(--f-spinner-width);height:var(--f-spinner-height)}.f-spinner svg{width:100%;height:100%;vertical-align:top;animation:f-spinner-rotate 2s linear infinite}.f-spinner svg *{stroke-width:var(--f-spinner-stroke);fill:none}.f-spinner svg *:first-child{stroke:var(--f-spinner-color-1)}.f-spinner svg *:last-child{stroke:var(--f-spinner-color-2);animation:f-spinner-dash 2s ease-in-out infinite}@keyframes f-spinner-rotate{100%{transform:rotate(360deg)}}@keyframes f-spinner-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}100%{stroke-dasharray:90,150;stroke-dashoffset:-124}}.f-throwOutUp{animation:var(--f-throw-out-duration, 0.175s) ease-out both f-throwOutUp}.f-throwOutDown{animation:var(--f-throw-out-duration, 0.175s) ease-out both f-throwOutDown}@keyframes f-throwOutUp{to{transform:translate3d(0, calc(var(--f-throw-out-distance, 150px) * -1), 0);opacity:0}}@keyframes f-throwOutDown{to{transform:translate3d(0, var(--f-throw-out-distance, 150px), 0);opacity:0}}.f-zoomInUp{animation:var(--f-transition-duration, 0.2s) ease .1s both f-zoomInUp}.f-zoomOutDown{animation:var(--f-transition-duration, 0.2s) ease both f-zoomOutDown}@keyframes f-zoomInUp{from{transform:scale(0.975) translate3d(0, 16px, 0);opacity:0}to{transform:scale(1) translate3d(0, 0, 0);opacity:1}}@keyframes f-zoomOutDown{to{transform:scale(0.975) translate3d(0, 16px, 0);opacity:0}}.f-fadeIn{animation:var(--f-transition-duration, 0.2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeIn;z-index:2}.f-fadeOut{animation:var(--f-transition-duration, 0.2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeOut;z-index:1}@keyframes f-fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes f-fadeOut{100%{opacity:0}}.f-fadeFastIn{animation:var(--f-transition-duration, 0.2s) ease-out both f-fadeFastIn;z-index:2}.f-fadeFastOut{animation:var(--f-transition-duration, 0.1s) ease-out both f-fadeFastOut;z-index:2}@keyframes f-fadeFastIn{0%{opacity:.75}100%{opacity:1}}@keyframes f-fadeFastOut{100%{opacity:0}}.f-fadeSlowIn{animation:var(--f-transition-duration, 0.5s) ease both f-fadeSlowIn;z-index:2}.f-fadeSlowOut{animation:var(--f-transition-duration, 0.5s) ease both f-fadeSlowOut;z-index:1}@keyframes f-fadeSlowIn{0%{opacity:0}100%{opacity:1}}@keyframes f-fadeSlowOut{100%{opacity:0}}.f-crossfadeIn{animation:var(--f-transition-duration, 0.2s) ease-out both f-crossfadeIn;z-index:2}.f-crossfadeOut{animation:calc(var(--f-transition-duration, 0.2s)*.5) linear .1s both f-crossfadeOut;z-index:1}@keyframes f-crossfadeIn{0%{opacity:0}100%{opacity:1}}@keyframes f-crossfadeOut{100%{opacity:0}}.f-slideIn.from-next{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideInNext}.f-slideIn.from-prev{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideInPrev}.f-slideOut.to-next{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideOutNext}.f-slideOut.to-prev{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideOutPrev}@keyframes f-slideInPrev{0%{transform:translateX(100%)}100%{transform:translate3d(0, 0, 0)}}@keyframes f-slideInNext{0%{transform:translateX(-100%)}100%{transform:translate3d(0, 0, 0)}}@keyframes f-slideOutNext{100%{transform:translateX(-100%)}}@keyframes f-slideOutPrev{100%{transform:translateX(100%)}}.f-classicIn.from-next{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicInNext;z-index:2}.f-classicIn.from-prev{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicInPrev;z-index:2}.f-classicOut.to-next{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicOutNext;z-index:1}.f-classicOut.to-prev{animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicOutPrev;z-index:1}@keyframes f-classicInNext{0%{transform:translateX(-75px);opacity:0}100%{transform:translate3d(0, 0, 0);opacity:1}}@keyframes f-classicInPrev{0%{transform:translateX(75px);opacity:0}100%{transform:translate3d(0, 0, 0);opacity:1}}@keyframes f-classicOutNext{100%{transform:translateX(-75px);opacity:0}}@keyframes f-classicOutPrev{100%{transform:translateX(75px);opacity:0}}:root{--f-button-width: 40px;--f-button-height: 40px;--f-button-border: 0;--f-button-border-radius: 0;--f-button-color: #374151;--f-button-bg: #f8f8f8;--f-button-hover-bg: #e0e0e0;--f-button-active-bg: #d0d0d0;--f-button-shadow: none;--f-button-transition: all 0.15s ease;--f-button-transform: none;--f-button-svg-width: 20px;--f-button-svg-height: 20px;--f-button-svg-stroke-width: 1.5;--f-button-svg-fill: none;--f-button-svg-filter: none;--f-button-svg-disabled-opacity: 0.65}.f-button{display:flex;justify-content:center;align-items:center;box-sizing:content-box;position:relative;margin:0;padding:0;width:var(--f-button-width);height:var(--f-button-height);border:var(--f-button-border);border-radius:var(--f-button-border-radius);color:var(--f-button-color);background:var(--f-button-bg);box-shadow:var(--f-button-shadow);pointer-events:all;cursor:pointer;transition:var(--f-button-transition)}@media(hover: hover){.f-button:hover:not([disabled]){color:var(--f-button-hover-color);background-color:var(--f-button-hover-bg)}}.f-button:active:not([disabled]){background-color:var(--f-button-active-bg)}.f-button:focus:not(:focus-visible){outline:none}.f-button:focus-visible{outline:none;box-shadow:inset 0 0 0 var(--f-button-outline, 2px) var(--f-button-outline-color, var(--f-button-color))}.f-button svg{width:var(--f-button-svg-width);height:var(--f-button-svg-height);fill:var(--f-button-svg-fill);stroke:currentColor;stroke-width:var(--f-button-svg-stroke-width);stroke-linecap:round;stroke-linejoin:round;transition:opacity .15s ease;transform:var(--f-button-transform);filter:var(--f-button-svg-filter);pointer-events:none}.f-button[disabled]{cursor:default}.f-button[disabled] svg{opacity:var(--f-button-svg-disabled-opacity)}.f-carousel__nav .f-button.is-prev,.f-carousel__nav .f-button.is-next,.fancybox__nav .f-button.is-prev,.fancybox__nav .f-button.is-next{position:absolute;z-index:1}.is-horizontal .f-carousel__nav .f-button.is-prev,.is-horizontal .f-carousel__nav .f-button.is-next,.is-horizontal .fancybox__nav .f-button.is-prev,.is-horizontal .fancybox__nav .f-button.is-next{top:50%;transform:translateY(-50%)}.is-horizontal .f-carousel__nav .f-button.is-prev,.is-horizontal .fancybox__nav .f-button.is-prev{left:var(--f-button-prev-pos)}.is-horizontal .f-carousel__nav .f-button.is-next,.is-horizontal .fancybox__nav .f-button.is-next{right:var(--f-button-next-pos)}.is-horizontal.is-rtl .f-carousel__nav .f-button.is-prev,.is-horizontal.is-rtl .fancybox__nav .f-button.is-prev{left:auto;right:var(--f-button-next-pos)}.is-horizontal.is-rtl .f-carousel__nav .f-button.is-next,.is-horizontal.is-rtl .fancybox__nav .f-button.is-next{right:auto;left:var(--f-button-prev-pos)}.is-vertical .f-carousel__nav .f-button.is-prev,.is-vertical .f-carousel__nav .f-button.is-next,.is-vertical .fancybox__nav .f-button.is-prev,.is-vertical .fancybox__nav .f-button.is-next{top:auto;left:50%;transform:translateX(-50%)}.is-vertical .f-carousel__nav .f-button.is-prev,.is-vertical .fancybox__nav .f-button.is-prev{top:var(--f-button-next-pos)}.is-vertical .f-carousel__nav .f-button.is-next,.is-vertical .fancybox__nav .f-button.is-next{bottom:var(--f-button-next-pos)}.is-vertical .f-carousel__nav .f-button.is-prev svg,.is-vertical .f-carousel__nav .f-button.is-next svg,.is-vertical .fancybox__nav .f-button.is-prev svg,.is-vertical .fancybox__nav .f-button.is-next svg{transform:rotate(90deg)}.f-carousel__nav .f-button:disabled,.fancybox__nav .f-button:disabled{pointer-events:none}html.with-fancybox{width:auto;overflow:visible;scroll-behavior:auto}html.with-fancybox body{touch-action:none}html.with-fancybox body.hide-scrollbar{width:auto;margin-right:calc(var(--fancybox-body-margin, 0px) + var(--fancybox-scrollbar-compensate, 0px));overflow:hidden !important;overscroll-behavior-y:none}.fancybox__container{--fancybox-color: #dbdbdb;--fancybox-hover-color: #fff;--fancybox-bg: rgba(24, 24, 27, 0.98);--fancybox-slide-gap: 10px;--f-spinner-width: 50px;--f-spinner-height: 50px;--f-spinner-color-1: rgba(255, 255, 255, 0.1);--f-spinner-color-2: #bbb;--f-spinner-stroke: 3.65;position:fixed;top:0;left:0;bottom:0;right:0;direction:ltr;display:flex;flex-direction:column;box-sizing:border-box;margin:0;padding:0;color:#f8f8f8;-webkit-tap-highlight-color:rgba(0,0,0,0);overflow:visible;z-index:var(--fancybox-zIndex, 1050);outline:none;transform-origin:top left;-webkit-text-size-adjust:100%;-moz-text-size-adjust:none;-ms-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior-y:contain}.fancybox__container *,.fancybox__container *::before,.fancybox__container *::after{box-sizing:inherit}.fancybox__container::backdrop{background-color:rgba(0,0,0,0)}.fancybox__backdrop{position:fixed;top:0;left:0;bottom:0;right:0;z-index:-1;background:var(--fancybox-bg);opacity:var(--fancybox-opacity, 1);will-change:opacity}.fancybox__carousel{position:relative;box-sizing:border-box;flex:1;min-height:0;z-index:10;overflow-y:visible;overflow-x:clip}.fancybox__viewport{width:100%;height:100%}.fancybox__viewport.is-draggable{cursor:move;cursor:grab}.fancybox__viewport.is-dragging{cursor:move;cursor:grabbing}.fancybox__track{display:flex;margin:0 auto;height:100%}.fancybox__slide{flex:0 0 auto;position:relative;display:flex;flex-direction:column;align-items:center;width:100%;height:100%;margin:0 var(--fancybox-slide-gap) 0 0;padding:4px;overflow:auto;overscroll-behavior:contain;transform:translate3d(0, 0, 0);backface-visibility:hidden}.fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn{padding-top:40px}.fancybox__slide.has-iframe,.fancybox__slide.has-video,.fancybox__slide.has-html5video{overflow:hidden}.fancybox__slide.has-image{overflow:hidden}.fancybox__slide.has-image.is-animating,.fancybox__slide.has-image.is-selected{overflow:visible}.fancybox__slide::before,.fancybox__slide::after{content:"";flex:0 0 0;margin:auto}.fancybox__backdrop:empty,.fancybox__viewport:empty,.fancybox__track:empty,.fancybox__slide:empty{display:block}.fancybox__content{align-self:center;display:flex;flex-direction:column;position:relative;margin:0;padding:2rem;max-width:100%;color:var(--fancybox-content-color, #374151);background:var(--fancybox-content-bg, #fff);cursor:default;border-radius:0;z-index:20}.is-loading .fancybox__content{opacity:0}.is-draggable .fancybox__content{cursor:move;cursor:grab}.can-zoom_in .fancybox__content{cursor:zoom-in}.can-zoom_out .fancybox__content{cursor:zoom-out}.is-dragging .fancybox__content{cursor:move;cursor:grabbing}.fancybox__content [data-selectable],.fancybox__content [contenteditable]{cursor:auto}.fancybox__slide.has-image>.fancybox__content{padding:0;background:rgba(0,0,0,0);min-height:1px;background-repeat:no-repeat;background-size:contain;background-position:center center;transition:none;transform:translate3d(0, 0, 0);backface-visibility:hidden}.fancybox__slide.has-image>.fancybox__content>picture>img{width:100%;height:auto;max-height:100%}.is-animating .fancybox__content,.is-dragging .fancybox__content{will-change:transform,width,height}.fancybox-image{margin:auto;display:block;width:100%;height:100%;min-height:0;object-fit:contain;user-select:none;filter:blur(0px)}.fancybox__caption{align-self:center;max-width:100%;flex-shrink:0;margin:0;padding:14px 0 4px 0;overflow-wrap:anywhere;line-height:1.375;color:var(--fancybox-color, currentColor);opacity:var(--fancybox-opacity, 1);cursor:auto;visibility:visible}.is-loading .fancybox__caption,.is-closing .fancybox__caption{opacity:0;visibility:hidden}.is-compact .fancybox__caption{padding-bottom:0}.f-button.is-close-btn{--f-button-svg-stroke-width: 2;position:absolute;top:0;right:8px;z-index:40}.fancybox__content>.f-button.is-close-btn{--f-button-width: 34px;--f-button-height: 34px;--f-button-border-radius: 4px;--f-button-color: var(--fancybox-color, #fff);--f-button-hover-color: var(--fancybox-color, #fff);--f-button-bg: transparent;--f-button-hover-bg: transparent;--f-button-active-bg: transparent;--f-button-svg-width: 22px;--f-button-svg-height: 22px;position:absolute;top:-38px;right:0;opacity:.75}.is-loading .fancybox__content>.f-button.is-close-btn{visibility:hidden}.is-zooming-out .fancybox__content>.f-button.is-close-btn{visibility:hidden}.fancybox__content>.f-button.is-close-btn:hover{opacity:1}.fancybox__footer{padding:0;margin:0;position:relative}.fancybox__footer .fancybox__caption{width:100%;padding:24px;opacity:var(--fancybox-opacity, 1);transition:all .25s ease}.is-compact .fancybox__footer{position:absolute;bottom:0;left:0;right:0;z-index:20;background:rgba(24,24,27,.5)}.is-compact .fancybox__footer .fancybox__caption{padding:12px}.is-compact .fancybox__content>.f-button.is-close-btn{--f-button-border-radius: 50%;--f-button-color: #fff;--f-button-hover-color: #fff;--f-button-outline-color: #000;--f-button-bg: rgba(0, 0, 0, 0.6);--f-button-active-bg: rgba(0, 0, 0, 0.6);--f-button-hover-bg: rgba(0, 0, 0, 0.6);--f-button-svg-width: 18px;--f-button-svg-height: 18px;--f-button-svg-filter: none;top:5px;right:5px}.fancybox__nav{--f-button-width: 50px;--f-button-height: 50px;--f-button-border: 0;--f-button-border-radius: 50%;--f-button-color: var(--fancybox-color);--f-button-hover-color: var(--fancybox-hover-color);--f-button-bg: transparent;--f-button-hover-bg: rgba(24, 24, 27, 0.3);--f-button-active-bg: rgba(24, 24, 27, 0.5);--f-button-shadow: none;--f-button-transition: all 0.15s ease;--f-button-transform: none;--f-button-svg-width: 26px;--f-button-svg-height: 26px;--f-button-svg-stroke-width: 2.5;--f-button-svg-fill: none;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, 0.5));--f-button-svg-disabled-opacity: 0.65;--f-button-next-pos: 1rem;--f-button-prev-pos: 1rem;opacity:var(--fancybox-opacity, 1)}.fancybox__nav .f-button:before{position:absolute;content:"";top:-30px;right:-20px;left:-20px;bottom:-30px;z-index:1}.is-idle .fancybox__nav{animation:.15s ease-out both f-fadeOut}.is-idle.is-compact .fancybox__footer{pointer-events:none;animation:.15s ease-out both f-fadeOut}.fancybox__slide>.f-spinner{position:absolute;top:50%;left:50%;margin:var(--f-spinner-top, calc(var(--f-spinner-width) * -0.5)) 0 0 var(--f-spinner-left, calc(var(--f-spinner-height) * -0.5));z-index:30;cursor:pointer}.fancybox-protected{position:absolute;top:0;left:0;right:0;bottom:0;z-index:40;user-select:none}.fancybox-ghost{position:absolute;top:0;left:0;width:100%;height:100%;min-height:0;object-fit:contain;z-index:40;user-select:none;pointer-events:none}.fancybox-focus-guard{outline:none;opacity:0;position:fixed;pointer-events:none}.fancybox__container:not([aria-hidden]){opacity:0}.fancybox__container.is-animated[aria-hidden=false]>*:not(.fancybox__backdrop,.fancybox__carousel),.fancybox__container.is-animated[aria-hidden=false] .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container.is-animated[aria-hidden=false] .fancybox__slide>*:not(.fancybox__content){animation:var(--f-interface-enter-duration, 0.25s) ease .1s backwards f-fadeIn}.fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop{animation:var(--f-backdrop-enter-duration, 0.35s) ease backwards f-fadeIn}.fancybox__container.is-animated[aria-hidden=true]>*:not(.fancybox__backdrop,.fancybox__carousel),.fancybox__container.is-animated[aria-hidden=true] .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container.is-animated[aria-hidden=true] .fancybox__slide>*:not(.fancybox__content){animation:var(--f-interface-exit-duration, 0.15s) ease forwards f-fadeOut}.fancybox__container.is-animated[aria-hidden=true] .fancybox__backdrop{animation:var(--f-backdrop-exit-duration, 0.35s) ease forwards f-fadeOut}.has-iframe .fancybox__content,.has-map .fancybox__content,.has-pdf .fancybox__content,.has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{max-width:100%;flex-shrink:1;min-height:1px;overflow:visible}.has-iframe .fancybox__content,.has-map .fancybox__content,.has-pdf .fancybox__content{width:calc(100% - 120px);height:90%}.fancybox__container.is-compact .has-iframe .fancybox__content,.fancybox__container.is-compact .has-map .fancybox__content,.fancybox__container.is-compact .has-pdf .fancybox__content{width:100%;height:100%}.has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{width:960px;height:540px;max-width:100%;max-height:100%}.has-map .fancybox__content,.has-pdf .fancybox__content,.has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{padding:0;background:rgba(24,24,27,.9);color:#fff}.has-map .fancybox__content{background:#e5e3df}.fancybox__html5video,.fancybox__iframe{border:0;display:block;height:100%;width:100%;background:rgba(0,0,0,0)}.fancybox-placeholder{border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important;white-space:nowrap !important}.f-carousel__thumbs{--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-outline: 0;--f-thumb-outline-color: #5eb0ef;--f-thumb-opacity: 1;--f-thumb-hover-opacity: 1;--f-thumb-selected-opacity: 1;--f-thumb-border-radius: 2px;--f-thumb-offset: 0px;--f-button-next-pos: 0;--f-button-prev-pos: 0}.f-carousel__thumbs.is-classic{--f-thumb-gap: 8px;--f-thumb-opacity: 0.5;--f-thumb-hover-opacity: 1;--f-thumb-selected-opacity: 1}.f-carousel__thumbs.is-modern{--f-thumb-gap: 4px;--f-thumb-extra-gap: 16px;--f-thumb-clip-width: 46px}.f-thumbs{position:relative;flex:0 0 auto;margin:0;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);user-select:none;perspective:1000px;transform:translateZ(0)}.f-thumbs .f-spinner{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:2px;background-image:linear-gradient(#ebeff2, #e2e8f0);z-index:-1}.f-thumbs .f-spinner svg{display:none}.f-thumbs.is-vertical{height:100%}.f-thumbs__viewport{width:100%;height:auto;overflow:hidden;transform:translate3d(0, 0, 0)}.f-thumbs__track{display:flex}.f-thumbs__slide{position:relative;flex:0 0 auto;box-sizing:content-box;display:flex;align-items:center;justify-content:center;padding:0;margin:0;width:var(--f-thumb-width);height:var(--f-thumb-height);overflow:visible;cursor:pointer}.f-thumbs__slide.is-loading img{opacity:0}.is-classic .f-thumbs__viewport{height:100%}.is-modern .f-thumbs__track{width:max-content}.is-modern .f-thumbs__track::before{content:"";position:absolute;top:0;bottom:0;left:calc((var(--f-thumb-clip-width, 0))*-0.5);width:calc(var(--width, 0)*1px + var(--f-thumb-clip-width, 0));cursor:pointer}.is-modern .f-thumbs__slide{width:var(--f-thumb-clip-width);transform:translate3d(calc(var(--shift, 0) * -1px), 0, 0);transition:none;pointer-events:none}.is-modern.is-resting .f-thumbs__slide{transition:transform .33s ease}.is-modern.is-resting .f-thumbs__slide__button{transition:clip-path .33s ease}.is-using-tab .is-modern .f-thumbs__slide:focus-within{filter:drop-shadow(-1px 0px 0px var(--f-thumb-outline-color)) drop-shadow(2px 0px 0px var(--f-thumb-outline-color)) drop-shadow(0px -1px 0px var(--f-thumb-outline-color)) drop-shadow(0px 2px 0px var(--f-thumb-outline-color))}.f-thumbs__slide__button{appearance:none;width:var(--f-thumb-width);height:100%;margin:0 -100% 0 -100%;padding:0;border:0;position:relative;border-radius:var(--f-thumb-border-radius);overflow:hidden;background:rgba(0,0,0,0);outline:none;cursor:pointer;pointer-events:auto;touch-action:manipulation;opacity:var(--f-thumb-opacity);transition:opacity .2s ease}.f-thumbs__slide__button:hover{opacity:var(--f-thumb-hover-opacity)}.f-thumbs__slide__button:focus:not(:focus-visible){outline:none}.f-thumbs__slide__button:focus-visible{outline:none;opacity:var(--f-thumb-selected-opacity)}.is-modern .f-thumbs__slide__button{--clip-path: inset( 0 calc( ((var(--f-thumb-width, 0) - var(--f-thumb-clip-width, 0))) * (1 - var(--progress, 0)) * 0.5 ) round var(--f-thumb-border-radius, 0) );clip-path:var(--clip-path)}.is-classic .is-nav-selected .f-thumbs__slide__button{opacity:var(--f-thumb-selected-opacity)}.is-classic .is-nav-selected .f-thumbs__slide__button::after{content:"";position:absolute;top:0;left:0;right:0;height:auto;bottom:0;border:var(--f-thumb-outline, 0) solid var(--f-thumb-outline-color, transparent);border-radius:var(--f-thumb-border-radius);animation:f-fadeIn .2s ease-out;z-index:10}.f-thumbs__slide__img{overflow:hidden;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;padding:var(--f-thumb-offset);box-sizing:border-box;pointer-events:none;object-fit:cover;border-radius:var(--f-thumb-border-radius)}.f-thumbs.is-horizontal .f-thumbs__track{padding:8px 0 12px 0}.f-thumbs.is-horizontal .f-thumbs__slide{margin:0 var(--f-thumb-gap) 0 0}.f-thumbs.is-vertical .f-thumbs__track{flex-wrap:wrap;padding:0 8px}.f-thumbs.is-vertical .f-thumbs__slide{margin:0 0 var(--f-thumb-gap) 0}.fancybox__thumbs{--f-thumb-width: 96px;--f-thumb-height: 72px;--f-thumb-border-radius: 2px;--f-thumb-outline: 2px;--f-thumb-outline-color: #ededed;position:relative;opacity:var(--fancybox-opacity, 1);transition:max-height .35s cubic-bezier(0.23, 1, 0.32, 1)}.fancybox__thumbs.is-classic{--f-thumb-gap: 8px;--f-thumb-opacity: 0.5;--f-thumb-hover-opacity: 1}.fancybox__thumbs.is-classic .f-spinner{background-image:linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))}.fancybox__thumbs.is-modern{--f-thumb-gap: 4px;--f-thumb-extra-gap: 16px;--f-thumb-clip-width: 46px;--f-thumb-opacity: 1;--f-thumb-hover-opacity: 1}.fancybox__thumbs.is-modern .f-spinner{background-image:linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))}.fancybox__thumbs.is-horizontal{padding:0 var(--f-thumb-gap)}.fancybox__thumbs.is-vertical{padding:var(--f-thumb-gap) 0}.is-compact .fancybox__thumbs{--f-thumb-width: 64px;--f-thumb-clip-width: 32px;--f-thumb-height: 48px;--f-thumb-extra-gap: 10px}.fancybox__thumbs.is-masked{max-height:0px !important}.is-closing .fancybox__thumbs{transition:none !important}.fancybox__toolbar{--f-progress-color: var(--fancybox-color, rgba(255, 255, 255, 0.94));--f-button-width: 46px;--f-button-height: 46px;--f-button-color: var(--fancybox-color);--f-button-hover-color: var(--fancybox-hover-color);--f-button-bg: rgba(24, 24, 27, 0.65);--f-button-hover-bg: rgba(70, 70, 73, 0.65);--f-button-active-bg: rgba(90, 90, 93, 0.65);--f-button-border-radius: 0;--f-button-svg-width: 24px;--f-button-svg-height: 24px;--f-button-svg-stroke-width: 1.5;--f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, 0.15));--f-button-svg-fill: none;--f-button-svg-disabled-opacity: 0.65;display:flex;flex-direction:row;justify-content:space-between;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Adjusted","Segoe UI","Liberation Sans",sans-serif;color:var(--fancybox-color, currentColor);opacity:var(--fancybox-opacity, 1);text-shadow:var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0, 0, 0, 0.5));pointer-events:none;z-index:20}.fancybox__toolbar :focus-visible{z-index:1}.fancybox__toolbar.is-absolute,.is-compact .fancybox__toolbar{position:absolute;top:0;left:0;right:0}.is-idle .fancybox__toolbar{pointer-events:none;animation:.15s ease-out both f-fadeOut}.fancybox__toolbar__column{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start}.fancybox__toolbar__column.is-left,.fancybox__toolbar__column.is-right{flex-grow:1;flex-basis:0}.fancybox__toolbar__column.is-right{display:flex;justify-content:flex-end;flex-wrap:nowrap}.fancybox__infobar{padding:0 5px;line-height:var(--f-button-height);text-align:center;font-size:17px;font-variant-numeric:tabular-nums;-webkit-font-smoothing:subpixel-antialiased;cursor:default;user-select:none}.fancybox__infobar span{padding:0 5px}.fancybox__infobar:not(:first-child):not(:last-child){background:var(--f-button-bg)}[data-fancybox-toggle-slideshow]{position:relative}[data-fancybox-toggle-slideshow] .f-progress{height:100%;opacity:.3}[data-fancybox-toggle-slideshow] svg g:first-child{display:flex}[data-fancybox-toggle-slideshow] svg g:last-child{display:none}.has-slideshow [data-fancybox-toggle-slideshow] svg g:first-child{display:none}.has-slideshow [data-fancybox-toggle-slideshow] svg g:last-child{display:flex}[data-fancybox-toggle-fullscreen] svg g:first-child{display:flex}[data-fancybox-toggle-fullscreen] svg g:last-child{display:none}:fullscreen [data-fancybox-toggle-fullscreen] svg g:first-child{display:none}:fullscreen [data-fancybox-toggle-fullscreen] svg g:last-child{display:flex}.f-progress{position:absolute;top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;background:var(--f-progress-color, var(--f-carousel-theme-color, #0091ff));z-index:30;user-select:none;pointer-events:none}
/* End */


/* Start:/local/templates/v1/css/style.css?179186320991797*/
@charset "UTF-8";
@font-face {
  font-family: "Montserrat";
  src: local("Montserrat Black"), local("Montserrat-Black"), url("/local/templates/v1/css/../fonts/montserrat/Montserrat-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: local("Montserrat SemiBold"), local("Montserrat-SemiBold"), url("/local/templates/v1/css/../fonts/montserrat/Montserrat-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: local("Montserrat Bold"), local("Montserrat-Bold"), url("/local/templates/v1/css/../fonts/montserrat/Montserrat-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: local("Montserrat Regular"), local("Montserrat-Regular"), url("/local/templates/v1/css/../fonts/montserrat/Montserrat-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: local("Montserrat Medium"), local("Montserrat-Medium"), url("/local/templates/v1/css/../fonts/montserrat/Montserrat-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: local("Montserrat ExtraBold"), local("Montserrat-ExtraBold"), url("/local/templates/v1/css/../fonts/montserrat/Montserrat-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}
/* Корневой размер (1rem). Раньше он шёл за шириной окна на всех ширинах:
   на ноутбуках 1280–1440 текст падал до 7–10px, на планшете 768 раздувался,
   а на порогах брейкпоинтов скакал. Теперь:
   - десктоп (≥1200): 10px — как макет 1920; шире 1920 растёт пропорционально;
   - планшет (577–1199): 10.75px — основной текст 1.4–1.6rem = 15–17px;
   - телефон (≤576): от ширины экрана (375 → 10px), но не больше 10.5px,
     чтобы к 576 не раздувался и не было скачка на границе с планшетом. */
html {
  overflow-x: hidden;
  font-size: max(10px, 0.5208333333vw);
}
@media (max-width: 1199px) {
  html {
    font-size: 10.75px;
  }
}
@media (max-width: 576px) {
  html {
    font-size: min(2.6666666667vw, 10.5px);
  }
}

body {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 1.6rem;
  background-color: #fff;
  overflow-x: hidden;
}
body.noscroll {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}

main {
  min-height: calc(100dvh - 46.4rem);
  padding-top: 11.7rem;
}
@media (max-width: 1199px) {
  main {
    padding-top: 7rem;
    min-height: calc(100dvh - 100.8rem);
  }
}

h1, h2 {
  font-weight: 600;
  color: #000;
}

h1 {
  font-size: 4rem;
  line-height: 3.5rem;
}
@media (max-width: 1199px) {
  h1 {
    font-size: 3rem;
    line-height: 2.5rem;
  }
}

h2 {
  font-size: 3rem;
  line-height: 2.5rem;
}
@media (max-width: 1199px) {
  h2 {
    font-weight: 500;
    font-size: 2.5rem;
    line-height: 2rem;
  }
}

p {
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.2rem;
  margin: 0;
}
@media (max-width: 1199px) {
  p {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}

a {
  font-weight: 400;
  font-size: 1.6rem;
  text-decoration: none;
  color: #387F30;
  transition: all 0.2s linear;
}
a:hover {
  color: #0A1464;
}

.container {
  max-width: 119.2rem;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 1199px) {
  .container {
    width: calc(100% - 2.8rem);
    margin: 0 1.4rem;
  }
}

.btn {
  font-weight: 600;
  font-size: 1.5rem;
  color: #0A1464;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  height: 4.8rem;
  background-color: transparent;
  box-sizing: border-box;
  padding: 0 2rem;
  border: #0A1464 1px solid;
  border-radius: 0.8rem;
  outline: none;
  cursor: pointer;
  transition: all 0.2s linear;
}
.btn:hover, .btn.active {
  color: #fff;
  background-color: #0A1464;
}
.btn-active {
  color: #fff;
  background-color: #3B8633;
  border: none;
}
.btn-active:hover, .btn-active.active {
  background-color: #2F7A26;
}
.btn-more {
  color: #387F30;
  width: max-content;
  background-color: transparent;
  padding: 0;
  border: none;
  border-radius: 0;
}
@media (max-width: 1199px) {
  .btn-more {
    font-size: 1.4rem;
    height: 4rem;
  }
}
.btn-more:hover, .btn-more.active {
  color: #387F30;
  background-color: transparent;
}

.socials {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  height: 3.5rem;
}
.socials__item {
  display: flex;
  width: auto;
  height: 100%;
  aspect-ratio: 1/1;
}
.socials__item:hover svg path.path-initial, .socials__item:hover svg ellipse.path-initial {
  opacity: 0;
}
.socials__item:hover svg path.path-hover, .socials__item:hover svg ellipse.path-hover {
  opacity: 1;
}
.socials__item svg {
  width: 100%;
  height: 100%;
}
.socials__item svg path, .socials__item svg ellipse {
  transition: all 0.2s linear;
}
.socials__item svg path.path-hover, .socials__item svg ellipse.path-hover {
  opacity: 0;
}

.menu {
  height: 100%;
}
.menu ul {
  list-style: none;
  display: flex;
  gap: 2.8rem;
  height: 100%;
  padding-left: 0;
  margin: 0;
}
.menu ul li {
  height: 100%;
}
.menu ul li a {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #0A1464;
  display: flex;
  align-items: center;
  height: 100%;
}
.menu ul li a:hover, .menu ul li a.active {
  color: #387F30;
}

.phone {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.phone__content {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 0.4rem;
}
.phone__content a {
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 2.2rem;
  color: #0A1464;
}
.phone__content a:hover {
  color: #387F30;
}
.phone__content span {
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.5rem;
  color: #6B7287;
}

.title {
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 4rem;
  color: #0A1464;
  margin: 0;
}
@media (max-width: 1199px) {
  .title {
    font-size: 2rem;
    line-height: 2rem;
  }
}
.title:has(+ .title-description) {
  margin-bottom: 1rem;
}
@media (max-width: 1199px) {
  .title:has(+ .title-description) {
    margin-bottom: 1.5rem;
  }
}
.title-block {
  margin-bottom: 5.2rem;
}
@media (max-width: 1199px) {
  .title-block {
    margin-bottom: 2.5rem;
  }
}
.title-mini {
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.9rem;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  color: #387F30;
}
.title-mini:has(+ .title) {
  margin-bottom: 0.9rem;
}
.title-description {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: #4A5270;
}
@media (max-width: 1199px) {
  .title-description {
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}
.title-description a {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2.4rem;
  text-decoration: underline;
}
@media (max-width: 1199px) {
  .title-description a {
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}

.footnote {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #1F4A1A;
  position: relative;
  background-color: #E8F5E6;
  box-sizing: border-box;
  padding: 1.8rem 1.8rem 1.8rem 7rem;
  border-left: #4BAA41 0.3rem solid;
  border-radius: 0.6rem;
}
@media (max-width: 1199px) {
  .footnote {
    display: none;
  }
}
.footnote::before {
  content: "";
  position: absolute;
  width: 2.8rem;
  height: 2.8rem;
  background: url(/local/templates/v1/css/../images/svg/footnote-icon.svg) no-repeat center/contain;
  transform: translateY(-50%);
  top: 50%;
  left: 2.1rem;
}

.slider-arrows {
  display: flex;
  gap: 1rem;
}
.slider-arrow {
  position: relative;
  width: 4.2rem;
  height: 4.2rem;
  box-sizing: border-box;
  border: #0A1464 1px solid;
  border-radius: 0.8rem;
  transition: all 0.2s linear;
  cursor: pointer;
}
.slider-arrow::before, .slider-arrow::after {
  content: "";
  position: absolute;
  width: 2rem;
  height: 2rem;
  transition: all 0.2s linear;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.slider-arrow::before {
  background: url(/local/templates/v1/css/../images/svg/slider-arrow.svg) no-repeat center/contain;
}
.slider-arrow::after {
  background: url(/local/templates/v1/css/../images/svg/slider-arrow-disabled.svg) no-repeat center/contain;
  opacity: 0;
}
.slider-arrow-prev::before, .slider-arrow-prev::after {
  rotate: 180deg;
  transform: translate(50%, 50%);
}
.slider-arrow.swiper-button-disabled {
  border-color: rgba(172, 172, 172, 0.5019607843);
}
.slider-arrow.swiper-button-disabled::before {
  opacity: 0;
}
.slider-arrow.swiper-button-disabled::after {
  opacity: 1;
}
.slider-progressbar {
  position: absolute;
  width: calc(100% - 2.4rem) !important;
  height: 0.2rem !important;
  background: #E5E9F0;
  border-radius: 1rem;
  transform: translateX(-50%);
  top: auto !important;
  left: 50% !important;
  bottom: 0;
}
@media (max-width: 1199px) {
  .slider-progressbar {
    width: calc(100% - 4rem) !important;
  }
}
.slider-progressbar span {
  background: #4BAA41 !important;
  border-radius: 1rem;
}

.anchor {
  position: absolute;
  top: -15rem;
}
@media (max-width: 1199px) {
  .anchor {
    top: -12rem;
  }
}

* > .anchor {
  position: relative;
}

.header {
  position: fixed;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 11.7rem;
  background-color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(5px);
  box-sizing: border-box;
  border-bottom: #E5E9F0 1px solid;
  z-index: 100;
  top: 0;
  left: 0;
  /* Поиск на десктопе живёт в верхней полосе: в основной строке места нет —
     меню, телефон и «Онлайн расписание» заполняют её целиком. Кнопка
     наследует вид текстовых кнопок .header-callback (высота, отступы, цвет). */
  /* Поиск — только в адаптиве: в шапке десктопа его в макете нет, а на телефоне
     меню спрятано в бургер и найти страницу иначе нечем. Кнопка зеркалит бургер:
     та же коробка 4.1rem, но прижата к правому краю строки. */
  /* Панель поиска выезжает под шапкой: она фиксирована, поэтому абсолютная
     привязка к ней прижимает панель ровно к нижней границе. */
}
@media (max-width: 1199px) {
  .header {
    height: 7rem;
    transition: transform 0.3s ease;
  }
  .header--hidden {
    transform: translateY(-100%);
  }
}
.header-top {
  flex-shrink: 0;
  background-color: #0A1464;
  height: 3.7rem;
}
@media (max-width: 1199px) {
  .header-top {
    display: none;
  }
}
.header-top__content {
  display: flex;
  align-items: center;
  height: 100%;
}
.header-top .socials {
  height: 2.3rem;
  gap: 1.2rem;
  margin-left: auto;
}
@media (max-width: 1199px) {
  .header-top .socials {
    display: none;
  }
}
.header-location {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  height: 100%;
  padding: 0;
  margin-right: 1.6rem;
}
.header-address span {
  color: #9DA1C4;
}
.header-city, .header-address, .header-time {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 100%;
  padding: 0 2.4rem 0 0;
}
.header-city::before, .header-address::before, .header-time::before {
  content: "";
  position: absolute;
  width: 2.4rem;
  height: 2.4rem;
  background: url(/local/templates/v1/css/../images/svg/arrow.svg) no-repeat center/contain;
  transform: translateY(-50%);
  top: 50%;
  right: 0;
}
.header-city svg, .header-address svg, .header-time svg {
  width: 2.4rem;
  height: 2.4rem;
}
.header-city span, .header-address span, .header-time span {
  font-weight: 500;
  /* Верхняя строка читается издалека и места в ней с запасом:
     13px были мельче всего на странице. */
  font-size: 1.6rem;
  line-height: 2.2rem;
  transition: all 0.2s linear;
}
.header-city span, .header-time span {
  color: rgba(255, 255, 255, 0.9);
}
.header-location, .header-time {
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
}
@media (max-width: 1199px) {
  .header-location, .header-time {
    display: none;
  }
}
.header-location:hover span, .header-time:hover span {
  color: #fff;
}
.header-search-btn {
  display: flex;
  align-items: center;
}
.header-search-btn svg {
  width: 2rem;
  height: 2rem;
}
.header-search-btn[aria-expanded=true] {
  color: #fff;
}
.header-callback {
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: 6rem;
}
@media (max-width: 1199px) {
  .header-callback {
    margin: 0 auto;
  }
}
.header-callback button {
  font-weight: 500;
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.9);
  position: relative;
  height: 100%;
  background-color: transparent;
  padding: 0 1.5rem;
  border: none;
  outline: none;
  cursor: pointer;
  transition: all 0.2s linear;
}
@media (max-width: 1199px) {
  .header-callback button {
    padding: 0 3.5rem;
  }
}
.header-callback button:hover {
  color: #fff;
}
.header-callback button:first-of-type {
  padding-left: 0;
}
.header-callback button:last-of-type {
  padding-right: 0;
}
.header-callback button:last-of-type::before {
  content: none;
}
.header-callback button::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 1.3rem;
  background-color: #4C538E;
  transform: translateY(-50%);
  top: 50%;
  right: 0;
}
.header__content {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}
@media (max-width: 1199px) {
  .header__content {
    justify-content: center;
  }
}
.header__burger-btn {
  position: absolute;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  width: 4.1rem;
  height: 4.1rem;
  background-color: transparent;
  box-sizing: border-box;
  border: #CFD3E2 1px solid;
  border-radius: 1rem;
  transition: all 0.2s linear;
  cursor: pointer;
  transform: translateY(-50%);
  top: 50%;
  left: 0;
}
@media (max-width: 1199px) {
  .header__burger-btn {
    display: flex;
  }
}
.header__burger-btn:hover {
  background-color: #0A1464;
  border-color: #0A1464;
}
.header__burger-btn:hover span {
  background-color: #fff;
}
.header__burger-btn span {
  width: 1.8rem;
  height: 0.2rem;
  background-color: #0A1464;
  transition: all 0.2s linear;
}
.header__search-btn {
  position: absolute;
  display: none;
  justify-content: center;
  align-items: center;
  width: 4.1rem;
  height: 4.1rem;
  padding: 0;
  color: #0A1464;
  background-color: transparent;
  box-sizing: border-box;
  border: #CFD3E2 1px solid;
  border-radius: 1rem;
  transition: all 0.2s linear;
  cursor: pointer;
  transform: translateY(-50%);
  top: 50%;
  right: 0;
}
@media (max-width: 1199px) {
  .header__search-btn {
    display: flex;
  }
}
.header__search-btn:hover, .header__search-btn[aria-expanded=true] {
  color: #fff;
  background-color: #0A1464;
  border-color: #0A1464;
}
.header__search-btn svg {
  width: 2rem;
  height: 2rem;
}
.header-search {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
  border-bottom: #E5E9F0 1px solid;
  box-shadow: 0 0.8rem 2.4rem rgba(10, 20, 100, 0.08);
  padding: 1.2rem 0;
  /* Скрыта по умолчанию, открывается классом .is-open: плавно проявляется
     и опускается. visibility с задержкой — чтобы при закрытии панель
     не пропадала до конца анимации, а при открытии была кликабельна сразу. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-1rem);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.header-search.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}
@media (min-width: 1200px) {
  .header-search {
    padding: 2rem 0;
  }
}
.header-search__form {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
@media (min-width: 1200px) {
  .header-search__form {
    max-width: 96rem;
    gap: 1.2rem;
  }
}
.header-search__field {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}
.header-search__input {
  width: 100%;
  min-width: 0;
  height: 4.1rem;
  padding: 0 1.4rem;
  font-family: inherit;
  font-size: 1.5rem;
  color: #0A1464;
  background-color: #F7F9FB;
  box-sizing: border-box;
  border: #CFD3E2 1px solid;
  border-radius: 1rem;
  outline: none;
}
@media (min-width: 1200px) {
  .header-search__input {
    height: 4.8rem;
    padding: 0 2rem;
    font-size: 1.6rem;
  }
}
.header-search__input:focus {
  border-color: #4BAA41;
}
.header-search__submit, .header-search__close {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4.1rem;
  height: 4.1rem;
  padding: 0;
  box-sizing: border-box;
  border: none;
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.2s linear;
}
@media (min-width: 1200px) {
  .header-search__submit, .header-search__close {
    width: 4.8rem;
    height: 4.8rem;
  }
}
.header-search__submit svg, .header-search__close svg {
  width: 2rem;
  height: 2rem;
}
.header-search__submit {
  color: #fff;
  background-color: #3B8633;
}
.header-search__submit:hover {
  background-color: #2F7A26;
}
.header-search__close {
  color: #6B7287;
  background-color: transparent;
  border: #CFD3E2 1px solid;
}
.header-search__close:hover {
  color: #0A1464;
}
.header-logo {
  /* ширина жёсткая: при нехватке места flex ужимал логотип, а не строку */
  flex: 0 0 21.7rem;
  display: flex;
  width: 21.7rem;
  height: 6.4rem;
  /* На ноутбуках (шрифты на пороге 12px не ужимаются) логотип уже,
     чтобы меню и телефон остались в одну строку. */
}
@media (max-width: 1440px) and (min-width: 1200px) {
  .header-logo {
    flex-basis: 18rem;
    width: 18rem;
  }
}
@media (max-width: 1199px) {
  .header-logo {
    width: 17.7rem;
    height: 5.3rem;
  }
}
.header-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.header .menu {
  /* Отступ от логотипа фиксирован (раньше его давал space-between):
     пункты меню стоят на месте, что бы ни менялось справа. */
  margin-left: 5rem;
  /* На ноутбуках шрифты упираются в порог 12px (luxar_korobok_prod) и
     перестают ужиматься вместе с окном — строка шапки не помещается.
     Ниже 1440px отступ от логотипа и шаг пунктов меньше. */
  /* Пункты меню крупнее базовых 1.4rem: в строке остаётся запас, а меню —
     основная навигация. Больше 1.6rem делать нельзя: пункты станут крупнее
     телефона (1.7rem) и перебьют порядок в шапке. Правило внутри .header —
     в бургере у меню свой размер. */
  /* После переименования «Врачи» → «Специалисты» строка с 1.6rem
     перестала помещаться: шрифт 1.5rem и шаг пунктов 2.4rem. */
  /* Только верхний уровень (> ul): вложенные списки выпадающего и
     мега-меню живут по своим правилам в _menu-dropdown.scss. */
}
@media (max-width: 1440px) {
  .header .menu {
    margin-left: 2rem;
  }
  .header .menu > ul {
    gap: 1.6rem;
  }
}
@media (max-width: 1199px) {
  .header .menu {
    display: none;
  }
}
.header .menu > ul {
  gap: 2.2rem;
}
.header .menu > ul > li > a {
  font-size: 1.5rem;
  white-space: nowrap;
}
.header .phone {
  flex-shrink: 0;
  margin-left: auto;
  gap: 0.8rem;
  /* номер не переносится на две строки при нехватке места */
  /* Режим работы под телефоном прячем только на самом узком десктопе
     (1200–1279): там строке шапки не хватает места. С 1rem = 10px на всех
     десктопных ширинах выше он помещается. */
  /* «Онлайн расписание» длиннее «Записаться» в полтора раза, а справа от
     меню места впритык: кнопка и подпись чуть компактнее базовых, чтобы
     не двигать пункты меню. */
}
.header .phone__content a {
  white-space: nowrap;
}
@media (max-width: 1199px) {
  .header .phone {
    display: none;
  }
}
@media (max-width: 1279px) and (min-width: 1200px) {
  .header .phone__content span {
    display: none;
  }
}
.header .phone .btn {
  font-size: 1.4rem;
  padding: 0 1rem;
  white-space: nowrap;
}
@media (max-width: 1440px) {
  .header .phone .btn {
    padding: 0 0.8rem;
  }
}
.header .phone__content span {
  font-size: 1.3rem;
  line-height: 1.8rem;
}

/* Подсказки поиска: блок создаёт JCTitleSearch в body и сам выставляет
   left/top/width по полю ввода, поэтому здесь только оформление.
   Класс title-search-result носят и обёртка (div), и таблица внутри —
   правила обёртки привязаны к div, иначе display: none спрячет таблицу. */
div.title-search-result {
  position: absolute;
  display: none;
  z-index: 110;
  background-color: #fff;
  border: #E5E9F0 1px solid;
  border-radius: 1rem;
  box-shadow: 0 0.8rem 2.4rem rgba(10, 20, 100, 0.12);
  box-sizing: border-box;
  overflow: hidden;
}
div.title-search-result table {
  width: 100%;
  border-collapse: collapse;
}
div.title-search-result td {
  padding: 0;
}
div.title-search-result a {
  display: block;
  padding: 1rem 2rem;
  font-size: 1.5rem;
  line-height: 2rem;
  color: #0A1464;
  text-decoration: none;
  transition: background-color 0.2s linear;
}
div.title-search-result tr:hover a,
div.title-search-result tr.title-search-selected a {
  background-color: #F7F9FB;
  color: #387F30;
}
div.title-search-result .title-search-all a {
  font-weight: 600;
  border-top: #E5E9F0 1px solid;
}

/* Узкий десктоп 1200–1319 (1rem = 10px): строка шапки шире окна на ~60px.
   Логотип и шаг меню ещё компактнее, пункты меню и кнопка на 1px мельче. */
@media (min-width: 1200px) and (max-width: 1319px) {
  .header-logo {
    flex-basis: 15rem;
    width: 15rem;
  }
  .header .menu {
    margin-left: 1.6rem;
  }
  .header .menu > ul {
    gap: 1.4rem;
  }
  .header .menu > ul > li > a {
    font-size: 1.4rem;
  }
  .header .phone .btn {
    font-size: 1.3rem;
  }
}
.burger {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(26, 31, 58, 0.6);
  pointer-events: none;
  opacity: 0;
  transition: all 0.2s linear;
  z-index: 101;
  top: 0;
  left: 0;
  /* Две кнопки под телефоном: «Заказать звонок» и «Записаться». Между собой
     шаг меньше, чем до телефона, — они читаются как одна группа действий. */
}
@media (max-width: 1199px) {
  .burger {
    display: initial;
  }
}
.burger-opened {
  pointer-events: all;
  opacity: 1;
}
.burger-opened .burger__wrapper {
  transform: none;
}
.burger__wrapper {
  width: 100%;
  height: calc(100% - 3.7rem);
  background-color: #fff;
  box-sizing: border-box;
  padding: 2rem 0 3.2rem;
  margin-top: 3.7rem;
  transform: translateX(-100%);
  transition: all 0.3s ease-out;
}
.burger__wrapper .container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.burger-top {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 1.2rem 1.4rem 2rem;
  border-bottom: 1px #DFE3F0 solid;
  margin-bottom: 1.5rem;
}
.burger-logo {
  display: flex;
  width: 19.2rem;
  height: 5.7rem;
}
.burger-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.burger__close {
  display: flex;
  width: 3.6rem;
  height: 3.6rem;
  background-color: transparent;
  padding: 0;
  border: none;
  margin-top: 0.3rem;
}
.burger__close:hover svg path {
  stroke: #4BAA41;
}
.burger__close svg {
  width: 100%;
  height: 100%;
}
.burger__close svg path {
  transition: all 0.2s linear;
}
.burger__content {
  height: 100%;
  overflow-y: auto;
}
.burger__content::-webkit-scrollbar {
  width: 0.2rem;
  background-color: #DFE3F0;
}
.burger__content::-webkit-scrollbar-thumb {
  background-color: #4BAA41;
}
.burger .menu {
  height: auto;
  padding-left: 2rem;
  margin-bottom: 2.5rem;
}
.burger .menu ul {
  flex-direction: column;
  gap: 2rem;
}
.burger .menu ul li {
  height: auto;
}
.burger .menu ul li a {
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 2.4rem;
}
.burger .phone {
  flex-direction: column;
  align-items: start;
  padding-top: 1.8rem;
  border-top: 1px #DFE3F0 solid;
  margin-bottom: 1.7rem;
}
.burger .phone__content {
  align-items: start;
  padding-left: 1.8rem;
  gap: 0.5rem;
}
.burger .phone__content a {
  font-size: 2rem;
  line-height: 2rem;
}
.burger .phone .btn {
  width: 100%;
}
.burger-actions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 100%;
}
.burger-location, .burger-time {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: transparent;
  padding: 0;
  border: none;
}
.burger-location {
  margin-bottom: 0.8rem;
}
.burger-location:hover .burger-city span, .burger-location:hover .burger-address span {
  color: #387F30;
}
.burger-location-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4.8rem;
  height: 4.8rem;
  background-color: #E8F5E6;
  border-radius: 1rem;
}
.burger-location-icon svg {
  width: 2.4rem;
  height: 2.4rem;
}
.burger-location__content {
  display: flex;
  flex-direction: column;
  align-items: start;
}
.burger-time {
  margin-bottom: 2rem;
}
.burger-time:hover span {
  color: #387F30;
}
.burger-city, .burger-address, .burger-time {
  position: relative;
  padding-right: 2.4rem;
}
.burger-city::before, .burger-address::before, .burger-time::before {
  content: "";
  position: absolute;
  width: 2.4rem;
  height: 2.4rem;
  background: url(/local/templates/v1/css/../images/svg/arrow.svg) no-repeat center/contain;
  transform: translateY(-50%);
  top: 50%;
  right: 0;
}
.burger-city span, .burger-address span, .burger-time span {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.8rem;
  transition: all 0.2s linear;
}
.burger-city span {
  color: #0A1464;
}
.burger-address span {
  color: #6B7287;
}
.burger-time span {
  color: #0A1464;
}
.burger-time span b {
  font-weight: 500;
  color: #387F30;
}
.burger .socials {
  justify-content: space-between;
  padding: 0 1.5rem 0 1rem;
}
.burger .socials .path-initial {
  fill: #7A8299;
}

.breadcrumb {
  position: relative;
  padding-top: 1rem;
  margin-bottom: 0.5rem;
}
@media (max-width: 1199px) {
  .breadcrumb {
    width: calc(100% + 2.8rem);
    margin-left: -1.4rem;
    margin-bottom: 1rem;
  }
}
.breadcrumb::before {
  content: none;
  position: absolute;
  width: 6.2rem;
  height: 100%;
  background: linear-gradient(90deg, transparent, #fff);
  pointer-events: none;
  z-index: 1;
  top: 0;
  right: 0;
}
@media (max-width: 1199px) {
  .breadcrumb::before {
    content: "";
  }
}
.breadcrumb__content {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
@media (max-width: 1199px) {
  .breadcrumb__content {
    padding: 0 1.4rem 1rem;
    overflow-x: auto;
  }
}
.breadcrumb__content::-webkit-scrollbar {
  background-color: #fff;
  height: 1px;
}
.breadcrumb__content::-webkit-scrollbar-thumb {
  background-color: #D9D9D9;
}
.breadcrumb__item {
  white-space: nowrap;
}
.breadcrumb__item a, .breadcrumb__item span, .breadcrumb__item i {
  font-style: normal;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.6rem;
  color: #6B7287;
}
@media (max-width: 1199px) {
  .breadcrumb__item a, .breadcrumb__item span, .breadcrumb__item i {
    text-wrap: nowrap;
  }
}
.breadcrumb__item > span {
  color: #4A5270;
}
.breadcrumb__item a:hover span {
  color: #387F30;
}
.breadcrumb__item a span {
  transition: all 0.1s linear;
}

.footer {
  position: relative;
  min-height: 34.5rem;
  background-color: #0A1464;
}
@media (max-width: 1199px) {
  .footer {
    min-height: 0;
  }
}
.footer::before {
  content: "";
  position: absolute;
  width: 39.1rem;
  height: 34.5rem;
  background: url(/local/templates/v1/css/../images/decor-plexus.webp) no-repeat center/contain;
  opacity: 0.6;
  top: 0;
  left: 0;
}
@media (max-width: 1199px) {
  .footer::before {
    content: none;
  }
}
.footer::after {
  content: "";
  position: absolute;
  width: 38.4rem;
  height: 34.5rem;
  background: url(/local/templates/v1/css/../images/decor-plexus.webp) no-repeat center/contain;
  opacity: 0.6;
  top: 0;
  right: 0;
}
@media (max-width: 1199px) {
  .footer::after {
    width: 24.7rem;
    height: 45.1rem;
    background: url(/local/templates/v1/css/../images/decor-plexus.webp) no-repeat center/contain;
    opacity: 1;
    top: 15.5rem;
  }
}
.footer-shadow {
  position: absolute;
  width: 100%;
  height: 17.5rem;
  background: linear-gradient(0deg, #090D30, transparent);
  z-index: 1;
  left: 0;
  bottom: 0;
}
.footer__content {
  position: relative;
  padding-top: 2.2rem;
  z-index: 2;
}
@media (max-width: 1199px) {
  .footer__content {
    padding-top: 1.5rem;
  }
}
.footer-body {
  display: flex;
  gap: 12.5rem;
  margin-bottom: 2.7rem;
}
@media (max-width: 1199px) {
  .footer-body {
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
  }
}
.footer__info {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  max-width: 27rem;
}
@media (max-width: 1199px) {
  .footer__info {
    gap: 0.5rem;
    max-width: 35rem;
  }
}
.footer__info p {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2.2rem;
  text-wrap: balance;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 1199px) {
  .footer__info p {
    line-height: 1.8rem;
  }
}
.footer-logo {
  display: flex;
  width: 21.7rem;
  height: 6.4rem;
}
.footer-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.footer__menus {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 1.2rem 2.3rem 0 0;
}
@media (max-width: 1199px) {
  .footer__menus {
    flex-direction: column;
    justify-content: start;
    gap: 2.2rem;
    padding: 0;
  }
}
.footer__menus .menu {
  display: flex;
  flex-direction: column;
}
.footer__menus .menu > a {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.7rem;
  letter-spacing: 0.144rem;
  text-transform: uppercase;
  color: #fff;
  display: flex;
  margin-bottom: 1.8rem;
}
.footer__menus .menu > a:hover {
  color: #4BAA41;
}
.footer__menus .menu ul {
  flex-direction: column;
  gap: 1.2rem;
}
@media (max-width: 1199px) {
  .footer__menus .menu ul {
    gap: 0.8rem;
  }
}
.footer__menus .menu ul li {
  height: auto;
}
.footer__menus .menu ul li:has(p) {
  margin-top: auto;
}
.footer__menus .menu ul li a, .footer__menus .menu ul li p {
  line-height: 1.8rem;
  color: rgba(255, 255, 255, 0.7);
}
.footer__menus .menu ul li a:hover {
  color: #fff;
}
.footer-bottom {
  display: flex;
  align-items: end;
  flex-direction: column;
  gap: 2.7rem;
  padding-bottom: 1.2rem;
}
@media (max-width: 1199px) {
  .footer-bottom {
    align-items: center;
    gap: 1.5rem;
    padding-bottom: 1.7rem;
  }
}
.footer-bottom__content {
  display: flex;
  align-items: center;
  gap: 6.5rem;
  width: 100%;
}
@media (max-width: 1199px) {
  .footer-bottom__content {
    flex-direction: column;
    gap: 0.5rem;
  }
}
.footer-bottom__links {
  display: flex;
  gap: 1rem;
}
@media (max-width: 1199px) {
  .footer-bottom__links {
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 1.5rem;
  }
}
.footer-bottom__links a {
  font-size: 1.3rem;
  line-height: 2rem;
  text-decoration: underline;
  color: rgba(255, 255, 255, 0.7);
}
.footer-bottom__links a:hover {
  color: #fff;
}
.footer-copyright {
  font-size: 1.3rem;
  line-height: 2rem;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 1199px) {
  .footer-copyright {
    text-align: center;
  }
}
.footer-copyright br {
  display: none;
}
@media (max-width: 1199px) {
  .footer-copyright br {
    display: initial;
  }
}
.footer-luxar {
  flex-shrink: 0;
  display: flex;
  width: 12.3rem;
  height: 3.6rem;
  margin-left: auto;
  /* Логотип вставлен инлайн-svg: атрибуты width/height у него свои (233×38),
     размер задаёт контейнер — как раньше у картинки. */
}
@media (max-width: 1199px) {
  .footer-luxar {
    margin-left: 0;
  }
}
.footer-luxar svg {
  display: block;
  width: 100%;
  height: 100%;
}
.footer-luxar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.up {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4.2rem;
  height: 4.2rem;
  box-sizing: border-box;
  border: 0.2rem #7A8299 solid;
  border-radius: 0.8rem;
  transition: all 0.2s linear;
  cursor: pointer;
  z-index: 100;
  right: 7.8rem;
  bottom: 20rem;
}
@media (max-width: 1199px) {
  .up {
    display: none;
  }
}
.up:hover {
  border-color: #4BAA41;
}
.up:hover svg path {
  fill: #4BAA41;
}
.up-invisible {
  pointer-events: none;
  opacity: 0;
}
.up svg {
  width: 2rem;
  height: 2rem;
}
.up svg path {
  transition: all 0.2s linear;
}

.bottom-bar {
  position: fixed;
  display: none;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  width: 100%;
  height: 6.6rem;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
  box-sizing: border-box;
  padding: 0 1.4rem;
  transition: all 0.2s linear;
  z-index: 100;
  left: 0;
  bottom: 0;
  /* На узких телефонах (≤360px) подпись всё равно впритык: мельче шрифт,
     у кнопки записи убираем иконку. */
}
@media (max-width: 1199px) {
  .bottom-bar {
    display: flex;
  }
}
.bottom-bar-invisible {
  pointer-events: none;
  opacity: 0;
}
.bottom-bar .btn {
  font-size: 1.4rem;
  color: #fff;
  justify-content: start;
  gap: 1.6rem;
  max-width: 18rem;
  width: 100%;
  height: 4.5rem;
  padding: 0 1.4rem;
  /* «Позвонить» — по содержимому, «Онлайн расписание» забирает остаток
     строки: пополам длинная подпись не влезает. */
}
.bottom-bar .btn:not(.btn-active) {
  background-color: #0A1464;
  border: none;
}
.bottom-bar .btn:not(.btn-active):hover {
  background-color: #1A1F3A;
}
.bottom-bar .btn svg {
  width: 1.6rem;
  height: 1.6rem;
}
.bottom-bar .btn:not(.btn-active) {
  width: auto;
  flex: 0 0 auto;
}
.bottom-bar .btn.btn-active {
  max-width: none;
  flex: 1 1 auto;
  white-space: nowrap;
}
@media (max-width: 360px) {
  .bottom-bar .btn {
    font-size: 1.3rem;
    gap: 1rem;
    padding: 0 1.2rem;
  }
  .bottom-bar .btn-active svg {
    display: none;
  }
}

.appointment {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 11.2rem;
  background: linear-gradient(90deg, #0A1464, #091788);
  box-sizing: border-box;
  padding: 0 3.2rem;
  border-radius: 1.2rem;
  overflow: hidden;
}
@media (max-width: 1199px) {
  .appointment {
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 2.5rem;
    min-height: 23.2rem;
    padding: 2.2rem 1.4rem 1.6rem;
  }
}
.appointment_separate {
  min-height: 16rem;
  margin-bottom: 7rem;
}
@media (max-width: 1199px) {
  .appointment_separate {
    min-height: 22rem;
    margin-bottom: 4.8rem;
  }
}
.appointment::before {
  content: "";
  position: absolute;
  width: 41.7rem;
  height: 16rem;
  background: url(/local/templates/v1/css/../images/appointment-decor.webp) no-repeat center/contain;
  pointer-events: none;
  top: 0;
  right: 13.7rem;
}
@media (max-width: 1199px) {
  .appointment::before {
    width: 32.5rem;
    height: 21.3rem;
    background: url(/local/templates/v1/css/../images/appointment-decor-mob.webp) no-repeat center/contain;
    top: auto;
    right: 0;
    bottom: 0;
  }
}
.appointment__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  z-index: 1;
}
.appointment__content h3 {
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 2.5rem;
  color: #fff;
  margin: 0;
}
@media (max-width: 1199px) {
  .appointment__content h3 {
    font-size: 2rem;
    line-height: 2rem;
  }
}
.appointment__content span {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2rem;
  color: #fff;
  margin: 0;
}
.appointment__content span > span {
  color: #82EB77;
}
.appointment__content span b {
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 2.5rem;
}
@media (max-width: 1199px) {
  .appointment__content span b {
    font-size: 2rem;
    line-height: 2rem;
  }
}
.appointment__content p {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2.5rem;
  color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 1199px) {
  .appointment__content p {
    font-size: 1.4rem;
    line-height: 2rem;
  }
}
.appointment .btn {
  flex-shrink: 0;
}
@media (max-width: 1199px) {
  .appointment .btn {
    width: 100%;
    margin-top: auto;
  }
}

.hero {
  margin-bottom: 6.5rem;
}
@media (max-width: 1199px) {
  .hero {
    margin-bottom: 3.2rem;
  }
}
.hero__wrapper {
  display: flex;
  gap: 2.8rem;
  margin-bottom: 5rem;
}
@media (max-width: 1199px) {
  .hero__wrapper {
    flex-direction: column-reverse;
    gap: 1.8rem;
    margin-bottom: 2rem;
  }
}
.hero__content {
  width: 100%;
  padding-top: 2.2rem;
}
@media (max-width: 1199px) {
  .hero__content {
    padding-top: 0;
  }
}
.hero-tag {
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #2F7A26;
  display: flex;
  align-items: center;
  width: max-content;
  height: 3.1rem;
  background-color: #E8F5E6;
  box-sizing: border-box;
  padding: 0 1.4rem;
  border-radius: 0.4rem;
  margin-bottom: 1.7rem;
}
@media (max-width: 1199px) {
  .hero-tag {
    margin-bottom: 1.4rem;
  }
}
.hero-title {
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 3.5rem;
  color: #0A1464;
  margin-bottom: 1.7rem;
}
@media (max-width: 1199px) {
  .hero-title {
    font-size: 2rem;
    line-height: 2rem;
    margin-bottom: 0.5rem;
  }
}
.hero-description {
  font-size: 1.6rem;
  line-height: 2.6rem;
  color: #4A5270;
  margin-bottom: 2.1rem;
}
@media (max-width: 1199px) {
  .hero-description {
    font-size: 1.4rem;
    line-height: 1.6rem;
    margin-bottom: 1.6rem;
  }
}
.hero-utp {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-left: 0;
  margin: 0 0 3rem;
}
@media (max-width: 1199px) {
  .hero-utp {
    gap: 0.5rem;
    margin: 0 0 1rem;
  }
}
.hero-utp li {
  position: relative;
  font-size: 1.5rem;
  line-height: 2.4rem;
  color: #4A5270;
  padding-left: 2.8rem;
}
@media (max-width: 1199px) {
  .hero-utp li {
    font-size: 1.4rem;
    line-height: 1.5rem;
  }
}
.hero-utp li::before {
  content: "";
  position: absolute;
  width: 2rem;
  height: 2rem;
  background: url(/local/templates/v1/css/../images/svg/list-mark.svg) no-repeat center/contain;
  top: 0;
  left: 0;
}
@media (max-width: 1199px) {
  .hero-utp li::before {
    top: -0.3rem;
  }
}
.hero-price {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
  background-color: #F7F9FB;
  box-sizing: border-box;
  border: #E5E9F0 1px solid;
  border-left: #4BAA41 0.4rem solid;
  border-radius: 1.2rem;
  padding: 1.2rem 2.4rem 1.6rem;
  margin-bottom: 2.1rem;
}
@media (max-width: 1199px) {
  .hero-price {
    gap: 0;
    padding: 0.5rem 0 0.5rem 2.1rem;
  }
}
.hero-price > p {
  font-size: 1.3rem;
  line-height: 2rem;
  text-transform: uppercase;
  color: #6B7287;
}
.hero-price__content {
  display: flex;
  align-items: end;
}
.hero-price__content p {
  font-weight: 800;
  font-size: 3rem;
  line-height: 3.7rem;
  color: #0A1464;
  margin-right: 1rem;
}
@media (max-width: 1199px) {
  .hero-price__content p {
    font-size: 2.5rem;
  }
}
.hero-price__content span {
  font-size: 1.6rem;
  line-height: 2.4rem;
  text-decoration: line-through;
  color: #6B7287;
}
@media (max-width: 1199px) {
  .hero-price__content span {
    margin-bottom: 0.5rem;
  }
}
.hero-price-promotion {
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  color: #fff;
  display: flex;
  align-items: center;
  height: 3.2rem;
  background-color: #F0A500;
  box-sizing: border-box;
  padding: 0 1.2rem;
  border-radius: 0.4rem;
  margin-left: 2.7rem;
  margin-bottom: 0.2rem;
}
@media (max-width: 1199px) {
  .hero-price-promotion {
    margin-left: 2rem;
    margin-bottom: 1rem;
  }
}
.hero-buttons {
  display: flex;
  gap: 1.2rem;
}
@media (max-width: 1199px) {
  .hero-buttons {
    flex-direction: column;
    gap: 0.7rem;
  }
}
@media (max-width: 1199px) {
  .hero-buttons .btn {
    height: 4.5rem;
  }
}
.hero-buttons .btn svg {
  width: 1.6rem;
  height: 1.6rem;
}
.hero-image {
  position: relative;
  display: flex;
  width: 54rem;
  height: 55.3rem;
  border-radius: 2rem;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .hero-image {
    width: 100%;
    height: auto;
    aspect-ratio: 347/220;
  }
}
.hero-image picture {
  display: flex;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.hero-image picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
.hero-rating {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  height: 7.4rem;
  background-color: rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
  box-shadow: 0 1.2rem 3.2rem 0 rgba(10, 20, 100, 0.06);
  padding: 0 1.2rem 0 1.8rem;
  border-radius: 1rem;
  left: 2rem;
  bottom: 2rem;
}
@media (max-width: 768px) {
  .hero-rating {
    gap: 0.8rem;
    height: 4.5rem;
    padding: 0 0.8rem;
    left: auto;
    right: 1rem;
    bottom: 1rem;
  }
}
.hero-rating-star {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.6rem;
  height: 3.6rem;
  background-color: rgba(10, 22, 125, 0.1);
  border-radius: 50%;
}
.hero-rating-star img {
  width: 2.4rem;
  height: 2.4rem;
  object-fit: contain;
  object-position: center;
}
.hero-rating__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (max-width: 1199px) {
  .hero-rating__content {
    gap: 0.2rem;
  }
}
.hero-rating__content p {
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.1rem;
  color: #0A1464;
}
@media (max-width: 1199px) {
  .hero-rating__content p {
    padding-left: 0.2rem;
  }
}
.hero-rating__content span {
  font-size: 1.3rem;
  line-height: 1.5rem;
  color: #6B7287;
}

.sections {
  position: relative;
  width: 100%;
  height: 5.4rem;
  background: linear-gradient(90deg, #0A1464, #091788);
  box-sizing: border-box;
  padding: 0.7rem;
  border-radius: 1.2rem;
}
.sections::before {
  content: "";
  position: absolute;
  width: 2.8rem;
  height: 100%;
  background: linear-gradient(90deg, transparent, #0A1464);
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  pointer-events: none;
  top: 0;
  right: 0;
}
.sections__content {
  display: flex;
  gap: 0.4rem;
  height: 100%;
  overflow-x: auto;
}
.sections__content::-webkit-scrollbar {
  display: none;
}
.sections__item {
  font-weight: 500;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: 100%;
  padding: 0 2.1rem;
  border-radius: 0.6rem;
}
.sections__item:hover {
  color: #387F30;
}
.sections__item.active {
  background-color: #272B73;
}

.advantages {
  margin-bottom: 9rem;
}
@media (max-width: 1199px) {
  .advantages {
    margin-bottom: 2.2rem;
  }
}
.advantages .title-block {
  margin-bottom: 4.5rem;
}
@media (max-width: 1199px) {
  .advantages .title-block {
    margin-bottom: 1.8rem;
  }
}
.advantages__content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 1199px) {
  .advantages__content {
    gap: 1rem;
    margin-bottom: 3rem;
  }
}
.advantages__item {
  display: flex;
  flex-direction: column;
  width: calc(33.33% - 1.333rem);
  min-height: 26.6rem;
  background-color: #F7F9FB;
  box-sizing: border-box;
  padding: 2.8rem;
  border: #E5E9F0 1px solid;
  border-radius: 1.2rem;
  transition: all 0.3s ease-in-out;
}
@media (max-width: 1199px) {
  .advantages__item {
    flex-wrap: wrap;
    flex-direction: row;
    gap: 0.8rem;
    width: calc(50% - 0.5rem);
    min-height: 0;
    padding: 0.6rem 0.6rem 1.6rem;
  }
}
.advantages__item:hover {
  border-color: #4BAA41;
  box-shadow: 0 0.4rem 3rem 0 rgba(0, 0, 0, 0.15);
}
.advantages__item-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4.8rem;
  height: 4.8rem;
  background-color: #E8F5E6;
  border-radius: 1rem;
  margin-bottom: 1.8rem;
}
@media (max-width: 1199px) {
  .advantages__item-image {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0;
  }
}
.advantages__item-image img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 1199px) {
  .advantages__item-image img {
    width: 2.5rem;
    height: 2.5rem;
  }
}
.advantages__item h3 {
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 2rem;
  color: #0A1464;
  margin: 0 0 1rem;
}
@media (max-width: 1199px) {
  .advantages__item h3 {
    font-size: 1.2rem;
    line-height: 1.2rem;
    display: flex;
    align-items: center;
    width: calc(100% - 4.3rem);
    height: 3.5rem;
    margin: 0;
  }
}
.advantages__item p {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #4A5270;
}
@media (max-width: 1199px) {
  .advantages__item p {
    font-size: 1.2rem;
    line-height: 1.4rem;
  }
}
@media (max-width: 1199px) {
  .advantages .appointment__content h3 {
    font-size: 1.8rem;
  }
}

.price {
  position: relative;
  margin-bottom: 7rem;
}
@media (max-width: 1199px) {
  .price {
    margin-bottom: 2.5rem;
  }
}
.price__content {
  box-sizing: border-box;
  border: #E5E9F0 1px solid;
  border-radius: 1.2rem;
  overflow: hidden;
}
.price-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 6.7rem;
  background-color: #F7F9FB;
  box-sizing: border-box;
  padding: 0 5rem 0 2.8rem;
}
@media (max-width: 1199px) {
  .price-heading {
    display: none;
    padding: 0.5rem 2rem;
  }
}
.price-heading p {
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.9rem;
  text-transform: uppercase;
  color: #6B7287;
}
.price-heading p b {
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.1rem;
  text-transform: uppercase;
  color: #0A1464;
}
.price__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 2.2rem 2.8rem 2rem;
  border-bottom: #E5E9F0 1px solid;
}
@media (max-width: 1199px) {
  .price__item {
    flex-direction: column;
    justify-content: start;
    align-items: start;
    padding: 1.8rem 2rem 2rem;
  }
}
.price__item:last-of-type {
  border-bottom: none;
}
.price__item__content {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
@media (max-width: 1199px) {
  .price__item__content {
    gap: 1rem;
    margin-bottom: 1.2rem;
  }
}
.price__item__content span {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #6B7287;
}
.price__item-heading p {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2rem;
  color: #1A1F3A;
  display: inline;
  margin: 0;
}
.price__item-tag {
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 2.1rem;
  color: #6B7287;
  background-color: #F7F9FB;
  box-sizing: border-box;
  padding: 0 0.5rem;
  border-radius: 0.3rem;
  margin-left: 0.8rem;
}
@media (max-width: 1199px) {
  .price__item-tag {
    margin-left: 0.5rem;
  }
}
.price__item__control {
  display: flex;
  align-items: center;
}
@media (max-width: 1199px) {
  .price__item__control {
    flex-wrap: wrap;
    align-items: start;
    gap: 1.8rem 0;
    width: 100%;
  }
}
.price__item__control .btn {
  height: 4rem;
}
@media (max-width: 1199px) {
  .price__item__control .btn {
    width: 100%;
  }
}
.price__item-price {
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.1rem;
  color: #0A1464;
  margin-right: 2rem;
}
@media (max-width: 1199px) {
  .price__item-price {
    margin-right: 0;
  }
}
.price__item-price:has(+ .price__item-price-old) {
  margin-right: 1.2rem;
}
.price__item-price-old {
  font-size: 1.3rem;
  line-height: 1.6rem;
  text-decoration: line-through;
  color: #6B7287;
  margin-right: 2.4rem;
}
@media (max-width: 1199px) {
  .price__item-price-old {
    margin-right: 0;
  }
}
.price .btn-more {
  position: absolute;
  top: 9.5rem;
  right: 2rem;
}
@media (max-width: 1199px) {
  .price .btn-more {
    position: static;
  }
}
.price .footnote {
  margin-top: 2rem;
}

.price_page {
  padding-top: 3.5rem;
}
.price_page .appointment {
  min-height: 6.7rem;
  padding: 0 1rem 0 3rem;
  margin-bottom: 5rem;
}
@media (max-width: 1199px) {
  .price_page .appointment {
    min-height: 0;
    padding: 2.2rem 1.4rem 1.6rem;
    margin-bottom: 2.5rem;
  }
}
.price_page .footnote {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 7.7rem;
  margin-top: 2.8rem;
}

.price__tabs {
  position: relative;
  border-bottom: #E5E9F0 1px solid;
  margin-bottom: 5rem;
}
@media (max-width: 1199px) {
  .price__tabs {
    margin-bottom: 2.5rem;
  }
}
.price__tabs::before, .price__tabs::after {
  content: "";
  position: absolute;
  width: 8.5rem;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  top: 0;
}
@media (max-width: 1199px) {
  .price__tabs::before, .price__tabs::after {
    width: 7.5rem;
  }
}
.price__tabs::before {
  right: 0;
  background: linear-gradient(90deg, transparent 0%, #fff 60%);
}
.price__tabs::after {
  left: 0;
  background: linear-gradient(-90deg, transparent 0%, #fff 60%);
  display: none;
}
.price__tabs--fade-left::after {
  display: block;
}
.price__tabs__content {
  display: flex;
  gap: 3rem;
  padding-right: 8.5rem;
  overflow-x: auto;
}
@media (max-width: 1199px) {
  .price__tabs__content {
    padding-right: 7.5rem;
  }
}
.price__tabs__content::-webkit-scrollbar {
  display: none;
}
.price__tabs-scroll {
  position: absolute;
  top: 1.5rem;
  z-index: 2;
  display: flex;
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  background-color: #fff;
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
}
.price__tabs-scroll[hidden] {
  display: none;
}
.price__tabs-scroll svg {
  display: block;
  width: 100%;
  height: 100%;
}
.price__tabs-scroll--right {
  right: 0;
}
.price__tabs-scroll--left {
  left: 0;
}
.price__tabs-scroll--left svg {
  transform: scaleX(-1);
}

.price__tab {
  flex-shrink: 0;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 3.5rem;
  letter-spacing: -0.45px;
  color: #4A5270;
  position: relative;
  background-color: transparent;
  padding: 1rem 0 1.8rem;
  border: none;
  outline: none;
  cursor: pointer;
  transition: color 0.2s linear;
}
@media (max-width: 1199px) {
  .price__tab {
    padding: 1rem 0;
  }
}
.price__tab:hover {
  color: #387F30;
}
.price__tab.active {
  font-weight: 600;
  color: #0A1464;
}
.price__tab.active::before {
  opacity: 1;
}
.price__tab::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.2rem;
  background-color: #4BAA41;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s linear;
  left: 0;
  bottom: 2rem;
}
@media (max-width: 1199px) {
  .price__tab::before {
    bottom: 1.2rem;
  }
}

.price__section {
  display: none;
}
.price__section.active {
  display: block;
}
.price__section-title,
.price__section-title a {
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.9rem;
  color: #0A1464;
  margin-bottom: 2.8rem;
}
@media (max-width: 1199px) {
  .price__section-title,
  .price__section-title a {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
  }
}
.price__section-title a:hover {
  color: #387F30;
}
.price__section .price-heading {
  align-items: end;
  background-color: #fff;
}
@media (max-width: 1199px) {
  .price__section .price-heading {
    display: flex;
    align-items: center;
    min-height: 5rem;
  }
}
.price__section .price-heading a,
.price__section .price-heading .price-heading__title {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.9rem;
  text-align: start;
  color: #0A1464;
  margin-bottom: 1.4rem;
}
@media (max-width: 1199px) {
  .price__section .price-heading a,
  .price__section .price-heading .price-heading__title {
    margin-bottom: 0;
  }
}
.price__section .price-heading a:hover {
  color: #387F30;
}
.price__section .price-heading p {
  margin: auto 0;
}
@media (max-width: 1199px) {
  .price__section .price-heading p {
    margin: 0;
  }
}
.price__section .price__item {
  gap: 5rem;
}
@media (max-width: 1199px) {
  .price__section .price__item {
    gap: 0;
  }
}
.price__section .price-heading + .price__item {
  border-top: #E5E9F0 1px solid;
}
.price__section .price__item:has(+ .price-heading) {
  border-bottom: none;
}

.price__sections {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.price__sections .price__section-title-cell {
  padding: 0;
}
.price__sections .price-heading__name a,
.price__sections .price-heading__name .price-heading__title {
  display: block;
  width: fit-content;
}
.price__sections .price__toggle-cell {
  padding: 1.6rem 2rem;
}
.price__sections .price__toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 5.2rem;
  box-sizing: border-box;
  padding: 0 2rem;
  font-weight: 600;
  font-size: 1.5rem;
  color: #0A1464;
  background-color: #F7F9FB;
  border: #C3CCE0 1px dashed;
  border-radius: 1.2rem;
  outline: none;
  cursor: pointer;
  transition: background-color 0.2s linear, border-color 0.2s linear;
}
.price__sections .price__toggle:hover {
  background-color: #EEF2F7;
  border-color: #AEB9D2;
}

.price__search {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  box-sizing: border-box;
  height: 5rem;
  background-color: #fff;
  border: #E5E9F0 1px solid;
  border-radius: 0.8rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 1199px) {
  .price__search {
    margin-bottom: 1.5rem;
  }
}
.price__search-icon {
  flex-shrink: 0;
  display: flex;
  width: 2.4rem;
  height: 2.4rem;
  margin-left: 1.4rem;
  color: #0A1464;
}
.price__search-icon svg {
  width: 100%;
  height: 100%;
}
.price__search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  font-size: max(1.6rem, 16px);
  color: #0A1464;
  background-color: transparent;
  border: none;
  outline: none;
}
.price__search-input::placeholder {
  font-size: 1.5rem;
  color: #6B7287;
}
.price__search-input:not(:placeholder-shown) ~ .price__search-clear {
  display: flex;
}
.price__search-input:placeholder-shown ~ .price__search-voice {
  margin-left: 2.7rem;
}
@media (max-width: 768px) {
  .price__search-input:placeholder-shown ~ .price__search-voice {
    margin-left: 1rem;
  }
}
@media (max-width: 576px) {
  .price__search-input:placeholder-shown ~ .price__search-voice {
    margin-left: 0;
  }
}
.price__search-count {
  flex-shrink: 0;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1;
  color: #0A1464;
  white-space: nowrap;
}
@media (max-width: 576px) {
  .price__search-count {
    display: none;
  }
}
.price__search-clear {
  position: relative;
  flex-shrink: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-left: 2.7rem;
  color: #387F30;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.price__search-clear svg {
  width: 1rem;
  height: 1rem;
}
.price__search-voice {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  color: #0A1464;
  background-color: transparent;
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  transition: color 0.2s linear, background-color 0.2s linear;
}
.price__search-voice svg {
  width: 2.4rem;
  height: 2.4rem;
}
.price__search-voice[hidden] {
  display: none;
}
.price__search-voice:hover {
  color: #387F30;
}
@media (max-width: 576px) {
  .price__search-voice {
    margin-right: 0.8rem;
  }
}
.price__search-clear::before, .price__search-voice::before {
  content: "";
  position: absolute;
  left: -0.8rem;
  top: 50%;
  width: 1px;
  height: 3.2rem;
  background-color: #E7EEF4;
  transform: translateY(-50%);
}
@media (max-width: 576px) {
  .price__search-clear::before {
    content: none;
  }
}
.price__search-submit {
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15.6rem;
  padding: 0;
  font-weight: 500;
  font-size: 1.4rem;
  text-transform: uppercase;
  color: #fff;
  background-color: #291A7B;
  border: none;
  border-radius: 0.8rem;
  cursor: pointer;
  transition: background-color 0.2s linear;
}
@media (max-width: 768px) {
  .price__search-submit {
    width: 9.5rem;
  }
}
@media (max-width: 576px) {
  .price__search-submit {
    display: none;
  }
}
.price__search-submit:hover {
  background-color: #1B2585;
}
.price__search-empty {
  padding: 2.4rem 0;
  font-size: 1.6rem;
  color: #6B7287;
}
.price__search-empty[hidden] {
  display: none;
}

.price--searching .price__tabs {
  display: none;
}

.price--listening .price__search-voice {
  color: #fff;
  background-color: #4BAA41;
}

.price__mark {
  color: inherit;
  background-color: #FFEFA6;
  border-radius: 0.3rem;
}

@media not all and (max-width: 1199px) {
  .price__sections .price__section.active {
    display: table-row-group;
  }
  .price__sections .price-heading {
    display: table-row;
    height: 6.7rem;
  }
  .price__sections .price-heading > th {
    font-weight: 400;
    background-color: transparent;
  }
  .price__sections .price-heading__name {
    vertical-align: bottom;
    text-align: left;
    padding: 0 5rem 0 2.8rem;
  }
  .price__sections .price-heading__price {
    vertical-align: middle;
    text-align: right;
    padding: 0 5rem 0 0;
  }
  .price__sections .price__item {
    display: table-row;
  }
  .price__sections .price__item--collapsed {
    display: none;
  }
  .price__sections .price__item--collapsed.is-visible {
    display: table-row;
  }
  .price__sections .price__item > .price__item-cell {
    border-bottom: #E5E9F0 1px solid;
  }
  .price__sections .price__item:has(+ .price-heading) > .price__item-cell {
    border-bottom: none;
  }
  .price__sections .price-heading + .price__item > .price__item-cell {
    border-top: #E5E9F0 1px solid;
  }
  .price__sections .price__item-cell {
    vertical-align: middle;
  }
  .price__sections .price__item-cell--content {
    width: 100%;
    padding: 2.2rem 0 2rem 2.8rem;
  }
  .price__sections .price__item-cell--control {
    padding: 2.2rem 2.8rem 2rem 4rem;
    white-space: nowrap;
  }
  .price__sections .price__item__control {
    justify-content: flex-end;
  }
  .price__sections .price-heading > th:first-child,
  .price__sections .price__item > .price__item-cell:first-child,
  .price__sections .price__toggle-cell {
    border-left: #E5E9F0 1px solid;
  }
  .price__sections .price-heading > th:last-child,
  .price__sections .price__item > .price__item-cell:last-child,
  .price__sections .price__toggle-cell {
    border-right: #E5E9F0 1px solid;
  }
  .price__sections .price-heading--first {
    height: calc(6.7rem + 1px);
  }
  .price__sections .price-heading--first > th {
    border-top: #E5E9F0 1px solid;
  }
  .price__sections .price-heading--first > th:first-child {
    border-top-left-radius: 1.2rem;
  }
  .price__sections .price-heading--first > th:last-child {
    border-top-right-radius: 1.2rem;
  }
  .price__sections .price__section > .price-heading:last-child > th,
  .price__sections .price__section > .price__item:last-child > .price__item-cell,
  .price__sections .price__section > .price__toggle-row:last-child > .price__toggle-cell {
    border-bottom: #E5E9F0 1px solid;
  }
  .price__sections .price__section > .price-heading:last-child > th:first-child,
  .price__sections .price__section > .price__item:last-child > .price__item-cell:first-child,
  .price__sections .price__section > .price__toggle-row:last-child > .price__toggle-cell {
    border-bottom-left-radius: 1.2rem;
  }
  .price__sections .price__section > .price-heading:last-child > th:last-child,
  .price__sections .price__section > .price__item:last-child > .price__item-cell:last-child,
  .price__sections .price__section > .price__toggle-row:last-child > .price__toggle-cell {
    border-bottom-right-radius: 1.2rem;
  }
  .price--searching .price__sections .price__section {
    display: none;
  }
  .price--searching .price__sections .price__section.is-search-hit {
    display: table-row-group;
  }
  .price--searching .price__sections .price-heading {
    display: none;
  }
  .price--searching .price__sections .price-heading.is-search-hit {
    display: table-row;
  }
  .price--searching .price__sections .price__item {
    display: none;
  }
  .price--searching .price__sections .price__item.is-match {
    display: table-row;
  }
  .price--searching .price__sections .price__toggle-row {
    display: none;
  }
}
@media (max-width: 1199px) {
  .price__sections {
    display: block;
  }
  .price__sections .price__section.active {
    display: block;
  }
  .price__sections .price__section-title-row,
  .price__sections .price__section-title-cell {
    display: block;
  }
  .price__sections .price-heading .price-heading__price {
    display: none;
  }
  .price__sections .price__item-cell {
    display: block;
    width: 100%;
    padding: 0;
  }
  .price__sections .price__toggle-row,
  .price__sections .price__toggle-cell {
    display: block;
  }
  .price__sections .price__item--collapsed {
    display: none;
  }
  .price__sections .price__item--collapsed.is-visible {
    display: flex;
  }
  .price__sections .price-heading,
  .price__sections .price__item,
  .price__sections .price__toggle-row {
    border-left: #E5E9F0 1px solid;
    border-right: #E5E9F0 1px solid;
  }
  .price__sections .price-heading--first {
    min-height: calc(5rem + 1px);
    border-top: #E5E9F0 1px solid;
    border-top-left-radius: 1.2rem;
    border-top-right-radius: 1.2rem;
  }
  .price__sections .price__section > .price-heading:last-child,
  .price__sections .price__section > .price__item:last-child,
  .price__sections .price__section > .price__toggle-row:last-child {
    border-bottom: #E5E9F0 1px solid;
    border-bottom-left-radius: 1.2rem;
    border-bottom-right-radius: 1.2rem;
  }
  .price--searching .price__sections .price__section {
    display: none;
  }
  .price--searching .price__sections .price__section.is-search-hit {
    display: block;
  }
  .price--searching .price__sections .price-heading {
    display: none;
  }
  .price--searching .price__sections .price-heading.is-search-hit {
    display: flex;
  }
  .price--searching .price__sections .price__item {
    display: none;
  }
  .price--searching .price__sections .price__item.is-match {
    display: flex;
  }
  .price--searching .price__sections .price__toggle-row {
    display: none;
  }
}
.about {
  display: flex;
  gap: 4.8rem;
  background-color: #F7F9FB;
  box-sizing: border-box;
  padding: 4.8rem;
  border-radius: 2rem;
  margin-bottom: 8.5rem;
}
@media (max-width: 1199px) {
  .about {
    flex-direction: column;
    gap: 1.2rem;
    padding: 2.4rem 1rem 1.2rem;
    margin-bottom: 2.5rem;
  }
}
.about__content {
  width: 100%;
}
@media (max-width: 1199px) {
  .about__content {
    padding: 0 1rem;
  }
}
.about__content .title-block {
  margin-bottom: 0.5rem;
}
.about__content > p {
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: #4A5270;
  margin-bottom: 3rem;
}
@media (max-width: 1199px) {
  .about__content > p {
    font-size: 1.4rem;
    line-height: 1.8rem;
    margin-bottom: 2.4rem;
  }
}
.about__content > p:has(+ p), .about__content > p:has(+ .btn-more) {
  margin-bottom: 2rem;
}
@media (max-width: 1199px) {
  .about__content > p:has(+ p), .about__content > p:has(+ .btn-more) {
    margin-bottom: 0.5rem;
  }
}
@media (max-width: 1199px) {
  .about__content > p:has(+ .btn-more) {
    margin-bottom: 0;
  }
}
.about__content h3 {
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 2.4rem;
  color: #0A1464;
  margin: 0 0 1.5rem;
}
@media (max-width: 1199px) {
  .about__content h3 {
    margin-bottom: 0.5rem;
  }
}
.about__content ul {
  padding-left: 2rem;
  margin: 0 0 2rem;
}
@media (max-width: 1199px) {
  .about__content ul {
    margin-bottom: 1.2rem;
  }
}
.about__content ul li {
  font-size: 1.6rem;
  line-height: 2.5rem;
  color: #4A5270;
  margin-bottom: 0.5rem;
}
@media (max-width: 1199px) {
  .about__content ul li {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}
.about__content ul li:last-of-type {
  margin-bottom: 0;
}
.about__list {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  width: 52.4rem;
  background-color: #fff;
  box-sizing: border-box;
  padding: 3.2rem 2.2rem 2.2rem;
  border: #E5E9F0 1px solid;
  border-radius: 1.2rem;
}
@media (max-width: 1199px) {
  .about__list {
    width: 100%;
    padding: 2.2rem 0.5rem 3.5rem 1.5rem;
  }
}
.about__list-title {
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.1rem;
  color: #0A1464;
  position: relative;
  padding-left: 4.2rem;
  margin: 0 0 4.2rem 0.7rem;
}
@media (max-width: 1199px) {
  .about__list-title {
    line-height: 2rem;
    margin: 0 0 3.2rem;
  }
}
.about__list-title::before {
  content: "";
  position: absolute;
  width: 3rem;
  height: 3rem;
  background: url(/local/templates/v1/css/../images/svg/about-list-mark.svg) no-repeat center/contain;
  transform: translateY(-50%);
  top: 50%;
  left: 0;
}
.about__list ol {
  counter-reset: li-counter;
  list-style: none;
  padding-left: 0;
  margin: 0 0 2rem 0.7rem;
}
@media (max-width: 1199px) {
  .about__list ol {
    margin: 0;
  }
}
.about__list ol li {
  position: relative;
  font-size: 1.5rem;
  line-height: 2rem;
  color: #4A5270;
  padding-left: 4.2rem;
  margin-bottom: 3rem;
}
@media (max-width: 1199px) {
  .about__list ol li {
    font-size: 1.4rem;
    line-height: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.2rem;
  }
}
@media (max-width: 1199px) {
  .about__list ol li b {
    font-size: 1.5rem;
    line-height: 1.8rem;
  }
}
.about__list ol li::before {
  counter-increment: li-counter;
  content: counter(li-counter);
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  background-color: #4BAA41;
  border-radius: 50%;
  top: -0.5rem;
  left: 0;
}
.about__list ol li:last-of-type {
  margin-bottom: 0;
}
.about__list-image {
  display: flex;
  width: 100%;
  height: auto;
  aspect-ratio: 480/298;
  border-radius: 1.2rem;
  margin-top: auto;
}
@media (max-width: 1199px) {
  .about__list-image {
    display: none;
  }
}
.about__list-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.specialists {
  margin-bottom: 6.5rem;
}
@media (max-width: 1199px) {
  .specialists {
    margin-bottom: 3.5rem;
  }
}
.specialists__slider {
  position: relative;
  padding-bottom: 3rem;
}
@media (max-width: 1199px) {
  .specialists__slider {
    padding-bottom: 2.2rem;
  }
}
.specialists__slider .swiper {
  overflow: visible;
}
.specialists__slider .swiper-wrapper {
  display: flex;
}
.specialists__slider .swiper-slide {
  height: auto;
  transition: opacity 0.5s ease-in-out, scale 0.5s ease-in-out;
  opacity: 0;
  scale: 0.8;
}
@media (max-width: 1199px) {
  .specialists__slider .swiper-slide {
    width: auto !important;
    opacity: 1;
    scale: 1;
  }
}
.specialists__slider .swiper-slide-active, .specialists__slider .swiper-slide-active + .swiper-slide, .specialists__slider .swiper-slide-active + .swiper-slide + .swiper-slide, .specialists__slider .swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide {
  opacity: 1;
  scale: 1;
}
.specialists__slider-arrows {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6.5rem;
  transform: translateY(-100%);
  top: -3.8rem;
  right: 0;
}
@media (max-width: 1199px) {
  .specialists__slider-arrows {
    position: static;
    justify-content: space-between;
    gap: 0;
    transform: none;
    margin-bottom: 1.6rem;
  }
}
.specialists__item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border: #E5E9F0 1px solid;
  border-radius: 1.2rem;
  overflow: hidden;
}
@media (max-width: 1199px) {
  .specialists__item {
    max-width: 34.7rem;
  }
}
.specialists__item-image {
  flex-shrink: 0;
  position: relative;
  display: flex;
  width: 100%;
  height: 35.2rem;
  background: linear-gradient(135deg, #E8EAF5, #E8F5E6);
}
@media (max-width: 1199px) {
  .specialists__item-image {
    height: 27rem;
  }
}
.specialists__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}
.specialists__item-image span {
  position: absolute;
  font-weight: 700;
  font-size: 4.8rem;
  text-transform: uppercase;
  letter-spacing: -1px;
  color: rgba(10, 20, 100, 0.5);
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.specialists__item-tag {
  position: absolute;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 2.5rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  background-color: #3B8633;
  box-sizing: border-box;
  padding: 0 1rem;
  border-radius: 0.4rem;
  z-index: 2;
  top: 1.2rem;
  right: 1.2rem;
}
.specialists__item__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  padding: 2rem 2.2rem;
}
@media (max-width: 1199px) {
  .specialists__item__content {
    padding: 1.5rem 2rem 2.2rem;
  }
}
.specialists__item-name {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2rem;
  color: #0A1464;
  margin-bottom: 0.8rem;
}
@media (max-width: 1199px) {
  .specialists__item-name {
    margin-bottom: 1.5rem;
  }
}
.specialists__item-text {
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #4A5270;
  margin-bottom: 1.5rem;
}
@media (max-width: 1199px) {
  .specialists__item-text {
    font-size: 1.4rem;
  }
}
.specialists__item-info {
  display: flex;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: #E5E9F0 1px solid;
  margin-top: auto;
}
@media (max-width: 1199px) {
  .specialists__item-info {
    padding: 1.5rem 1.5rem 0;
  }
}
.specialists__item-info div p {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.5rem;
  color: #0A1464;
}
.specialists__item-info div span {
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.4rem;
  color: #6B7287;
}

.results {
  margin-bottom: 4.5rem;
}
@media (max-width: 1199px) {
  .results {
    margin-bottom: 3.5rem;
  }
}
@media (max-width: 1199px) {
  .results .title-block {
    margin-bottom: 0;
  }
}
.results__slider {
  position: relative;
  padding-bottom: 4rem;
  margin-bottom: 6rem;
}
@media (max-width: 1199px) {
  .results__slider {
    padding-bottom: 2.2rem;
    margin-bottom: 3.5rem;
  }
}
.results__slider .swiper {
  overflow: visible;
}
.results__slider .swiper-wrapper {
  display: flex;
}
.results__slider .swiper-slide {
  height: auto;
  transition: opacity 0.5s ease-in-out, scale 0.5s ease-in-out;
  opacity: 0;
  scale: 0.8;
}
@media (max-width: 1199px) {
  .results__slider .swiper-slide {
    width: auto !important;
    opacity: 1;
    scale: 1;
  }
}
.results__slider .swiper-slide-active, .results__slider .swiper-slide-active + .swiper-slide, .results__slider .swiper-slide-active + .swiper-slide + .swiper-slide {
  opacity: 1;
  scale: 1;
}
.results__slider .slider-arrows {
  position: absolute;
  transform: translateY(-100%);
  top: -3.2rem;
  right: 0;
}
@media (max-width: 1199px) {
  .results__slider .slider-arrows {
    position: static;
    width: max-content;
    transform: none;
    margin: 0 0 1rem auto;
  }
}
.results__item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border: #E5E9F0 1px solid;
  border-radius: 1.2rem;
  overflow: hidden;
}
@media (max-width: 1199px) {
  .results__item {
    max-width: 34.7rem;
  }
}
.results__item-images {
  flex-shrink: 0;
  display: flex;
  gap: 0.2rem;
  width: 100%;
  height: 23rem;
  background-color: #E5E9F0;
}
@media (max-width: 1199px) {
  .results__item-images {
    gap: 0.1rem;
    height: 20.8rem;
  }
}
.results__item-before, .results__item-after {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}
.results__item-before span, .results__item-after span {
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 2.5rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #0A1464;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 0 1rem;
  border-radius: 0.4rem;
  top: 1.2rem;
  left: 1.2rem;
}
.results__item-before img, .results__item-after img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.results__item__content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 1.7rem 2rem 2rem;
}
@media (max-width: 1199px) {
  .results__item__content {
    padding: 1rem 2rem 2rem;
  }
}
.results__item__content p {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2.1rem;
  color: #4A5270;
}
@media (max-width: 1199px) {
  .results__item__content p {
    line-height: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
  }
}
.results__item__content p b {
  color: #0A1464;
}
@media (max-width: 1199px) {
  .results .appointment__content p {
    font-size: 1.6rem;
  }
}

.reviews {
  position: relative;
  margin-bottom: 11rem;
}
@media (max-width: 1199px) {
  .reviews {
    margin-bottom: 1.6rem;
  }
}
.reviews .title-block {
  margin-bottom: 4rem;
}
@media (max-width: 1199px) {
  .reviews .title-block {
    margin-bottom: 1.2rem;
  }
}
.reviews__content {
  position: relative;
  display: flex;
  gap: 2.8rem;
}
@media (max-width: 1199px) {
  .reviews__content {
    flex-direction: column;
    gap: 3.8rem;
  }
}
.reviews__slider {
  width: 100%;
}
@media (max-width: 1199px) {
  .reviews__slider {
    position: relative;
    padding-bottom: 2.4rem;
  }
}
.reviews__slider-arrows {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: translateY(-100%);
  top: -3rem;
  right: 0;
}
@media (max-width: 1199px) {
  .reviews__slider-arrows {
    position: static;
    transform: none;
    margin-bottom: 1.4rem;
  }
}
.reviews__slider .swiper {
  overflow: visible;
}
.reviews__slider .swiper-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
@media (max-width: 1199px) {
  .reviews__slider .swiper-wrapper {
    flex-wrap: nowrap;
    gap: 0;
  }
}
@media (min-width: 1200px) {
  .reviews__slider .swiper-wrapper {
    transform: none !important;
  }
}
.reviews__slider .swiper-slide {
  width: calc(50% - 1rem);
}
@media (max-width: 1199px) {
  .reviews__slider .swiper-slide {
    width: auto;
  }
}
@media (min-width: 1200px) {
  .reviews__slider .swiper-slide {
    margin-right: 0 !important;
  }
}
.reviews__item {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 32rem;
  background-color: #fff;
  box-sizing: border-box;
  padding: 2.5rem;
  border: #E5E9F0 1px solid;
  border-radius: 1.2rem;
}
@media (max-width: 1199px) {
  .reviews__item {
    max-width: 34.7rem;
    height: 33rem;
    padding: 2rem 2rem 4rem;
  }
}
.reviews__item-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.4rem;
}
@media (max-width: 1199px) {
  .reviews__item-top {
    justify-content: start;
    flex-direction: column-reverse;
    gap: 1.3rem;
    margin-bottom: 1.3rem;
  }
}
.reviews__item-stars {
  width: 8.9rem;
  height: 1.9rem;
  background: url(/local/templates/v1/css/../images/svg/stars.svg) no-repeat center/contain;
}
.reviews__item-stars div {
  height: 100%;
  background: url(/local/templates/v1/css/../images/svg/stars-active.svg) no-repeat left center/cover;
}
.reviews__item-source {
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 2.4rem;
  color: #6B7287;
  width: max-content;
  background-color: #F7F9FB;
  padding: 0 0.8rem;
  border-radius: 0.3rem;
}
.reviews__item-text {
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: #4A5270;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1199px) {
  .reviews__item-text {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}
.reviews__item-author {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding-top: 2.2rem;
  border-top: #E5E9F0 1px solid;
  margin-top: auto;
}
@media (max-width: 1199px) {
  .reviews__item-author {
    padding-top: 1.8rem;
  }
}
.reviews__item-author span {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 1.6rem;
  text-transform: uppercase;
  color: #2F7A26;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4rem;
  height: 4rem;
  background-color: #E8F5E6;
  border-radius: 50%;
}
.reviews__item-author__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.reviews__item-author-name {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.8rem;
  color: #0A1464;
}
.reviews__item-author-info {
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.5rem;
  text-wrap: nowrap;
  color: #6B7287;
}
.reviews-block {
  flex-shrink: 0;
  width: 38.8rem;
  background: linear-gradient(-20deg, #0A1464, #091788);
  box-sizing: border-box;
  padding: 2.8rem;
  border-radius: 1.2rem;
}
@media (max-width: 1199px) {
  .reviews-block {
    width: 100%;
    padding: 2rem;
  }
}
.reviews-block-title {
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.2rem;
  color: #fff;
  margin: 0 0 0.7rem;
}
.reviews-block-subtitle {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4.5rem;
}
@media (max-width: 1199px) {
  .reviews-block-subtitle {
    margin-bottom: 1.3rem;
  }
}
.reviews-block__content {
  margin-bottom: 5.4rem;
}
@media (max-width: 1199px) {
  .reviews-block__content {
    margin-bottom: 2.8rem;
  }
}
.reviews-block__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 5rem;
  border-bottom: rgba(255, 255, 255, 0.12) 1px solid;
}
.reviews-block__item:last-of-type {
  border-bottom: none;
}
.reviews-block__item-rating {
  position: relative;
  display: flex;
  gap: 0.8rem;
  padding-left: 2.5rem;
}
.reviews-block__item-rating::before {
  content: "";
  position: absolute;
  width: 1.9rem;
  height: 1.9rem;
  background: url(/local/templates/v1/css/../images/svg/review-star.svg) no-repeat center/contain;
  transform: translateY(-50%);
  top: 50%;
  left: 0;
}
.reviews-block__item-rating p {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #fff;
}
.reviews-block__item-rating span {
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: rgba(255, 255, 255, 0.6);
}

.rehab {
  position: relative;
  background: linear-gradient(135deg, #0A1464, #050A3E);
  box-sizing: border-box;
  padding: 4rem 4.6rem 4.6rem;
  border-radius: 2rem;
  margin-bottom: 8.5rem;
  overflow: hidden;
}
@media (max-width: 1199px) {
  .rehab {
    padding: 1.8rem 2rem 11rem;
    margin-bottom: 2.2rem;
  }
}
.rehab::before {
  content: "";
  position: absolute;
  width: 33.6rem;
  height: 19rem;
  background: url(/local/templates/v1/css/../images/rehab-decor-1.webp) no-repeat center/contain;
  left: 0;
  bottom: 0;
}
@media (max-width: 1199px) {
  .rehab::before {
    width: 38rem;
    height: 21.5rem;
    opacity: 0.8;
  }
}
.rehab::after {
  content: "";
  position: absolute;
  width: 53.7rem;
  height: 38.4rem;
  background: url(/local/templates/v1/css/../images/rehab-decor-2.webp) no-repeat center/contain;
  top: 0;
  right: 0;
}
@media (max-width: 1199px) {
  .rehab::after {
    width: 22rem;
    height: 15.7rem;
    opacity: 0.8;
  }
}
.rehab .title {
  color: #fff;
}
.rehab .title-block {
  position: relative;
  margin-bottom: 6rem;
  z-index: 1;
}
@media (max-width: 1199px) {
  .rehab .title-block {
    margin-bottom: 1.2rem;
  }
}
.rehab .title-mini {
  color: #387F30;
}
.rehab .title-description {
  color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 1199px) {
  .rehab .title-description br {
    display: none;
  }
}
.rehab__content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  z-index: 1;
}
@media (max-width: 768px) {
  .rehab__content {
    gap: 1.2rem;
  }
}
.rehab__item {
  width: calc(25% - 1.5rem);
  background-color: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(3px);
  box-sizing: border-box;
  padding: 2.2rem 2.2rem 2.6rem;
  border: rgba(255, 255, 255, 0.12) 1px solid;
  border-radius: 1.2rem;
}
@media (max-width: 1199px) {
  .rehab__item {
    width: calc(50% - 1rem);
    padding: 1rem 1.4rem 1.8rem;
  }
}
@media (max-width: 768px) {
  .rehab__item {
    width: 100%;
  }
}
.rehab__item-title {
  font-weight: 800;
  font-size: 2.9rem;
  line-height: 2.9rem;
  color: #387F30;
  margin: 0 0 1.2rem;
}
@media (max-width: 1199px) {
  .rehab__item-title {
    margin-bottom: 0.5rem;
  }
}
.rehab__item-subtitle {
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 2rem;
  color: #fff;
  margin-bottom: 0.8rem;
}
.rehab__item-text {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2rem;
  color: rgba(255, 255, 255, 0.75);
}
@media (max-width: 1199px) {
  .rehab__item-text {
    line-height: 1.8rem;
  }
}

.faq {
  margin-bottom: 10rem;
}
@media (max-width: 1199px) {
  .faq {
    margin-bottom: 2.5rem;
  }
}
.faq .title {
  text-align: center;
  margin-bottom: 3.5rem;
}
@media (max-width: 1199px) {
  .faq .title {
    text-align: start;
    margin-bottom: 1rem;
  }
}
.faq .title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 1199px) {
  .faq .title-block {
    align-items: start;
    margin-bottom: 0;
  }
}
.faq .title-mini {
  text-align: center;
  margin-bottom: 3.2rem;
}
@media (max-width: 1199px) {
  .faq .title-mini {
    text-align: start;
    margin-bottom: 0.4rem;
  }
}
.faq .title-description {
  text-align: center;
}
@media (max-width: 1199px) {
  .faq .title-description {
    text-align: start;
  }
}
.faq__content {
  width: 90rem;
  margin: 0 auto;
}
@media (max-width: 1199px) {
  .faq__content {
    width: 100%;
  }
}
.faq__item {
  width: 100%;
  border-bottom: #E5E9F0 1px solid;
}
.faq__item.active .faq__item-question p {
  color: #387F30;
}
.faq__item.active .faq__item-button {
  background-color: #4BAA41;
}
.faq__item.active .faq__item-button svg {
  rotate: 45deg;
}
.faq__item.active .faq__item-button svg path {
  stroke: #fff;
}
.faq__item-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  height: 7.6rem;
  cursor: pointer;
}
.faq__item-question p {
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 2rem;
  color: #0A1464;
  transition: all 0.3s ease-in-out;
}
@media (max-width: 1199px) {
  .faq__item-question p {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}
.faq__item-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.2rem;
  height: 3.2rem;
  background-color: #E8F5E6;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}
.faq__item-button svg {
  width: 1.4rem;
  height: 1.4rem;
  transition: all 0.3s ease-in-out;
}
.faq__item-button svg path {
  transition: all 0.3s ease-in-out;
}
.faq__item-answer {
  font-size: 1.6rem;
  line-height: 2.3rem;
  color: #4A5270;
  padding: 0 8.4rem 2.8rem 0;
  display: none;
}
@media (max-width: 1199px) {
  .faq__item-answer {
    font-size: 1.4rem;
    line-height: 1.8rem;
    padding: 0 0 1.2rem;
  }
}

.articles {
  margin-bottom: 5.5rem;
}
@media (max-width: 1199px) {
  .articles {
    margin-bottom: 2.5rem;
  }
}
@media (max-width: 1199px) {
  .articles .title-block {
    margin-bottom: 1.2rem;
  }
}
.articles__slider {
  position: relative;
  padding-bottom: 3.5rem;
}
@media (max-width: 1199px) {
  .articles__slider {
    padding-bottom: 2rem;
  }
}
.articles__slider .swiper {
  overflow: visible;
}
.articles__slider .swiper-wrapper {
  display: flex;
}
.articles__slider .swiper-slide {
  height: auto;
  transition: opacity 0.5s ease-in-out, scale 0.5s ease-in-out;
  opacity: 0;
  scale: 0.8;
}
@media (max-width: 1199px) {
  .articles__slider .swiper-slide {
    width: auto !important;
    opacity: 1;
    scale: 1;
  }
}
.articles__slider .swiper-slide-active, .articles__slider .swiper-slide-active + .swiper-slide, .articles__slider .swiper-slide-active + .swiper-slide + .swiper-slide {
  opacity: 1;
  scale: 1;
}
.articles__slider-arrows {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6.5rem;
  transform: translateY(-100%);
  top: -3.5rem;
  right: 0;
}
@media (max-width: 1199px) {
  .articles__slider-arrows {
    position: static;
    justify-content: space-between;
    gap: 0;
    transform: none;
    margin-bottom: 1.4rem;
  }
}
.articles__item {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  box-sizing: border-box;
  border: #E5E9F0 1px solid;
  border-radius: 1.2rem;
  transition: all 0.2s linear;
}
@media (max-width: 1199px) {
  .articles__item {
    max-width: 34.7rem;
  }
}
.articles__item:hover {
  box-shadow: 0 0.4rem 3rem 0 rgba(26, 31, 58, 0.1);
}
.articles__item > a {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  z-index: 2;
  top: 0;
  left: 0;
}
.articles__item-image {
  flex-shrink: 0;
  display: flex;
  width: 100%;
  height: 24rem;
}
.articles__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 1.1rem 1.1rem 0 0;
}
.articles__item__content {
  display: flex;
  flex-direction: column;
  padding: 2.3rem 2.3rem 2.6rem;
}
@media (max-width: 1199px) {
  .articles__item__content {
    padding: 1.6rem 2rem 2.2rem;
  }
}
.articles__item__content span {
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.8rem;
  color: #387F30;
}
.articles__item-tag {
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.5rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #387F30;
  margin-bottom: 1.2rem;
}
.articles__item-title {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: #0A1464;
  height: 4.4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1.2rem;
}
@media (max-width: 1199px) {
  .articles__item-title {
    line-height: 2rem;
    height: 4rem;
  }
}
.articles__item-text {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #4A5270;
  height: 6rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2rem;
}
@media (max-width: 1199px) {
  .articles__item-text {
    line-height: 1.8rem;
    height: 7.2rem;
    -webkit-line-clamp: 4;
    margin-bottom: 1.2rem;
  }
}

.documents {
  margin-bottom: 7rem;
}
@media (max-width: 1199px) {
  .documents {
    margin-bottom: 1.5rem;
  }
}
.documents__slider {
  position: relative;
  padding-bottom: 3.5rem;
}
@media (max-width: 1199px) {
  .documents__slider {
    padding-bottom: 0rem;
  }
}
.documents__slider .swiper {
  overflow: visible;
}
.documents__slider .swiper-wrapper {
  display: flex;
}
@media (max-width: 1199px) {
  .documents__slider .swiper-wrapper {
    flex-direction: column;
    gap: 0.5rem;
  }
}
.documents__slider .swiper-slide {
  height: auto;
  transition: opacity 0.5s ease-in-out, scale 0.5s ease-in-out;
  opacity: 0;
  scale: 0.8;
}
@media (max-width: 1199px) {
  .documents__slider .swiper-slide {
    width: auto !important;
    opacity: 1 !important;
    scale: 1 !important;
    margin-right: 0 !important;
  }
}
.documents__slider .swiper-slide-active, .documents__slider .swiper-slide-active + .swiper-slide, .documents__slider .swiper-slide-active + .swiper-slide + .swiper-slide, .documents__slider .swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide {
  opacity: 1;
  scale: 1;
}
.documents__slider-arrows {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6.5rem;
  transform: translateY(-100%);
  top: -3.2rem;
  right: 0;
}
@media (max-width: 1199px) {
  .documents__slider-arrows {
    position: static;
    transform: none;
  }
}
.documents__item {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  box-sizing: border-box;
  border: #E5E9F0 1px solid;
  border-radius: 1.2rem;
  transition: all 0.2s linear;
}
@media (max-width: 1199px) {
  .documents__item {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    padding: 1.8rem 2rem;
  }
}
.documents__item:hover {
  box-shadow: 0 0.4rem 3rem 0 rgba(26, 31, 58, 0.1);
}
.documents__item > a {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  outline: none;
  z-index: 2;
  top: 0;
  left: 0;
}
.documents__item-image {
  flex-shrink: 0;
  display: flex;
  width: 100%;
  height: 31.6rem;
  box-sizing: border-box;
  padding: 2.6rem 0;
}
@media (max-width: 1199px) {
  .documents__item-image {
    position: relative;
    width: 3.6rem;
    height: 3.6rem;
    background-color: #F3F7FF;
    padding: 0;
    border-radius: 0.8rem;
  }
}
.documents__item-image::before {
  content: none;
  position: absolute;
  width: 2.2rem;
  height: 2.2rem;
  background: url(/local/templates/v1/css/../images/svg/document-icon.svg) no-repeat center/contain;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
@media (max-width: 1199px) {
  .documents__item-image::before {
    content: "";
  }
}
.documents__item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 1199px) {
  .documents__item-image img {
    display: none;
  }
}
.documents__item__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.2rem 1.5rem 2.2rem 2rem;
}
@media (max-width: 1199px) {
  .documents__item__content {
    gap: 0.4rem;
    padding: 0;
  }
}
.documents__item__content p {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.8rem;
  color: #0A1464;
}
.documents__item__content span {
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 2rem;
  color: #6B7287;
}

/*# sourceMappingURL=style.css.map */

/* End */


/* Start:/local/templates/v1/css/luxar_korobok_prod.css?179186398819246*/
@charset "UTF-8";
/* =====================================================================
   Доступность: минимальный кегль 12px (правки только здесь, style.scss не трогаем)
   -------------------------------------------------------------------
   В style.css rem масштабируется от html{font-size:vw}: на узких экранах
   мелкие размеры проседают < 12px. Здесь дублируем все font-size-селекторы
   из style.css, подставляя var(--fs-*) = max(12px, <исходный rem>) — фигура
   текучести сохраняется, но ниже 12px шрифт не опускается.
   Файл luxar_korobok_prod.css подключается ПОСЛЕ style.css → переопределения
   побеждают при равной специфичности (селекторы 1:1, порядок сохранён).
   ===================================================================== */
:root {
  --fs-11: max(12px, 1.1rem);
  --fs-12: max(12px, 1.2rem);
  --fs-13: max(12px, 1.3rem);
  --fs-14: max(12px, 1.4rem);
  --fsp-14: max(14px, 1.4rem);
  --fs-15: max(12px, 1.5rem);
  --fs-16: max(12px, 1.6rem);
  --fsi-16: max(16px, 1.6rem);
  --fs-17: max(12px, 1.7rem);
  --fs-18: max(12px, 1.8rem);
  --fs-19: max(12px, 1.9rem);
  --fs-20: max(12px, 2rem);
  --fs-21: max(12px, 2.1rem);
  --fs-24: max(12px, 2.4rem);
  --fs-25: max(12px, 2.5rem);
  --fs-29: max(12px, 2.9rem);
  --fs-30: max(12px, 3rem);
  --fs-32: max(12px, 3.2rem);
  --fs-34: max(12px, 3.4rem);
  --fs-40: max(12px, 4rem);
  --fs-48: max(12px, 4.8rem);
}

/* Примечание: @media lg ниже воспроизводит инертный (невалидный) media-query из style.css
   как есть — он ни в одном браузере не срабатывает; базовый h1/h2 уже под полом 12px. */
body {
  font-size: var(--fs-16);
}

h1 {
  font-size: var(--fs-40);
}

@media (max-width: 1199px) {
  h1 {
    font-size: var(--fs-30);
  }
}
h2 {
  font-size: var(--fs-30);
}

@media (max-width: 1199px) {
  h2 {
    font-size: var(--fs-25);
  }
}
p {
  font-size: var(--fs-16);
}

@media (max-width: 1199px) {
  p {
    font-size: var(--fs-14);
  }
}
a {
  font-size: var(--fs-16);
}

.btn {
  font-size: var(--fs-15);
}

@media (max-width: 1199px) {
  .btn-more {
    font-size: var(--fs-14);
  }
}
.menu ul li a {
  font-size: var(--fs-14);
}

.header .menu > ul > li > a {
  font-size: var(--fs-15);
}

/* списки выпадающего и мега-меню: свой размер из _menu-dropdown.scss, порог 12px */
/* с префиксом .header: site.css грузится позже и при равной специфичности перебивал порог */
.header .menu .menu__sub a {
  font-size: var(--fs-14);
}

.header .menu .menu__mega-list a, .header .menu .menu__mega-more {
  font-size: var(--fs-13);
  line-height: max(16px, 1.7rem);
}

.phone__content a {
  font-size: var(--fs-17);
}

.phone__content span {
  font-size: var(--fs-12);
}

.header .phone__content span {
  font-size: var(--fs-13);
}

.header .phone .btn {
  font-size: var(--fs-14);
}

@media (min-width: 1200px) and (max-width: 1319px) {
  .header .menu > ul > li > a {
    font-size: var(--fs-14);
  }
  .header .phone .btn {
    font-size: var(--fs-13);
  }
}
.title {
  font-size: var(--fs-34);
}

@media (max-width: 1199px) {
  .title {
    font-size: var(--fs-20);
  }
}
.title-mini {
  font-size: var(--fs-13);
}

.title-description {
  font-size: var(--fs-16);
}

@media (max-width: 1199px) {
  .title-description {
    font-size: var(--fs-14);
  }
}
.title-description a {
  font-size: var(--fs-16);
}

@media (max-width: 1199px) {
  .title-description a {
    font-size: var(--fs-14);
  }
}
.footnote {
  font-size: var(--fs-14);
}

.header-city span, .header-address span, .header-time span {
  font-size: var(--fs-16);
}

.header-callback button {
  font-size: var(--fs-16);
}

.burger .menu ul li a {
  font-size: var(--fs-16);
}

.burger .phone__content a {
  font-size: var(--fs-20);
}

.burger-city span, .burger-address span, .burger-time span {
  font-size: var(--fs-14);
}

.breadcrumb__item a, .breadcrumb__item span, .breadcrumb__item i {
  font-size: var(--fs-14);
}

.footer__info p {
  font-size: var(--fs-14);
}

.footer__menus .menu > a {
  font-size: var(--fs-14);
}

.footer-bottom__links a {
  font-size: var(--fs-13);
}

.footer-copyright {
  font-size: var(--fs-13);
}

.bottom-bar .btn {
  font-size: var(--fs-14);
}

@media (max-width: 360px) {
  .bottom-bar .btn {
    font-size: var(--fs-13);
  }
}
.appointment__content h3 {
  font-size: var(--fs-21);
}

@media (max-width: 1199px) {
  .appointment__content h3 {
    font-size: var(--fs-20);
  }
}
.appointment__content p {
  font-size: var(--fs-16);
}

@media (max-width: 1199px) {
  .appointment__content p {
    font-size: var(--fs-14);
  }
}
.hero-tag {
  font-size: var(--fs-12);
}

.hero-title {
  font-size: var(--fs-32);
}

@media (max-width: 1199px) {
  .hero-title {
    font-size: var(--fs-20);
  }
}
.hero-description {
  font-size: var(--fs-16);
}

@media (max-width: 1199px) {
  .hero-description {
    font-size: var(--fs-14);
  }
}
.hero-utp li {
  font-size: var(--fs-15);
}

@media (max-width: 1199px) {
  .hero-utp li {
    font-size: var(--fs-14);
  }
}
.hero-price > p {
  font-size: var(--fs-13);
}

.hero-price__content p {
  font-size: var(--fs-30);
}

@media (max-width: 1199px) {
  .hero-price__content p {
    font-size: var(--fs-25);
  }
}
.hero-price__content span {
  font-size: var(--fs-16);
}

.hero-price-promotion {
  font-size: var(--fs-13);
}

.hero-rating__content p {
  font-size: var(--fs-18);
}

.hero-rating__content span {
  font-size: var(--fs-13);
}

.sections__item {
  font-size: var(--fs-14);
}

.advantages__item h3 {
  font-size: var(--fs-17);
}

@media (max-width: 1199px) {
  .advantages__item h3 {
    font-size: var(--fs-12);
  }
}
.advantages__item p {
  font-size: var(--fs-14);
}

@media (max-width: 1199px) {
  .advantages__item p {
    font-size: var(--fs-12);
  }
}
@media (max-width: 1199px) {
  .advantages .appointment__content h3 {
    font-size: var(--fs-18);
  }
}
.price-heading p {
  font-size: var(--fs-13);
}

.price-heading p b {
  font-size: var(--fs-18);
}

.price__item__content span {
  font-size: var(--fs-14);
}

.price__item-heading p {
  font-size: var(--fs-16);
}

.price__item-tag {
  font-size: var(--fs-13);
}

.price__item-price {
  font-size: var(--fs-18);
}

.price__item-price-old {
  font-size: var(--fs-13);
}

.about__content > p {
  font-size: var(--fs-16);
}

@media (max-width: 1199px) {
  .about__content > p {
    font-size: var(--fs-14);
  }
}
.about__content h3 {
  font-size: var(--fs-19);
}

.about__content ul li {
  font-size: var(--fs-16);
}

@media (max-width: 1199px) {
  .about__content ul li {
    font-size: var(--fs-14);
  }
}
.about__list-title {
  font-size: var(--fs-20);
}

.about__list ol li {
  font-size: var(--fs-15);
}

@media (max-width: 1199px) {
  .about__list ol li {
    font-size: var(--fs-14);
  }
}
@media (max-width: 1199px) {
  .about__list ol li b {
    font-size: var(--fs-15);
  }
}
.about__list ol li::before {
  font-size: var(--fs-15);
}

.specialists__item-image span {
  font-size: var(--fs-48);
}

.specialists__item-tag {
  font-size: var(--fs-11);
}

.specialists__item-name {
  font-size: var(--fs-16);
}

.specialists__item-text {
  font-size: var(--fs-13);
}

@media (max-width: 1199px) {
  .specialists__item-text {
    font-size: var(--fs-14);
  }
}
.specialists__item-info div p {
  font-size: var(--fs-16);
}

.specialists__item-info div span {
  font-size: var(--fs-12);
}

.results__item-before span, .results__item-after span {
  font-size: var(--fs-12);
}

.results__item__content p {
  font-size: var(--fs-14);
}

@media (max-width: 1199px) {
  .results .appointment__content p {
    font-size: var(--fs-16);
  }
}
.reviews__item-source {
  font-size: var(--fs-11);
}

.reviews__item-text {
  font-size: var(--fs-15);
}

@media (max-width: 1199px) {
  .reviews__item-text {
    font-size: var(--fs-14);
  }
}
.reviews__item-author span {
  font-size: var(--fs-16);
}

.reviews__item-author-name {
  font-size: var(--fs-14);
}

.reviews__item-author-info {
  font-size: var(--fs-13);
}

.reviews-block-title {
  font-size: var(--fs-18);
}

.reviews-block-subtitle {
  font-size: var(--fs-14);
}

.reviews-block__item-rating p {
  font-size: var(--fs-14);
}

.reviews-block__item-rating span {
  font-size: var(--fs-15);
}

.rehab__item-title {
  font-size: var(--fs-29);
}

.rehab__item-subtitle {
  font-size: var(--fs-16);
}

.rehab__item-text {
  font-size: var(--fs-14);
}

.faq__item-question p {
  font-size: var(--fs-16);
}

@media (max-width: 1199px) {
  .faq__item-question p {
    font-size: var(--fs-14);
  }
}
.faq__item-answer {
  font-size: var(--fs-16);
}

@media (max-width: 1199px) {
  .faq__item-answer {
    font-size: var(--fs-14);
  }
}
.articles__item__content span {
  font-size: var(--fs-14);
}

.articles__item-tag {
  font-size: var(--fs-12);
}

.articles__item-title {
  font-size: var(--fs-16);
}

.articles__item-text {
  font-size: var(--fs-14);
}

.documents__item__content p {
  font-size: var(--fs-15);
}

.documents__item__content span {
  font-size: var(--fs-13);
}

.container {
  max-width: 130.2rem;
}

/* Десктоп от 1200px: 1rem = 10px, контейнер 130.2rem (1302px) шире окна
   на 1200–1350 — оставляем поля по 2.4rem с каждой стороны. */
@media (min-width: 1200px) {
  .container {
    width: calc(100% - 4.8rem);
  }
}
.header-city.one::before,
.header-address.one::before {
  display: none;
}

.header-time::before {
  display: none;
}

@media (min-width: 1200px) {
  .footer-bottom__content {
    gap: 2rem;
  }
}
/* luxar:form — базовые стили попап-формы (черновые, под доработку дизайном) */
.callback-popup {
  max-width: 48rem;
  width: 100%;
  padding: 3.2rem;
  background: #fff;
  border-radius: 1.6rem;
}

.callback-popup .form__title {
  font-size: var(--fs-24);
  font-weight: 700;
  margin-bottom: 0.8rem;
}

.callback-popup .form__desc {
  color: #7a8299;
  margin-bottom: 2rem;
  font-size: var(--fs-12);
  line-height: 1.4rem;
}

.callback-popup .form__group {
  margin-bottom: 1.4rem;
  position: relative;
}
.callback-popup .form__group:focus-within .form__label, .callback-popup .form__group.has-value .form__label {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.callback-popup .form__group:focus-within .form__input::placeholder, .callback-popup .form__group.has-value .form__input::placeholder {
  opacity: 0;
}

.callback-popup .form__label {
  display: inline-block;
  margin-bottom: 0.6rem;
  font-size: var(--fs-14);
  color: #0a1464;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.8rem);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.callback-popup .form__req {
  color: #ed143b;
}

.callback-popup .form__input {
  width: 100%;
  padding: 1.2rem 1.6rem;
  border: 1px solid #e2e6ef;
  border-radius: 1rem;
  font-size: var(--fs-16);
  outline: none;
  transition: border-color 0.3s;
}
.callback-popup .form__input::placeholder {
  transition: opacity 0.3s ease;
}

.callback-popup .form__input:focus {
  border-color: #4baa41;
}

.callback-popup textarea.form__input {
  min-height: 9.6rem;
  resize: vertical;
}

.callback-popup .form__submit {
  width: 100%;
  margin-top: 0.8rem;
  justify-content: center;
}

.callback-popup .form__submit.loading {
  opacity: 0.6;
  pointer-events: none;
}

.callback-popup .form__policy {
  margin-top: 1.2rem;
  font-size: var(--fs-12);
  color: #7a8299;
}

.callback-popup .form__message {
  margin-top: 1.4rem;
  padding: 1.2rem 1.6rem;
  border-radius: 1rem;
  font-size: var(--fs-15);
}

.callback-popup .form__message--error {
  background: #fdecef;
  color: #ed143b;
}

.callback-popup .form__message--success {
  background: #eaf6e8;
  color: #2f7a26;
  text-align: center;
}

/* honeypot — прячем от людей */
.callback-popup .form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* luxar:form — рейтинг (звёзды) */
.callback-popup .votes_block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
}

.callback-popup .votes_block .ratings {
  display: inline-flex;
  gap: 0.4rem;
  cursor: pointer;
}

.callback-popup .item-rating {
  line-height: 0;
}

.callback-popup .star-icon {
  width: 2.8rem;
  height: 2.8rem;
  fill: #d7dbe6;
  transition: fill 0.15s;
}

.callback-popup .item-rating.active .star-icon {
  fill: #ffb400;
}

.callback-popup .rating-sep {
  color: #c0c5d6;
}

.callback-popup .rating_message {
  color: #7a8299;
  /* «— Нормально» на узком экране не обрезается, а переносится под звёзды */
  min-width: 0;
  overflow-wrap: anywhere;
}

/* luxar:form — согласие на обработку ПД */
.callback-popup .form__agree {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin: 1.4rem 0;
  font-size: var(--fs-13);
  color: #7a8299;
  cursor: pointer;
}
.callback-popup .form__agree a {
  font-size: var(--fs-13);
}

.callback-popup .form__agree input {
  margin-top: 0.2rem;
  flex: 0 0 auto;
}

/* luxar:form — неактивная кнопка до согласия */
.callback-popup .form__submit:disabled,
.callback-popup .form__submit[disabled] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* luxar:form — блок выбранной услуги */
.callback-popup .form__service-value {
  padding: 1.2rem 1.6rem;
  border: 1px solid #e2e6ef;
  border-radius: 1rem;
  background: #f7f9fb;
  color: #0a1464;
  font-size: var(--fs-16);
}

.about {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(36rem, 50rem);
  grid-template-areas: "content list" "rest rest" "toggle toggle";
  gap: 0 4.8rem;
  align-items: start;
}

/* ВАЖНО: anchor не должен участвовать в grid */
.about > .anchor {
  position: absolute;
  top: -12rem;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.about__content {
  grid-area: content;
  min-width: 0;
}
.about__content p {
  margin-bottom: 2rem;
}

.about__list {
  grid-area: list;
  min-width: 0;
}

.about__text-main {
  min-width: 0;
}

.about__text-rest {
  grid-area: rest;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.45s ease;
}

.about__text-rest-inner {
  padding-top: 0.8rem;
}

.about__edge {
  display: block;
  overflow: hidden;
  position: relative;
  transition: max-height 0.45s ease;
}

.about__edge::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4.8rem;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #F7F9FB 85%);
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.about.is-expanded .about__edge::after {
  opacity: 0;
}

.about.no-hidden-text .js-about-toggle {
  display: none;
}

.about .js-about-toggle {
  grid-area: toggle;
  justify-self: start;
}

@media (max-width: 1199px) {
  .about {
    display: block;
  }
  .about > .anchor {
    top: -9rem;
  }
  .about__list {
    margin-top: 2.4rem;
  }
  .about__text-rest-inner {
    padding-top: 0;
  }
}
.js-about-toggle.is-hidden {
  display: none !important;
}

@media (max-width: 768px) {
  .fancybox__slide {
    padding: 1.6rem;
    align-items: flex-start;
  }
  .fancybox__content {
    margin-top: 2.4rem;
    max-width: 100%;
    width: 100%;
  }
  .fancybox__content:has(.callback-popup) {
    height: auto;
    max-height: 90dvh;
  }
  .callback-popup {
    width: min(48rem, 92vw);
    max-height: 90dvh;
    overflow-y: auto;
  }
  .callback-popup .form {
    max-height: calc(100dvh - 4.8rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.specialists__item {
  transition: all 0.2s linear;
}
@media (min-width: 1200px) {
  .specialists__item:hover {
    box-shadow: 0 0.4rem 3rem 0 rgba(26, 31, 58, 0.1);
  }
}
.specialists__item > a {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  z-index: 2;
  top: 0;
  left: 0;
}

.advantages__item span {
  font-weight: 700;
  font-size: var(--fs-17);
  line-height: 2rem;
  color: #0A1464;
  margin: 0 0 1rem;
}

.appointment__content span {
  font-size: var(--fs-16);
}

.appointment__content span b {
  font-size: var(--fs-21);
}

@media (max-width: 1199px) {
  .advantages__item span {
    font-size: var(--fs-12);
    line-height: 1.2rem;
    display: flex;
    align-items: center;
    width: calc(100% - 4.3rem);
    height: 3.5rem;
    margin: 0;
  }
  .appointment__content span b {
    font-size: var(--fs-20);
  }
  .advantages .appointment__content span b {
    font-size: var(--fs-18);
  }
}
.sections__item {
  width: 100%;
  justify-content: center;
}

@media (max-width: 1199px) {
  .breadcrumb__item a,
  .breadcrumb__item span,
  .breadcrumb__item i {
    font-size: 14px;
  }
}
@media (max-width: 576px) {
  .breadcrumb__item a,
  .breadcrumb__item span,
  .breadcrumb__item i {
    font-size: 12px;
  }
}

@media (max-width: 1199px) {
  .burger-city::before,
  .burger-address::before,
  .burger-time::before {
    display: none;
  }
  .up {
    display: flex;
    right: 1.4rem;
    bottom: 13rem;
  }
}
@media (max-width: 576px) {
  .hero-tag {
    display: none;
  }
}
.burger {
  height: 100%;
}
.burger__wrapper {
  height: 100%;
  margin-top: 0;
}

.sections {
  transition: box-shadow 0.2s ease, border-radius 0.2s ease;
}

.sections.is-fixed {
  position: fixed;
  top: 11.7rem;
  left: var(--luxar-sections-left, 0);
  width: var(--luxar-sections-width, 100%);
  z-index: 99;
  box-shadow: 0 0.8rem 2.4rem rgba(10, 20, 100, 0.16);
}

@media (max-width: 1199px) {
  .sections.is-fixed {
    top: auto;
    bottom: var(--luxar-bottom-bar-height, 0);
    left: 0;
    width: 100%;
    border-radius: 1.6rem 1.6rem 0 0;
    z-index: 98;
  }
  .sections.is-fixed .sections__content {
    padding-bottom: env(safe-area-inset-bottom);
  }
}
.sections__placeholder {
  display: none;
  height: 5.4rem;
}

.sections__placeholder.is-active {
  display: block;
}

.sections__content {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sections__content::-webkit-scrollbar {
  display: none;
}

.sections.is-fixed.is-footer-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.about__list p {
  line-height: 2rem;
  color: #4A5270;
  margin-bottom: 1.5rem;
}

.faq__item-button {
  min-width: 3.2rem;
}

.price__item,
.price__item-heading {
  transition: all 0.2s linear;
}

@media (min-width: 1200px) {
  .price__item:hover {
    background: #F7F9FB;
  }
  .price__item:hover .price__item-heading p {
    color: #4BAA41;
  }
}
@media (max-width: 1199px) {
  .btn-more,
  .price__tab {
    min-height: 44px;
  }
}
.callback-popup .form__input {
  font-size: var(--fsi-16);
}

/*# sourceMappingURL=luxar_korobok_prod.css.map */

/* End */


/* Start:/local/templates/v1/css/luxar_alexaris.css?17932593794891*/
.footer-luxar {
  width: auto;
  height: 2.6rem;
}

@media (max-width: 767px) {
  .price__item-heading p {
    font-size: var(--fsp-14);
    line-height: 120%;
  }
}
@media (max-width: 767px) {
  .price__item__content span {
    font-size: var(--fs-13);
  }
}
.price__item .btn {
  /*
  &:hover {
    color: #fff;
    background-color: #3F9236;
    border: #3F9236 1px solid;
  }
   */
}

.price .price__item:has(.price__item-price-old) {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
}
.price .price__item:has(.price__item-price-old) .price__item-heading h3 {
  display: inline;
  margin: 0;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2rem;
  color: #1A1F3A;
  transition: color 0.2s linear;
}
.price .price__item:has(.price__item-price-old) .price__item__content > span {
  color: #7A8299;
}
.price .price__item:has(.price__item-price-old) .price__item-price,
.price .price__item:has(.price__item-price-old) .price__item-price span {
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.7rem;
  color: #0A1464;
}
.price .price__item:has(.price__item-price-old) .price__item-price {
  margin-right: 0;
}
.price .price__item:has(.price__item-price-old) .price__item-price-old {
  margin: 0.3rem 0 0 -0.8rem;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 2rem;
  color: #7A8299;
  white-space: nowrap;
}
.price .price__item:has(.price__item-price-old) .price__item__control .btn {
  height: 3.7rem;
  padding: 0 1.8rem;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 3.7rem;
  color: #fff;
  background-color: #4BAA41;
  border-color: #4BAA41;
}
.price .price__item:has(.price__item-price-old):hover .price__item-heading h3 {
  color: #387F30;
}
.price .price__item:has(.price__item-price-old):hover .price__item__control .btn,
.price .price__item:has(.price__item-price-old) .price__item__control .btn:hover {
  color: #fff;
  background-color: #3F9236;
  border-color: #3F9236;
}
@media (max-width: 992px) {
  .price .price__item:has(.price__item-price-old) {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .price .price__item:has(.price__item-price-old) .price__item__content {
    grid-row: span 2;
    margin-bottom: 0;
  }
  .price .price__item:has(.price__item-price-old) .price__item-price {
    align-self: end;
    justify-self: end;
  }
  .price .price__item:has(.price__item-price-old) .price__item-price-old {
    align-self: start;
    justify-self: end;
    margin: -0.6rem 0 0;
  }
  .price .price__item:has(.price__item-price-old) .price__item__control .btn {
    margin-top: 1.6rem;
  }
}

.sections__item span {
  position: relative;
}
.sections__item span:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0.1rem;
  background-color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s linear;
  left: 0;
  bottom: -0.7rem;
}
.sections__item.active {
  background-color: transparent;
  color: #4BAA41;
}
.sections__item.active span:before {
  opacity: 1;
}

@media (min-width: 1200px) {
  .header-location {
    gap: 1.6rem;
    cursor: default;
  }
  .header-location .header-city.one,
.header-location .header-address.one {
    padding-right: 0;
  }
  .header-location .header-city span {
    font-size: var(--fs-14);
    color: #A2A8DA;
  }
  .header-location .header-address span {
    color: #fff;
  }
  .header-location .header-city span,
.header-location .header-address span {
    white-space: nowrap;
  }
  .header-location .header-address + .header-address {
    margin-left: 1.2rem;
  }
  .header-location .header-address + .header-address::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 1.3rem;
    background-color: #4C538E;
    transform: translateY(-50%);
    top: 50%;
    left: -1.4rem;
  }
  .header-time {
    padding-right: 0;
  }
  .header-time .header-time__text {
    font-size: var(--fs-14);
  }
  .header-callback {
    margin-left: 2rem;
  }
}
@media (min-width: 1200px) and (max-width: 1300px) {
  .header-top .socials {
    display: none;
  }
  .header-callback {
    margin-left: auto;
  }
}
.burger-location {
  text-align: left;
}
.burger-location .burger-location-icon {
  flex-shrink: 0;
}
@media (max-width: 1199px) {
  .burger-location .burger-city,
.burger-location .burger-address {
    padding-right: 0;
  }
}

@media (min-width: 768px) {
  .header-logo:has(img[src*="logo2-header.svg"]) {
    flex: 0 0 15.7rem;
  }
}

.footer-logo {
  width: 14.7rem;
}

.burger-logo {
  width: 12.2rem;
}

.contacts-page .contacts-card__value {
  margin-top: 1rem;
}

@media (max-width: 767px) {
  .burger-address span {
    font-size: 1.3rem;
  }
}

div.price-promo:after {
  background: url(/local/templates/v1/css/../images/decor-appointment.webp) no-repeat right center;
}

.hero.hero--slider .swiper-slide.is-preroll {
  opacity: 0.006 !important;
}

/*# sourceMappingURL=luxar_alexaris.css.map */

/* End */


/* Start:/local/templates/v1/css/site.css?1792050821246421*/
/* =========================================================================
   Главная страница в дизайне карточки услуги
   (/services/ambulatornaya-khirurgiya/priem-vracha-khirurga/)

   Файл добавляет только те блоки, которых нет в шаблоне услуги:
   слайдер главного баннера, плитки услуг/новостей/акций/галереи/статей
   и форму заявки. Токены, типографика и геометрия — из css/style.css.
   ========================================================================= */
/* ------------------- Общая «шапка» блока: заголовок + ссылка ------------- */
.section {
  position: relative;
  margin-bottom: 7rem;
}
@media (max-width: 1199px) {
  .section {
    margin-bottom: 3.2rem;
  }
}
.section__more {
  display: flex;
  align-items: flex-end;
}

/* Ссылка «Все …» встаёт по нижнему краю подзаголовочного текста. Для этого блок
   раскладывается сеткой: заголовок и ссылка — в первой строке с выравниванием по
   низу, плитки — во второй. Отступ до плиток даёт row-gap, а не margin у
   .title-block: иначе выравнивание по низу считалось бы от края этого отступа. */
@media (min-width: 1200px) {
  .section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    /* по последней базовой линии подзаголовка, а не по краю бокса */
    align-items: last baseline;
    row-gap: 5.2rem;
    column-gap: 3.2rem;
  }
  .section > .title-block {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }
  .section > .section__more {
    grid-column: 2;
    grid-row: 1;
  }
  .section > .cards,
  .section > .services__slider {
    grid-column: 1/-1;
    grid-row: 2;
  }
  /* .btn наследует height: 4.8rem — текст ссылки оказывался выше строки,
       поэтому высоту отпускаем по содержимому во всех рядах управления. */
  .section__more .btn-more,
  .specialists__slider-arrows .btn-more,
  .reviews__slider-arrows .btn-more {
    height: auto;
  }
}
@media (max-width: 1199px) {
  .section__more {
    margin-bottom: 1.6rem;
  }
}
/* -------------------------- Слайдер баннера ------------------------------ */
/* Картинка во всю ширину контентного поля, текст и кнопки — поверх неё.
   Смена слайдов — перекрёстное затухание (effect: 'fade' в js/home.js). */
.hero--slider .swiper {
  overflow: hidden;
}
.hero--slider .swiper-slide {
  height: auto;
}

/* Баннер вынесен из .container и идёт от края до края окна. Текст при этом
   выровнен по контентному полю — за это отвечает .container внутри оверлея. */
.hero__banner {
  position: relative;
}
.hero__banner-media {
  position: relative;
  width: 100%;
  /* Высота задана, а не выведена из пропорции 1920×941: во всю ширину окна
     исходник дал бы ~930px и баннер занял бы весь первый экран. Кадр
     подрезается по центру — сверху и снизу у всех четырёх баннеров запас. */
  height: 58rem;
  background-color: #F7F9FB;
  overflow: hidden;
}
.hero__banner-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Новые кадры 2880×870 совпадают с пропорцией контейнера (3.31:1),
     по вертикали ничего не режется — сдвиг окна больше не нужен. */
  object-position: center;
}

@media (min-width: 1200px) {
  /* Все четыре баннера — светлые, со свободной зоной слева. Поэтому текст
       остаётся тёмным (брендовый #0A1464), а под ним лёгкая белая засветка,
       которая гарантирует читаемость и не гасит фотографию справа. */
  /* Белая засветка снята по просьбе: фотография идёт как есть.
       Контраст тёмного текста теперь держится только на самом кадре —
       замеры по пикселям под текстом приведены в отчёте. */
  .hero__banner-overlay {
    position: absolute;
    display: flex;
    align-items: center;
    inset: 0;
    z-index: 2;
  }
  .hero__banner-overlay > .container {
    width: 100%;
  }
  .hero__banner-content {
    max-width: 52rem;
  }
}
@media (max-width: 1199px) {
  /* На узком экране фото не даёт места под текст — возвращаемся к раскладке
       шаблона услуги: картинка сверху, текст под ней. */
  .hero__banner-media {
    height: auto;
    aspect-ratio: 375/238;
  }
  /* На узком экране из широкого кадра остаётся 48% ширины. Сюжет во всех
       четырёх баннерах стоит справа, поэтому окно смещаем туда, иначе в кадр
       попадала бы пустая стена. */
  .hero__banner-media img {
    object-position: 72% center;
  }
  .hero__banner-overlay {
    padding-top: 1.8rem;
  }
  /* Слайды одной высоты — по самому длинному тексту (autoHeight выключен
     в js/site.js), чтобы блок не менял высоту при смене кадра. Кнопки
     прижаты к низу: у коротких кадров свободное место — между текстом
     и кнопками, а ряд кнопок и управление ниже стоят на месте. */
  .hero__slider .swiper-slide {
    display: flex;
    height: auto;
  }
  .hero__slider .hero__banner {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .hero__slider .hero__banner-overlay,
  .hero__slider .hero__banner-overlay > .container,
  .hero__slider .hero__banner-content {
    display: flex;
    flex-direction: column;
    /* растягиваются до высоты слайда, но не сжимаются меньше содержимого,
       иначе кнопки самого длинного кадра вылезали за край и обрезались */
    flex: 1 0 auto;
  }
  .hero__slider .hero__banner-media {
    flex-shrink: 0;
  }
  .hero__slider .hero-buttons {
    margin-top: auto;
  }
}
.hero__controls {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  margin-top: 2.6rem;
}
.hero__banner-content .hero-title-link {
  display: block;
  color: inherit;
}
.hero__banner-content .hero-title-link:hover .hero-title {
  color: #3F9236;
  transition: color 0.2s linear;
}
@media (max-width: 1199px) {
  .hero__controls {
    gap: 1.6rem;
    margin-top: 1.8rem;
  }
}

/* Заголовок баннера — крупнее, чем на карточке услуги: это главный экран */
.hero-title--banner {
  font-weight: 700;
  font-size: 4.2rem;
  line-height: 4.8rem;
  color: #0A1464;
  margin-bottom: 1.7rem;
}
@media (max-width: 1199px) {
  .hero-title--banner {
    font-size: 2.2rem;
    line-height: 2.6rem;
    margin-bottom: 0.8rem;
  }
}

/* --------------------------- Сетка плиток ------------------------------- */
.cards {
  display: grid;
  gap: 2.4rem;
}
.cards--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cards--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1200px) {
  .cards--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1199px) {
  .cards {
    display: flex;
    gap: 1.6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 -1.4rem;
    padding: 0 1.4rem 0.6rem;
    scrollbar-width: none;
  }
  .cards::-webkit-scrollbar {
    display: none;
  }
  .cards > * {
    flex: 0 0 28rem;
    scroll-snap-align: start;
  }
  .cards--2 > * {
    flex: 0 0 30rem;
  }
}
/* Плитка внутри сетки повторяет карточку статьи из шаблона услуги,
   поэтому переопределяем только то, что связано с раскладкой. */
.cards .articles__item {
  max-width: none;
  height: 100%;
}

.cards .articles__item__content {
  flex-grow: 1;
}

/* Услуги — плитка выше, заголовок крупнее: это верхний уровень навигации */
.services__item .articles__item-image {
  height: 28rem;
}
.services {
  /* Слайдер направлений — тот же приём, что у специалистов: swiper с видимым
     переполнением, соседи активного слайда проявляются, снизу полоса прогресса. */
}
.services__slider {
  position: relative;
  padding-bottom: 3rem;
}
.services__slider .swiper {
  overflow: visible;
}
.services__slider .swiper-wrapper {
  display: flex;
}
.services__slider .swiper-slide {
  height: auto;
  transition: opacity 0.5s ease-in-out, scale 0.5s ease-in-out;
  opacity: 0;
  scale: 0.8;
}
.services__slider .swiper-slide .articles__item {
  height: 100%;
  box-sizing: border-box;
}
.services__slider .swiper-slide-active, .services__slider .swiper-slide-active + .swiper-slide, .services__slider .swiper-slide-active + .swiper-slide + .swiper-slide, .services__slider .swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide {
  opacity: 1;
  scale: 1;
}
@media (max-width: 1199px) {
  .services__slider {
    padding-bottom: 2.2rem;
  }
  .services__slider .swiper-slide {
    width: 28rem !important;
    opacity: 1;
    scale: 1;
  }
}
@media (max-width: 1199px) {
  .services__item .articles__item-image {
    height: 20rem;
  }
}
.services__item .articles__item-title {
  /* 2rem не влезало в строку: «Амбулаторная хирургия» — 267px при поле 260px */
  font-size: 1.8rem;
  line-height: 2.4rem;
  height: auto;
  -webkit-line-clamp: 2;
  margin-bottom: 0;
}
@media (max-width: 1199px) {
  .services__item .articles__item-title {
    font-size: 1.7rem;
    line-height: 2.2rem;
  }
}

/* Новости и статьи — дата вместо тега */
.news__item .articles__item-title,
.blog__item .articles__item-title {
  height: auto;
  -webkit-line-clamp: 3;
  margin-bottom: 0;
}

/* Фото новости — горизонтальное. Высота у плиток задана жёстко (24rem базового
   правила), а колонка узкая и на телефоне, и в ряду из четырёх на десктопе:
   у новостей, единственных из плиток без своей высоты, выходил почти квадрат.
   Отпускаем высоту и задаём пропорцию — фото остаётся вытянутым на любой ширине. */
.news__item .articles__item-image {
  height: auto;
  aspect-ratio: 16/10;
  /* aspect-ratio — только минимум: фото с другой пропорцией (640×426 против
     640×404) растягивало блок, и картинки в ряду стояли на разной высоте.
     Высота строго по пропорции, фото заполняет блок и обрезается по краям. */
  min-height: 0;
  overflow: hidden;
}

.news__item .articles__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Акции — срок действия вместо тега */
.sales__item .articles__item-image {
  height: 22rem;
}
@media (max-width: 1199px) {
  .sales__item .articles__item-image {
    height: 18rem;
  }
}
.sales__item .articles__item-title {
  height: auto;
  -webkit-line-clamp: 3;
  margin-bottom: 0;
}

@media (max-width: 1199px) {
  .gallery__item .articles__item-image {
    height: 20rem;
  }
}
.gallery__item .articles__item-title {
  font-size: 2rem;
  line-height: 2.6rem;
  height: auto;
  margin-bottom: 0;
}
@media (max-width: 1199px) {
  .gallery__item .articles__item-title {
    font-size: 1.7rem;
    line-height: 2.2rem;
  }
}

/* ------------------------------- Заявка --------------------------------- */
.contacts {
  position: relative;
  margin-bottom: 7rem;
}
@media (max-width: 1199px) {
  .contacts {
    margin-bottom: 3.2rem;
  }
}
.contacts__wrapper {
  display: flex;
  align-items: stretch;
  gap: 2.8rem;
  background-color: #F7F9FB;
  border: #E5E9F0 1px solid;
  border-radius: 2rem;
  box-sizing: border-box;
  padding: 4rem;
}
@media (max-width: 1199px) {
  .contacts__wrapper {
    flex-direction: column;
    gap: 2rem;
    border-radius: 1.2rem;
    padding: 2rem;
  }
}
.contacts__content {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.contacts__content .title-block {
  margin-bottom: 0;
}
.contacts__form {
  flex-shrink: 0;
  width: 48rem;
  box-sizing: border-box;
  background-color: #fff;
  border: #E5E9F0 1px solid;
  border-radius: 1.6rem;
  padding: 3.2rem;
}
@media (max-width: 1199px) {
  .contacts__form {
    width: 100%;
    border-radius: 1.2rem;
    padding: 2rem;
  }
}
.contacts__form .form__group {
  position: relative;
  margin-bottom: 1.4rem;
}
.contacts__form .form__label {
  display: inline-block;
  font-size: 1.4rem;
  color: #0A1464;
  margin-bottom: 0.6rem;
}
.contacts__form .form__req {
  color: #DE1236;
}
.contacts__form .form__input {
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  font-size: 1.6rem;
  color: #0A1464;
  background-color: #fff;
  padding: 1.2rem 1.6rem;
  border: #E2E6EF 1px solid;
  border-radius: 1rem;
  outline: none;
  transition: border-color 0.3s;
}
.contacts__form .form__input::placeholder {
  color: #6B7287;
}
.contacts__form .form__input:focus {
  border-color: #4BAA41;
}
.contacts__form .form__agree {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #6B7287;
  cursor: pointer;
  margin: 1.4rem 0;
}
.contacts__form .form__agree a {
  color: #4A5270;
  text-decoration: underline;
}
.contacts__form .form__agree input {
  flex: 0 0 auto;
  margin-top: 0.3rem;
}
.contacts__form .form__submit {
  width: 100%;
  justify-content: center;
}
.contacts__form .form__submit:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ------------------- Тизеры без заголовка блока -------------------------- */
/* На главной блок тизеров идёт сразу после баннера и своего заголовка не имеет. */
.advantages--no-title {
  margin-bottom: 7rem;
}
@media (max-width: 1199px) {
  .advantages--no-title {
    margin-bottom: 3.2rem;
  }
}

/* ------------------- Тизеры: 4 в ряд (на карточке услуги — 3) ------------- */
.advantages--no-title .advantages__item {
  width: calc(25% - 1.5rem);
  min-height: 22rem;
}
@media (max-width: 1200px) {
  .advantages--no-title .advantages__item {
    width: calc(50% - 1rem);
  }
}
@media (max-width: 1199px) {
  .advantages--no-title .advantages__item {
    width: 100%;
    min-height: 0;
  }
}

/* ------------------ Направления помощи в блоке «О клинике» ---------------- */
.about__list-directions {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding: 0;
  margin: 0 0 2.4rem;
}
.about__list-directions li {
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.8rem;
  color: #0A1464;
  background-color: #fff;
  border: #E5E9F0 1px solid;
  border-radius: 0.8rem;
  padding: 0;
  transition: border-color 0.2s linear;
}
.about__list {
  /* Направления стали ссылками на разделы услуг, и текст в них позеленел от
     общего правила для <a>. Возвращаем цвет плашки из макета, а отступы
     переносим со списка на ссылку — тогда нажимается вся плашка, а не слово. */
}
.about__list-directions a {
  display: block;
  font: inherit;
  color: inherit;
  padding: 0.9rem 1.4rem;
  transition: color 0.2s linear;
}
.about__list-directions li:hover {
  border-color: #4BAA41;
}
.about__list-directions li:hover a {
  color: #387F30;
}
@media (max-width: 1199px) {
  .about__list-directions {
    gap: 0.6rem;
    margin-bottom: 1.6rem;
  }
  .about__list-directions li {
    font-size: 1.3rem;
  }
  .about__list-directions a {
    padding: 0.7rem 1.1rem;
  }
}

/* ------------- Служебные элементы формы вне попапа ------------------------ */
.contacts__form .form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contacts__form .form__message {
  font-size: 1.5rem;
  line-height: 2.1rem;
  margin-top: 1.4rem;
  padding: 1.2rem 1.6rem;
  border-radius: 1rem;
}
.contacts__form .form__message--error {
  background: #FDECEF;
  color: #ED143B;
}
.contacts__form .form__message--success {
  background: #EAF6E8;
  color: #2F7A26;
  text-align: center;
}

/* -------- Отзывы: на главной их 20, поэтому это слайдер и на десктопе ------ */
/* Шаблон услуги раскладывает отзывы сеткой 2 в ряд (там их единицы) через
   `transform: none !important`. Здесь нужен именно слайдер, поэтому контейнер
   назван иначе — и правила сетки его не задевают. */
.reviews__carousel {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 3.4rem;
}
@media (max-width: 1199px) {
  .reviews__carousel {
    padding-bottom: 2.4rem;
  }
}
.reviews__carousel .swiper {
  overflow: hidden;
}
.reviews__carousel .swiper-wrapper {
  display: flex;
}
.reviews__carousel .swiper-slide {
  width: calc(50% - 1rem);
  height: auto;
}
@media (max-width: 1199px) {
  .reviews__carousel .swiper-slide {
    width: auto;
  }
}

/* -------- Подзаголовок блока — по ширине до ряда управления --------------- */
/* Текст занимает всю строку, кроме места под ссылкой «Все …» и стрелками.
   В блоках с плитками ряд управления стоит во второй колонке сетки, поэтому
   ширину даёт сама сетка. У врачей и отзывов ряд позиционирован абсолютно —
   там место под него резервирует переменная --more-space: её выставляет
   js/home.js по фактической ширине ряда (она зависит от длины подписи и
   не масштабируется линейно вместе с rem). Значение в CSS — запас до замера. */
/* Стрелки отзывов — к правому краю контентного поля, как в остальных блоках.
   Сдвиг = ширина карточки «Нам доверяют» (38.8rem) + зазор flex-строки (2.8rem). */
/* -------- Подзаголовки блоков — 14px (1.4rem по сетке шаблона) ------------ */
@media (min-width: 1200px) {
  main .title-block .title-description {
    max-width: calc(100% - var(--more-space, 0px));
  }
  .specialists {
    --more-space: 44rem;
  }
  .reviews {
    --more-space: 26rem;
  }
  /* в блоке заявки колонка и без того узкая — там ограничение не нужно */
  .contacts .title-block .title-description {
    max-width: none;
  }
  .reviews__carousel .reviews__slider-arrows {
    right: -41.6rem;
    top: -3.7rem;
  }
  /* тот же приём для врачей: ряд управления по нижнему краю подзаголовка */
  .specialists .specialists__slider-arrows {
    top: -4.9rem;
  }
  main .title-description {
    font-size: 1.4rem;
    line-height: 2.1rem;
  }
}
/* -------- Неактивная стрелка слайдера — 50% прозрачности ------------------ */
/* В шаблоне услуги неактивное состояние собрано подменой иконки на серую
   (slider-arrow-disabled.svg) плюс серая обводка. Здесь — та же кнопка,
   просто в половину прозрачности. */
.slider-arrow.swiper-button-disabled {
  border-color: #0A1464;
  opacity: 0.5;
  cursor: default;
}
.slider-arrow.swiper-button-disabled::before {
  opacity: 1;
}
.slider-arrow.swiper-button-disabled::after {
  opacity: 0;
}

/* -------- Иконки тизеров — чуть крупнее ---------------------------------- */
.advantages--no-title .advantages__item-image img {
  width: 3.4rem;
  height: 3.4rem;
}
@media (max-width: 1199px) {
  .advantages--no {
    /* крупнее на телефоне: иконка — опора для глаза рядом с заголовком */
  }
  .advantages--no-title .advantages__item-image img {
    width: 3.8rem;
    height: 3.8rem;
  }
}

/* -------- Фотогалерея: количество снимков рядом с названием --------------- */
.gallery__item-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
}
.gallery__item-count {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.8rem;
  white-space: nowrap;
  color: #6B7287;
  background-color: #F7F9FB;
  border: #E5E9F0 1px solid;
  border-radius: 0.6rem;
  padding: 0.3rem 0.9rem;
}

/* -------- Межблочный интервал — единый по всей странице ------------------- */
/* В шаблоне услуги у каждого блока свой margin (6.5 / 7 / 8.5 / 11rem), из-за
   чего ритм страницы рваный. Приводим к одному значению и делаем его крупнее. */
.hero,
.advantages--no-title,
.section,
.about,
.dop-question,
.specialists,
.reviews,
.contacts {
  margin-bottom: 9.5rem;
}

@media (max-width: 1199px) {
  .hero,
  .advantages--no-title,
  .section,
  .about,
  .dop-question,
  .specialists,
  .reviews,
  .contacts {
    margin-bottom: 4rem;
  }
}
/* -------- Кнопка «вверх» — в правом углу окна ----------------------------- */
/* В шаблоне услуги кнопка висит справа (right: 7.8rem; bottom: 20rem).
   Оставляем справа, но опускаем в угол. Только для десктопа: на мобильной
   раскладке у шаблона свои значения (right: 1.4rem; bottom: 13rem), и без
   ограничения по ширине наши 7.8rem уводили кнопку к середине экрана. */
@media (min-width: 1200px) {
  .up {
    right: 7.8rem;
    left: auto;
    bottom: 7.8rem;
  }
}
/* -------- «О клинике»: основной текст — 14px, брендовый цвет -------------- */
/* Абзацы шли чёрными (цвет не задан, наследуется от корня), а пункты списка —
   брендовым #4A5270. Приводим к одному цвету текста шаблона. */
.about__text-main p, .about__text-main ul li {
  font-size: 1.4rem;
  line-height: 2.1rem;
  color: #4A5270;
}
@media (max-width: 1199px) {
  .about__text-main p, .about__text-main ul li {
    font-size: 1.4rem;
    line-height: 2rem;
  }
}

/* -------- «Оставьте заявку»: фотография фоном ----------------------------- */
/* Файл кладётся в images/content/contacts-bg.webp. Пока его нет, ::before
   ничего не рисует и виден background-color — блок выглядит как прежде. */
.contacts__wrapper {
  position: relative;
  overflow: hidden;
  background-color: #F7F9FB;
}

/* Отражён дважды, то есть вернулся в исходную ориентацию: стойка ресепшена
   слева, тёмные стеклянные перегородки и растения — справа, под формой.
   Так под мелким текстом слева остаётся светлое поле. */
.contacts__wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url(/local/templates/v1/css/../images/content/contacts-bg.webp) no-repeat center/cover;
}

/* Засветка идёт по диагонали: плотная в левом верхнем углу, где заголовок
   и текст, и сходит на нет к правому нижнему — там открытый интерьер. */
.contacts__wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, rgba(247, 249, 251, 0.88) 0%, rgba(247, 249, 251, 0.84) 45%, rgba(247, 249, 251, 0.24) 72%, rgba(247, 249, 251, 0.04) 100%);
}
.contacts__content, .contacts__form {
  position: relative;
  z-index: 2;
}

/* Карточка формы отделяется от снимка мягкой тенью */
.contacts__form {
  box-shadow: 0 1.2rem 4rem rgba(10, 20, 100, 0.1);
}

@media (max-width: 1199px) {
  /* На узком экране текст и форма идут колонкой поверх всей ширины кадра —
       засветка нужна сплошная, иначе подпись под формой теряется. */
  .contacts__wrapper::after {
    background: linear-gradient(180deg, rgba(247, 249, 251, 0.94) 0%, rgba(247, 249, 251, 0.9) 100%);
  }
}
/* -------- Согласие под формой — 12px, вместе со ссылками ------------------ */
/* Ссылки внутри согласия наследовали 16px от общего правила для <a>,
   поэтому размер задаём и им. */
.contacts__form .form__agree,
.contacts__form .form__agree span,
.contacts__form .form__agree a {
  font-size: 1.2rem;
  line-height: 1.7rem;
}

/* -------- Плашка формы — 80% непрозрачности ------------------------------ */
.contacts__form {
  background-color: rgba(255, 255, 255, 0.8);
}

/* В шаблоне услуги прогрессбар прижат к низу слайдера через absolute + !important,
   на главной он стоит в ряду со стрелками — поэтому пересобираем позиционирование. */
/* -------- Стрелки баннера — справа от полосы прогресса -------------------- */
/* Порядком во flex, а не перестановкой в разметке: так index.html
   и index-anim.html остаются одинаковыми. */
.hero__controls .slider-progressbar {
  position: relative;
  flex-grow: 1;
  width: auto !important;
  transform: none;
  top: auto !important;
  left: auto !important;
  bottom: auto;
  order: 1;
}
.hero__controls .slider-arrows {
  order: 2;
}

/* -------- Описание клиники в подвале -------------------------------------- */
/* Шаблон даёт этому абзацу вес 500 — рядом с прописными заголовками колонок
   он читался как ещё один акцент. Это вводный текст, ему хватает 400. */
.footer__info p {
  font-weight: 400;
}

/* Телефоны — основное действие в подвале, а шли тем же кеглем, что адрес
   и режим работы (список контактов сидит на общих правилах .menu). */
.footer a[href^="tel:"] {
  font-size: 1.8rem;
  line-height: 2.4rem;
  font-weight: 600;
}

@media (max-width: 1199px) {
  /* на узком экране абзац занимает четыре строки — мельче он спокойнее */
  .footer__info p {
    font-size: 1.3rem;
    line-height: 1.8rem;
  }
}
/* -------- Полоска прокрутки у горизонтальных лент ------------------------- */
/* Ленты карточек листаются пальцем, и без индикатора не видно, что справа
   есть ещё карточки. Вид тот же, что у прогрессбара Hero: трек #E5E9F0,
   заполнение брендовым зелёным. Элемент создаёт js/home.js — иначе его
   пришлось бы вписывать в пять секций руками. */
.cards-progress {
  display: none;
}

/* -------- Отступ слева у горизонтальных лент карточек --------------------- */
/* Лента выходит за поле (margin: 0 -1.4rem) и возвращает отступ паддингом.
   Но scroll-snap прижимает первую карточку к краю скроллпорта и паддинг
   игнорирует — первая карточка вставала вплотную к краю экрана.
   scroll-padding-left двигает точку прилипания на ту же величину. */
@media (max-width: 1199px) {
  .cards-progress {
    position: relative;
    display: block;
    height: 0.2rem;
    background: #E5E9F0;
    border-radius: 1rem;
    /* 2.6rem плюс 0.6rem нижнего паддинга ленты — итого 3.2rem от карточки.
       Было 2.2rem против 4rem до следующего блока, и полоска липла к ряду. */
    margin-top: 2.6rem;
    overflow: hidden;
  }
  /* лента короче экрана — листать нечего, полоску убираем */
  .cards-progress.is-hidden {
    display: none;
  }
  .cards-progress__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #4BAA41;
    border-radius: 1rem;
  }
  .cards {
    scroll-padding-left: 1.4rem;
  }
}
/* -------- Бургер-меню: отступ до полосы прокрутки ------------------------- */
/* У .burger__content своя полоса прокрутки (2px, ползунок #4BAA41). Контент
   доходил до неё вплотную — кнопка «Записаться» упиралась в зелёную полоску.
   Отодвигаем содержимое, полоса остаётся на прежнем месте. */
.burger__content {
  box-sizing: border-box;
  padding-right: 1.2rem;
}

/* -------- Плитки: одна высота в ряду и чистое скругление ------------------ */
/* height: 100% нужен в сетке на десктопе, но во flex-ленте на мобильном он
   отменяет растягивание (align-items: stretch работает только при height:auto)
   — из-за этого карточки с разным числом строк в заголовке разъезжались. */
@media (max-width: 1199px) {
  .cards {
    align-items: stretch;
  }
  .cards .articles__item {
    height: auto;
  }
}
/* Картинка обрезается по радиусу самой карточки, а не по собственному —
   так угол остаётся чистым при любой толщине рамки и дробном rem. */
.cards .articles__item {
  overflow: hidden;
}

/* -------- Кнопка «вверх» на мобильном — в правый нижний угол -------------- */
/* Отступы в rem, а rem привязан к ширине окна — угол держится на любом
   экране. По вертикали кнопка стоит над нижней панелью (её высота 6.6rem),
   а когда панель уезжает у футера — опускается в сам угол. */
@media (max-width: 1199px) {
  .bottom-bar-invisible ~ .up {
    bottom: 1.4rem;
  }
  /* На узком экране кнопка висит поверх контента, поэтому мельче и тише:
       4.2rem вплотную к ленте карточек читались как ещё один элемент блока.
       Прозрачность вешаем на :not(.up-invisible) — сам класс скрытия работает
       через opacity, и безусловное правило сломало бы появление по прокрутке. */
  .up {
    right: 1.4rem;
    /* Зазор до панели равен зазору между её кнопками (1rem) — на глаз это
       один и тот же интервал. Правый отступ 1.4rem совпадает с боковым
       полем панели, поэтому кнопка стоит ровно над краем «Записаться». */
    bottom: 7.6rem;
    width: 4rem;
    height: 4rem;
    border-width: 0.15rem;
  }
  .up svg {
    width: 1.8rem;
    height: 1.8rem;
  }
  .up:not(.up-invisible) {
    opacity: 0.65;
  }
  .up:not(.up-invisible):active {
    opacity: 1;
  }
}
/* -------- Правки чек-листа (адаптив) --------------------------------------- */
/* Слайдеры с overflow: hidden (отзывы, баннер): карточка и кнопка стоят
   вплотную к краю, а высота дробная из-за rem — нижняя граница рамки
   обрезалась («закусывалась»). Даём запас в пару пикселей. */
.reviews__slider .swiper,
.reviews__carousel .swiper {
  padding: 1px 0 2px;
}

.hero-slider .swiper,
.hero .swiper {
  padding-bottom: 2px;
}

/* Полосы прогресса лент и слайдеров: 0.2rem давали дробные 2.29px, и одна
   полоса рисовалась в 2px, соседняя в 3px. Толщина — ровно 2px везде. */
.slider-progressbar,
.cards-progress,
.cards-progress__fill {
  height: 2px !important;
}

/* Тень при наведении на тач-экране «залипает» после свайпа: карточка
   в ленте выглядела приподнятой над соседними. На устройствах без hover
   и на мобильной ширине тень не показываем. */
@media (hover: none), (max-width: 1199px) {
  .articles__item:hover,
  .cards .articles__item:hover,
  .specialists__item:hover,
  .reviews__item:hover {
    box-shadow: none;
  }
}
/* ========================= Выпадающее меню ================================ */
/* Перечень взят с боевого сайта. На десктопе раскрывается по наведению,
   в бургере — аккордеоном по кнопке-шеврону. */
.menu__item--has-sub {
  position: relative;
}

/* Шеврон у пункта с подменю */
.menu__caret {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: currentColor 0.15rem solid;
  border-bottom: currentColor 0.15rem solid;
  transform: rotate(45deg) translate(-0.1rem, -0.1rem);
  margin-left: 0.7rem;
  opacity: 0.55;
  transition: transform 0.2s linear, opacity 0.2s linear;
}
.menu__item--has-sub:hover > a > .menu__caret {
  opacity: 1;
}

/* В шаблоне .menu ul, li и a растянуты на высоту строки шапки (height: 100%)
   и разложены flex-строкой. Для вложенного списка это всё сбрасываем — иначе
   подменю наследует высоту шапки и схлопывается до одной строки. */
.menu .menu__sub,
.menu .menu__sub li,
.menu .menu__sub a,
.menu .menu__mega-item,
.menu .menu__mega-img {
  height: auto;
}

.menu .menu__sub {
  display: block;
  list-style: none;
  margin: 0;
}

.menu .menu__sub a {
  display: block;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 2rem;
  letter-spacing: normal;
  text-transform: none;
  color: #4A5270;
  padding: 0;
}

/* подчёркивание из шаблона в подменю не нужно */
.menu .menu__sub a::after {
  display: none;
}

/* ------------------------------ Десктоп ---------------------------------- */
@media (min-width: 1200px) {
  .header .menu .menu__sub {
    position: absolute;
    min-width: 26rem;
    box-sizing: border-box;
    background-color: #fff;
    border: #E5E9F0 1px solid;
    border-radius: 1.2rem;
    box-shadow: 0 1.2rem 4rem rgba(10, 20, 100, 0.12);
    padding: 1rem 0;
    top: 100%;
    left: -1.6rem;
    z-index: 70;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.8rem);
    transition: opacity 0.2s linear, visibility 0.2s linear, transform 0.2s linear;
  }
  /* focus-within — чтобы меню раскрывалось и при переходе с клавиатуры */
  .header .menu__item--has-sub:hover > .menu__sub,
  .header .menu__item--has-sub:focus-within > .menu__sub {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .header .menu__item--has-sub:hover > a > .menu__caret {
    transform: rotate(-135deg) translate(-0.1rem, -0.1rem);
  }
  .header .menu .menu__sub a {
    display: block;
    padding: 0.9rem 2rem;
    white-space: nowrap;
    transition: color 0.2s linear, background-color 0.2s linear;
  }
  .header .menu .menu__sub a:hover {
    color: #387F30;
    background-color: #F7F9FB;
  }
  /* Третий уровень («Цены» → раздел → услуга) вылетает вправо от списка.
       Панели соприкасаются краями: зазор между ними разорвал бы :hover,
       пока курсор идёт от пункта к вложенному списку. */
  .header .menu .menu__sub > li {
    position: relative;
  }
  .header .menu .menu__sub > li > a {
    display: flex;
    align-items: center;
    /* зазор до стрелки задаём gap, а не отступом самой стрелки: у неё
       бокс 0.5rem с двумя границами, и padding удлинял бы нижнюю границу —
       шеврон превращался в длинный диагональный штрих */
    gap: 1.2rem;
  }
  .header .menu .menu__sub--level3 {
    top: -1rem;
    left: 100%;
    /* длинные названия переносим строкой, а не тянем в одну: списки цен
       доходят до «Лечебно-диагностические пункции…» — nowrap увёл бы
       панель за край окна */
    /* width: max-content обязателен. Блок позиционирован абсолютно и
       сдвинут на left: 100%, свободного места справа для него ноль —
       shrink-to-fit падал в min-width, и max-width ни на что не влиял,
       поэтому короткие названия ломались переносами. */
    width: max-content;
    min-width: 26rem;
    max-width: 42rem;
  }
  .header .menu .menu__sub--level3 a {
    white-space: normal;
  }
  .menu__caret--right {
    /* без сдвига: в повёрнутой системе translate(t, t) даёт чистый сдвиг
       по горизонтали, и прежний translate(-0.1rem, -0.1rem) просто
       смещал шеврон влево от края. Сдвиг оставлен только на наведение. */
    transform: rotate(-45deg);
    margin-left: auto;
    flex-shrink: 0;
  }
  .header .menu .menu__sub > li:hover > a > .menu__caret--right {
    transform: rotate(-45deg) translate(0.2rem, 0.2rem);
  }
}
/* ------------------------------ Бургер ----------------------------------- */
@media (max-width: 1199px) {
  /* Пункт раскладывается сеткой: слева ссылка, справа колонка под шеврон,
       подменю — во всю ширину во второй строке. Так кнопка центрируется по
       строке пункта сама, без привязки к её высоте: у верхнего уровня строка
       2.4rem, у вложенного — 4.2rem с внутренними отступами. */
  .burger .menu__item--has-sub {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.6rem;
    align-items: stretch;
  }
  .burger .menu__item--has-sub > a {
    grid-column: 1;
    grid-row: 1;
  }
  .burger .menu__item--has-sub > .menu__sub {
    grid-column: 1/-1;
    grid-row: 2;
  }
  .burger .menu__toggle {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Раньше кнопка позиционировалась абсолютно и её приходилось привязывать
       то к верху пункта, то к центру первой строки — на вложенном уровне,
       где у ссылки свои отступы, шеврон каждый раз уезжал. В сетке высота
       кнопки равна высоте строки, и центрирование считает браузер. */
    height: auto;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  .burger .menu__toggle::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    /* линия тоже тоньше: при боксе 0.6rem прежние 0.2rem съедали треть
       шеврона, и он читался жирной галочкой, а не стрелкой */
    border-right: #0A1464 0.15rem solid;
    border-bottom: #0A1464 0.15rem solid;
    transform: rotate(45deg) translate(-0.15rem, -0.15rem);
    transition: transform 0.25s ease-out;
  }
  /* только своя кнопка: без ограничения по родителю правило цепляло
       шевроны вложенных пунктов, и они показывали раскрытое состояние
       при свёрнутом списке */
  .burger .menu__item--has-sub.is-open > .menu__toggle::before {
    transform: rotate(-135deg) translate(-0.15rem, -0.15rem);
    /* раскрытая ветка помечается цветом: по шеврону видно, где ты находишься,
       даже когда список уехал за пределы экрана */
    border-right-color: #4BAA41;
    border-bottom-color: #4BAA41;
  }
  .burger .menu .menu__sub {
    overflow: hidden;
    max-height: 0;
    padding-left: 1.6rem;
    transition: max-height 0.3s ease-out;
  }
  .burger .menu__item--has-sub.is-open > .menu__sub {
    /* запас на самый длинный список; точную высоту ставит js/home.js,
       здесь — поведение без скриптов */
    max-height: 120rem;
  }
  /* вложенный уровень внутри бургера */
  .burger .menu .menu__sub > li {
    position: relative;
  }
  /* раскрытый пункт выделяем начертанием — сразу видно, какая ветка открыта.
       Класс .burger продублирован по той же причине, что и у ссылок выше. */
  .burger.burger .menu .menu__sub .menu__item--has-sub.is-open > a {
    font-weight: 600;
  }
  /* шеврон вложенного уровня тише и мельче: он подчинён шеврону раздела */
  .burger .menu .menu__sub .menu__toggle::before {
    width: 0.5rem;
    height: 0.5rem;
    border-right: #8D95AB 0.15rem solid;
    border-bottom: #8D95AB 0.15rem solid;
  }
  .burger .menu .menu__sub .menu__item--has-sub.is-open > .menu__toggle::before {
    border-right-color: #4BAA41;
    border-bottom-color: #4BAA41;
  }
  /* Класс .burger продублирован намеренно. Шаблон задаёт размер и вес
       ссылок бургера селектором `.burger .menu ul li a` — это четыре класса,
       и обычный `.burger .menu .menu__sub a` из трёх ему проигрывает:
       вложенные пункты наследовали 1.6rem/600 от верхнего уровня. */
  .burger.burger .menu .menu__sub a {
    display: block;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.9rem;
    padding: 0.6rem 0;
  }
  /* третий уровень — ещё на ступень тише */
  .burger.burger .menu .menu__sub--level3 a {
    font-size: 1.3rem;
    line-height: 1.8rem;
    padding: 0.5rem 0;
    color: #6B7287;
  }
  /* четвёртый уровень («Услуги» → раздел → услуга → подуслуга):
       на десктопе это вложенный список внутри карточки панели */
  .burger.burger .menu .menu__sub--level4 a {
    font-size: 1.2rem;
    line-height: 1.7rem;
    padding: 0.4rem 0;
    color: #6B7287;
  }
  .burger .menu .menu__sub li {
    border-bottom: none;
  }
}
/* -------- «Услуги»: панель с картинками разделов -------------------------- */
@media (min-width: 1200px) {
  /* Подложка во всю ширину окна. position: absolute тут не годится:
       ближайший позиционированный предок — .header__content, а это .container,
       и панель обрезалась бы по контентному полю. Поэтому fixed, а отступ
       сверху равен высоте шапки (.header { height: 11.7rem } в шаблоне). */
  .menu__item--mega {
    position: static;
  }
  /* В шаблоне у самой шапки стоит backdrop-filter: blur(5px). Элемент с этим
       свойством становится корнем подложки для своих потомков: мега-панель,
       лежащая внутри шапки, размывала только содержимое шапки — то есть
       ничего, и баннер под ней читался насквозь. Фон шапки и так 96% белого,
       её собственное размытие работало по 4% просвета и глазом не читалось. */
  .header {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .menu__mega {
    position: fixed;
    box-sizing: border-box;
    /* подложка панели — 90% белого, сквозь неё чуть просвечивает страница;
       карточки поверх остаются плотно белыми, чтобы текст не терял контраст.
       Размытие нужно потому, что под панелью стоит баннер: без него в просветах
       читалась бы сама фотография, и оттенок менялся бы от слайда к слайду. */
    background-color: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(2.8rem);
    backdrop-filter: blur(2.8rem);
    border-top: #E5E9F0 1px solid;
    box-shadow: 0 1.2rem 4rem rgba(10, 20, 100, 0.12);
    padding: 2.4rem 0 5.6rem;
    /* «Ультразвуковая диагностика» раскрывается на 16 услуг — панель
       вылезала за нижний край окна. Ограничиваем высотой экрана
       (11.7rem — высота шапки) и отдаём прокрутку внутрь панели. */
    max-height: calc(100dvh - 11.7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    top: 11.7rem;
    /* нижняя граница шапки — 1px, и между пунктом и панелью оставался
       разрыв в эту толщину: курсор успевал выйти из :hover. Подтягиваем. */
    margin-top: -1px;
    left: 0;
    right: 0;
    z-index: 70;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.8rem);
    transition: opacity 0.2s linear, visibility 0.2s linear, transform 0.2s linear;
  }
  /* карточки внутри — по контентному полю сайта */
  .menu__mega-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* одинаковый шаг по обеим осям: было 0.4rem по вертикали против 3.2rem
       по горизонтали — сетка читалась неровной */
    gap: 1.5rem;
  }
  .menu__item--mega:hover .menu__mega, .menu__item--mega:focus-within .menu__mega {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  /* Карточке нужна видимая граница: названия разной длины, и без неё
       промежуток между колонками читался то в 75px, то в 273px — глаз видел
       не одинаковый шаг сетки, а рваные хвосты пустоты после коротких слов. */
  .menu__mega-item {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    /* заливка снята — под карточкой видна размытая подложка панели */
    background-color: transparent;
    /* 1px — минимальная толщина, дальше приглушаем цветом: рамка нужна
       только чтобы держать ритм колонок, а не очерчивать карточку */
    border: rgba(10, 20, 100, 0.1) 1px solid;
    border-radius: 0.6rem;
    padding: 0.8rem;
    transition: background-color 0.2s linear, border-color 0.2s linear;
  }
  .menu__mega-item:hover {
    background-color: rgba(255, 255, 255, 0.6);
    border-color: rgba(75, 170, 65, 0.4);
  }
  /* Количество стоит в конце заголовка, поэтому строка одна; при нехватке
       ширины количество переносится вниз, а не выдавливает название. */
  .menu__mega-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.6rem;
  }
  /* колонка с заголовком, перечнем услуг и кнопкой */
  .menu__mega-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    flex-grow: 1;
    min-width: 0;
  }
  .menu .menu__mega-img {
    flex-shrink: 0;
    display: block;
    width: 8rem;
    height: 8rem;
    border-radius: 0.6rem;
    overflow: hidden;
    background-color: #F7F9FB;
  }
  .menu__mega-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease-out;
  }
  .menu__mega-img:hover img, .menu__mega-item:has(.menu__mega-head:hover) .menu__mega-img img {
    transform: scale(1.06);
  }
  .menu__mega-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
  }
  .menu__mega-name {
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.9rem;
    letter-spacing: normal;
    text-transform: none;
    color: #0A1464;
    transition: color 0.2s linear;
  }
  .menu__mega-head:hover .menu__mega-name {
    color: #387F30;
  }
  .menu__mega-count::before {
    content: "·";
    margin-right: 0.6rem;
  }
  .menu__mega-count {
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.6rem;
    letter-spacing: normal;
    text-transform: none;
    color: #6B7287;
  }
  /* Первые три услуги раздела видны, остальные — под кнопкой «Еще N».
       Список выровнен по названию раздела: 8rem картинки + 1.2rem зазора. */
  /* .menu — не для красоты: шаблонное .menu ul задаёт padding: 0 и по
       специфичности перебивает одиночный класс, отступ списка пропадал */
  .menu .menu__mega-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 0.4rem;
  }
  .menu .menu__mega-list li {
    height: auto;
    border: none;
  }
  /* шаблон растягивает ссылки меню на высоту шапки и делает их прописными —
       для вложенного списка сбрасываем то же, что и для обычного подменю */
  .menu .menu__mega-list a,
  .menu .menu__mega-more {
    height: auto;
    font-weight: 400;
    font-size: 1.3rem;
    /* 1.9rem на длинных названиях в две строки читались рыхло */
    line-height: 1.7rem;
    letter-spacing: normal;
    text-transform: none;
    padding: 0;
  }
  .menu .menu__mega-list a {
    display: block;
    color: #4A5270;
    transition: color 0.2s linear;
  }
  .menu .menu__mega-list a::after {
    display: none;
  }
  .menu .menu__mega-list a:hover {
    color: #387F30;
  }
  /* Иконка услуги из свойства «Иконка (SVG)» — только в выпадающем меню. */
  .menu .menu__icon {
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    vertical-align: -0.4rem;
    margin-right: 0.8rem;
    object-fit: contain;
  }
  /* Иконка раздела (UF_ICON) вместо фото: та же рамка, что у фото, внутри —
     вектор по центру на светлой подложке, без обрезки. */
  .menu .menu__mega-img--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
  }
  .menu .menu__mega-img--icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* Подуслуги: у части услуг есть свой уровень («УЗИ внутренних органов»
       → «УЗИ желчного пузыря»). Отбиваем сдвигом и более светлым цветом,
       чтобы уровни не сливались в один список. */
  /* строка услуги с вложенным уровнем: название + шеврон разворота */
  .menu__mega-group-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .menu .menu__mega-sub-toggle {
    display: flex;
    align-items: center;
    height: auto;
    background: none;
    border: none;
    padding: 0;
    color: #6B7287;
    cursor: pointer;
    transition: color 0.2s linear;
  }
  .menu .menu__mega-sub-toggle:hover {
    color: #387F30;
  }
  .menu .menu__mega-sublist {
    /* по умолчанию свёрнут; раскрывается шевроном */
    display: none;
    flex-direction: column;
    gap: 0.2rem;
    list-style: none;
    margin: 0.2rem 0 0.4rem;
    padding: 0 0 0 1.4rem;
  }
  .menu .menu__mega-group.is-open > .menu__mega-sublist {
    display: flex;
  }
  .menu__mega-group.is-open > .menu__mega-group-head .menu__caret--more {
    transform: rotate(-135deg) translate(-0.1rem, -0.1rem);
    color: #387F30;
    opacity: 1;
  }
  .menu .menu__mega-sublist li {
    height: auto;
    border: none;
  }
  .menu .menu__mega-sublist a {
    height: auto;
    display: block;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.6rem;
    letter-spacing: normal;
    text-transform: none;
    padding: 0;
    color: #6B7287;
    transition: color 0.2s linear;
  }
  .menu .menu__mega-sublist a::after {
    display: none;
  }
  .menu .menu__mega-sublist a:hover {
    color: #387F30;
  }
  .menu__mega-hidden {
    display: none;
  }
  .menu__mega-item.is-open .menu__mega-hidden {
    display: block;
  }
  .menu .menu__mega-more {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* на ступень мельче перечня услуг: кнопка вспомогательная и не должна
       читаться как ещё один пункт списка */
    font-size: 1.2rem;
    line-height: 1.6rem;
    align-self: flex-start;
    background: none;
    border: none;
    /* нейтральнее и светлее прежнего #7A8299: кнопка вспомогательная
       и не должна конкурировать с названиями услуг */
    color: #6B7287;
    cursor: pointer;
    transition: color 0.2s linear;
  }
  /* пунктир — только под подписью, шеврон остаётся свободным */
  .menu__mega-more-text {
    border-bottom: currentColor 1px dashed;
  }
  .menu__caret--more {
    margin-left: 0;
    opacity: 0.8;
  }
  /* только шеврон самой кнопки «Еще»: без ограничения по родителю правило
       цепляло и шевроны групп внутри карточки, и они переворачивались вместе
       с ней, показывая раскрытое состояние у свёрнутых подуслуг */
  .menu__mega-item.is-open > .menu__mega-body > .menu__mega-more .menu__caret--more {
    transform: rotate(-135deg) translate(-0.1rem, -0.1rem);
    /* шеврон рисуется границами по currentColor, поэтому красим сам <i>,
       а не кнопку: подпись «Свернуть» остаётся серой */
    color: #387F30;
    opacity: 1;
  }
  .menu .menu__mega-more:hover {
    color: #387F30;
  }
}
/* ========================= Страница «Услуги» ============================== */
/* Карточка раздела: картинка, название, счётчик и первые четыре услуги.
   На главной такие плитки листаются лентой, здесь это полноценный список —
   поэтому сетка не превращается в горизонтальную прокрутку на узком экране. */
.cards--grid {
  display: grid;
  gap: 2.4rem;
}
@media (max-width: 1199px) {
  .cards--grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  .cards--grid > * {
    flex: none;
    height: auto;
  }
}

.services__item-count {
  display: block;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: #6B7287;
  margin-top: 0.4rem;
}
.services__item-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
}
.services__item-list a {
  /* Перечень услуг — основная навигация по разделу, а не подпись к карточке. */
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: #4A5270;
  transition: color 0.2s linear;
}
.services__item-list a:hover {
  color: #387F30;
}
.services__item {
  /* На телефоне карточка раздела занимает всю ширину и перечень услуг — это
     основная навигация страницы, а не подпись: 13px там читаются мелко. */
}
@media (max-width: 1199px) {
  .services__item-list a {
    font-size: 1.5rem;
    line-height: 2.2rem;
  }
}
.services__item-more {
  align-self: flex-start;
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: #6B7287;
  border-bottom: currentColor 1px dashed;
  margin-top: 1.2rem;
  transition: color 0.2s linear;
}
.services__item-more:hover {
  color: #387F30;
}

/* ===================== Страница «Наши специалисты» ======================= */
/* Фильтр по направлениям: тот же список, что и в меню «Врачи». */
.staff-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 3.2rem;
}
.staff-filter__item {
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #4A5270;
  background-color: #F7F9FB;
  border: rgba(10, 20, 100, 0.1) 1px solid;
  border-radius: 10rem;
  padding: 0.8rem 1.6rem;
  transition: color 0.2s linear, background-color 0.2s linear, border-color 0.2s linear;
}
.staff-filter__item:hover {
  color: #387F30;
  border-color: rgba(75, 170, 65, 0.4);
}
.staff-filter__item.is-current {
  color: #fff;
  background-color: #3B8633;
  border-color: #4BAA41;
}

/* На главной карточки врачей едут слайдером, здесь это обычная сетка —
   фиксированная ширина слайда мешала бы им растянуться по колонке. */
.specialists--page .specialists__item {
  width: auto;
  height: 100%;
}

@media (max-width: 1199px) {
  .staff-filter {
    margin-bottom: 2.4rem;
  }
}
.price-section {
  scroll-margin-top: 13rem;
  margin-bottom: 5.6rem;
}
.price-group__title a {
  color: inherit;
  transition: color 0.2s linear;
}
.price-group__title a:hover {
  color: #387F30;
}
.price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 2.4rem;
  border-bottom: #E5E9F0 1px solid;
  padding: 1.6rem 0;
}
.price-row__name {
  font-size: 1.4rem;
  line-height: 2rem;
  color: #4A5270;
  margin: 0;
}
.price-row__cost {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  white-space: nowrap;
}
.price-row__old {
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #A7AEC0;
  text-decoration: line-through;
  /* Полоску красим отдельно от текста: серая на сером читалась как
     часть числа, и старая цена не сразу отличалась от новой. */
  text-decoration-color: #D2534B;
  text-decoration-thickness: 0.15rem;
}
.price-row__btn {
  height: 4rem;
  font-size: 1.3rem;
  padding: 0 2rem;
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .price-nav {
    margin-bottom: 2.4rem;
  }
  /* На узком экране три колонки не помещаются: цена уходит под название,
       кнопка — во всю ширину, иначе строка ломается переносами. */
  .price-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.8rem 1.6rem;
    padding: 1.4rem 0;
  }
  .price-row__cost {
    justify-content: flex-end;
  }
  .price-row__btn {
    grid-column: 1/-1;
    justify-self: start;
    height: 3.6rem;
    margin-top: 0.4rem;
  }
  .price-group__title {
    font-size: 1.6rem;
    line-height: 2.2rem;
  }
}
/* Раздел прайса не сетка. Класс .section с главной раскладывает блок в grid и
   явно сажает .title-block в первую ячейку, а всё остальное авторазмещение
   уводит во вторую колонку — заголовок наезжал на строки, а колонка с
   названием услуги схлопывалась до ширины слова. */
@media (min-width: 1200px) {
  .price-section {
    display: block;
  }
}
/* Часть позиций в группе свёрнута — как на боевом сайте. Кнопка оформлена так
   же, как «Еще N» в панели «Услуги»: приглушённая подпись, пунктир и шеврон,
   который при раскрытии переворачивается и зеленеет. */
.price-row--hidden {
  display: none;
}
.price-group.is-open .price-row--hidden {
  display: grid;
}
.price-more {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  margin-top: 1.6rem;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: #6B7287;
  cursor: pointer;
  transition: color 0.2s linear;
}
.price-group.is-open .price-more .menu__caret--more {
  transform: rotate(-135deg) translate(-0.1rem, -0.1rem);
  color: #387F30;
  opacity: 1;
}
.price-search {
  margin-bottom: 2.4rem;
}
.price-search__input {
  width: 100%;
  height: 5.2rem;
  box-sizing: border-box;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #0A1464;
  background-color: #fff;
  border: #E5E9F0 1px solid;
  border-radius: 1rem;
  padding: 0 2rem;
  transition: border-color 0.2s linear;
}
.price-search__input::placeholder {
  color: #6B7287;
}

/* Скрытое поиском: отдельный класс, чтобы не мешать сворачиванию групп. */
.is-filtered {
  display: none !important;
}

/* Во время поиска свёрнутые позиции показываем — иначе часть прайса
   была бы недоступна для поиска. */
.price-searching .price-row--hidden:not(.is-filtered) {
  display: grid;
}
.price-searching .price-more {
  display: none;
}
.price-empty {
  font-size: 1.4rem;
  line-height: 2rem;
  color: #6B7287;
  margin: 0 0 2.4rem;
}
@media (max-width: 1199px) {
  .price-promo {
    padding: 1.6rem;
  }
  .price-promo .btn {
    width: 100%;
  }
}
.price-promo__accent {
  color: #4BAA41;
}

/* Поиск: иконка, счётчик найденного и кнопка запуска в одной рамке. */
.price-search {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  height: 6rem;
  box-sizing: border-box;
  background-color: #fff;
  border: #E5E9F0 1px solid;
  border-radius: 1rem;
  padding-left: 2rem;
  margin-bottom: 2.4rem;
  overflow: hidden;
}
.price-search__input {
  flex-grow: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: #0A1464;
  padding: 0;
}
.price-search__input:focus {
  outline: none;
  border-color: rgba(75, 170, 65, 0.5);
}
.price-search__clear {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.8rem;
  line-height: 1;
  color: #A7AEC0;
  background: none;
  border: none;
  cursor: pointer;
}
.price-search__clear:hover {
  color: #0A1464;
}
.price-search__count {
  flex-shrink: 0;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #4A5270;
  white-space: nowrap;
}
.price-search__submit {
  flex-shrink: 0;
  height: 100%;
  padding: 0 3.2rem;
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background-color: #0A1464;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s linear;
}
.price-search__submit:hover {
  background-color: #1B2A8A;
}
.price-nav::-webkit-scrollbar {
  display: none;
}
.price-nav__item {
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #4A5270;
  background-color: #F7F9FB;
  border: rgba(10, 20, 100, 0.1) 1px solid;
  border-radius: 10rem;
  padding: 0.8rem 1.6rem;
  transition: color 0.2s linear, border-color 0.2s linear;
  flex-shrink: 0;
  white-space: nowrap;
  /* Лента читается как навигация по странице, а не как подпись:
     места в ней с запасом, лишнее уезжает горизонтальной прокруткой. */
  font-size: 1.7rem;
  line-height: 2.4rem;
  background: none;
  border: none;
  border-bottom: transparent 0.2rem solid;
  border-radius: 0;
  padding: 1.6rem 0;
  margin-bottom: -1px;
}
.price-nav__item:hover {
  color: #387F30;
  border-color: rgba(75, 170, 65, 0.4);
  color: #0A1464;
}
.price-nav__item.is-current {
  font-weight: 600;
  color: #0A1464;
  border-bottom-color: #4BAA41;
}
.price-nav__arrow:hover {
  color: #387F30;
  border-color: rgba(75, 170, 65, 0.5);
}
.price-group:first-of-type {
  border-radius: 1.2rem 1.2rem 0 0;
}
.price-group + .price-group {
  border-top: none;
}
.price-group:last-of-type {
  border-radius: 0 0 1.2rem 1.2rem;
}
.price-group__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2.4rem;
  background-color: #F7F9FB;
  border-bottom: #E5E9F0 1px solid;
  padding: 1.6rem 2.4rem;
}
.price-group__title {
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 2.4rem;
  color: #0A1464;
  margin: 0 0 1.2rem;
  font-size: 1.6rem;
  line-height: 2.2rem;
  margin: 0;
}
.price-group__label {
  flex-shrink: 0;
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #0A1464;
}
.price-row {
  padding: 1.6rem 2.4rem;
  border-bottom: #E5E9F0 1px solid;
  border-top: none;
}
.price-row:last-of-type, .price-group .price-more + .price-row {
  border-bottom: none;
}
.price-row:first-of-type {
  border-top: #E5E9F0 1px solid;
  border-top: none;
}
.price-row__code {
  display: block;
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: #6B7287;
  margin-top: 0.4rem;
  display: inline;
  font-size: 1.3rem;
  margin: 0 0 0 0.8rem;
}
.price-row__price {
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 2.4rem;
  color: #0A1464;
  font-size: 1.6rem;
  line-height: 2.2rem;
}

/* Кнопка записи — контурная, чтобы 225 зелёных плашек не забивали прайс. */
.price-row__btn {
  height: 4rem;
  padding: 0 2rem;
  font-size: 1.4rem;
  line-height: 4rem;
  color: #0A1464;
  background-color: #fff;
  border: rgba(10, 20, 100, 0.25) 1px solid;
  border-radius: 0.8rem;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s linear, border-color 0.2s linear;
}
.price-row__btn:hover {
  color: #387F30;
  border-color: rgba(75, 170, 65, 0.6);
}
.price-more {
  margin: 0 0 1.6rem 2.4rem;
}
@media (max-width: 1199px) {
  .price-promo {
    padding: 2rem;
  }
  .price-promo::after {
    content: none;
  }
  .price-search {
    height: auto;
    flex-wrap: wrap;
    padding: 1.2rem 1.6rem;
    gap: 0.8rem;
  }
  .price-search__input {
    height: 3.2rem;
  }
  .price-search__submit {
    width: 100%;
    height: 4.4rem;
    border-radius: 0.8rem;
  }
  .price-group__head, .price-row {
    padding: 1.4rem 1.6rem;
  }
  .price-more {
    margin-left: 1.6rem;
  }
}

/* Поиск: поле, счётчик и кнопка одной высоты, кнопка прижата к краю рамки. */
.price-search {
  height: 6.4rem;
  padding-left: 2.2rem;
  gap: 1.6rem;
}
.price-search__input {
  font-size: 1.5rem;
}
.price-search__submit {
  align-self: stretch;
  height: auto;
}
@media (max-width: 1199px) {
  .price-promo {
    min-height: 0;
    padding: 2rem;
  }
  .price-search {
    height: auto;
  }
}

/* Разделы — лента вкладок с подчёркиванием активного и стрелкой прокрутки. */
/* ---- Лента разделов: одна строка, хвост уходит в затемнение ------------- */
.price-nav-wrap {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  border-bottom: #E5E9F0 1px solid;
  margin-bottom: 4rem;
  position: relative;
}

/* Градиент показываем только когда есть что прокручивать — класс ставит
   js/site.js вместе с показом стрелки. */
.price-nav-wrap::after {
  content: "";
  position: absolute;
  width: 12rem;
  top: 0;
  bottom: 1px;
  right: 4.4rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 75%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s linear;
}
.price-nav-wrap.is-scrollable::after {
  opacity: 1;
}

/* ============================ Страница «Цены» ============================= */
/* Прайс идёт сплошным списком: раздел → группа услуг → строка с ценой.
   Навигация по якорям повторяет чипы фильтра врачей — один приём на сайте. */
.price-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 4rem;
  gap: 3.2rem;
  flex-grow: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  margin-bottom: 0;
  flex-wrap: nowrap;
}
.price-promo__text {
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: #0A1464;
  margin: 0;
  max-width: 72rem;
  position: relative;
  z-index: 1;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: #fff;
  max-width: 60rem;
  font-size: 1.4rem;
  line-height: 2rem;
}
.price-promo {
  /* обёртка заголовка и описания из параметров PROMO_TITLE / PROMO_DESC */
}
.price-promo__content {
  position: relative;
  z-index: 1;
  max-width: 60rem;
}
.price-promo__text span {
  color: #4BAA41;
}
.price-promo__desc {
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0.4rem 0 0;
}
.price-promo__btn {
  position: relative;
  z-index: 1;
  height: 4.4rem;
  line-height: 4.4rem;
  padding: 0 2.4rem;
}
.price-nav__arrow[hidden] {
  display: none;
}

/* Затемнение с той стороны, куда лента ещё прокручивается. */
.price-nav-wrap::before {
  content: "";
  position: absolute;
  width: 12rem;
  top: 0;
  bottom: 1px;
  left: 4.4rem;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #fff 75%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s linear;
  z-index: 0;
}
.price-nav-wrap.is-scrolled::before {
  opacity: 1;
}

/* Высота поля поиска — 5rem (50px на 1920). */
.price-search {
  height: 5rem;
  padding-left: 1.8rem;
  gap: 1.2rem;
}
.price-search__input {
  font-size: 1.4rem;
}
.price-search__submit {
  padding: 0 2.8rem;
  font-size: 1.3rem;
}

/* Фильтр разделов: на странице показывается только выбранный раздел. */
.price-section.is-hidden-section {
  display: none;
}

/* :first-of-type/:last-of-type считают по типу элемента, а не по классу:
   первым div в разделе идёт .title-block, поэтому правило скругления не
   срабатывало и карточка выходила с прямыми верхними углами. */
.price-group:first-of-type,
.price-group:last-of-type {
  border-radius: 0;
}

.title-block + .price-group {
  border-radius: 1.2rem 1.2rem 0 0;
}

.price-section .price-group:last-child {
  border-radius: 0 0 1.2rem 1.2rem;
}

.title-block + .price-group:last-child {
  border-radius: 1.2rem;
}

/* «Показать ещё» — такая же ячейка, как строка цены: во всю ширину группы,
   с той же высотой и разделителем сверху, подпись по центру. */
.price-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 1.6rem 2.4rem;
  border-top: #E5E9F0 1px solid;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #387F30;
}
.price-more:hover {
  color: #387F30;
  color: #387F30;
}

/* пунктир тут лишний: подпись и так выделена цветом */
.price-more__text {
  border-bottom: currentColor 1px dashed;
  border-bottom: none;
}
.price-more .menu__caret--more {
  color: currentColor;
  opacity: 1;
  margin-left: 0;
}

/* строка перед кнопкой уже отделена её собственной границей */
.price-group .price-row:last-of-type {
  border-bottom: none;
}
@media (max-width: 1199px) {
  .price-more {
    padding: 1.4rem 1.6rem;
  }
}

/* Высоту строки цены задаёт кнопка «Записаться» (4rem) плюс отступы 1.6rem
   сверху и снизу. У «Показать ещё» такого содержимого нет, поэтому ту же
   высоту задаём явно — иначе ячейка выходит на 20px ниже соседних. */
.price-more {
  min-height: 7.2rem;
}

/* Кнопка «Найти» — скруглённая плашка внутри рамки поля, а не срезанный
   прямоугольник во всю высоту. Счётчик рядом подсвечен брендовым цветом. */
.price-search {
  padding-right: 0.5rem;
}
.price-search__submit {
  align-self: center;
  height: 4rem;
  border-radius: 0.8rem;
}
.price-search__count {
  font-weight: 500;
  color: #0A1464;
}

/* Подпись «Показать ещё» — полужирная: это единственный управляющий элемент
   внутри карточки, и лёгкое начертание терялось среди строк прайса. */
.price-more {
  font-weight: 600;
}

/* Название группы услуг — крупнее и жирнее: это заголовок блока строк, а он
   шёл почти вровень с самими строками. Начертание дублируем на ссылке —
   у ссылок шаблона свои правила шрифта, и заголовок наследовал их вес. */
.price-group__title,
.price-group__title a {
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.6rem;
}

/* Кнопка вплотную к краю поля: зазор убран, поэтому она снова во всю высоту,
   а справа повторяет скругление рамки — иначе из-под её угла выглядывала бы
   дуга поля. Слева скругление остаётся, плашка читается кнопкой. */
.price-search {
  padding-right: 0;
}
.price-search__submit {
  align-self: stretch;
  height: auto;
  border-radius: 0.8rem 0.9rem 0.9rem 0.8rem;
}

/* ---- Стрелки ленты разделов: обе круглые, назад — при прокрутке --------- */
/* Стрелки ленты — квадрат со скруглением, а не круг: так они рифмуются
   с кнопкой «Найти» и кнопками «Записаться» в строках прайса. */
.price-nav__arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  color: #0A1464;
  background-color: #fff;
  border: #E5E9F0 1px solid;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.2s linear, color 0.2s linear;
  position: relative;
  z-index: 1;
  /* размеры фиксируем и по ширине, и по высоте: без flex-basis кнопка
     сжималась соседями и из круга превращалась в скруглённый прямоугольник */
  flex: 0 0 3.2rem;
  padding: 0;
  box-sizing: border-box;
  border-radius: 0.8rem;
}

/* Заголовок раздела над карточкой: крупный и жирный, брендовым цветом.
   Он идёт ссылкой на страницу услуг, а ссылки шаблона задают свой шрифт
   и зелёный цвет — поэтому правило дублируем на вложенной ссылке. */
.price-section > .title-block {
  margin-bottom: 1.6rem;
}
.price-section .title a:hover {
  color: #387F30;
}

/* Наведение на строку: подложка светлеет, название уходит в зелёный,
   кнопка записи заливается брендовым навy — как в образце. */
.price-row {
  transition: background-color 0.2s linear;
}
.price-row:hover {
  background-color: #F7F9FB;
}
.price-row:hover .price-row__main {
  color: #387F30;
}
.price-row__main {
  font-size: 1.4rem;
  line-height: 2rem;
  color: #0A1464;
  margin: 0;
  transition: color 0.2s linear;
}
.price-row:hover .price-row__code {
  color: #6B7287;
}
.price-row:hover .price-row__btn, .price-row__btn:hover {
  color: #fff;
  background-color: #0A1464;
  border-color: #0A1464;
}
.price-row__btn {
  transition: color 0.2s linear, background-color 0.2s linear, border-color 0.2s linear;
}

/* Разделитель над «Показать ещё» — ровно 1px: у строки уже есть нижняя
   граница, и собственная верхняя граница кнопки давала вторую линию.
   Убрать границу у строки нельзя — перед кнопкой стоит не последняя строка
   группы, а последняя видимая, и CSS её не выбирает. */
.price-more {
  border-top: none;
}

/* Заголовок раздела — брендовый зелёный. Берём тёмный оттенок #3F9236:
   светлый #4BAA41 на белом даёт 2.9:1 и для крупного текста впритык. */
.price-section .title,
.price-section .title a {
  font-weight: 700;
  font-size: 2.8rem;
  line-height: 3.6rem;
  color: #0A1464;
  color: #387F30;
}

/* Примечание под прайсом — светло-зелёная плашка с иконкой-восклицанием.
   Первая фраза выделена начертанием: это суть предупреждения. */
.price-note {
  font-size: 1.3rem;
  line-height: 1.9rem;
  color: #6B7287;
  margin: 0 0 5.6rem;
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  background-color: #F1F8F0;
  border-left: #4BAA41 0.3rem solid;
  border-radius: 0.4rem 1rem 1rem 0.4rem;
  padding: 1.8rem 2.4rem;
  margin: 3.2rem 0 5.6rem;
}
.price-note__icon {
  flex-shrink: 0;
  display: flex;
  color: #387F30;
  margin-top: 0.1rem;
}
.price-note__icon svg {
  width: 2rem;
  height: 2rem;
}
.price-note__text {
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #2E3550;
  margin: 0;
}
.price-note__text strong {
  font-weight: 600;
  color: #0A1464;
}
@media (max-width: 1199px) {
  .price-note {
    padding: 1.4rem 1.6rem;
    gap: 1rem;
    margin: 2.4rem 0 4rem;
  }
}

/* Лупа — того же размера и цвета, что иконка в примечании: 2rem, #3F9236. */
.price-search__icon {
  display: flex;
  flex-shrink: 0;
  color: #A7AEC0;
  color: #6B7287;
  color: #387F30;
}
.price-search__icon svg {
  width: 1.8rem;
  height: 1.8rem;
  width: 2rem;
  height: 2rem;
}

/* Компактная шапка страницы: у шаблонного .hero отступ снизу 9.5rem плюс
   5rem у обёртки — это поля под баннер с картинкой. Там, где под заголовком
   идёт сразу контент, между ними получалось 116px пустоты. */
.hero--compact {
  margin-bottom: 2.4rem;
}
.hero--compact .hero__wrapper {
  margin-bottom: 0;
}

/* Затемнение по краям ленты разделов: 12rem на телефоне закрывали половину
   строки, и текст вкладок было не прочитать. В адаптиве оставляем узкую кромку. */
@media (max-width: 1199px) {
  .price-nav-wrap::before,
  .price-nav-wrap::after {
    width: 2.4rem;
    /* белым становится только у самого края — под кромкой текст лишь
       чуть приглушён, а не стёрт */
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
  }
  .price-nav-wrap::before {
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
  }
  /* Пункты не начинаются под кромкой: у ленты поля в её ширину, и при
     прокрутке к пункту (стрелки, центрирование) он встаёт с тем же зазором. */
  .price-nav {
    padding: 0 2.4rem;
    scroll-padding: 0 2.4rem;
    /* лента останавливается на начале пункта: у стрелки не торчат
       обрывки соседних вкладок (стрелки листают так же, см. luxarNavArrows) */
    scroll-snap-type: x mandatory;
  }
  .price-nav__item {
    scroll-snap-align: start;
  }
}
/* ========================== Страница «Контакты» ========================== */
/* Карточки контактов и карта. Форма записи ниже — тот же блок, что на главной,
   вынесен в _ref/parts/callback.html и подставляется меткой. */
.contacts-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6rem;
  margin-bottom: 3.2rem;
}
.contacts-card {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  background-color: #F7F9FB;
  border: #E5E9F0 1px solid;
  border-radius: 1.2rem;
  padding: 2.4rem;
}
.contacts-card__value {
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: #0A1464;
  margin: 0;
}
.contacts-card__value a {
  color: inherit;
  transition: color 0.2s linear;
}
.contacts-card__value a:hover {
  color: #387F30;
}
.contacts-map {
  height: 42rem;
  border-radius: 1.2rem;
  overflow: hidden;
  border: #E5E9F0 1px solid;
}
.contacts-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}
@media (max-width: 1200px) {
  .contacts-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .contacts-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
    margin-bottom: 2.4rem;
  }
  .contacts-card {
    padding: 1.6rem;
  }
  .contacts-map {
    height: 32rem;
  }
}

/* Карточка раздела, скрытая поиском или фильтром. */
.services__item.is-filtered {
  display: none;
}

/* Подзаголовок страницы: между h1 и вводным абзацем. Крупнее текста, но
   заметно тише заголовка — иначе на странице спорят два заголовка. */
.hero-subtitle {
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.6rem;
  color: #0A1464;
  margin: 1.2rem 0 1.2rem;
}
@media (max-width: 1199px) {
  .hero-subtitle {
    font-size: 1.8rem;
    line-height: 2.4rem;
  }
}

/* ====================== Текстовая страница с боковым меню ================= */
/* Один шаблон на «О клинике», лицензии, реквизиты, вакансии и прочие
   информационные страницы: колонка текста и навигация по разделу справа. */
.text-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30rem;
  gap: 4rem;
  margin-bottom: 5.6rem;
}
.text-page__content p {
  font-size: 1.5rem;
  line-height: 2.4rem;
  color: #4A5270;
  margin: 0 0 1.6rem;
}
.text-page__content h2 {
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 3rem;
  color: #0A1464;
  margin: 3.2rem 0 1.6rem;
}
.text-page__content h2:first-child {
  margin-top: 0;
}
.text-page__content ul {
  list-style: none;
  margin: 0 0 2.4rem;
  padding: 0;
}
.text-page__content ul li {
  position: relative;
  font-size: 1.5rem;
  line-height: 2.4rem;
  color: #4A5270;
  padding-left: 2.6rem;
  margin-bottom: 0.8rem;
}

/* маркер списка — зелёная точка вместо стандартной */
.text-page__content ul li::before {
  content: "";
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  background-color: #4BAA41;
  border-radius: 50%;
  left: 0.8rem;
  top: 0.9rem;
}
.text-page__content a {
  color: #387F30;
}
.text-page__content a:hover {
  text-decoration: underline;
}
.text-page__content img {
  max-width: 100%;
  height: auto;
  border-radius: 1.2rem;
  margin: 0 0 2.4rem;
}
.text-page__aside {
  align-self: start;
  position: sticky;
  top: 13rem;
  background-color: #F7F9FB;
  border: rgba(10, 20, 100, 0.08) 1px solid;
  border-radius: 1.2rem;
  padding: 2.4rem;
}
.text-page__aside-title {
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6B7287;
  margin: 0 0 1.6rem;
}
.text-page__menu {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.text-page__menu-item {
  font-size: 1.4rem;
  line-height: 2rem;
  color: #4A5270;
  transition: color 0.2s linear;
}
.text-page__menu-item:hover {
  color: #387F30;
}
.text-page__menu-item.is-current {
  font-weight: 600;
  color: #0A1464;
}

@media (max-width: 1199px) {
  .text-page {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
    margin-bottom: 4rem;
  }
  /* на узком экране навигация уходит под текст и перестаёт липнуть */
  .text-page__aside {
    position: static;
    order: 2;
    padding: 1.6rem;
  }
  .text-page__content h2 {
    font-size: 1.8rem;
    line-height: 2.4rem;
    margin-top: 2.4rem;
  }
}
.reviews-top__rating {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

/* Длинный отзыв свёрнут до шести строк, остальное — под кнопкой. */
.reviews-page__item--long .reviews__item-text {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.reviews-page__item--long.is-open .reviews__item-text {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.reviews-page__item.is-open .reviews-page__more .menu__caret--more {
  transform: rotate(-135deg) translate(-0.1rem, -0.1rem);
  color: #387F30;
  opacity: 1;
}
@media (max-width: 1200px) {
  .reviews-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .reviews-page__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
  }
  .reviews-top {
    padding: 1.6rem;
  }
  .reviews-top .btn {
    width: 100%;
  }
}

/* Фотогалерея — обложка альбома */
/* ========================= Фотогалерея =================================== */
/* Карточка альбома: обложка со счётчиком снимков в углу. */
.gallery__item .articles__item-image {
  height: 32rem;
  position: relative;
  height: 30rem;
}
.gallery__item-count {
  position: absolute;
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: #0A1464;
  background-color: rgba(255, 255, 255, 0.92);
  border-radius: 10rem;
  padding: 0.6rem 1.2rem;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 1;
}

/* Сетка снимков альбома. Пропорция задана, чтобы разноформатные кадры
   не рвали ряды: вертикальные и горизонтальные приводятся к одному окну. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6rem;
}
.gallery-grid__item {
  display: block;
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 1.2rem;
  overflow: hidden;
  background-color: #F7F9FB;
}
.gallery-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-out;
}
.gallery-grid__item:hover img {
  transform: scale(1.05);
}
@media (max-width: 1200px) {
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  .gallery__item .articles__item-image {
    height: 20rem;
  }
}

/* Галерея на «Контактах»: карточки той же высоты, что фото входа и карта
   (.contacts-media — 42rem, на телефоне 28rem). */
.gallery--contacts .gallery__item .articles__item-image {
  height: 42rem;
}
@media (max-width: 1199px) {
  .gallery--contacts .gallery__item .articles__item-image {
    height: 28rem;
  }
}

/* ===================== Статьи и акции: списки ============================ */
.blog__item .articles__item-image,
.sales__item .articles__item-image {
  position: relative;
  height: 22rem;
}

/* Статьи на главной идут по две в ряд, рядом с такой же парой фотогалереи —
   а фото было на 8rem ниже, и ряд смотрелся мельче соседнего. Равняем на
   галерею. Правило только для ряда из двух: в списке /articles/ карточки
   по три в ряд и узкие, там прежняя высота на месте. */
@media (min-width: 1200px) {
  .cards--2 .blog__item .articles__item-image {
    height: 30rem;
  }
}
/* стикер со скидкой поверх обложки */
.posts__badge {
  position: absolute;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #fff;
  background-color: #3B8633;
  border-radius: 0.8rem;
  padding: 0.6rem 1.2rem;
  left: 1.2rem;
  top: 1.2rem;
  z-index: 1;
}
.posts__date {
  display: block;
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: #6B7287;
  margin-bottom: 0.8rem;
}
.posts__text {
  font-size: 1.4rem;
  line-height: 2rem;
  color: #4A5270;
  margin: 0.8rem 0 0;
}

@media (max-width: 768px) {
  .blog__item .articles__item-image,
  .sales__item .articles__item-image {
    height: 18rem;
  }
}
/* Пустой раздел: на боевом сайте содержимого нет, и вместо выдуманного текста
   страница честно говорит, что ждёт наполнения. */
.text-page__empty {
  font-size: 1.5rem;
  line-height: 2.4rem;
  color: #6B7287;
  background-color: #F7F9FB;
  border: rgba(10, 20, 100, 0.08) 1px solid;
  border-radius: 1.2rem;
  padding: 2.4rem;
  margin: 0;
}

/* ===================== Служебные страницы =============================== */
.error-page {
  text-align: center;
  padding: 6rem 0 8rem;
}
.error-page__code {
  font-weight: 700;
  font-size: 9rem;
  line-height: 1;
  color: #E5E9F0;
  margin: 0 0 1.6rem;
}
.error-page__title {
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 4rem;
  color: #0A1464;
  margin: 0 0 1.2rem;
}
.error-page__text {
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: #4A5270;
  max-width: 52rem;
  margin: 0 auto 3.2rem;
}
.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
  margin-bottom: 4rem;
}
.error-page__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem 2.4rem;
}
.error-page__links a {
  font-size: 1.4rem;
  line-height: 2rem;
  color: #387F30;
}
.error-page__links a:hover {
  text-decoration: underline;
}

.sitemap__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.2rem;
  margin-bottom: 5.6rem;
}
.sitemap__col-title {
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.4rem;
  color: #0A1464;
  margin: 0 0 1.2rem;
}
.sitemap__list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sitemap__list a {
  font-size: 1.4rem;
  line-height: 2rem;
  color: #4A5270;
}
.sitemap__list a:hover {
  color: #387F30;
}

@media (max-width: 1199px) {
  .sitemap__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.4rem;
  }
  .error-page__code {
    font-size: 6rem;
  }
  .error-page__title {
    font-size: 2.4rem;
    line-height: 3rem;
  }
}
@media (max-width: 576px) {
  .sitemap__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 1199px) {
  .orgs {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
  }
  .orgs__item {
    padding: 1.4rem 1.6rem;
    gap: 1.4rem;
  }
  .orgs__logo {
    width: 7rem;
    height: 4.8rem;
  }
}
/* ===================== Список надзорных органов ========================== */
/* Страница «Надзорные органы» — не текст, а карточки организаций с логотипами:
   название лежало в атрибуте title ссылки, логотип — в data-bg. */
/* Надзорные органы: логотип и название ссылкой на страницу организации. */
.orgs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}
.orgs__item {
  display: flex;
  align-items: center;
  gap: 2rem;
  background-color: #fff;
  border: #E5E9F0 1px solid;
  border-radius: 1.2rem;
  padding: 2rem 2.4rem;
  transition: border-color 0.2s linear, background-color 0.2s linear;
  gap: 1.6rem;
  padding: 1.6rem 2rem;
  transition: border-color 0.2s linear;
}
.orgs__item:hover {
  background-color: #F7F9FB;
  border-color: rgba(75, 170, 65, 0.4);
  border-color: rgba(75, 170, 65, 0.5);
}
.orgs__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9rem;
  height: 6rem;
  width: 7.2rem;
  height: 5.6rem;
}
.orgs__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.orgs__name {
  font-size: 1.4rem;
  line-height: 2rem;
  color: #0A1464;
  transition: color 0.2s linear;
}
.orgs__item:hover .orgs__name {
  color: #387F30;
}
@media (max-width: 768px) {
  .orgs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Страница организации: логотип в рамке, контакты из PREVIEW_TEXT, ссылки. */
.org-page__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20rem;
  height: 12rem;
  border: #E5E9F0 1px solid;
  border-radius: 1.2rem;
  padding: 1.6rem;
  box-sizing: border-box;
  margin-bottom: 2.4rem;
  background-color: #fff;
}
.org-page__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.org-page__contacts, .org-page__text {
  font-size: 1.5rem;
  line-height: 2.4rem;
  color: #0A1464;
  margin-bottom: 2rem;
}
.org-page__links {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  font-size: 1.5rem;
  line-height: 2.4rem;
  color: #0A1464;
}
.org-page__docs li {
  margin-bottom: 0.8rem;
}
.org-page__doc-size {
  font-size: 1.3rem;
  color: #7A81A5;
  margin-left: 0.6rem;
}
.org-page__back {
  margin-top: 3.2rem;
}
.org-page__back .btn {
  display: inline-flex;
}

/* Юридические документы: текст во всю ширину, без бокового меню. */
.text-page--wide {
  grid-template-columns: minmax(0, 1fr);
  max-width: 96rem;
}
.text-page--wide .text-page__content h2 {
  font-size: 2rem;
  line-height: 2.8rem;
}

/* шкала звёзд: серая подложка и залитая часть поверх */
/* Звёзды сводки: в файлах лежит сразу пять звёзд (viewBox 0 0 89 19), поэтому
   картинку берём целиком, а не повторяем как плитку из одной звезды —
   при repeat-x пять звёзд сминались в 2.08rem и полоса выглядела пустой. */
.reviews-top__stars {
  position: relative;
  display: block;
  width: 10.4rem;
  height: 1.8rem;
  background: url(/local/templates/v1/css/../images/svg/stars.svg) repeat-x left center/2.08rem 1.8rem;
  width: 8.9rem;
  height: 1.9rem;
  background: url(/local/templates/v1/css/../images/svg/stars.svg) no-repeat left center;
  background-size: 8.9rem 1.9rem;
}
.reviews-top__stars span {
  position: absolute;
  display: block;
  height: 100%;
  background: url(/local/templates/v1/css/../images/svg/stars-active.svg) repeat-x left center/2.08rem 1.8rem;
  top: 0;
  left: 0;
  background: url(/local/templates/v1/css/../images/svg/stars-active.svg) no-repeat left center;
  background-size: 8.9rem 1.9rem;
}

/* Контакты: фото клиники и карта рядом, одинакового размера. */
.contacts-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.4rem;
  margin-bottom: 5.6rem;
}
.contacts-media__photo, .contacts-media__map {
  height: 42rem;
  border-radius: 1.2rem;
  overflow: hidden;
  border: #E5E9F0 1px solid;
}
.contacts-media__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contacts-media__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}
@media (max-width: 1199px) {
  .contacts-media {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
    margin-bottom: 4rem;
  }
  .contacts-media__photo, .contacts-media__map {
    height: 28rem;
  }
}

/* Карточка врача, скрытая фильтром. */
.specialists__item.is-filtered {
  display: none;
}

/* Блок контактов — не сетка. Класс .section с главной раскладывает секцию в
   grid с явными ячейками для заголовка и плиток; карточки контактов и пара
   «фото + карта» попадали в авторазмещение и вставали в две колонки по
   половине ширины — адрес сжимался до 143px и рассыпался переносами. */
@media (min-width: 1200px) {
  .contacts-page {
    display: block;
  }
}
@media (max-width: 1199px) {
  .contacts-socials {
    padding: 1.6rem;
    margin-bottom: 1.6rem;
  }
}
/* Соцсети на странице контактов. Иконки те же, что в шапке, — блок
   подставляется сборщиком из общего куска, чтобы ссылки не разошлись. */
/* Соцсети оформлены как промо-плашка: тёмная подложка, графика справа,
   светлые иконки. Значения графики те же, что у промо после правки —
   фон вписан по высоте, чтобы пиксели не тянулись. */
.contacts-socials {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem 2.4rem;
  background-color: #F7F9FB;
  border: rgba(10, 20, 100, 0.08) 1px solid;
  border-radius: 1.2rem;
  padding: 2rem 2.4rem;
  margin-bottom: 2.4rem;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  justify-content: flex-start;
  min-height: 6.6rem;
  background-color: #0A1464;
  border: none;
  padding: 0.8rem 2.4rem;
}

/* подпись и иконки поверх графики */
.contacts-socials__title, .contacts-socials__title {
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #fff;
}
@media (max-width: 1199px) {
  .contacts-socials {
    min-height: 0;
    padding: 1.6rem;
  }
  .contacts-socials::after {
    content: none;
  }
}

/* Край картинки попадал внутрь плашки и читался прямым стыком: графика лежала
   шириной 46rem со сдвигом 30rem от правого края. Теперь полоса прижата к краю,
   заполняется по cover (границы файла уходят за кадр), а слева гаснет маской —
   стыка не видно. Иконки крупнее: на тёмной подложке мелкие теряются. */
/* Узор в плашке соцсетей читался бледной полосой: при cover из кадра 585×439
   в полосу высотой 66px попадала лишь тонкая срединная лента. Увеличиваем
   масштаб — в кадр входит меньше ячеек, зато крупных, — и поднимаем яркость. */
.contacts-socials::after {
  content: "";
  position: absolute;
  width: 46rem;
  height: 100%;
  background: url(/local/templates/v1/css/../images/decor-plexus.webp) no-repeat right center;
  background-size: auto 260%;
  opacity: 0.75;
  right: 30rem;
  top: 0;
  pointer-events: none;
  width: 64rem;
  right: 0;
  background-size: cover;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  width: 72rem;
  background-size: auto 320%;
  background-position: right 35%;
  opacity: 0.8;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}

/* ---- Новая графика: широкий фон подвала и узор для плашек --------------- */
/* Подвал: один широкий фон 3840×692 вместо двух пятен по углам. Кадр уже
   содержит плексус по краям и пустую середину, поэтому пятна отключаем —
   иначе узор наложился бы сам на себя. Цвет под картинкой оставляем: он
   виден, пока фон грузится, и подстраховывает на очень широких экранах. */
.footer {
  background-image: url(/local/templates/v1/css/../images/footer-bg.webp);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
.footer::before, .footer::after {
  content: none;
}

/* Плашки промо и соцсетей получают присланный узор. Он ниже прежнего кадра
   (160px против 439px), поэтому масштаб задаём по высоте — при 260% пиксели
   рисуются почти в натуральном размере и линии остаются тонкими. */
.price-promo::after,
.contacts-socials::after {
  width: 56rem;
  height: 100%;
  right: 0;
  top: 0;
  transform: none;
  background: url(/local/templates/v1/css/../images/decor-appointment.webp) no-repeat right center;
  background-size: auto 260%;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}

/* у промо справа стоит кнопка — узор к ней не прижимаем */
.price-promo::after {
  content: "";
  position: absolute;
  width: 39.1rem;
  height: 34.5rem;
  background: url(/local/templates/v1/css/../images/decor-plexus.webp) no-repeat center/contain;
  opacity: 0.6;
  right: 22rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  width: 46rem;
  height: 100%;
  background: url(/local/templates/v1/css/../images/decor-plexus.webp) no-repeat right center;
  background-size: auto 260%;
  opacity: 0.75;
  right: 30rem;
  top: 0;
  transform: none;
  right: 26rem;
}

@media (max-width: 1199px) {
  .footer {
    background-position: center top;
  }
  .price-promo::after,
  .contacts-socials::after {
    content: none;
  }
}
/* Название альбома и счётчик снимков — в одной строке. Раньше счётчик лежал
   поверх фотографии и на карточках разной высоты вставал вразнобой. */
.gallery__item-head {
  display: flex;
  /* шаблонный .articles__item__content — колонка, поэтому строку задаём явно:
     иначе align-items: center центрировал название и счётчик по горизонтали */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
}
.gallery__item-head .articles__item-title {
  margin: 0;
}
.gallery__item-count {
  position: static;
  flex-shrink: 0;
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #387F30;
  background-color: #F1F8F0;
  border: rgba(75, 170, 65, 0.35) 1px solid;
  border-radius: 10rem;
  padding: 0.4rem 1.2rem;
}

.contacts-socials__title {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: #0A1464;
  margin: 0;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
}
.contacts-card__icon svg {
  width: 2rem;
  height: 2rem;
  width: 2.4rem;
  height: 2.4rem;
}

/* Иконки карточек контактов: чуть крупнее и ближе к углу. Сдвиг отрицательными
   отступами — так подпись и значение остаются на своих местах, смещается
   только иконка. */
/* Иконка карточки — ровно 15px от левого и верхнего края. Внутренний отступ
   карточки 2.4rem, поэтому компенсируем 0.9rem в обе стороны: 24 − 9 = 15. */
/* Ровно 15px от видимого края: рамка карточки 1px входит во внешний край,
   поэтому компенсируем 1rem, а не 0.9rem (1 + 24 − 10 = 15).
   Текстовый блок поднимаем на столько же — подпись встаёт по верху иконки. */
.contacts-card__icon {
  flex-shrink: 0;
  display: flex;
  color: #387F30;
  margin-top: 0.2rem;
  margin: -0.8rem 0 0 -0.6rem;
  margin: -0.9rem 0 0 -0.9rem;
  margin: -1rem 0 0 -1rem;
}
.contacts-card__body {
  margin-top: -1rem;
}

/* «без выходных» — зелёным: это выгода для пациента, а не часть расписания. */
.contacts-card__accent {
  color: #387F30;
}

/* Подпись центрируется по иконке: даём ей высоту иконки и выравниваем текст
   внутри. Так центры совпадают независимо от метрик шрифта — подгонять
   отступ на глаз не нужно. */
.contacts-card__label {
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: #6B7287;
  margin: 0 0 0.6rem;
  display: flex;
  align-items: center;
  min-height: 2.4rem;
  margin-bottom: 0.2rem;
}

/* Ряд иконок отодвинут от подписи — так он не читается её продолжением. */
.contacts-socials__list {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  gap: 4.4rem;
  margin-left: 8rem;
  /* На телефоне подпись стоит строкой выше, ряд иконок — во всю ширину:
     десктопный отступ 8rem и шаг 4.4rem выталкивали последнюю иконка
     (Одноклассники) за край плашки. */
}
@media (max-width: 1199px) {
  .contacts-socials__list {
    width: 100%;
    margin-left: 0;
    gap: 0;
    justify-content: space-between;
  }
}

.reviews-top::after {
  content: "";
  position: absolute;
  width: 56rem;
  height: 100%;
  right: 22rem;
  top: 0;
  background: url(/local/templates/v1/css/../images/decor-appointment.webp) no-repeat right center;
  background-size: auto 260%;
  opacity: 0.9;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}

/* содержимое поверх узора */
.reviews-top__rating, .reviews-top > .btn {
  position: relative;
  z-index: 1;
}
.reviews-top__score {
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 3.6rem;
  color: #0A1464;
  color: #fff;
}
.reviews-top__count {
  font-size: 1.4rem;
  line-height: 2rem;
  color: #6B7287;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
}
@media (max-width: 1199px) {
  .reviews-top {
    min-height: 0;
    padding: 1.6rem;
  }
  .reviews-top::after {
    content: none;
  }
}

/* Карточки отзывов в ряду — одной высоты. В сетке стояло align-items: start,
   поэтому короткий отзыв оставлял пустоту под собой. Растягиваем ячейку,
   карточку тянем на всю высоту, а блок автора прижимаем к низу — иначе он
   болтался бы сразу под текстом. */
.reviews-page__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 2.4rem;
  align-items: stretch;
  /* Три колонки держались до самого телефона: карточка ужималась до ~100px,
     и каждое слово переносилось. На планшете две колонки, на телефоне одна —
     карточка становится широкой, текст идёт строками во всю ширину. */
}
@media (max-width: 1199px) {
  .reviews-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
  }
}
@media (max-width: 768px) {
  .reviews-page__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* На главной эти карточки едут слайдером и имеют фиксированную ширину —
   в сетке ширину отпускаем, высоту задаёт содержимое. */
.reviews-page__item {
  width: auto;
  height: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.reviews-page__item .reviews__item-author {
  margin-top: auto;
}

/* ========================= Страница отзывов ============================== */
/* Сводка отзывов оформлена как плашка соцсетей: тёмная подложка, узор справа,
   светлый текст. Значения графики те же — фон вписан по высоте, не растянут. */
/* Кнопка в сводке отзывов: справа отступ был 2.4rem против 0.9rem сверху
   и снизу. Правое поле плашки подгоняем под вертикальное — вокруг кнопки
   получается равный зазор, а левое поле под текстом остаётся прежним. */
.reviews-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem 2.4rem;
  background-color: #F7F9FB;
  border: rgba(10, 20, 100, 0.08) 1px solid;
  border-radius: 1.2rem;
  padding: 2rem 2.4rem;
  margin-bottom: 3.2rem;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 6.6rem;
  background-color: #0A1464;
  border: none;
  padding: 0.8rem 2.4rem;
  padding: 0.8rem 0.9rem 0.8rem 2.4rem;
}

/* На телефоне сводка складывается в столбик, и десктопные поля (2.4rem слева
   под текст, 0.9rem справа под кнопку) давали кнопке разные отступы по краям.
   Поля делаем одинаковыми, кнопку — во всю ширину. */
@media (max-width: 768px) {
  .reviews-top {
    padding: 1.6rem;
    gap: 1.2rem;
  }
  .reviews-top .btn {
    width: 100%;
  }
}
/* Сетка отзывов — не в колонке. Класс .section с главной делает секцию grid
   с явными ячейками под заголовок и плитки; сетка карточек попадала в первую
   колонку и была на 32px (шаг сетки) уже сводки. Третий случай той же
   ловушки после прайса и контактов. */
@media (min-width: 1200px) {
  .reviews-page,
  .sitemap,
  .specialists--page,
  .contacts-page {
    display: block;
  }
}
/* Минимальный зазор от текста до полосы. Подпись прижата к низу карточки
   (margin-top: auto), поэтому у коротких отзывов над линией остаётся много
   воздуха, а у длинных она вставала вплотную к последней строке — замер дал
   разброс от 0 до 152px. Отбивку задаём самому тексту: она работает и с
   кнопкой, и без неё. У кнопки свой отступ сверху снимаем, иначе сложится вдвое. */
.reviews-page__item .reviews__item-text {
  margin-bottom: 1.6rem;
}

/* Количество услуг — в конец названия раздела, как в выпадающем меню.
   Шаблон делает содержимое карточки flex со space-between: у разделов с
   коротким списком свободное место уходило в зазоры (замер: 76px под
   названием против 20px у остальных). Пакуем всё к верху и подтягиваем
   перечень. Заголовок — блочный, без обрезки в две строки: иначе счётчик
   в конце длинного названия («Капельницы. Инфузионная IV-терапия») обрезался
   бы вместе со второй строкой. */
.services__item .articles__item__content {
  justify-content: space-between;
  gap: 1.6rem;
  justify-content: flex-start;
}
.services__item-head {
  display: block;
  height: auto;
  margin-bottom: 0;
}
.services__item .services__item-list {
  margin-top: 1.6rem;
}

/* Название раздела снова синее и крупное: обёртка <span> вокруг него попала
   под шаблонное .articles__item__content span (зелёный, 600, 1.4rem) —
   заголовок позеленел. font/color: inherit возвращают его к стилю ссылки
   и заодно сохраняют ховер, если он появится. */
.services__item .services__item-name {
  font: inherit;
  color: #387F30;
}

/* Перечень подтянут: у содержимого карточки уже есть gap 1.6rem, а сверху
   лежал ещё margin — вместе выходило 32px. Оставляем только gap. */
.services__item .services__item-list,
.services__item .services__item-more {
  margin-top: 0;
}

/* «Ещё N» в карточке раздела — кнопка разворота, как «Еще N» в выпадающем
   меню: остальные услуги лежат в разметке скрытыми. Пунктир — только под
   подписью, шеврон остаётся свободным; на развороте он переворачивается
   и зеленеет, как в меню. */
.services__item-hidden {
  display: none;
}
.services__item.is-open .services__item-hidden {
  display: block;
}
.services__item .services__item-more {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  border-bottom: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: #6B7287;
}
.services__item-more-text {
  border-bottom: currentColor 1px dashed;
}
.services__item .services__item-more .menu__caret--more {
  margin-left: 0;
  opacity: 0.8;
}
.services__item.is-open .services__item-more .menu__caret--more {
  transform: rotate(-135deg) translate(-0.1rem, -0.1rem);
  color: #387F30;
  opacity: 1;
}

/* при поиске карточка раскрыта целиком: найденная услуга могла оказаться
   в скрытой части, а кнопка «Ещё N» в этот момент врала бы о остатке */
.services__item.is-search .services__item-hidden {
  display: block;
}
.services__item.is-search .services__item-more {
  display: none;
}

/* Секция услуг на своей странице — не сетка. Класс .services пришёл с главной
   вместе с раскладкой под заголовочный блок: здесь его нет, и первый ряд
   сетки (52px) пустовал, отодвигая карточки от фильтра. Четвёртый случай той
   же ловушки — на главной раскладка нужна, поэтому правим только страницу. */
@media (min-width: 1200px) {
  .services--page {
    display: block;
  }
}
/* Счётчик — тем же синим, отличается размером и насыщенностью. */
/* Счётчик и «Ещё N» — нежирные и мельче названия. Оба элемента попадают под
   шаблонное .articles__item__content span (600, 1.4rem), поэтому вес и размер
   задаём явно; у подписи кнопки — ещё и на самом span, иначе шаблон перебьёт. */
.services__item .services__item-count {
  display: inline;
  margin: 0 0 0 0.8rem;
  white-space: nowrap;
  color: #0A1464;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: inherit;
  font-weight: 400;
  font-size: 1.3rem;
}
.services__item .services__item-more, .services__item .services__item-more-text {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.6rem;
}

/* Третий уровень в карточке раздела — как в выпадающем меню: услуга со своими
   подуслугами получает шеврон, список свёрнут и раскрывается по клику.
   Значения повторяют меню (отступ 1.4rem, шаг 0.2rem, подуслуга 1.2rem),
   чтобы страница и меню не расходились. */
.services__item-group-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.services__item-sub-toggle {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  color: #6B7287;
  cursor: pointer;
  transition: color 0.2s linear;
}
.services__item-sub-toggle .menu__caret--more {
  /* второй уровень: шеврон мельче и бледнее, чем у кнопки «Ещё N» */
  width: 0.4rem;
  height: 0.4rem;
  margin-left: 0;
  opacity: 0.5;
}
.services__item-sublist {
  display: none;
  flex-direction: column;
  gap: 0.2rem;
  list-style: none;
  margin: 0.2rem 0 0.4rem;
  padding: 0 0 0 1.4rem;
}
.services__item-group.is-open > .services__item-sublist {
  display: flex;
}
.services__item-group.is-open > .services__item-group-head .menu__caret--more {
  transform: rotate(-135deg) translate(-0.1rem, -0.1rem);
  color: #387F30;
  opacity: 1;
}
.services__item-sublist a {
  display: block;
  /* на ступень мельче перечня раздела — иерархия та же, что была */
  font-size: 1.4rem;
  line-height: 2rem;
  color: #6B7287;
  transition: color 0.2s linear;
}
.services__item-sublist a:hover {
  color: #387F30;
}

/* Подзаголовочный абзац внутренних страниц — 14px. Шаблонные 16px оставляем
   баннерам главной: там текст лежит в .hero__banner-content поверх фотографии
   и работает как часть слайда, а не как вводный абзац страницы. */
.hero__content .hero-description {
  font-size: 1.4rem;
  line-height: 2.2rem;
}

/* Хлебные крошки — 13px на всех страницах. Перечисляем те же три селектора,
   что и шаблон (a, span, i): размер задан на них, а не на .breadcrumb__item,
   поэтому правило на родителе не подействовало бы. */
.breadcrumb__item a,
.breadcrumb__item span,
.breadcrumb__item i {
  font-size: 1.3rem;
}

/* Соцсети в контактах: подсветка как в подвале — цвета зашиты в сами иконки,
   CSS их не перекрашивает. Здесь только размер, шаг и подпись. */
/* Иконки соцсетей крупнее и с более широким шагом. */
/* Соцсети в плашке контактов: чуть мельче и ярче. Базовый цвет зашит в сами
   иконки (#545DA5) — на тёмно-синей подложке он почти сливается, поэтому
   перекрашиваем только состояние покоя. Ховер не трогаем: он рисуется вторым
   слоем path-hover с брендовым цветом, как в подвале. */
.contacts-socials .socials__item svg {
  width: 4rem;
  height: 4rem;
  width: 4.8rem;
  height: 4.8rem;
  width: 4.2rem;
  height: 4.2rem;
}
.contacts-socials .socials__item svg .path-initial {
  fill: rgba(255, 255, 255, 0.85);
  transition: fill 0.2s linear;
}

/* Постраничная навигация (шаблон system.pagenavigation «more»): кнопка
   «Показать ещё» во всю ширину сетки, под ней номера страниц. */
.reviews-page__pager {
  margin-top: 3.2rem;
}

.pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.pager__more {
  width: 100%;
  max-width: 36rem;
}
.pager__left {
  font-weight: 400;
  opacity: 0.7;
}
.pager__pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pager__page, .pager__gap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  height: 4rem;
  padding: 0 0.8rem;
  box-sizing: border-box;
  border-radius: 0.8rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: #0A1464;
}
.pager__page {
  border: rgba(10, 20, 100, 0.12) 1px solid;
  text-decoration: none;
  transition: background-color 0.2s linear, color 0.2s linear;
}
.pager__page:hover {
  background-color: #F7F9FB;
}
.pager__page.is-current {
  color: #fff;
  background-color: #0A1464;
  border-color: #0A1464;
}
.pager__gap {
  min-width: 2rem;
  padding: 0;
  color: rgba(10, 20, 100, 0.5);
}
.pager.is-loading .pager__more {
  opacity: 0.6;
  pointer-events: none;
}

/* Отбивка навигации от сетки карточек в остальных разделах. Секция со
   списком раздела — не сетка главной: иначе навигация попадает в ячейку
   заголовка над карточками (та же ловушка .section, что у отзывов). */
@media (min-width: 1200px) {
  .section:has(> .js-more-list) {
    display: block;
  }
}
.blog__pager,
.gallery__pager,
.specialists__pager {
  margin-top: 3.2rem;
}

/* ================= Отзывы: оценки на внешних площадках ==================== */
/* Три площадки в ряд. Оформлены карточками, как контакты: на боевом сайте это
   просто строка на белом, но в нашем макете такие наборы данных везде живут
   в карточках со светлой рамкой. Логотипы набраны текстом в фирменных цветах —
   файлов логотипов нет; при их появлении .plat-rating__logo меняется на <img>. */
.plat-rating {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
  margin-top: 2.4rem;
  margin-bottom: 3.2rem;
}
.plat-rating__logo {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2rem;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.plat-rating__score {
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 3rem;
  color: #387F30;
  margin-left: auto;
}
.plat-rating__meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* полоса звёзд — тот же приём, что в сводке: серая подложка и золотая заливка
   по доле оценки, поэтому 4,9 отличается от ровной пятёрки */
.plat-rating__stars {
  position: relative;
  display: block;
  width: 8.9rem;
  height: 1.9rem;
  background: url(/local/templates/v1/css/../images/svg/stars.svg) no-repeat left center;
  background-size: 8.9rem 1.9rem;
}
.plat-rating__stars span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  background: url(/local/templates/v1/css/../images/svg/stars-active.svg) no-repeat left center;
  background-size: 8.9rem 1.9rem;
}
.plat-rating__count {
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #6B7287;
}
@media (max-width: 1199px) {
  .plat-rating {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
    margin-top: 1.6rem;
  }
  .plat-rating__item {
    padding: 1.4rem 1.6rem;
  }
}
.plat-rating {
  /* На телефоне логотип, оценка и звёзды в одну строку не помещались — звёзды
     уезжали за край карточки. Оценка остаётся у правого края первой строки,
     звёзды и число отзывов переносятся второй строкой во всю ширину. */
}
@media (max-width: 576px) {
  .plat-rating__item {
    flex-wrap: wrap;
    row-gap: 0.8rem;
  }
  .plat-rating__meta {
    flex: 1 0 100%;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
}

/* Текстовые логотипы площадок — по присланным образцам. Один набор на две
   задачи: ряд оценок на странице отзывов и шапка каждой карточки отзыва.
   Начертание общее, различаются только цвета половинок подписи. */
.plat-logo {
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Яндекс: красная «Я», остальное почти чёрным */
.plat-logo--yandex {
  color: #1A1A1A;
}
.plat-logo--yandex b {
  color: #FC3F1D;
}

/* продокторов: строчными, «про» красным, «докторов» синим */
.plat-logo--prodoctorov {
  color: #1B5DBE;
  font-weight: 600;
  letter-spacing: 0;
}
.plat-logo--prodoctorov b {
  color: #E4262C;
  font-weight: 600;
}

/* 2Gis: цифра салатовым, буквы чёрным */
.plat-logo--gis {
  color: #111;
}
.plat-logo--gis b {
  color: #A5CD39;
  font-weight: 700;
}

/* Шапка карточки отзыва: площадка-источник слева, звёзды справа от неё. */
.reviews-page__item .reviews__item-top, .reviews__carousel .reviews__item-top {
  display: flex;
  /* шаблон на узких экранах переворачивает шапку в column-reverse — подпись
     уезжала под звёзды и вставала по центру; держим строку на всех ширинах */
  flex-direction: row;
  align-items: center;
  gap: 1.2rem;
  justify-content: flex-start;
}
.reviews__item-plat {
  font-size: 1.3rem;
  line-height: 1.8rem;
}

/* Логотипы площадок в ряду оценок — присланные файлы. Пропорции у них разные
   (96×28, 88×37, 173×15), поэтому высота задаётся каждому своя: при общей
   высоте ПроДокторов растянулся бы на 277px и вытеснил бы оценку. */
.plat-rating__logo img {
  display: block;
  width: auto;
}
.plat-rating__logo--yandex img {
  height: 2.2rem;
}
.plat-rating__logo--gis img {
  height: 3rem;
}
.plat-rating__logo--prodoctorov img {
  height: 1.5rem;
}

/* Вводные абзацы идут парой — между ними отбивка не нужна: шаблонные 2.1rem
   от .hero-description оставляем только после последнего абзаца. */
.hero__content .hero-description:not(:last-of-type) {
  margin-bottom: 0;
}

/* Плашка оценки — ссылка на профиль клиники: подсветка рамкой и лёгкий подъём,
   как у карточек услуг. Логотип и цифры не подчёркиваются. */
.plat-rating__item {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  background-color: #F7F9FB;
  border: #E5E9F0 1px solid;
  border-radius: 0.8rem;
  padding: 1.8rem 2.4rem;
  text-decoration: none;
  transition: border-color 0.2s linear, box-shadow 0.2s linear;
}
.plat-rating__item:hover {
  border-color: #4BAA41;
  box-shadow: 0 0.4rem 1.2rem rgba(10, 20, 100, 0.08);
}

/* Номер дома с литерой не разрывается: «131-Б» переносилось, и «Б» оставалась
   одна на третьей строке карточки адреса. */
.nowrap {
  white-space: nowrap;
}

/* Последняя крошка — текущая страница: чуть насыщеннее и контрастнее остальных,
   чтобы читалась как заголовок пути, а не как ещё одна ссылка. */
.breadcrumb__item:last-child > span {
  font-weight: 500;
  color: #0A1464;
}

/* Кнопка «Читать полностью» — вплотную к тексту. Отбивку в 1.6rem у текста
   оставляем только там, где под ним сразу подпись автора: её разделитель
   иначе прижимался бы к последней строке. */
.reviews-page__item:has(.reviews-page__more) .reviews__item-text {
  margin-bottom: 0;
}

/* Промежуток между «Читать полностью» и разделителем перед автором. Отступ
   даём кнопке снизу, а не подписи сверху: у подписи margin-top: auto — она
   прижата к низу карточки, и правка сверху сняла бы это выравнивание. */
.reviews-page__more {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  margin-top: 1.2rem;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #387F30;
  cursor: pointer;
  margin-top: 0;
  margin-bottom: 1.2rem;
}

/* Таблица: группы идут одной карточкой с общей рамкой. */
/* Углы группы прайса. Рамка и радиусы у группы есть, но серая шапка внутри —
   прямоугольник и закрашивала скругления сверху: углы выглядели срезанными.
   Подрезаем содержимое по форме группы. */
.price-group {
  margin-bottom: 3.2rem;
  border: #E5E9F0 1px solid;
  margin-bottom: 0;
  overflow: hidden;
}

/* Промо, поиск и примечание — блоки с боевой страницы цен. */
/* ============ Прайс: оформление по образцам с боевой страницы =========== */
/* Промо — тёмная плашка с той же сеткой-графикой, что в подвале. */
/* ---- Промо и поиск: правка высот и графики ------------------------------ */
/* Плашка была 9.6rem при графике 34.5rem — в кадр попадал случайный срез
   картинки, а сама она растягивалась выше натуральных 384×346 и мылила.
   Теперь фон вписывается по высоте плашки (auto 100%): пиксели не тянутся. */
/* Высота плашки — 6.6rem (66px на 1920). Раньше стояло 9.6rem: текст в две
   строки плюс крупные внутренние отступы раздували её в полтора раза. */
/* min-height считался по контентной коробке, и внутренние отступы добавлялись
   сверху: плашка выходила 82px вместо заданных 66. */
/* Кнопка в плашке прайса — с одинаковыми отступами. Сверху и снизу выходило
   11px (плашка 66px центрирует кнопку 44px), справа — шаблонные 24px.
   Слева отступ текста оставляем прежним. */
.price-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem 2.4rem;
  background-color: #F7F9FB;
  border: rgba(10, 20, 100, 0.1) 1px solid;
  border-radius: 1.2rem;
  padding: 2.4rem;
  margin-bottom: 2.4rem;
  position: relative;
  overflow: hidden;
  background-color: #0A1464;
  border: none;
  border-radius: 1rem;
  padding: 2.4rem 3.2rem;
  min-height: 9.6rem;
  padding: 1.8rem 2.4rem;
  min-height: 6.6rem;
  padding: 0.8rem 2.4rem;
  box-sizing: border-box;
  padding-right: 1.1rem;
}

/* Подписи под цифрами в карточке врача — ближе к самим цифрам. У числа было
   line-height 2.5rem при кегле 1.6rem, и лишние 9px интерлиньяжа отодвигали
   подпись вниз. */
.specialists__item-info div p {
  line-height: 2rem;
}

/* Фотография коллектива на «О клинике»: справа от текста, его обтекают
   заголовок и перечень направлений. На боевом сайте она в правой колонке
   рядом с вертикальным меню раздела — у нас меню вынесено наверх, и место
   справа как раз освободилось. */
.company-photo {
  float: right;
  width: 66%;
  margin: 0 0 2.4rem 3.2rem;
}
.company-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.2rem;
}
@media (max-width: 768px) {
  .company-photo {
    float: none;
    width: 100%;
    margin: 0 0 1.6rem;
  }
}

/* Название клиники в тексте — начертанием и цветами логотипа. Оттенки взяты
   из images/svg/logo.svg: синий #00158F, зелёный #49AD3D (в интерфейсе
   используются близкие, но другие — #0A1464 и #4BAA41). */
.brand {
  font-weight: 700;
}
.brand__blue {
  color: #00158F;
}
.brand__green {
  color: #49AD3D;
}

/* Фотография коллектива выходит в свободное поле справа. Текстовый блок
   страницы ограничен 96rem, а контейнер — 130.2rem, то есть справа пустует
   34.2rem: раньше фотография упиралась в границу текстового блока, и справа
   оставалась пустая полоса. Отрицательный правый отступ ровно на эти 34.2rem
   доводит её до края контейнера. Ниже 993px поле пропадает — там фотография
   идёт во всю ширину без обтекания. */
@media (min-width: 1200px) {
  .company-photo {
    width: 66rem;
    /* верх фотографии — по первой строке заголовка справа от неё */
    margin-top: 1.8rem;
    margin-right: -34.2rem;
  }
}
@media (max-width: 1199px) {
  .company-photo {
    float: none;
    width: 100%;
    margin: 0 0 1.6rem;
  }
}
/* При поиске раскрываем и третий уровень: совпадение могло прийтись на
   подуслугу, а её список свёрнут — карточка находилась, но самой найденной
   строки на экране не было. */
.services__item.is-search .services__item-sublist {
  display: flex;
}

/* Плашка «Нам доверяют»: содержимое компактнее, но сама плашка по-прежнему
   тянется во всю высоту ряда — низ вровень с полосой прокрутки карусели.
   Шаблонные 4.5rem под подзаголовком, 5.4rem под списком и строки по 5rem
   рассчитаны на то, что список площадок растянут на всю высоту; здесь высоту
   держат карточки отзывов, и этот воздух только разгонял блок. */
/* Кнопка «Оставить отзыв» — у нижнего края плашки, сама плашка на 20px выше
   ряда: свободное место уходит над кнопкой, а не под ней. Высоту считаем от
   контейнера (высота ряда) плюс эти 20px. */
@media (min-width: 1200px) {
  .reviews-block-subtitle {
    margin-bottom: 1.6rem;
  }
  .reviews-block__content {
    margin-bottom: 1.6rem;
  }
  .reviews-block__item {
    height: 4rem;
  }
  .reviews-block {
    padding: 2.4rem;
    display: flex;
    flex-direction: column;
    /* у ряда нет заданной высоты, поэтому процент свернулся бы к содержимому:
       тянемся наравне с каруселью, а лишние 20px добираем отрицательным
       нижним отступом */
    margin-bottom: -2rem;
  }
  .reviews-block .btn {
    margin-top: auto;
  }
}
/* Страницы-карточки перенесены со старого сайта: ширину снимков там держал
   его собственный класс .img-responsive, в новом ките такого правила нет —
   картинка 1600px вылезала за контейнер и давала горизонтальную прокрутку
   всей странице. Правило-страховка: на дизайн карточек не влияет, только
   не даёт содержимому выйти за экран. */
.img-responsive,
.inner-page img,
.inner-page table,
.inner-page iframe {
  max-width: 100%;
}

.img-responsive,
.inner-page img {
  height: auto;
}

/* Хлебные крошки на карточках акции и статьи пришли со старого сайта в его
   собственной разметке (.breadcrumbs, а не .breadcrumb кита) — без стилей
   пункты вставали друг под другом простым текстом. Приводим к виду обычных
   крошек сайта, разметку не трогаем. */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.6rem;
}
.breadcrumbs__item {
  display: inline-flex;
  align-items: center;
}
.breadcrumbs__link {
  text-decoration: none;
}
.breadcrumbs__item-name {
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #6B7287;
  transition: color 0.2s linear;
}
.breadcrumbs__link:hover .breadcrumbs__item-name {
  color: #387F30;
}
.breadcrumbs__item:last-of-type .breadcrumbs__item-name {
  color: #4A5270;
}
.breadcrumbs__separator {
  font-size: 1.3rem;
  color: #6B7287;
}

/* На телефоне поля промо-баннера одинаковые слева и справа: общее правило
   выше (padding-right: 1.1rem) задано для десктопа, где справа кнопка. */
@media (max-width: 1199px) {
  .price-promo {
    padding: 2rem;
  }
}
/* ============ Карточки акции и статьи: типографика нового макета ==========
   Разметка этих двух страниц перенесена со старого сайта и приходит без своих
   стилей — текст падал в 12px, заголовки в чёрный, кнопки в серые прямоугольники.
   Здесь только оформление (кегли, цвета, отступы, кнопки, плашки); структура
   и порядок блоков не трогаются. Значения те же, что у остальных страниц. */
.legacy-card h1, .legacy-card .switcher-title {
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 4rem;
  color: #0A1464;
  margin: 0 0 1.6rem;
}
.legacy-card h2 {
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 3rem;
  color: #0A1464;
  margin: 3.2rem 0 1.6rem;
}
.legacy-card h3, .legacy-card h4 {
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.6rem;
  color: #0A1464;
  margin: 2.8rem 0 1.2rem;
}
.legacy-card p, .legacy-card .text, .legacy-card .introtext {
  font-size: 1.5rem;
  line-height: 2.4rem;
  color: #4A5270;
  margin: 0 0 1.6rem;
}
.legacy-card ul {
  list-style: none;
  margin: 0 0 2.4rem;
  padding: 0;
}
.legacy-card ul li {
  position: relative;
  font-size: 1.5rem;
  line-height: 2.4rem;
  color: #4A5270;
  padding-left: 2.6rem;
  margin-bottom: 0.8rem;
}

/* маркер списка — зелёная точка, как на текстовых страницах */
.legacy-card ul li::before {
  content: "";
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  background-color: #4BAA41;
  border-radius: 50%;
  left: 0.8rem;
  top: 0.9rem;
}
.legacy-card a {
  color: #387F30;
  text-decoration: none;
}
.legacy-card a:hover {
  text-decoration: underline;
}
.legacy-card img {
  border-radius: 1.2rem;
}

/* Кнопки старого шаблона (btn-default) — в вид кнопок сайта. */
.legacy-card .btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 4.8rem;
  font-weight: 600;
  font-size: 1.5rem;
  color: #fff;
  background-color: #3B8633;
  border: none;
  border-radius: 0.8rem;
  padding: 0 2.4rem;
  margin-bottom: 2.4rem;
  cursor: pointer;
  transition: background-color 0.2s linear;
}
.legacy-card .btn:hover {
  background-color: #2F7A26;
  text-decoration: none;
}

/* Блок сотрудников внизу карточки. */
.legacy-card .ordered-block__title {
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 3rem;
  color: #0A1464;
  margin: 4rem 0 1.6rem;
}
.legacy-card .staff-list-inner__label, .legacy-card .staff-list-inner__property-label {
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #6B7287;
}

/* Нумерованные списки карточек: номера оставляем, кегль и цвет — как у текста,
   маркер зелёный. Правила для ul их не покрывали, и пункты оставались чёрными
   и на два кегля крупнее абзаца. */
.legacy-card ol {
  margin: 0 0 2.4rem;
  padding-left: 2.4rem;
}
.legacy-card ol li {
  font-size: 1.5rem;
  line-height: 2.4rem;
  color: #4A5270;
  margin-bottom: 0.8rem;
}
.legacy-card ol li::marker {
  color: #387F30;
  font-weight: 700;
}

/* Второстепенные кнопки старого шаблона (btn-transparent-border) — обводкой,
   как «вторые» кнопки в макете: заливкой остаются только основные действия. */
.legacy-card .btn-transparent-border {
  color: #0A1464;
  background-color: transparent;
  border: rgba(10, 20, 100, 0.2) 1px solid;
}
.legacy-card .btn-transparent-border:hover {
  color: #387F30;
  background-color: transparent;
  border-color: #4BAA41;
}

/* Врачи в карточке акции — плитками, как на главной, но без карусели:
   ряд из четырёх статичных карточек. Разметка старая, поэтому раскладку
   задаём её же классам. */
.legacy-card .staff-list-inner__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.4rem;
  margin-bottom: 4rem;
}
.legacy-card .staff-list-inner__wrapper {
  width: auto;
  max-width: none;
  padding: 0;
}
.legacy-card .staff-list-inner__item {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  border: #E5E9F0 1px solid;
  border-radius: 1.2rem;
  overflow: hidden;
  transition: border-color 0.2s linear, box-shadow 0.2s linear;
}
.legacy-card .staff-list-inner__item:hover {
  border-color: #4BAA41;
  box-shadow: 0 0.4rem 1.2rem rgba(10, 20, 100, 0.08);
}

/* фотография — фоном на элементе с data-bg */
.legacy-card .staff-list-inner__image-bg {
  display: block;
  width: 100%;
  aspect-ratio: 4/5;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}
.legacy-card .staff-list-inner__image {
  display: block;
}

/* стрелка старого шаблона в углу карточки не нужна */
.legacy-card .staff-list-inner__arrow {
  display: none;
}
.legacy-card .staff-list-inner__content-wrapper, .legacy-card .staff-list-inner__content {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.6rem;
}
.legacy-card .staff-list-inner__label {
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: #6B7287;
  order: -1;
}
.legacy-card .staff-list-inner__name {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: #0A1464;
  text-decoration: none;
}
.legacy-card .staff-list-inner__name:hover {
  color: #387F30;
  text-decoration: none;
}
.legacy-card .staff-list-inner__description {
  font-size: 1.3rem;
  line-height: 1.9rem;
  color: #4A5270;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.legacy-card .staff-list-inner__property-label {
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: #6B7287;
  margin-bottom: -0.4rem;
}
.legacy-card .staff-list-inner__item .btn {
  width: 100%;
  height: 4rem;
  font-size: 1.4rem;
  margin: 0.8rem 0 0;
}
@media (max-width: 1199px) {
  .legacy-card .staff-list-inner__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
  }
}
@media (max-width: 576px) {
  .legacy-card .staff-list-inner__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Карточки специалистов внутри карточки акции — строго как на «Врачах».
   Общие правила текста этой страницы (p, img, a) перебивали их стили: имя
   уезжало в серый, межстрочный расстягивался, у фотографии появлялось
   скругление. Возвращаем значения кита. */
.legacy-card .specialists__item-name {
  font-size: 1.6rem;
  line-height: 2rem;
  color: #0A1464;
  margin: 0 0 0.8rem;
}
.legacy-card .specialists__item-text {
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #4A5270;
  margin: 0 0 1.5rem;
}
.legacy-card .specialists__item-info p {
  margin: 0;
}
.legacy-card .specialists__item-image img {
  border-radius: 0;
}
.legacy-card .specialists__item a:hover {
  text-decoration: none;
}

/* Акция: слева фотография, справа описание. Разметка старого сайта идёт одной
   колонкой — картинка, плашки со скидкой, дальше общий блок с текстом, поэтому
   внутренний контейнер раскрываем через display: contents и раскладываем его
   части по ячейкам сами. Блок врачей остаётся во всю ширину под ними. */
@media (min-width: 1200px) {
  .legacy-card .detail.sale {
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    column-gap: 3.2rem;
    align-items: start;
  }
  .legacy-card .detail.sale > .detail-image {
    grid-column: 1;
    grid-row: 1/span 2;
  }
  .legacy-card .detail.sale > .top-meta {
    grid-column: 2;
    grid-row: 1;
  }
  .legacy-card .detail.sale .services-detail__bottom-info {
    display: contents;
  }
  /* Части правой колонки адресуем по классам, а не по порядку: блок заявки
       вырезан при извлечении, и нумерация съехала бы. */
  .legacy-card .detail.sale .services-detail__bottom-info > .detail-block {
    grid-column: 2;
  }
  /* врачи — во всю ширину страницы, отдельной строкой */
  .legacy-card .detail.sale .services-detail__bottom-info > .detail-block.staff {
    grid-column: 1/-1;
    margin-top: 1.6rem;
  }
  /* верхняя плашка со скидкой в правой колонке начинается вровень с картинкой */
  .legacy-card .detail.sale .top-meta__section {
    margin-top: 0;
  }
}
.legacy-card .page-top > .cowl {
  order: 2;
  margin-top: 4.8rem;
}
.legacy-card .page-top > :not(.cowl) {
  order: 1;
}
.legacy-card .page-top .share {
  display: none;
}
.legacy-card .breadcrumbs {
  margin: 0;
  padding: 0.5rem 0;
}
.legacy-card .page-top .topic, .legacy-card .page-top .topic__inner, .legacy-card .page-top .topic__heading {
  margin: 0;
}

/* Отбивка от заголовка до содержимого — как на остальных страницах: там между
   заголовком и первым блоком 106px (1.7rem собственного отступа заголовка плюс
   поля hero и секции). У карточки акции этих полей нет, добираем отступом. */
.legacy-card h1 {
  margin-bottom: 1.7rem;
}

/* Шапка страницы акции: крошки над заголовком, как на остальных страницах
   (в старой разметке они шли под ним), и тот же ритм — блок крошек 2.8rem,
   до заголовка 4.8rem. Значок «поделиться» из старого шаблона убираем:
   в макете такого элемента нет, он висел одинокой иконкой над заголовком. */
.legacy-card .page-top {
  display: flex;
  flex-direction: column;
  margin-bottom: 8.9rem;
  /* На телефоне 8.9rem превращались в ~100px пустоты между заголовком
     и фото акции: берём тот же отступ, что у секций в адаптиве. */
}
@media (max-width: 1199px) {
  .legacy-card .page-top {
    margin-bottom: 2.4rem;
  }
}

/* Верхняя строка акции: «СКИДКИ» убираем — раздел и так в крошках, а срок
   ставим рядом со скидкой и оформляем как на карточках акций (зелёный, 600). */
.legacy-card .top-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  /* строка со скидкой не должна упираться в текст акции */
  margin-bottom: 2.4rem;
}

/* Шапка акции: раздел, размер скидки и срок. */
.legacy-card .top-meta__section {
  display: inline-flex;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.6rem;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
  color: #387F30;
  margin: 2.4rem 0 0.8rem;
  display: none;
}
.legacy-card .top-meta__discount {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2rem;
  color: #fff;
  background-color: #3B8633;
  border-radius: 0.6rem;
  padding: 0.6rem 1.2rem;
  margin: 0 0 0.8rem;
  margin: 0;
}
.legacy-card .top-meta__date {
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #6B7287;
  margin-bottom: 2.4rem;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #387F30;
  margin: 0;
}

/* значка перед сроком на карточках акций нет */
.legacy-card .top-meta__date i,
.legacy-card .top-meta__date svg {
  display: none;
}

/* Скидка и срок лежат во вложенных .line-block старого шаблона — без стилей
   они складывались в столбик. Раскладываем их в строку. */
.legacy-card .top-meta .line-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
}
.legacy-card .top-meta .line-block__item {
  display: flex;
  align-items: center;
}

/* «СКИДКИ» скрыт, но его обёртка оставалась ячейкой строки и давала лишние
   12px слева — плашка со скидкой не совпадала по краю с текстом. Убираем
   обёртку целиком. */
.legacy-card .top-meta .line-block__item:has(.top-meta__section) {
  display: none;
}

/* Плашка с призывом на карточке акции — как сводка отзывов: тёмно-синяя
   полоса с узором, текст слева, зелёная кнопка справа. */
.legacy-card .cta-block {
  margin: 0.8rem 0 0;
}

.cta-bar {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
  min-height: 6.6rem;
  background-color: #0A1464;
  border-radius: 1.2rem;
  padding: 0.8rem 0.9rem 0.8rem 2.4rem;
}
.cta-bar::after {
  content: "";
  position: absolute;
  width: 56rem;
  height: 100%;
  right: 22rem;
  top: 0;
  background: url(/local/templates/v1/css/../images/decor-appointment.webp) no-repeat right center;
  background-size: auto 260%;
  opacity: 0.9;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}

.legacy-card .cta-bar__text,
.cta-bar > .btn {
  position: relative;
  z-index: 1;
}

/* На телефоне текст и кнопка в одну строку не влезают: кнопка ужималась до
   «За…». Ставим столбиком, кнопку — во всю ширину, узор справа убираем. */
@media (max-width: 768px) {
  .cta-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
    padding: 1.6rem;
  }
  .cta-bar::after {
    content: none;
  }
  .cta-bar > .btn {
    width: 100%;
  }
}
.legacy-card .cta-bar__text {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: #fff;
  margin: 0;
}
.legacy-card .cta-bar .btn {
  flex-shrink: 0;
  margin: 0;
}

@media (max-width: 1199px) {
  .cta-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 1.2rem;
    padding: 1.6rem;
  }
  .legacy-card .cta-bar .btn {
    width: 100%;
  }
}
/* Плашка идёт во всю ширину, поэтому селектор такой же длины, как у правила
   правой колонки, — иначе оно перевесит и плашка останется в колонке. */
.legacy-card .detail.sale .services-detail__bottom-info > .detail-block.cta-block {
  grid-column: 1/-1;
}

/* Подзаголовочный абзац карточки акции — теми же значениями, что на остальных
   страницах (там он живёт в .hero__content, здесь разметка другая). */
.legacy-card .hero-description {
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #4A5270;
  margin: 0;
}

/* Кнопка «Назад к списку» — второстепенная, со стрелкой влево. */
.legacy-card .btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  width: auto;
  height: 4.8rem;
  font-weight: 600;
  font-size: 1.5rem;
  color: #0A1464;
  background-color: transparent;
  border: rgba(10, 20, 100, 0.2) 1px solid;
  border-radius: 0.8rem;
  padding: 0 2.4rem;
  margin: 3.2rem 0 0;
  transition: color 0.2s linear, border-color 0.2s linear;
}

/* «Назад к списку» на карточках акции и статьи — так же, как «Все специалисты»
   на странице врача: синяя заливка, белый текст, без обводки */
.legacy-card .btn-back:hover {
  color: #fff;
  background-color: #0A1464;
  border-color: transparent;
  text-decoration: none;
}

/* Низ карточки не должен упираться в подвал: на остальных страницах между
   последним блоком и подвалом 42px, у карточек этого отступа не было вовсе. */
.legacy-card {
  padding-bottom: 4.2rem;
}

/* ============ Всплывающая панель на карточке специалиста ==================
   При наведении поверх карточки появляется панель с той же информацией и
   кнопкой записи. Панель чуть шире карточки и лежит над соседями, поэтому
   у карточки поднимается z-index — иначе следующая карточка перекрывала бы
   её правый край. */
.specialists__item {
  position: relative;
}
.specialists__item:hover {
  z-index: 3;
}
.specialists__item .specialists__hover {
  /* ссылка-подложка карточки лежит на z-index 2 — панель должна быть выше,
     иначе кнопка «Записаться» не нажимается */
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  /* ФИО в панели встаёт ровно на уровень ФИО в карточке: 35.2rem — высота
     фотографии, 2rem — верхний отступ текстового блока карточки. Если
     содержимого много, панель растёт вверх, но ниже этого уровня ФИО не
     опускается. Специализация вынесена из потока и висит над ФИО. */
  min-height: calc(100% - 38rem);
  background: #fff;
  border-radius: 0 0 1.2rem 1.2rem;
  padding: 0 2.2rem 2rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(0.8rem);
  /* visibility не анимируем: она наследуется детьми, и при переходе кнопка
     внутри панели какое-то время остаётся непрокликиваемой */
  transition: opacity 0.2s linear, transform 0.2s linear;
}

/* растворение подложки в фотографию — выше ФИО, за пределами панели */
.specialists__item .specialists__hover::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 8rem;
  background: linear-gradient(0deg, #fff 0, rgba(255, 255, 255, 0.97) 2.4rem, rgba(255, 255, 255, 0) 100%);
}
.specialists__item:hover .specialists__hover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.specialists__item .specialists__hover-spec {
  position: absolute;
  left: 2.2rem;
  right: 2.2rem;
  bottom: calc(100% + 0.6rem);
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #6B7287;
  margin: 0;
}
.specialists__item .specialists__hover-name {
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.4rem;
  color: #0A1464;
  margin: 0;
}

/* показатели — тем же строем, что в карточке, но без верхней линии-разделителя */
.specialists__item .specialists__hover-info {
  display: flex;
  justify-content: space-between;
  gap: 1.2rem;
  border-top: #E5E9F0 1px solid;
  padding-top: 1.2rem;
}
.specialists__item .specialists__hover-info span {
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.4rem;
  color: #6B7287;
}
.specialists__item .specialists__hover .btn {
  align-self: flex-start;
  height: 4.4rem;
  padding: 0 2.4rem;
}

/* на тач-экранах наведения нет — панель не показываем */
@media (hover: none), (max-width: 1199px) {
  .specialists__item .specialists__hover {
    display: none;
  }
}
/* Описание врача во всплывающей панели: в карточке текст свёрнут до двух строк,
   в панели — до пяти. Панель растёт вверх, поверх фотографии, и больше пяти
   строк закрывали лицо врача. */
.specialists__item .specialists__hover-text {
  font-size: 1.3rem;
  line-height: 1.9rem;
  color: #4A5270;
  margin: 0;
  /* не больше 5 строк: длинная биография поднимала панель на лицо врача.
     Полный текст — на странице врача («Подробнее о специалисте» в панели). */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}

/* Название услуги в прайсе — ссылка на карточку услуги. Цвет и начертание
   как у обычного текста строки, зелёная только при наведении: подчёркивание
   всех 225 названий сделало бы таблицу рябой. */
.price-row__link {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s linear;
}
.price-row__link:hover {
  color: #387F30;
}

/* Панель компактнее по высоте: шаг между блоками, кегли, отбивки и кнопка
   уменьшены, описание — не более четырёх строк. Зона растворения сверху тоже
   короче, поэтому подложка набирает плотность быстрее. */
.specialists__item .specialists__hover {
  gap: 0.8rem;
  padding: 5.2rem 2rem 1.6rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.97) 3.6rem, #fff 5.6rem);
}
.specialists__item .specialists__hover-spec {
  font-size: 1.2rem;
  line-height: 1.6rem;
}
.specialists__item .specialists__hover-name {
  font-size: 1.6rem;
  line-height: 2rem;
}
.specialists__item .specialists__hover-text {
  line-height: 1.8rem;
}
.specialists__item .specialists__hover-info {
  padding-top: 0.8rem;
}
.specialists__item .specialists__hover-info p {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2rem;
  color: #0A1464;
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.8rem;
}
.specialists__item .specialists__hover .btn {
  height: 4rem;
  font-size: 1.4rem;
  padding: 0 2rem;
}

/* Кнопка записи — во всю ширину панели (то есть карточки за вычетом её полей). */
.specialists__item .specialists__hover .btn {
  align-self: stretch;
  width: 100%;
}

/* Зона растворения длиннее и начинается выше: подложка стартует прозрачной
   примерно на 10rem выше нижнего края текста и набирает плотность к его
   первой строке — переход в фотографию получается плавным. */
.specialists__item .specialists__hover {
  padding-top: 10rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 4.8rem, rgba(255, 255, 255, 0.94) 8rem, #fff 10rem);
}

/* Прозрачность начинается от ФИО: сплошная белая подложка идёт от имени и
   ниже, а строка специализации вынесена над панелью и лежит на растворяющейся
   полосе поверх фотографии. Иначе градиент пришлось бы привязывать к высоте
   строки специализации, а она у врачей от одной до трёх строк. */
.specialists__item .specialists__hover {
  padding: 1.6rem 2rem;
  background: #fff;
}
.specialists__item .specialists__hover-spec {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  padding: 8rem 2rem 0.8rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 4.8rem, rgba(255, 255, 255, 0.92) 7.2rem, #fff 100%);
}

/* Промежуток между специализацией и ФИО короче: складывались нижняя отбивка
   растворяющейся полосы и верхняя отбивка белой части. */
.specialists__item .specialists__hover {
  padding-top: 0.6rem;
}
.specialists__item .specialists__hover-spec {
  padding-bottom: 0.2rem;
}

/* Подписи под цифрами вплотную: у числа было 2rem интерлиньяжа при кегле
   1.6rem, лишний просвет отодвигал подпись. */
.specialists__item-info div p,
.specialists__item .specialists__hover-info p {
  line-height: 1.7rem;
}

/* Текст в самой карточке свёрнут до двух строк: описания у врачей разной длины,
   и без этого карточки в ряду разъезжаются по высоте. Целиком текст показывает
   всплывающая панель при наведении — её .specialists__hover-text не обрезается
   так жёстко (5-6 строк, см. выше). */
.specialists__item-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Кнопка «Онлайн-запись» в карточке врача — только в адаптиве. На десктопе
   запись лежит в панели, которая выезжает по наведению; на телефоне наведения
   нет, и без кнопки записаться к конкретному врачу из карточки нечем.
   Ссылка-подложка карточки занимает всю её площадь на z-index 2 — кнопку
   поднимаем выше, иначе клик уходил бы на страницу врача. */
.specialists__item-booking {
  display: none;
  position: relative;
  z-index: 3;
  height: 4.2rem;
  font-size: 1.4rem;
  margin-top: 1.6rem;
}
@media (max-width: 1199px) {
  .specialists__item-booking {
    display: flex;
  }
}
.specialists__item-booking {
  /* вторая кнопка («Онлайн расписание») сразу под первой */
}
.specialists__item-booking + .specialists__item-booking {
  margin-top: 0.8rem;
}

/* Панель по наведению перекрывает ссылку-подложку карточки, и на страницу
   врача было не попасть. Имя в панели — ссылка, плюс явная «Подробнее о враче». */
.specialists__hover-name a {
  color: inherit;
  text-decoration: none;
}
.specialists__hover-name a:hover {
  color: #387F30;
}

.specialists__hover-more {
  display: inline-block;
  position: relative;
  z-index: 5;
  margin-top: 1rem;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #387F30;
}

/* Вся карточка кликабельна (см. luxarStaffCardClick в site.js) */
.specialists__item,
.specialists__hover {
  cursor: pointer;
}

/* ===================== Страница врача ==================================== */
/* Фото слева, сведения справа. Значения — те же, что в остальных карточках. */
@media (min-width: 1200px) {
  .doctor {
    display: grid;
    grid-template-columns: minmax(0, 38rem) minmax(0, 1fr);
    gap: 4rem;
    align-items: start;
  }
}
.doctor__body {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.doctor__tag {
  align-self: flex-start;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.6rem;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
  color: #fff;
  background-color: #3B8633;
  border-radius: 0.6rem;
  padding: 0.6rem 1.2rem;
}
.doctor__spec {
  font-size: 1.6rem;
  line-height: 2.4rem;
  color: #6B7287;
  margin: 0;
}
.doctor__stats {
  display: flex;
  gap: 4rem;
  border-top: #E5E9F0 1px solid;
  border-bottom: #E5E9F0 1px solid;
  padding: 1.6rem 0;
}
.doctor__stats p {
  font-weight: 700;
  font-size: 2rem;
  line-height: 2.2rem;
  color: #0A1464;
  margin: 0;
}
.doctor__stats span {
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #6B7287;
}
.doctor__text {
  font-size: 1.5rem;
  line-height: 2.4rem;
  color: #4A5270;
  margin: 0;
}
.doctor__awards {
  background-color: #F7F9FB;
  border: rgba(10, 20, 100, 0.08) 1px solid;
  border-radius: 1.2rem;
  padding: 2rem 2.4rem;
}
.doctor__awards-title, .doctor__dirs-title, .doctor__socials-title {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: #0A1464;
  margin: 0 0 0.8rem;
}
.doctor__awards p:last-child {
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #4A5270;
  margin: 0;
}
.doctor__dirs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.doctor {
  /* Соцсети врача — та же подпись, что у «Направлений», и иконки кита. */
}
.doctor__socials .socials {
  height: 3.2rem;
}

/* направление — метка со ссылкой на список специалистов */
.doctor__dir {
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #0A1464;
  background-color: #F7F9FB;
  border: #E5E9F0 1px solid;
  border-radius: 0.6rem;
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  transition: border-color 0.2s linear, color 0.2s linear;
}
.doctor__dir:hover {
  color: #387F30;
  border-color: #4BAA41;
}

/* при наведении кнопка заливается синим — текст и стрелка белые,
   зелёный на синей заливке не читался */
.doctor__back:hover,
.album__back:hover {
  color: #fff;
  background-color: #0A1464;
  /* без обводки: на синей заливке рамка только дробила край */
  border-color: transparent;
}

@media (max-width: 1199px) {
  .doctor {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
  }
  .doctor__stats {
    gap: 2.4rem;
  }
}
/* Фотография врача — портретной рамкой, как в карточках списка: исходники
   горизонтальные (800×534), поэтому кадрируем по центру с уклоном вверх,
   иначе лицо уходит из кадра. */
.doctor__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.2rem;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center 20%;
}

/* Текст в плашке записи — белым везде, а не только на карточках акции: правило
   было привязано к .legacy-card, и на странице врача текст оставался тёмным. */
.cta-bar__text {
  position: relative;
  z-index: 1;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: #fff;
  margin: 0;
}
.cta-bar .btn {
  flex-shrink: 0;
  margin: 0;
}

/* Столбцы страницы врача заканчиваются вместе: фотография тянется по высоте
   сведений, иначе под плашкой записи оставалась пустая полоса (фото 475px
   против 406px у текста). Нижний отступ секции убираем — его давал общий
   класс .section, и до кнопки «Все специалисты» набегало 135px. */
@media (min-width: 1200px) {
  .doctor {
    align-items: stretch;
  }
  .doctor__media {
    min-height: 34rem;
  }
  .doctor__media img {
    height: 100%;
    aspect-ratio: auto;
  }
}
.doctor {
  margin-bottom: 0;
}

.doctor__back,
.album__back {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  height: 4.8rem;
  font-weight: 600;
  font-size: 1.5rem;
  color: #0A1464;
  border: rgba(10, 20, 100, 0.2) 1px solid;
  border-radius: 0.8rem;
  padding: 0 2.4rem;
  margin: 4rem 0 0;
  text-decoration: none;
  transition: color 0.2s linear, border-color 0.2s linear;
  transition: color 0.2s linear, background-color 0.2s linear, border-color 0.2s linear;
  margin-top: 3.2rem;
  /* и не упираться в блок заявки снизу */
  margin-bottom: 4.8rem;
}

/* ---- Кнопки записи: две отдельные ------------------------------------ */
/* «Экспресс-запись» открывает форму, «Онлайн расписание» ведёт на расписание
   врача. Две равные колонки во всю ширину блока, на телефоне — столбиком. */
.doctor__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  margin-top: 2.4rem;
}
@media (max-width: 768px) {
  .doctor__actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
  }
}

.doctor__action {
  width: 100%;
  height: 5.4rem;
  font-size: 1.5rem;
  white-space: nowrap;
}

/* ---- Описание врача: свёрнутый текст ------------------------------------ */
/* Высота свёрнутого текста одна для всех врачей — в карточках выводится
   одинаковый объём. Низ растворяем в фоне панели, чтобы обрыв строки не
   выглядел случайным; кнопку показывает js, если текст не поместился. */
.doctor-desc__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.doctor-desc__text.is-clamped {
  position: relative;
  max-height: 32rem;
  overflow: hidden;
  /* Рядом с видео свёрнутый текст вместе с кнопкой «Читать полностью»
     занимает ровно высоту видеоокна (32rem × 16/9 = 56.9rem): низ текста
     и низ видео на одной линии. 3.6rem — кнопка с отступом. */
}
@media (min-width: 1200px) {
  .doctor-desc--video .doctor-desc__text.is-clamped {
    max-height: 53.3rem;
  }
}
.doctor-desc__text.is-clamped::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6rem;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}

.doctor-desc__more {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  padding: 0;
  margin-top: 1.6rem;
  font-family: inherit;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #387F30;
  cursor: pointer;
}

.doctor-desc__more[aria-expanded=true] .menu__caret--more {
  transform: rotate(-135deg) translate(-0.1rem, -0.1rem);
}

/* ============ Вкладки на странице врача ================================== */
.doctor-tabs {
  margin-top: 4rem;
}
.doctor-tabs__link {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 2rem;
  color: #4A5270;
  background-color: #F7F9FB;
  border: #E5E9F0 1px solid;
  border-radius: 0.8rem;
  padding: 1.1rem 2rem;
  text-decoration: none;
  transition: color 0.2s linear, border-color 0.2s linear;
}
.doctor-tabs__link:hover {
  color: #387F30;
}
.doctor-tabs__link.is-current {
  color: #0A1464;
  background-color: #fff;
  border-color: #0A1464;
}

/* панели переключаются классом; скрытые не удаляем — якоря #desc, #docs,
   #reviews, #services должны работать при переходе по ссылке */
.doctor-tabs__panel {
  display: none;
  scroll-margin-top: 14rem;
}
.doctor-tabs__panel.is-current {
  display: block;
}
.doctor-tabs__panel .doctor__text {
  margin-bottom: 1.6rem;
}
.doctor-docs {
  list-style: none;
  margin: 0;
  padding: 0;
}
.doctor-docs li {
  position: relative;
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #4A5270;
  border-bottom: #E5E9F0 1px solid;
  padding: 1.2rem 0 1.2rem 2.6rem;
}
.doctor-docs li:last-child {
  border-bottom: none;
}
.doctor-docs li::before {
  content: "";
  position: absolute;
  width: 0.6rem;
  height: 0.6rem;
  background-color: #4BAA41;
  border-radius: 50%;
  left: 0.8rem;
  top: 2rem;
}
.doctor-reviews__all {
  display: inline-block;
  font-weight: 600;
  font-size: 1.4rem;
  color: #387F30;
  margin-top: 2rem;
  text-decoration: none;
}
.doctor-reviews__all:hover {
  text-decoration: underline;
}
.doctor-services__title {
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: #0A1464;
  margin: 2.4rem 0 1.2rem;
}
.doctor-services__title:first-child {
  margin-top: 0;
}
.doctor-services {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 2.4rem;
  margin: 0 0 1.6rem;
  padding: 0;
}
.doctor-services a {
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #4A5270;
  text-decoration: none;
  transition: color 0.2s linear;
}
.doctor-services a:hover {
  color: #387F30;
}

/* адрес приёма */
.doctor__place-label {
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: #6B7287;
  margin: 0 0 0.2rem;
}
.doctor__place-value {
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: #0A1464;
  margin: 0 0 0.4rem;
}
@media (max-width: 1199px) {
  .doctor-reviews, .doctor-services {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Отзывы во вкладке — теми же карточками, что на странице отзывов. Сетка чуть
   плотнее: панель уже, чем страница целиком. */
.doctor-reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
  align-items: stretch;
}
@media (max-width: 1199px) {
  .doctor-reviews {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Плашка с оценкой во вкладке отзывов врача: отбивка до сетки карточек. */
.doctor-tabs__panel .reviews-top {
  margin-bottom: 2.4rem;
}

/* Услуги врача: слева картинка направления, справа перечень. */
.doctor-services__group {
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
  border-top: #E5E9F0 1px solid;
  padding-top: 2.4rem;
  margin-top: 2.4rem;
}
.doctor-services__group:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.doctor-services__image img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 1.2rem;
}
.doctor-services__group .doctor-services__title {
  margin-top: 0;
}
@media (max-width: 1199px) {
  .doctor-services__group {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
  }
}

/* ---- карусель сканов документов на странице врача ---- */
.docs-slider {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 2.4rem;
}
.docs-slider__track::-webkit-scrollbar {
  display: none;
}
.docs-slider__item:hover {
  border-color: #4BAA41;
}
.docs-slider__item img {
  display: block;
  width: 100%;
  height: 17rem;
  object-fit: cover;
  object-position: center top;
}
.docs-slider__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background-color: #fff;
  border: #E5E9F0 1px solid;
  border-radius: 50%;
  color: #0A1464;
  cursor: pointer;
  transition: border-color 0.2s linear, color 0.2s linear;
}
.docs-slider__arrow:hover {
  border-color: #4BAA41;
  color: #387F30;
}
.docs-slider__arrow[hidden] {
  visibility: hidden;
  display: flex;
}

.menu__caret--left {
  transform: rotate(135deg) translate(-0.1rem, -0.1rem);
  margin-left: 0;
}

/* ---- отзывы врача: шесть карточек, остальные под кнопкой ---- */
.doctor-reviews__hidden {
  display: none;
}

.js-doctor-reviews.is-open .doctor-reviews__hidden {
  display: flex;
}

.doctor-reviews__more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  height: 4.8rem;
  font-family: inherit;
  font-weight: 600;
  font-size: 1.5rem;
  color: #0A1464;
  background-color: transparent;
  border: rgba(10, 20, 100, 0.2) 1px solid;
  border-radius: 0.8rem;
  margin-top: 2.4rem;
  cursor: pointer;
  transition: color 0.2s linear, border-color 0.2s linear;
}
.doctor-reviews__more:hover {
  color: #387F30;
  border-color: #4BAA41;
}
.doctor-reviews__more .menu__caret--more {
  margin-left: 0;
  opacity: 0.7;
}

.js-doctor-reviews-more[aria-expanded=true] .menu__caret--more {
  transform: rotate(-135deg) translate(-0.1rem, -0.1rem);
  color: #387F30;
  opacity: 1;
}

/* плашка с оценкой теперь под отзывами */
.doctor-tabs__panel .doctor-reviews__bar {
  margin: 2.4rem 0 0;
}
.doctor-service:hover {
  border-color: #4BAA41;
  box-shadow: 0 0.4rem 1.2rem rgba(10, 20, 100, 0.08);
}
.doctor-service__name {
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #0A1464;
}
.doctor-service:hover .doctor-service__arrow {
  opacity: 1;
  color: #387F30;
}
@media (max-width: 1199px) {
  .doctor-services__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Ссылка «На карте» рядом с адресом: отбивка от адреса, иконка крупнее и без
   подчёркивания — линия остаётся только под текстом. */
/* «На карте» — по той же базовой линии, что адрес, и без подчёркивания.
   Строчный элемент вместо inline-flex: у флекс-контейнера с иконкой базовая
   линия считается по её краю, из-за чего текст ссылки съезжал относительно
   адреса. Иконку сажаем на строку вертикальным сдвигом. */
.doctor__place-map {
  font-size: 1.4rem;
  color: #387F30;
  text-decoration: none;
  border-bottom: currentColor 1px solid;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1.2rem;
  border-bottom: none;
  vertical-align: baseline;
  display: inline;
}
.doctor__place-map svg {
  flex-shrink: 0;
  width: 1.8rem;
  height: 1.8rem;
  vertical-align: -0.4rem;
  margin-right: 0.4rem;
}
.doctor__place-map span {
  border-bottom: currentColor 1px solid;
  border-bottom: none;
}

/* Полоса прокрутки под каруселью документов — как под лентой врачей:
   серая дорожка, зелёная заливка по доле прокрутки. */
.docs-progress {
  position: relative;
  height: 0.2rem;
  background-color: #E5E9F0;
  border-radius: 1rem;
  overflow: hidden;
  margin: 0.4rem 0 2.4rem;
}
.docs-progress__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #4BAA41;
  border-radius: 1rem;
  transition: transform 0.15s linear;
}

/* Белая карточка в блоке «О клинике» — по своей колонке. В ките ей задана
   фиксированная ширина 52.4rem под флекс-раскладку, а сетка отводит 50rem:
   карточка вылезала на 24px, и справа оставалось 24px против 48px сверху и
   снизу. Пусть занимает колонку целиком. */
/* Поля блока «О клинике» — 25px со всех сторон (в ките 4.8rem). */
@media (min-width: 1200px) {
  .about__list {
    width: 100%;
  }
  .about {
    padding: 2.5rem;
  }
}
/* Привязка прокрутки у карусели документов отключена. Вкладка скрыта через
   display: none, и при её показе контейнер с scroll-snap: mandatory
   возвращался в нулевую позицию — не работали ни стрелки, ни прямая прокрутка.
   Плавность оставляем, привязка тут ничего не давала. */
.docs-slider__track {
  display: flex;
  gap: 1.6rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.4rem;
  scroll-snap-type: none;
}
.docs-slider__item {
  flex: 0 0 auto;
  width: 24rem;
  scroll-snap-align: start;
  background-color: #F7F9FB;
  border: #E5E9F0 1px solid;
  border-radius: 0.8rem;
  overflow: hidden;
  transition: border-color 0.2s linear;
  scroll-snap-align: none;
}

/* Больше воздуха между вкладками и их содержимым. */
.doctor-tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 2.4rem;
  margin-bottom: 4rem;
}

.docs-swiper .swiper {
  overflow: hidden;
  border-radius: 0.8rem;
}
.docs-swiper__item {
  display: block;
  background-color: #F7F9FB;
  border: #E5E9F0 1px solid;
  border-radius: 0.8rem;
  overflow: hidden;
  transition: border-color 0.2s linear;
}
.docs-swiper__item:hover {
  border-color: #4BAA41;
}

/* стрелки — по бокам ленты, а не над ней: сверху уже стоят вкладки */
.docs-swiper .documents__slider-arrows {
  position: static;
  transform: none;
  top: auto;
  gap: 0;
}

/* Карточки услуг врача — по три в ряд. */
/* Вкладка «Документы»: сетка сканов дипломов и сертификатов, просмотр во fancybox. */
.doctor-docs-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.6rem;
  margin-bottom: 3.2rem;
}
.doctor-docs-grid__item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-decoration: none;
  color: #0A1464;
}
.doctor-docs-grid__item img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border: #E5E9F0 1px solid;
  border-radius: 1.2rem;
  background-color: #F7F9FB;
  transition: border-color 0.2s linear, box-shadow 0.2s linear;
}
.doctor-docs-grid__item:hover img {
  border-color: rgba(75, 170, 65, 0.5);
  box-shadow: 0 0.6rem 2.4rem rgba(10, 20, 100, 0.08);
}
.doctor-docs-grid__item--file {
  justify-content: center;
  min-height: 12rem;
  border: #E5E9F0 1px solid;
  border-radius: 1.2rem;
  padding: 1.6rem;
  box-sizing: border-box;
}
.doctor-docs-grid__name {
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #4A5270;
}
.doctor-docs-grid__size {
  font-size: 1.2rem;
  color: #7A81A5;
}
@media (max-width: 1199px) {
  .doctor-docs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .doctor-docs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
  }
}

/* ---- карточки услуг: две в ряд, со снимком и описанием ---- */
.doctor-services__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  margin-bottom: 2.4rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.doctor-service {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.2rem;
  background-color: #fff;
  border: #E5E9F0 1px solid;
  border-radius: 1.2rem;
  padding: 1.2rem;
  text-decoration: none;
  transition: border-color 0.2s linear, box-shadow 0.2s linear;
  grid-template-columns: 12rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 1.6rem;
  padding: 1.6rem;
}
.doctor-service__image img {
  display: block;
  width: 8rem;
  height: 6rem;
  object-fit: cover;
  border-radius: 0.8rem;
  width: 12rem;
  height: 9rem;
}
.doctor-service__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.doctor-service__text {
  font-size: 1.3rem;
  line-height: 1.9rem;
  color: #4A5270;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* абзацы из визуального редактора — тем же шрифтом, без отступов */
}
.doctor-service__text p {
  display: inline;
  margin: 0;
  font: inherit;
  color: inherit;
}
.doctor-service__arrow {
  opacity: 0.4;
  margin-top: 0.6rem;
}
@media (max-width: 1199px) {
  .doctor-services__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Ячейки карусели документов выше: сканы читаемее. Стрелки сдвигаем к новой
   середине ленты. */
.docs-swiper__item img {
  display: block;
  width: 100%;
  height: 17rem;
  object-fit: cover;
  object-position: center top;
  height: 24rem;
}
.docs-swiper:hover .slider-arrows, .docs-swiper:focus-within .slider-arrows {
  opacity: 1;
}

/* ---- карусель сканов на слайдере кита ---- */
/* Стрелки выносим за ленту, чтобы не закрывали сканы: у блока появляются поля
   по 5.6rem, в них и встают кнопки. */
/* Лента документов — во всю ширину контентного поля, стрелки за его пределами.
   Поля у блока убираем: из-за них лента была уже сайта, а полоса прокрутки
   обрезалась вместе с ней. Отрицательные вылеты включаем только там, где по
   бокам есть место (от 1500px), иначе стрелки уехали бы за экран. */
.docs-swiper {
  position: relative;
  margin-bottom: 3.2rem;
  padding: 0 5.6rem;
  padding: 0;
}
@media (min-width: 1500px) {
  .docs-swiper .slider-arrows {
    left: -6.4rem;
    right: -6.4rem;
  }
}
@media (max-width: 1499px) {
  .docs-swiper {
    padding: 0 5.6rem;
  }
}

/* Полоса прокрутки под лентой документов — во всю ширину ленты. В ките она
   абсолютная, шириной calc(100% - 2.4rem) и висит у нижнего края слайдера;
   у нас лента отдельным блоком, поэтому ставим полосу в поток под ней. */
.docs-swiper .slider-progressbar {
  margin-top: 1.6rem;
  position: relative;
  width: 100% !important;
  left: auto !important;
  transform: none;
  bottom: auto !important;
}

/* На узких экранах кит выкладывает документы колонкой (flex-direction: column
   и width: auto !important у слайдов). Для нашей карусели это ломает слайдер:
   12 сканов вставали столбиком высотой 3000px. Держим ряд и фиксируем ширину
   слайда — слайдер работает с slidesPerView: auto. */
@media (max-width: 1199px) {
  .docs-swiper .swiper-wrapper {
    flex-direction: row !important;
    gap: 0 !important;
  }
  .docs-swiper .swiper-slide {
    width: 26rem !important;
    opacity: 1 !important;
    scale: 1 !important;
  }
  .docs-swiper {
    padding: 0;
  }
  .docs-swiper .slider-arrows {
    display: none;
  }
}
/* Стрелки карусели документов: по центру ячейки и только при наведении на
   ленту. Держим их в отдельном слое во всю высоту ячейки — так центр
   считается от неё, а не от всего блока с полосой прокрутки.
   focus-within оставляем, чтобы стрелки были доступны с клавиатуры. */
/* Стрелка появляется только с той стороны, где курсор: слой стрелок держим
   видимым, а прозрачностью управляем у каждой кнопки. Половину определяет
   обработчик — на чистом CSS для этого понадобились бы зоны поверх слайдов,
   а они перехватывали бы клики по сканам. */
.docs-swiper .slider-arrows {
  position: absolute;
  left: 0;
  right: 0;
  top: 8.5rem;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
  top: 12rem;
  top: 0;
  height: 24rem;
  align-items: center;
  opacity: 0;
  transition: opacity 0.2s linear;
  opacity: 1;
}
.docs-swiper .slider-arrow {
  pointer-events: auto;
  margin: 0 -1.6rem;
  margin: 0;
  opacity: 0;
  transition: opacity 0.2s linear;
}
.docs-swiper.is-hover-left .slider-arrow-prev, .docs-swiper.is-hover-right .slider-arrow-next, .docs-swiper:focus-within .slider-arrow {
  opacity: 1;
}

/* Видео врача во вкладке «Описание»: вертикальный проигрыватель справа от
   текста, как на боевом сайте. На узких экранах уходит под текст. */
@media (min-width: 1200px) {
  .doctor-tabs__panel#desc {
    display: none;
  }
  .doctor-tabs__panel#desc.is-current {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32rem;
    gap: 3.2rem;
    align-items: start;
  }
}
.doctor-video {
  position: relative;
  width: 100%;
  max-width: 32rem;
  aspect-ratio: 9/16;
  background-color: #F7F9FB;
  border-radius: 1.2rem;
  overflow: hidden;
}
.doctor-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Список вопросов — во всю ширину контентного поля. В ките он ограничен 90rem
   и центрирован, из-за чего на карточке услуги вопросы занимали 900px против
   1302px у остальных блоков. */
@media (min-width: 1200px) {
  .faq__content {
    width: 100%;
  }
}
/* Описание врача: видео слева, текст справа. Раньше панель сама была сеткой,
   и абзацы раскладывались по ячейкам вперемешку с видео. */
.doctor-tabs__panel#desc.is-current {
  display: block;
}
@media (min-width: 1200px) {
  .doctor-desc--video {
    display: grid;
    grid-template-columns: 32rem minmax(0, 1fr);
    gap: 3.2rem;
    align-items: start;
  }
}
.doctor {
  /* Текст из визуального редактора: абзацы, заголовки-абзацы с <b>, списки.
     Обычный поток с отступами снизу вместо flex-зазора: зазор складывался
     с полями списков, и между блоками выходило по 50–60px при межстрочном
     1.15. Теперь ритм один: 1.2rem между абзацами, 2.4rem перед
     подзаголовком, 0.6rem между пунктами списка. */
}
.doctor-desc__text {
  display: block;
  font-size: 1.6rem;
  line-height: 1.6;
}
.doctor-desc__text p,
.doctor-desc__text ul,
.doctor-desc__text ol {
  margin: 0 0 1.2rem;
}
.doctor-desc__text > :last-child {
  margin-bottom: 0;
}
.doctor-desc__text ul,
.doctor-desc__text ol {
  padding-left: 2.2rem;
}
.doctor-desc__text li {
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}
.doctor-desc__text li + li {
  margin-top: 0.6rem;
}
.doctor-desc__text {
  /* абзац-подзаголовок: «Образование:», «Повышения квалификации:» */
}
.doctor-desc__text p:has(> b:only-child),
.doctor-desc__text p:has(> strong:only-child),
.doctor-desc__text h2,
.doctor-desc__text h3,
.doctor-desc__text h4 {
  margin: 2.4rem 0 0.8rem;
  font-size: 1.6rem;
  line-height: 1.4;
}
.doctor-desc__text > :first-child {
  margin-top: 0;
}

/* Видео врача — справа от текста. Окно одного размера у всех: раньше оно
   тянулось по высоте описания (height: 100%), и у врача с длинным текстом
   проигрыватель был вдвое выше, чем у соседа. Размер задаёт базовое правило
   .doctor-video (32rem по ширине, пропорция 9/16), колонки выравниваем по верху. */
@media (min-width: 1200px) {
  .doctor-desc--video {
    grid-template-columns: minmax(0, 1fr) 32rem;
    align-items: start;
  }
  .doctor-desc--video .doctor-video {
    order: 2;
  }
  .doctor-desc--video .doctor-desc__body {
    order: 1;
    min-width: 0;
  }
}
.price .price-heading p {
  margin: 0;
}

/* цена и кнопка становятся ячейками той же сетки */
.price .price__item__control {
  display: contents;
}

.price .price__item__content {
  min-width: 0;
}

/* цена может приходить с вложенным span — задаём начертание и ему */
.price .price__item-price,
.price .price__item-price span {
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: #0A1464;
}

/* у цены шаблонный margin-right: 20px — в сетке он давал лишний зазор */
.price .price__item-price {
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 2.2rem;
  white-space: nowrap;
  margin-right: 0;
}

/* Кнопка в строке цен: шаблонный левый отступ прибавлялся к зазору сетки —
   между ценой и кнопкой выходило 44px вместо 24px. */
/* Кнопка «Записаться» в прайсе карточки — один в один со страницей цен:
   контур 25% синего, белый фон, 1.4rem/400, при наведении на строку заливка. */
.price .price__item__control .btn {
  margin-left: 0;
  height: 4rem;
  padding: 0 2rem;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 4rem;
  color: #0A1464;
  background-color: #fff;
  border: rgba(10, 20, 100, 0.25) 1px solid;
  border-radius: 0.8rem;
  white-space: nowrap;
  transition: color 0.2s linear, background-color 0.2s linear, border-color 0.2s linear;
}

.price .price__item:hover .price__item__control .btn,
.price .price__item__control .btn:hover {
  color: #fff;
  background-color: #0A1464;
  border-color: #0A1464;
}

/* Таблица цен на карточке услуги — как на странице цен: три колонки
   (название / цена / кнопка) с зазором 2.4rem, поля 1.6rem 2.4rem, подпись
   «ЦЕНА» мелкими прописными у правого края. Раньше строка была флексом
   с space-between: длинное название упиралось в цену, а подпись стояла
   не над своей колонкой. */
/* Типографика строки прайса на карточке — как на странице цен:
   название 1.6rem/400 синим, артикул 1.3rem/400 светло-серым,
   шапка с подписью-заголовком 1.6rem/600 и линией под ней,
   при наведении подсветка строки. */
.price .price-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 2.4rem;
  align-items: baseline;
  gap: 2.4rem;
  border-bottom: #E5E9F0 1px solid;
}

.price .price__item-heading p {
  margin: 0;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2rem;
  color: #0A1464;
  transition: color 0.2s linear;
}

.price .price__item-tag {
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.6rem;
  color: #6B7287;
}

.price .price__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 2.4rem;
  padding: 1.6rem 2.4rem;
  border-bottom: #E5E9F0 1px solid;
  transition: background-color 0.2s linear;
}

.price .price__item:hover {
  background-color: #F7F9FB;
}

.price .price__item:hover .price__item-heading p {
  color: #387F30;
}

/* подпись «ЦЕНА» в шапке — вплотную к правому краю, как на странице цен */
.price .price-heading p:last-child {
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.6rem;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
  color: #0A1464;
  flex-shrink: 0;
  letter-spacing: 0.05em;
  text-align: right;
}

/* «Услуга» — тем же кеглем, что заголовок группы в прайсе */
.price .price-heading p:first-child {
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 2.2rem;
  color: #0A1464;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.4rem;
}

/* в шапке подпись обёрнута в <b> — шаблон даёт ему свой кегль */
.price .price-heading p:last-child b {
  font-weight: inherit;
  font-size: 1.2rem;
  line-height: 1.6rem;
}

/* Заголовок блока «Об услуге» стоит в узкой колонке (704px) — при 3.4rem
   он ломался на две строки. Уменьшаем кегль, чтобы заголовок влезал в строку. */
@media (min-width: 1200px) {
  .about--service .about__content .title-block .title {
    font-size: 2.8rem;
    line-height: 3.6rem;
  }
}
/* Прайс карточки на узком экране — как на странице цен: цена под названием,
   кнопка отдельной строкой. */
@media (max-width: 1199px) {
  .price .price__item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.8rem 1.6rem;
    padding: 1.4rem 2rem;
  }
  .price .price__item__control .btn {
    grid-column: 1/-1;
    justify-self: start;
    /* шаблонная мобильная кнопка тянется во всю ширину строки */
    width: auto !important;
    margin-top: 0.4rem;
  }
  .price .price-heading {
    padding: 1.4rem 2rem;
  }
  .price .price-heading p:first-child {
    font-size: 1.6rem;
    line-height: 2.2rem;
  }
}
/* у последней строки граница совпадала с рамкой блока — двойная линия */
.price .price__item:last-child {
  border-bottom: none;
}

/* «Полный прайс-лист →» шаблон вешает абсолютом на top: 9.5rem — ссылка
   зависала между заголовком и таблицей и не доходила до правого края блока.
   Раскладываем секцию сеткой: заголовок слева, ссылка справа на одной с ним
   строке, таблица во всю ширину под ними. */
.price:has(> .btn-more) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  row-gap: 0;
}
.price:has(> .btn-more) > .anchor {
  grid-column: 1/-1;
  grid-row: 1;
}
.price:has(> .btn-more) > .title-block {
  grid-column: 1;
  grid-row: 2;
}
.price {
  /* «Показать еще» (.btn-more-row) тоже .btn-more — без :not() обе кнопки
     вставали в одну ячейку и накладывались друг на друга */
}
.price:has(> .btn-more) > .btn-more:not(.btn-more-row) {
  position: static;
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: center;
}
.price:has(> .btn-more) > .price__content {
  grid-column: 1/-1;
  grid-row: 3;
}
.price {
  /* «Показать еще» — под таблицей, сноска — после неё, во всю ширину */
}
.price:has(> .btn-more) > .btn-more-row {
  grid-column: 1/-1;
  grid-row: 4;
  justify-self: center;
}
.price:has(> .btn-more) > .footnote {
  grid-column: 1/-1;
}
@media (max-width: 1199px) {
  .price:has(> .btn-more) > .btn-more:not(.btn-more-row) {
    grid-column: 1/-1;
    grid-row: 3;
    justify-self: start;
    margin-bottom: 1.6rem;
  }
  .price:has(> .btn-more) > .price__content {
    grid-row: 4;
  }
  .price:has(> .btn-more) > .btn-more-row {
    grid-row: 5;
  }
}

/* Панель при наведении: у врачей без описания она получалась короткой и
   собственный текст карточки (ФИО, специализация) торчал над ней. Задаём
   минимальную высоту, чтобы непрозрачная часть всегда накрывала текст
   карточки, а показатели с кнопкой прижимаем к низу — тогда растворение
   по-прежнему начинается прямо над ФИО. */
.specialists__item .specialists__hover-info {
  margin-top: auto;
}

/* Карточки услуг на странице раздела (/services/<раздел>/) крупнее, чем
   в списке услуг врача: больше фото, название и описание. */
.service-section .doctor-service {
  grid-template-columns: 20rem minmax(0, 1fr) auto;
  gap: 2.4rem;
  padding: 2rem;
}
.service-section .doctor-service .doctor-service__image img {
  width: 20rem;
  height: 15rem;
  border-radius: 1rem;
}
.service-section .doctor-service .doctor-service__body {
  gap: 1rem;
  padding-top: 0.4rem;
}
.service-section .doctor-service .doctor-service__name {
  font-size: 2rem;
  line-height: 2.6rem;
}
.service-section .doctor-service .doctor-service__text {
  font-size: 1.5rem;
  line-height: 2.3rem;
  -webkit-line-clamp: 4;
}
@media (max-width: 768px) {
  .service-section .doctor-service {
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 1.6rem;
    padding: 1.6rem;
  }
  .service-section .doctor-service .doctor-service__image img {
    width: 12rem;
    height: 9rem;
  }
  .service-section .doctor-service .doctor-service__name {
    font-size: 1.6rem;
    line-height: 2.2rem;
  }
  .service-section .doctor-service .doctor-service__text {
    font-size: 1.4rem;
    line-height: 2rem;
    -webkit-line-clamp: 3;
  }
}

/* Стрелка карточки услуги на мобильном — в правом верхнем углу, как на
   десктопе, а не отдельной колонкой, отжимающей текст. */
@media (max-width: 1199px) {
  /* два класса — чтобы перебить отступы карточки раздела (.service-section) */
  .doctor-services__grid .doctor-service,
  .service-section .doctor-service {
    position: relative;
    grid-template-columns: 12rem minmax(0, 1fr);
    padding-right: 4rem;
  }
  .doctor-service__arrow {
    position: absolute;
    top: 1.8rem;
    right: 1.4rem;
    margin: 0;
  }
}
/* Галочка карточки — всегда «вправо» (›). Поворот .menu__caret--right задан
   только для десктопа (≥993px, в правилах меню), и на телефоне стрелка
   карточки оставалась базовой «вниз» (˅). */
.doctor-service__arrow.menu__caret--right {
  transform: rotate(-45deg);
}

/* ========================= Страница поиска =============================== */
/* Выдача bitrix:search.page: строка запроса и список найденного. Как и другие
   внутренние страницы, секция не сетка — класс .section пришёл с главной. */
.search-page {
  display: block;
}
.search-page__form {
  display: flex;
  gap: 1.2rem;
  margin-bottom: 3.2rem;
}
@media (max-width: 576px) {
  .search-page__form {
    flex-direction: column;
  }
}
.search-page__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 4.8rem;
  padding: 0 1.6rem;
  font-family: inherit;
  font-size: 1.5rem;
  color: #0A1464;
  background-color: #F7F9FB;
  box-sizing: border-box;
  border: #CFD3E2 1px solid;
  border-radius: 0.8rem;
  outline: none;
}
.search-page__input:focus {
  border-color: #4BAA41;
}
.search-page__submit {
  flex-shrink: 0;
  min-width: 16rem;
}
.search-page__note {
  font-size: 1.5rem;
  line-height: 2.4rem;
  color: #4A5270;
}
.search-page__note a {
  color: #387F30;
}
.search-page__list {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-page__item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  background-color: #fff;
  padding: 2rem 2.4rem;
  border: rgba(10, 20, 100, 0.08) 1px solid;
  border-radius: 1.2rem;
}
@media (max-width: 1199px) {
  .search-page__item {
    padding: 1.6rem;
  }
}
.search-page__item-title {
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 2.6rem;
  color: #0A1464;
  transition: color 0.2s linear;
}
.search-page__item-title:hover {
  color: #387F30;
}
.search-page__item-text {
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #4A5270;
  margin: 0;
}
.search-page__item-path {
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #6B7287;
}
.search-page__pager {
  margin-top: 3.2rem;
}

/* ================= Доступность ============================================ */
/* Обводка фокуса для клавиатуры: в шаблоне её не было ни на ссылках, ни на
   кнопках и полях — при переходах табом непонятно, где находишься.
   :focus-visible не показывает обводку при обычном клике мышью. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: #4BAA41 2px solid;
  outline-offset: 2px;
  border-radius: 0.4rem;
}

/* Системная настройка «уменьшить движение»: карусели и наведения не должны
   дёргать интерфейс у тех, кому от анимации плохо. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* Кнопка «Все альбомы» — в левой колонке: раздел альбома раскладывается
   сеткой, и ссылка автоматически уезжала во вторую колонку, к правому краю. */
.album__back {
  grid-column: 1;
  justify-self: start;
  margin-top: 3.2rem;
}

/* Панель на карточках акции и статьи: .legacy-card p добавлял абзацам
   нижний отступ 24px — панель вырастала и ФИО уезжало вверх. */
.specialists__item .specialists__hover > * {
  margin-top: 0;
  margin-bottom: 0;
}

/* Таблицы на текстовых страницах (реквизиты, надзорные органы): шаблон отдавал
   их чёрным 16px с тесной строкой — выбивалось из типографики остальных
   страниц. Приводим к тексту страницы: 1.5rem/2.4rem серым, подписи слева —
   синим полужирным, ссылки зелёные. */
.text-page__content table {
  border-collapse: collapse;
  margin: 0 0 1.6rem;
}
.text-page__content table td {
  font-size: 1.5rem;
  line-height: 2.4rem;
  color: #4A5270;
  vertical-align: top;
  padding: 0.4rem 0;
}
.text-page__content table td b, .text-page__content table td strong {
  font-weight: 600;
  color: #0A1464;
}
.text-page__content table a {
  /* шаблонная ссылка тянет свои 1.6rem — в таблице кегль строки */
  font-size: inherit;
  line-height: inherit;
  color: #387F30;
  transition: color 0.2s linear;
}
.text-page__content table a:hover {
  color: #387F30;
  text-decoration: underline;
}

/* Страница «Лицензии»: те же карточки в два столбца, что услуги у врача, но
   миниатюра — вертикальный скан, поэтому вписываем его целиком на светлой
   подложке и даём больше высоты. */
.licenses-docs {
  margin-bottom: 4.2rem;
}
.licenses-grid .doctor-service {
  grid-template-columns: 12rem minmax(0, 1fr) auto;
  align-items: center;
}
.licenses-grid .doctor-service__image img {
  /* восемь сканов из девяти горизонтальные — берём широкую миниатюру,
     вертикальный вписывается в ту же высоту */
  width: 12rem;
  height: 8.8rem;
  object-fit: contain;
  background-color: #F7F9FB;
  border: #E5E9F0 1px solid;
  border-radius: 0.8rem;
  padding: 0.4rem;
}
.licenses-grid .doctor-service__name {
  font-size: 1.5rem;
  line-height: 2.1rem;
}

/* На телефоне карточке лицензии тесно в три колонки: скан ужимался до 12rem,
   а название рядом ломалось по слову в строке. Скан идёт первым во всю
   ширину, текст — под ним, шеврон уходит в правый верхний угол. */
@media (max-width: 768px) {
  .licenses-grid .doctor-service {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
    padding-right: 4.4rem;
  }
  .licenses-grid .doctor-service__image img {
    width: 100%;
    height: auto;
    /* место под скан резервируем до загрузки (картинки ленивые), иначе
       карточка схлопывается в полоску и текст прыгает при подгрузке */
    aspect-ratio: 4/3;
    max-height: 24rem;
  }
  .licenses-grid .doctor-service__arrow {
    position: absolute;
    top: 1.8rem;
    right: 1.6rem;
  }
}
/* Подписи в таблице реквизитов — по правому краю колонки: длинные названия
   переносились, и двоеточия шли лестницей. */
.text-page__content table td:first-child {
  padding-right: 2.4rem;
  text-align: right;
}

/* На телефоне двум колонкам тесно: подписи прижимались к правому краю и
   ломались лестницей. Раскладываем построчно — подпись слева над значением. */
@media (max-width: 768px) {
  .text-page__content table,
  .text-page__content table tbody,
  .text-page__content table tr,
  .text-page__content table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .text-page__content table tr {
    margin-bottom: 1.2rem;
  }
  .text-page__content table td {
    padding: 0;
  }
  .text-page__content table td:first-child {
    padding-right: 0;
    padding-bottom: 0.2rem;
    text-align: left;
  }
}
/* Плашка на странице вакансий: синий призыв с декором, слева контакты
   и строка про команду, справа — зелёная кнопка. */
.cta-bar--vacancy {
  align-items: center;
  gap: 3.2rem;
  padding: 2.4rem 2.4rem 2.4rem 3.2rem;
  margin-bottom: 3.2rem;
}
.cta-bar--vacancy .cta-bar__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  min-width: 0;
}
.cta-bar--vacancy .cta-bar__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 4.8rem;
}
.cta-bar--vacancy .cta-bar__contact {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.cta-bar--vacancy .cta-bar__label {
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: rgba(255, 255, 255, 0.6);
}
.cta-bar--vacancy .cta-bar__value {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: #fff;
  margin: 0;
  text-decoration: none;
  transition: color 0.2s linear;
}
.cta-bar--vacancy a.cta-bar__value:hover {
  color: #7FD173;
}
.cta-bar--vacancy .cta-bar__text {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.cta-bar--vacancy > .btn {
  flex-shrink: 0;
}
@media (max-width: 1199px) {
  .cta-bar--vacancy {
    align-items: stretch;
    gap: 2rem;
    padding: 2rem;
  }
  .cta-bar__contacts {
    gap: 1.2rem 2.4rem;
  }
}

/* Вакансии — карточками, как документы на странице лицензий: белая плашка
   с рамкой, название синим, метаданные светло-серым, требования — текстом
   страницы, внизу контурная кнопка отклика. */
.vacancies {
  margin-bottom: 4.2rem;
}
.vacancies__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}

.vacancy-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  background-color: #fff;
  border: #E5E9F0 1px solid;
  border-radius: 1.2rem;
  padding: 2rem 2.4rem 2.4rem;
  transition: border-color 0.2s linear, box-shadow 0.2s linear;
}
.vacancy-card:hover {
  border-color: rgba(75, 170, 65, 0.5);
  box-shadow: 0 0.6rem 2.4rem rgba(10, 20, 100, 0.08);
}
.vacancy-card__name {
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 2.4rem;
  color: #0A1464;
  margin: 0;
}
.vacancy-card__meta {
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #6B7287;
  margin: 0;
}
.vacancy-card__text {
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #4A5270;
  margin: 0 0 0.8rem;
}
.vacancy-card {
  /* полное описание, раскрывается по «Подробнее» */
}
.vacancy-card__more {
  font-size: 1.4rem;
  line-height: 2.2rem;
  color: #4A5270;
  margin: 0 0 0.8rem;
}
.vacancy-card__more p {
  margin: 0 0 0.8rem;
}
.vacancy-card__more a {
  color: #387F30;
}
.vacancy-card__toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 1.2rem;
  font-family: inherit;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 2rem;
  color: #387F30;
  cursor: pointer;
}
.vacancy-card__toggle[aria-expanded=true] .menu__caret--more {
  transform: rotate(-135deg) translate(-0.1rem, -0.1rem);
}
.vacancy-card .btn {
  margin-top: auto;
}

@media (max-width: 1199px) {
  .vacancies__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
  }
  .vacancy-card {
    padding: 1.6rem 2rem 2rem;
  }
}
/* Надзорные органы: карточки идут отдельным блоком, а не в текстовой колонке */
.orgs {
  margin-bottom: 4.2rem;
}

/* Партнёры: те же карточки, что у надзорных органов, плюс строка с тем,
   что поставляет партнёр. Ссылок нет — это не переходы, а перечень. */
.orgs--partners .orgs__item {
  cursor: default;
}

.orgs__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.orgs__note {
  font-size: 1.3rem;
  line-height: 1.8rem;
  color: #6B7287;
}

/* Ссылки в тексте страниц: шаблонная ссылка тянет свои 1.6rem и выбивалась
   из строки 1.5rem — кегль наследуем от абзаца. */
.text-page__content a {
  font-size: inherit;
  line-height: inherit;
}

/* Фотогалерея: название альбома и счётчик — поверх обложки. Белый «подвал»
   под фотографией разбивал карточку на две части, а подпись висела отдельно
   от снимка. Снизу — затемнение из синего, чтобы белый текст читался на
   любом кадре. */
.gallery__item:has(> .gallery__item-head) {
  position: relative;
  overflow: hidden;
}
.gallery__item .articles__item__content.gallery__item-head {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 6.4rem 2.4rem 2rem;
  background: linear-gradient(180deg, rgba(10, 20, 100, 0) 0%, rgba(10, 20, 100, 0.45) 45%, rgba(10, 20, 100, 0.8) 100%);
  pointer-events: none;
}
.gallery__item-head .articles__item-title {
  color: #fff;
}
.gallery__item-head .gallery__item-count {
  color: #0A1464;
  /* подложка полупрозрачная: сквозь неё виден кадр, а размытие держит
     цифры читаемыми на любом снимке */
  background-color: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(0.6rem);
  -webkit-backdrop-filter: blur(0.6rem);
  border-color: transparent;
  border-radius: 10rem;
  padding: 0.5rem 1.2rem;
}

/* обложка занимает всю карточку — подвала под ней больше нет */
.gallery__item:has(> .gallery__item-head) .articles__item-image {
  margin-bottom: 0;
  border-radius: 1.2rem;
}
.gallery__item:has(> .gallery__item-head) .articles__item-image img {
  transition: transform 0.4s ease;
}
.gallery__item:has(> .gallery__item-head):hover .articles__item-image img {
  transform: scale(1.03);
}
@media (max-width: 1199px) {
  .gallery__item .articles__item__content.gallery__item-head {
    padding: 4.8rem 1.6rem 1.6rem;
  }
}

/* Разводящая страница направления: .section с главной раскладывает блок в
   сетку и уводит содержимое в первую колонку — карточки услуг занимали
   две трети ширины. Здесь секция обычным блоком. */
.service-section {
  display: block;
  /* между карточками и текстом хватает одного отступа: у секции
     .section он 7rem, а внизу ещё 2.4rem у самой сетки */
  margin-bottom: 4rem;
}
.service-section .doctor-services__grid {
  margin-bottom: 0;
}
.service-section__back {
  margin: 0 0 4.2rem;
}

/* Текст под карточками на разводящей странице направления: читаемая колонка,
   как на текстовых страницах, но без правой колонки-меню. */
.service-section__text {
  display: block;
  margin-bottom: 4.2rem;
}
.service-section__text .text-page__content {
  /* текст идёт во всю ширину контента, как остальные блоки страницы */
  max-width: none;
}

/* Заголовки внутри текста «Об услуге»: в контенте боевого сайта это обычные
   h2/h3 без классов, и шаблон рисовал их чёрными 2.2rem с тесной строкой —
   выбивалось из типографики страницы. Приводим к тем же правилам, что на
   текстовых страницах: синие, с нормальным интерлиньяжем и отступами. */
.about__content h2:not(.title), .about__content h3:not(.title):not(.about__list-title), .about__content h4 {
  font-weight: 700;
  color: #0A1464;
  margin: 3.2rem 0 1.6rem;
}
.about__content h2:not(.title) {
  font-size: 2rem;
  line-height: 2.8rem;
}
.about__content h3:not(.title):not(.about__list-title), .about__content h4 {
  font-size: 1.7rem;
  line-height: 2.4rem;
  margin-top: 2.4rem;
}
.about__content h2:not(.title):first-child, .about__content h3:not(.title):not(.about__list-title):first-child {
  margin-top: 0;
}

/* Плашка акции на разводящей странице: тот же синий призыв, что на карточках,
   с отбивкой от текста. */
.cta-bar--promo {
  /* плашка акции крупнее обычного призыва: это отдельный блок
     страницы, а не строка внутри карточки */
  min-height: 11.2rem;
  gap: 3.2rem;
  padding: 2.4rem 2.4rem 2.4rem 3.2rem;
  /* до следующего блока — как между разделами страницы */
  margin: 0 0 7rem;
}
.cta-bar--promo .cta-bar__text {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 2.2rem;
  color: #fff;
  margin: 0;
}

/* Блок преимуществ на разводящей странице: .section раскладывает секцию в
   сетку и уводил заголовок в узкую первую колонку — он вставал вертикальной
   лесенкой поверх карточек. Здесь секция обычным блоком. */
.advantages--section {
  display: block;
}
.advantages--section .title-block {
  margin-bottom: 2.4rem;
}

@media (max-width: 768px) {
  /* на узком экране две карточки в ряд дают колонку ~160px — текст рвётся */
  .advantages--section .advantages__item {
    width: 100%;
    min-height: 0;
  }
}
/* Декор в плашке акции: у общего призыва он рассчитан на узкую строку и на
   широком блоке вставал прямоугольником с видимыми краями. Здесь растягиваем
   его на правую половину и растворяем к центру. */
.cta-bar--promo::after {
  width: 62%;
  right: 0;
  background-position: right center;
  /* исходник декора 417x160: при cover он растягивался в полтора раза
     и мылил. Тянем только по высоте, пропорции сохраняем. */
  background-size: auto 200%;
  opacity: 0.8;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%, #000 100%);
}

/* «Акция!» и суммы в плашке — светло-зелёным: на синем читается ярче кнопки
   и не спорит с ней по цвету. */
.cta-bar__hi {
  color: #7FD173;
  font-weight: 700;
  white-space: nowrap;
}

/* Нумерованные списки в тексте направления — зелёными кружками с номером,
   как шаги приёма на карточке услуги. Шаблонные «1.» текстом рядом с абзацем
   выглядели как случайные цифры. */
.service-section__text .text-page__content ol {
  list-style: none;
  counter-reset: step;
  margin: 0 0 2.4rem;
  padding: 0;
}
.service-section__text .text-page__content ol > li {
  counter-increment: step;
  position: relative;
  font-size: 1.5rem;
  line-height: 2.4rem;
  color: #4A5270;
  padding-left: 4.4rem;
  margin-bottom: 1.2rem;
}
.service-section__text .text-page__content ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
  color: #fff;
  background-color: #4BAA41;
  border-radius: 50%;
}

/* ==========================================================================
   Доступность: правки после аудита 01.09.2026
   ========================================================================== */
/* Адрес и режим работы в подвале раньше были <a href="javascript:void(0)">:
   клавиатура попадала на ссылку, которая никуда не ведёт. Заменили на <span>
   и повторяем здесь оформление, которое пункту давали правила для <a>
   (.menu ul li a + .footer__menus .menu ul li a), чтобы вид не изменился. */
.footer__menus .menu ul li .footer-contact {
  display: flex;
  align-items: center;
  height: 100%;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.8rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Ссылка «Перейти к содержимому» для клавиатуры: не видна, пока не получит
   фокус, поэтому на внешний вид страницы не влияет. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 1.2rem 2rem;
  font-weight: 600;
  font-size: 1.4rem;
  color: #fff;
  background-color: #0A1464;
  border-radius: 0 0 0.8rem 0;
}
.skip-link:focus {
  left: 0;
}

/* Минимальная область нажатия 24×24 CSS-пикселя (WCAG 2.2, 2.5.8).
   Не проходили только два элемента: телефон в бургер-меню и заголовок
   раздела «Услуги» в мобильном меню. */
@media (max-width: 1199px) {
  .burger .phone__content a,
  .burger .menu > a {
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
  }
}
/* На карточке акции подзаголовок был <h3> сразу после <h1> — пропуск уровня.
   Тег меняем на <h2>, а размер оставляем прежним (как у h3/h4). */
.legacy-card h2.legacy-card__subhead {
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.6rem;
  color: #0A1464;
  margin: 2.8rem 0 1.2rem;
}

/* main получает tabindex="-1", чтобы фокус после «Перейти к содержимому»
   действительно уходил в контент. Браузерную обводку на нём убираем:
   элемент не интерактивный, рамка вокруг всей страницы была бы мусором. */
main[tabindex="-1"]:focus {
  outline: none;
}

/* ==================== Адаптив по ТЗ от 23.09.2026 ========================= */
/* Порог мобильной раскладки — 1199px (было 992), корневой размер — в
   components/_general.scss. Здесь — раскладка планшета и мелкие задачи ТЗ.
   Номера в комментариях — номера задач ТЗ. */
/* ---- Задача 2. Планшет 577–1199: сетки в две колонки, баннеры по высоте ---- */
@media (min-width: 577px) and (max-width: 1199px) {
  /* преимущества (главная, разделы услуг) */
  .advantages__content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
  }
  /* плитки направлений (/services/) и сотрудники (/company/staff/) */
  .cards.cards--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem;
    overflow: visible;
  }
  .cards.cards--grid > * {
    width: auto;
    max-width: none;
  }
  /* карточки контактов */
  .contacts-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* баннер главной и первый экран услуг: фото не выше ~40% экрана */
  .hero__banner-media {
    aspect-ratio: auto;
    height: 40rem;
  }
  /* шапка не выше ~71px: при корне 11.4px 7rem дали бы 80px */
  .header {
    height: 6.2rem;
  }
  main {
    padding-top: 6.2rem;
  }
  /* фото врача в одну колонку — ограничиваем по высоте */
  .doctor__media img {
    max-height: 50rem;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .cards.cards--grid.cards--3,
  .cards.cards--grid.cards--4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 768px) and (max-width: 1199px) {
  /* список услуг раздела и услуги врача */
  .doctor-services__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* фото входа и карта рядом */
  .contacts-media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* карточка врача: фото слева, данные справа */
  .doctor {
    display: grid;
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    gap: 3.2rem;
    align-items: start;
  }
  .doctor__media img {
    max-height: none;
  }
}
/* ---- Задача 4. Карточка врача на телефоне: видео и описание ---------------- */
@media (max-width: 1199px) {
  /* зазор между видео и текстом описания */
  .doctor-desc--video {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
  }
  /* описание — как основной текст сайта */
  .doctor-desc__text,
  .doctor-desc__text p,
  .doctor-desc__text li {
    font-size: 1.4rem;
    line-height: 1.5;
  }
}
@media (max-width: 576px) {
  /* видео во всю ширину колонки, пропорция ролика 9:16 */
  .doctor-video {
    max-width: none;
    width: 100%;
  }
}
/* ---- Задача 5. Карточки услуг на телефоне: узкое фото, больше места тексту -- */
/* Селекторы в три класса — чтобы перебить правила карточки раздела из
   _doctor-services.scss (.service-section .doctor-service .doctor-service__*). */
@media (max-width: 576px) {
  .doctor-services__grid .doctor-service,
  .service-section .doctor-services__grid .doctor-service {
    grid-template-columns: 7.2rem minmax(0, 1fr);
    gap: 1.2rem;
    padding: 1.4rem 3.6rem 1.4rem 1.4rem;
  }
  .doctor-services__grid .doctor-service .doctor-service__image img {
    width: 7.2rem;
    height: 7.2rem;
    border-radius: 0.8rem;
  }
  .doctor-services__grid .doctor-service .doctor-service__name {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  .doctor-services__grid .doctor-service .doctor-service__text {
    font-size: 1.3rem;
    line-height: 1.9rem;
    -webkit-line-clamp: 3;
  }
  .doctor-services__grid .doctor-service .doctor-service__arrow {
    top: 1.6rem;
    right: 1.4rem;
  }
}
/* ---- Задача 7. Бургер: все блоки по одной левой линии, поля симметричные --- */
@media (max-width: 1199px) {
  .burger__content {
    padding: 0 0.6rem;
  }
  .burger-top {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
  }
  .burger .menu {
    padding-left: 0;
  }
  .burger .phone__content {
    padding-left: 0;
  }
}
/* ---- Задача 8. Отзывы на телефоне: высота по содержимому ------------------- */
@media (max-width: 1199px) {
  .reviews__item {
    height: auto;
  }
  .reviews__item-author {
    margin-top: 1.6rem;
  }
}
/* ---- Задача 9. «Наверх» встроена в нижнюю панель --------------------------- */
/* Кнопка стоит в строке панели справа, а не висит над контентом. Пока она
   видна (после прокрутки на экран вниз, класс up-shown у body — js/site.js),
   панель освобождает под неё место, «Позвонить» на узких экранах — иконкой. */
@media (max-width: 1199px) {
  .up {
    bottom: 1.2rem;
    right: 1.4rem;
    width: 4.2rem;
    height: 4.2rem;
    background-color: #fff;
    z-index: 101;
  }
  body.up-shown .bottom-bar {
    padding-right: 6.6rem;
  }
}
/* кнопка в панели — полноценный элемент, не полупрозрачный поверх контента */
@media (max-width: 1199px) {
  .up:not(.up-invisible) {
    opacity: 1;
  }
}
/* «Позвонить» + «Онлайн расписание» на 360–414 были шире строки на ~16px
   и вылезали за поля панели: сжимаем внутренние отступы кнопок. */
@media (max-width: 414px) {
  .bottom-bar .btn {
    gap: 0.8rem;
    padding: 0 1.2rem;
    min-width: 0;
  }
}
@media (max-width: 414px) {
  body.up-shown .bottom-bar .btn:not(.btn-active) {
    flex: 0 0 4.5rem;
    width: 4.5rem;
    padding: 0;
    justify-content: center;
    font-size: 0;
    gap: 0;
  }
}
/* ---- Задача 11. Подзаголовок баннера на светлом фото (десктоп) ------------- */
@media (min-width: 1200px) {
  .hero__banner .hero-description {
    color: #1A1F3A;
    text-shadow: 0 0 1.2rem rgba(255, 255, 255, 0.9), 0 0 0.4rem rgba(255, 255, 255, 0.9);
  }
}
/* ---- Крупный шрифт на телефоне и планшете ---------------------------------- */
/* Корень поднят до 11.4px (основной текст 16px). Здесь — то, что корень не
   достаёт или что при крупном тексте стало тесным. Замеры до правки на 360px:
   83% текста было 15px и мельче, основной — 13.4px. */
@media (max-width: 1199px) {
  /* Межстрочный 1.5 у основного текста: интервалы были заданы в rem под
     14px и при 16px давали 1.15–1.3 — строки слипались. */
  .reviews__item-text,
  main .title-description,
  .hero-description,
  .specialists__item-text,
  .about__text-main p,
  .about__text-main li,
  .about__text-rest-inner p,
  .about__text-rest-inner li,
  .about__list li,
  .doctor-service__text,
  .footer__info p,
  .text-page__content p,
  .text-page__content li,
  .faq__item-answer,
  .faq__item-answer p {
    line-height: 1.5;
  }
  /* подписи, которые оставались 12–13px */
  .reviews__item-author-info,
  .articles__item-tag,
  .posts__date,
  .specialists__item-info span,
  .contacts-card__label,
  .doctor__place-label,
  .breadcrumb__item {
    font-size: 1.3rem;
  }
  /* шапка не выше ~71px и на телефоне: при корне 11.4px 7rem дали бы 80px */
  .header {
    height: 6.2rem;
  }
  main {
    padding-top: 6.2rem;
  }
}
/* «Позвонить» на телефонах уже 414px — иконкой: с крупным шрифтом две
   подписи в строку не помещаются, «Онлайн расписание» обрезалось (нужно
   197px, на 375px свободно 170px, на 390px — 185px). */
@media (max-width: 413px) {
  .bottom-bar .btn:not(.btn-active) {
    flex: 0 0 4.5rem;
    width: 4.5rem;
    padding: 0;
    justify-content: center;
    font-size: 0;
    gap: 0;
  }
}

/*# sourceMappingURL=/local/templates/v1/css/site.css.map */

/* End */


/* Start:/local/templates/v1/css/hero-anim.css?17901594877800*/
/* ===========================================================================
   Мини-анимация баннера на главной. Отдельный файл, чтобы откат был в одну
   строку: убрать <link> на него в index.html — и баннер снова статичный.
   Тронуты только кадры слайдов и текстовые блоки поверх них.
   Системная настройка «уменьшить движение» всё отключает: в site.css есть
   общий блок prefers-reduced-motion.
   ========================================================================= */
/* 1. Наезд с панорамой: 1 -> 1,15 за 7 секунд — столько слайд и виден
      (autoplay 6 с + смена 0,8 с). Исходники баннеров 2880px шириной, при
      1,15 кадр рисуется в ~2200px, поэтому резкость не теряется.
      Работает и для фотографии, и для видео во втором слайде.
      У каждого слайда своя точка наезда и своё направление сдвига, иначе
      четыре одинаковых движения подряд читаются как дёрганье одной картинки.
      Сдвиг не больше 1%: при масштабе 1,15 запас по краям 7,5%. */
@keyframes heroZoom1 {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.15) translate3d(-1%, -0.5%, 0);
  }
}
@keyframes heroZoom2 {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.15) translate3d(1%, -0.4%, 0);
  }
}
@keyframes heroZoom3 {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.15) translate3d(-0.6%, 0.6%, 0);
  }
}
@keyframes heroZoom4 {
  from {
    transform: scale(1) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.15) translate3d(0.8%, 0.5%, 0);
  }
}
.hero--slider .hero__banner-media :is(img, video) {
  will-change: transform;
}

.hero--slider .swiper-slide:nth-child(1) .hero__banner-media :is(img, video) {
  transform-origin: 60% 55%;
}

.hero--slider .swiper-slide:nth-child(2) .hero__banner-media :is(img, video) {
  transform-origin: 40% 50%;
}

.hero--slider .swiper-slide:nth-child(3) .hero__banner-media :is(img, video) {
  transform-origin: 50% 40%;
}

.hero--slider .swiper-slide:nth-child(4) .hero__banner-media :is(img, video) {
  transform-origin: 55% 60%;
}

.hero--slider .swiper-slide:nth-child(1).swiper-slide-active .hero__banner-media :is(img, video) {
  animation: heroZoom1 7s ease-out forwards;
}

.hero--slider .swiper-slide:nth-child(2).swiper-slide-active .hero__banner-media :is(img, video) {
  animation: heroZoom2 7s ease-out forwards;
}

.hero--slider .swiper-slide:nth-child(3).swiper-slide-active .hero__banner-media :is(img, video) {
  animation: heroZoom3 7s ease-out forwards;
}

.hero--slider .swiper-slide:nth-child(4).swiper-slide-active .hero__banner-media :is(img, video) {
  animation: heroZoom4 7s ease-out forwards;
}

/* пятый и дальше — если баннеров добавят, движение всё равно будет */
.hero--slider .swiper-slide:nth-child(n+5).swiper-slide-active .hero__banner-media :is(img, video) {
  animation: heroZoom1 7s ease-out forwards;
}

/* 2. Текст и кнопки: мягкое появление снизу вверх, по очереди. */
@keyframes heroRise {
  from {
    opacity: 0;
    transform: translateY(1.2rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero--slider .swiper-slide-active .hero-title-link,
.hero--slider .swiper-slide-active .hero-title--banner,
.hero--slider .swiper-slide-active .hero-description,
.hero--slider .swiper-slide-active .hero-buttons {
  animation: heroRise 0.7s ease-out both;
}

.hero--slider .swiper-slide-active .hero-description {
  animation-delay: 0.12s;
}

.hero--slider .swiper-slide-active .hero-buttons {
  animation-delay: 0.24s;
}

/* 3. Зелёная кнопка чуть «дышит» тенью — намёк на действие без прыжков. */
@keyframes heroPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(75, 170, 65, 0);
  }
  50% {
    box-shadow: 0 0 0 0.8rem rgba(75, 170, 65, 0.18);
  }
}
.hero--slider .swiper-slide-active .hero-buttons .btn-active {
  animation: heroPulse 3.2s ease-in-out 1.2s infinite;
}

/* 4. Видео в баннере. Клипы 2880×870 — та же пропорция, что у слота баннера
      и у фотографий, поэтому просто заполняем кадр: ничего не обрезается и
      не остаётся пустых полей. Наезд на видео не вешаем — кадр движется сам
      (зум остаётся только на слайдах с фотографиями). Играет всегда лишь
      активный слайд — это делает luxarHeroVideo в js/site.js. */
.hero--slider .hero__banner-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  background-color: #F7F9FB;
}

.hero--slider .swiper-slide.swiper-slide-active .hero__banner-media video.hero__banner-video {
  animation: none !important;
  transform: none !important;
  will-change: auto;
}

/* 5. Слайд, ролик которого запущен заранее: почти прозрачный, но не нулевой.
      Полностью прозрачный элемент браузер не рисует — видео «играет», а кадры
      не декодируются, и при появлении слайда виден застывший кадр. Двух
      процентов хватает, чтобы отрисовка шла, и глазу это незаметно. */
.hero--slider .swiper-slide.is-preroll {
  opacity: 0.02 !important;
}

/* 6. Узкий экран: из широкого кадра видно меньше половины ширины. Прижимаем
      окно к правому краю — сюжет в роликах стоит справа, а слева остаётся
      проходная часть кадра, её и уводим за границу. Для фотографий в site.css
      уже стоит своё смещение (72%). */
@media (max-width: 1199px) {
  .hero--slider .hero__banner-video {
    object-position: right center;
  }
}
/* 7. Узкий экран: текст слайда стоит под фотографией, а не поверх неё, и без
      фона сквозь него просвечивал текст предыдущего кадра — тот теперь не
      гаснет (crossFade выключен). Делаем слайд непрозрачным, чтобы новый
      кадр полностью перекрывал старый. */
@media (max-width: 1199px) {
  .hero--slider .swiper-slide {
    background-color: #fff;
  }
}
/* 8. Узкий экран: окно кадра стоит не вплотную к правому краю, а с отступом
      в 10% — у роликов справа остаётся техническая часть кадра, из-за неё
      сюжет прижимался к самой границе. */
@media (max-width: 1199px) {
  .hero--slider .hero__banner-video {
    object-position: 90% center;
  }
}

/*# sourceMappingURL=/local/templates/v1/css/hero-anim.css.map */

/* End */


/* Start:/local/templates/v1/components/bitrix/menu/main/style.css?178937520145*/
/* Стили блока bitrix:menu:main */

/* End */


/* Start:/local/templates/v1/components/bitrix/menu/sidebar/style.css?178937520148*/
/* Стили блока bitrix:menu:sidebar */

/* End */


/* Start:/local/templates/v1/components/bitrix/menu/footer/style.css?178937520147*/
/* Стили блока bitrix:menu:footer */

/* End */


/* Start:/local/templates/v1/components/luxar/form/popup/style.css?178937520145*/
/* Стили блока luxar:form:popup */

/* End */


/* Start:/local/templates/v1/template_styles.css?178937520188*/
/* Стили шаблона v1 — перенесите сюда css вёрстки */

/* End */
/* /local/templates/v1/css/normalize.css?17893752016251 */
/* /local/templates/v1/js/swiper/swiper-bundle.css?178937520123564 */
/* /local/templates/v1/js/fancybox/fancybox.css?178937520125343 */
/* /local/templates/v1/css/style.css?179186320991797 */
/* /local/templates/v1/css/luxar_korobok_prod.css?179186398819246 */
/* /local/templates/v1/css/luxar_alexaris.css?17932593794891 */
/* /local/templates/v1/css/site.css?1792050821246421 */
/* /local/templates/v1/css/hero-anim.css?17901594877800 */
/* /local/templates/v1/components/bitrix/menu/main/style.css?178937520145 */
/* /local/templates/v1/components/bitrix/menu/sidebar/style.css?178937520148 */
/* /local/templates/v1/components/bitrix/menu/footer/style.css?178937520147 */
/* /local/templates/v1/components/luxar/form/popup/style.css?178937520145 */
/* /local/templates/v1/template_styles.css?178937520188 */