:root {
  /* Фирменные цвета из logo_big.png и нейтральные цвета интерфейса. */
  --clinic-leaf: #62c425;
  --clinic-leaf-hover: #72d335;
  --clinic-leaf-rgb: 98, 196, 37;
  --clinic-green: #028a4a;
  --clinic-green-rgb: 2, 138, 74;
  --clinic-deep: #005346;
  --clinic-deep-rgb: 0, 83, 70;
  --clinic-ink: #005346;
  --clinic-ink-rgb: 0, 83, 70;
  --clinic-muted: #63736d;
  --clinic-muted-rgb: 99, 115, 109;
  --clinic-white: #ffffff;
  --clinic-white-rgb: 255, 255, 255;
  --clinic-surface: #f5f8f6;
  --clinic-border: #e1e9e4;
  --clinic-hero-mint: #eaf5f0;
  --clinic-hero-accent: #358600;
  --clinic-hero-ink: #003e33;

  /* Три размера текста, шкала заголовков и единое скругление. */
  --clinic-font-family: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cassiopeia-font-family-body: var(--clinic-font-family);
  --cassiopeia-font-family-headings: var(--clinic-font-family);
  --clinic-font-menu: .65rem;
  --clinic-font-cta: .6875rem;
  --clinic-font-nav: .75rem;
  --clinic-font-sm: .875rem;
  --clinic-font-base: 1rem;
  --clinic-font-lg: 1.125rem;
  --clinic-heading-lg: 2.25rem;
  --clinic-heading-md: 1.75rem;
  --clinic-heading-sm: 1.5rem;
  --clinic-error-code: 6rem;
  --clinic-radius: .375rem;
  /* Общий отступ от края контейнера, в том числе при увеличении текста. */
  --clinic-page-inset: 15px;
  --clinic-container-max: none;
  --clinic-button-scale: .7;
  --clinic-button-padding-block: .425rem;
  --clinic-icon-button-size: calc(2.75rem * var(--clinic-button-scale));
  --clinic-radius-round: 50%;
  --clinic-panel-duration: .3s;
  --border-radius: var(--clinic-radius);
  --border-radius-sm: var(--clinic-radius);
  --border-radius-lg: var(--clinic-radius);
  --border-radius-xl: var(--clinic-radius);
  --border-radius-xxl: var(--clinic-radius);
  --body-font-size: var(--clinic-font-base);

  /* Совместимость с макетами стартера и переменными Bootstrap/Joomla. */
  --dharma-primary: var(--clinic-green);
  --dharma-primary-rgb: var(--clinic-green-rgb);
  --dharma-primary-dark: var(--clinic-deep);
  --dharma-secondary: var(--clinic-leaf);
  --dharma-secondary-rgb: var(--clinic-leaf-rgb);
  --dharma-ink: var(--clinic-ink);
  --dharma-ink-rgb: var(--clinic-ink-rgb);
  --dharma-muted: var(--clinic-muted);
  --dharma-muted-rgb: var(--clinic-muted-rgb);
  --dharma-surface: var(--clinic-white);
  --dharma-surface-soft: var(--clinic-surface);
  --dharma-surface-gray: var(--clinic-surface);
  --dharma-border: var(--clinic-border);
  --primary: var(--clinic-green);
  --primary-rgb: var(--clinic-green-rgb);
  --body-color: var(--clinic-ink);
  --body-color-rgb: var(--clinic-ink-rgb);
  --body-bg: var(--clinic-white);
  --border-color: var(--clinic-border);
  --secondary-color: var(--clinic-muted);
  --cassiopeia-color-primary: var(--clinic-green);
  --cassiopeia-color-link: var(--clinic-deep);
  --cassiopeia-color-hover: var(--clinic-green);
  --dharma-container: 1320px;
  --dharma-space: 1.25rem;
  --dharma-section: 2.5rem;
  --dharma-radius: var(--clinic-radius);
  --dharma-shadow: var(--box-shadow);
  --dharma-shadow-sm: var(--box-shadow-sm);
  --dharma-shadow-dropdown: 0 3px 5px rgba(var(--clinic-deep-rgb), 0.12);

  /* Проброс в нативные переменные Cassiopeia/Bootstrap, чтобы стандартные
     компоненты (.btn-link, .nav, .pagination и т.д.) тоже подхватывали
     наши цвета, а не жили отдельной жизнью. */
  --link-color: var(--clinic-deep);
  --link-color-rgb: var(--clinic-deep-rgb);
  --link-hover-color: var(--dharma-primary);
  --link-hover-color-rgb: var(--dharma-primary-rgb);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  scrollbar-gutter: stable;
}

:is(.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl) {
  padding-inline: var(--clinic-page-inset);
}

:is(.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl) {
  max-width: var(--clinic-container-max);
}

body {
  color: var(--dharma-ink);
  background: var(--dharma-surface);
  font-family: var(--clinic-font-family);
  font-size: var(--clinic-font-base);
  line-height: 1.6;
}

h1, .h1 {
  font-size: var(--clinic-heading-lg);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1;
}
h2, .h2 { font-size: var(--clinic-heading-md); }
h3, .h3 { font-size: var(--clinic-heading-sm); }
h4, .h4, h5, .h5, h6, .h6 { font-size: var(--clinic-font-lg); }
small, .small { font-size: var(--clinic-font-sm); }
.fs-6 { font-size: var(--clinic-font-base) !important; }

/* ---------- Шапка ---------- */

.clinic-header {
  position: sticky;
  top: 0;
  z-index: 22;
  color: var(--clinic-ink);
}

.clinic-header__logo img {
  display: block;
  width: 6.25rem;
  height: auto;
}

/* Компактная шапка при прокрутке: логотип и отступы меньше (высота около 80px), снизу лёгкая тень. Класс ставит user.js.
   Шапка сворачивается плавно; чтобы страница под ней не дёргалась, нижний отступ растёт на столько же, на сколько
   шапка стала ниже (--clinic-header-shrink считает user.js), и общая высота в потоке не меняется. */
.clinic-header {
  --clinic-header-ease: .4s cubic-bezier(.4, 0, .2, 1);
  transition: box-shadow var(--clinic-header-ease), margin-bottom var(--clinic-header-ease);
}

.clinic-header > .container > .row {
  transition: padding var(--clinic-header-ease);
}

.clinic-header__logo img {
  transition: width var(--clinic-header-ease);
}

.clinic-header.is-compact,
.is-header-compact .clinic-header {
  margin-bottom: var(--clinic-header-shrink, 0px);
  box-shadow: 0 .25rem 1rem rgba(var(--clinic-deep-rgb), .08);
}

.clinic-header.is-compact > .container > .row,
.is-header-compact .clinic-header > .container > .row {
  padding-block: .9rem !important;
}

.clinic-header.is-compact .clinic-header__logo img,
.is-header-compact .clinic-header .clinic-header__logo img {
  width: 5.5rem;
}

.is-header-compact .clinic-header,
.is-header-compact .clinic-header > .container > .row,
.is-header-compact .clinic-header .clinic-header__logo img,
.clinic-header.is-measuring,
.clinic-header.is-measuring > .container > .row,
.clinic-header.is-measuring .clinic-header__logo img {
  transition: none !important;
}

.clinic-header__burger.knopka-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: auto;
  height: var(--clinic-icon-button-size);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--clinic-deep);
  transition: color .3s ease;
}

.clinic-header__burger.knopka-icon:hover,
.clinic-header__burger.knopka-icon:focus-visible {
  color: var(--clinic-green);
}

.clinic-header__burger-icon {
  display: flex;
  flex: 0 0 26px;
  flex-direction: column;
  gap: 5px;
}

.clinic-header__burger-icon > span {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  transition: width .3s ease, transform .3s ease;
}

.clinic-header__burger-icon > span:first-child,
.clinic-header__burger-icon > span:last-child {
  transform-origin: left center;
}

.clinic-header__burger:hover .clinic-header__burger-icon > span:first-child,
.clinic-header__burger:focus-visible .clinic-header__burger-icon > span:first-child {
  transform: rotate(-6deg);
}

.clinic-header__burger:hover .clinic-header__burger-icon > span:nth-child(2),
.clinic-header__burger:focus-visible .clinic-header__burger-icon > span:nth-child(2) {
  width: 18px;
}

.clinic-header__burger:hover .clinic-header__burger-icon > span:last-child,
.clinic-header__burger:focus-visible .clinic-header__burger-icon > span:last-child {
  transform: rotate(6deg);
}

.clinic-header__burger-label {
  font-size: var(--clinic-font-menu);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.clinic-header .ico-pin,
.clinic-header .ico-clock,
.clinic-header .ico-phone,
.clinic-header .ico-mail {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--clinic-deep);
}

.clinic-header svg,
.knopka-icon [class^="ico-"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.clinic-header :is(a, summary, button):focus-visible {
  outline: 2px solid var(--clinic-deep);
  outline-offset: 3px;
}

.clinic-header__hours {
  --btn-color: var(--clinic-muted);
  --btn-hover-color: var(--clinic-deep);
  --btn-active-color: var(--clinic-deep);
  --btn-font-size: inherit;
}

.clinic-header__right { min-inline-size: 0; }

.clinic-header__call.knopka-icon {
  --btn-hover-bg: var(--clinic-deep);
  --btn-hover-color: var(--clinic-white);
  background: var(--clinic-deep);
  color: var(--clinic-white);
}

.clinic-header__call .ico-phone {
  width: 20px;
  height: 20px;
  color: currentColor;
  animation: clinic-phone-ring .65s ease-in-out .6s 2;
}

@keyframes clinic-phone-ring {
  0%, 100% { transform: rotate(0); }
  25%, 75% { transform: rotate(-13deg); }
  50% { transform: rotate(13deg); }
}


.clinic-header__contact {
  text-wrap: balance;
  line-height: 1.65;
}

.clinic-search-panel {
  --offcanvas-height: auto;
  --offcanvas-bg: var(--lv-background, var(--clinic-white));
  --offcanvas-color: var(--lv-text, var(--clinic-ink));
  --bs-body-bg: var(--lv-background, var(--clinic-white));
  --bs-body-color: var(--lv-text, var(--clinic-ink));
  --bs-secondary-color: var(--lv-text, var(--clinic-muted));
  --bs-border-color: var(--lv-border, var(--clinic-border));
  --bs-tertiary-bg: var(--lv-surface, var(--clinic-surface));
  --bs-primary: var(--lv-link, var(--clinic-deep));
  bottom: auto;
}

.clinic-search-panel .dc-search-form {
  position: relative;
  padding-block-end: .375rem;
  border-block-end: 2px solid var(--lv-link, var(--clinic-green));
}

.clinic-search-panel .dc-search-field {
  min-width: 0;
}

.clinic-search-panel .dc-search-input {
  min-height: var(--clinic-icon-button-size);
  padding-inline-start: .25rem;
  border: 0;
  background: transparent;
  color: var(--bs-body-color);
  font-size: var(--clinic-font-lg);
}

.clinic-search-panel .dc-search-input::placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}

.clinic-search-panel .dc-search-input:focus {
  box-shadow: none;
}

.clinic-search-panel .dc-search-form:has(.dc-search-input:focus) {
  border-block-end-color: var(--bs-primary);
}

.clinic-search-panel .dc-search-form:has(> button) .dc-search-input {
  padding-inline-end: calc(var(--clinic-icon-button-size) + .5rem);
}

.clinic-search-panel .dc-search-form > button {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--clinic-icon-button-size);
  block-size: var(--clinic-icon-button-size);
  padding: 0;
  border: 0;
  border-radius: var(--border-radius-pill);
  background: transparent;
  color: var(--bs-primary);
  font-size: 0;
  line-height: 0;
}

.clinic-search-panel :is(.dc-search-form > button, .clinic-search-close):focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  box-shadow: none;
}

.clinic-search-panel .clinic-search-close {
  --btn-hover-color: var(--bs-primary);
  --btn-hover-bg: transparent;
  color: var(--bs-primary);
}

:is([data-lv-size="125"], [data-lv-size="150"], [data-lv-size="200"]) .clinic-search-layout {
  padding-block-start: var(--clinic-icon-button-size);
}

.clinic-search-panel .dc-search-form > button::before {
  content: "";
}

.ico-search,
.clinic-search-panel .dc-search-form > button::before {
  display: block;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("../images/ico/search.svg?v=2") center / contain no-repeat;
  mask: url("../images/ico/search.svg?v=2") center / contain no-repeat;
}

.clinic-search-panel .dc-search-panel {
  inset-block-start: calc(100% + .875rem);
  margin: 0;
  max-height: min(60dvh, 22rem);
  border-radius: var(--clinic-radius);
  box-shadow: var(--dharma-shadow);
  scrollbar-width: thin;
  scrollbar-color: var(--bs-secondary-color) var(--bs-body-bg);
  overflow-wrap: anywhere;
}

.clinic-search-panel .dc-search-group {
  padding: .5rem .875rem;
  border-block-end: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  color: var(--bs-primary);
  font-size: var(--clinic-font-nav);
}

.clinic-search-panel .dc-search-item {
  position: relative;
  padding: .625rem 2.375rem .625rem .75rem;
  border-inline-start: .1875rem solid transparent;
  line-height: 1.4;
}

.clinic-search-panel .dc-search-panel:has(.dc-search-all) .dc-search-item {
  scroll-margin-block-end: 4rem;
}

.clinic-search-panel .dc-search-item + .dc-search-item {
  border-block-start: 1px solid var(--bs-border-color);
}

.clinic-search-panel .dc-search-item:is(:hover, :focus-visible, .is-active) {
  border-inline-start-color: var(--bs-primary);
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-primary);
}

.clinic-search-panel .dc-search-item:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
}

.clinic-search-panel .dc-search-item::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: .875rem;
  width: .875rem;
  height: .875rem;
  background: var(--bs-primary);
  mask: url("../images/ico/chevron.svg") center / contain no-repeat;
  transform: translateY(-50%) rotate(-90deg);
}

.clinic-search-panel .dc-search-sub {
  margin-block-start: .125rem;
  font-size: var(--clinic-font-sm);
}

.clinic-search-panel .dc-search-all {
  position: sticky;
  inset-block-end: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: .5rem .875rem;
  border-top: 0;
  background-color: var(--bs-primary);
  color: var(--bs-body-bg);
  font-size: var(--clinic-font-sm);
  line-height: 1.4;
  text-align: center;
  transition: background-color .18s ease;
}

.clinic-search-panel .dc-search-all:hover {
  background-color: color-mix(in srgb, var(--bs-primary) 88%, var(--bs-body-bg));
  color: var(--bs-body-bg);
}

.clinic-search-panel .dc-search-all:is(:focus-visible, .is-active) {
  background-color: var(--bs-primary);
  color: var(--bs-body-bg);
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

.clinic-search-panel .dc-search-empty {
  padding: 1rem .875rem;
  font-size: var(--clinic-font-sm);
}

/* ---------- Общие кнопки и ripple ---------- */

.knopka,
.knopka2 {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(.5rem * var(--clinic-button-scale));
  position: relative;
  overflow: hidden;
  min-height: calc(3.25rem * var(--clinic-button-scale));
  padding: var(--clinic-button-padding-block) calc(1.125rem * var(--clinic-button-scale));
  border: 1px solid var(--clinic-leaf);
  border-radius: var(--clinic-radius);
  background: var(--clinic-leaf);
  color: var(--clinic-white);
  font-family: inherit;
  font-size: var(--clinic-font-sm);
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.knopka:hover,
.knopka:active {
  background: var(--clinic-leaf-hover);
  border-color: var(--clinic-leaf-hover);
  color: var(--clinic-white);
}

.knopka2 {
  border-color: var(--clinic-green);
  background: transparent;
  color: var(--clinic-green);
}

.knopka2:hover,
.knopka2:active {
  border-color: var(--clinic-green);
  background: var(--clinic-green);
  color: var(--clinic-white);
}

.knopka:focus-visible,
.knopka2:focus-visible {
  outline: 2px solid var(--clinic-deep);
  outline-offset: 3px;
}

.knopka:disabled,
.knopka2:disabled {
  opacity: .65;
  cursor: default;
}

.clinic-header__actions .knopka {
  min-height: var(--clinic-icon-button-size);
  padding-block: calc(.5rem * var(--clinic-button-scale));
  font-size: var(--clinic-font-cta);
  font-weight: 600;
  text-transform: uppercase;
}

.knopka-icon {
  --btn-border-color: transparent;
  --btn-disabled-border-color: transparent;
  --btn-hover-color: var(--clinic-deep);
  --btn-hover-bg: var(--clinic-surface);
  --btn-hover-border-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--clinic-icon-button-size);
  height: var(--clinic-icon-button-size);
  padding: 0;
  color: var(--clinic-deep);
  border-radius: var(--clinic-radius);
}

.knopka-icon--muted {
  /* Фон как у зелёных плашек на страницах (лёгкий оттенок основного цвета). */
  --btn-hover-color: var(--clinic-muted);
  --btn-hover-bg: rgba(var(--clinic-green-rgb), .14);
  color: var(--clinic-muted);
  background: rgba(var(--clinic-green-rgb), .08);
}

.knopka-icon--muted > :is(svg, [class^="ico-"]) {
  transition: scale .18s ease, filter .18s ease;
}

.knopka-icon--muted:not(:disabled):hover > :is(svg, [class^="ico-"]) {
  scale: 1.1;
}

.knopka-icon--muted > :is(.ico-max, .ico-vk) {
  filter: grayscale(1);
}

.knopka-icon--muted:is(:hover, :focus-visible) > :is(.ico-max, .ico-vk) {
  filter: grayscale(0);
}

.knopka-icon:disabled {
  color: var(--clinic-muted);
  background: rgba(var(--clinic-green-rgb), .08);
  opacity: 1;
}

.ar-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(14px * var(--clinic-button-scale));
  height: calc(14px * var(--clinic-button-scale));
}

.ar-arrow::before {
  content: "";
  display: block;
  width: calc(10px * var(--clinic-button-scale));
  height: calc(10px * var(--clinic-button-scale));
  background-color: currentColor;
  -webkit-mask: url("../images/ico/arr.svg") center / contain no-repeat;
  mask: url("../images/ico/arr.svg") center / contain no-repeat;
  transition: transform 0.3s ease;
}

.ar-arrow--separated {
  box-sizing: content-box;
  width: calc(16px * var(--clinic-button-scale));
  height: calc(16px * var(--clinic-button-scale));
  margin-inline-start: calc(.5rem * var(--clinic-button-scale));
  padding-inline-start: calc(1rem * var(--clinic-button-scale));
  border-inline-start: 1px solid rgba(var(--clinic-white-rgb), .35);
}

.knopka2 .ar-arrow--separated {
  border-inline-start-color: currentColor;
}

.ar-arrow--separated::before {
  width: calc(12px * var(--clinic-button-scale));
  height: calc(12px * var(--clinic-button-scale));
}

:is(.knopka, .knopka2):is(:hover, :focus-visible) .ar-arrow::before {
  transform: rotate(45deg);
}

.ripple-hover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

html:is(:not([data-lowvision]), [data-lowvision="original"][data-lv-size="100"][data-lv-spacing="false"][data-lv-images="true"])
  .ripple-hover .ar-arrow::before {
  transition: transform .28s ease-in-out !important;
}

html:is(:not([data-lowvision]), [data-lowvision="original"][data-lv-size="100"][data-lv-spacing="false"][data-lv-images="true"])
  .ripple-hover:not(:disabled, [aria-disabled="true"]):hover::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-start: var(--clinic-ripple-x, 50%);
  inset-block-start: var(--clinic-ripple-y, 50%);
  inline-size: max(100%, 3rem);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: var(--clinic-radius-round);
  background: rgba(var(--clinic-white-rgb), .45);
  pointer-events: none;
  animation: clinic-hover-wave .42s ease-out both !important;
}

@keyframes clinic-hover-wave {
  0% { transform: scale(0); opacity: 1; }
  30% { transform: scale(.65); opacity: .85; }
  100% { transform: scale(2.2); opacity: 0; }
}

.ripple {
  position: absolute;
  border-radius: var(--clinic-radius-round);
  background: rgba(var(--clinic-white-rgb), 0.18);
  transform: scale(0);
  animation: clinic-ripple-wave .8s ease-out forwards;
  pointer-events: none;
}

.ripple-hover > .ripple {
  background: rgba(var(--clinic-white-rgb), .4);
}

@keyframes clinic-ripple-wave {
  to {
    transform: scale(2);
    opacity: 0;
  }
}

/* ---------- SVG-иконки ---------- */

.ico-phone,
.ico-mail,
.ico-pin,
.ico-clock,
.ico-cart,
.ico-telegram,
.ico-max,
.ico-vk,
.ico-user,
.ico-comment {
  display: block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
}

.ico-phone {
  -webkit-mask: url("../images/ico/phone.svg?v=2") center / contain no-repeat;
  mask: url("../images/ico/phone.svg?v=2") center / contain no-repeat;
}

.ico-comment {
  -webkit-mask: url("../images/ico/comment.svg") center / contain no-repeat;
  mask: url("../images/ico/comment.svg") center / contain no-repeat;
}

.ico-user {
  -webkit-mask: url("../images/ico/user.svg") center / contain no-repeat;
  mask: url("../images/ico/user.svg") center / contain no-repeat;
}

.ico-mail {
  -webkit-mask: url("../images/ico/mail.svg?v=2") center / contain no-repeat;
  mask: url("../images/ico/mail.svg?v=2") center / contain no-repeat;
}

.ico-pin {
  -webkit-mask: url("../images/ico/pin.svg?v=2") center / contain no-repeat;
  mask: url("../images/ico/pin.svg?v=2") center / contain no-repeat;
}

.ico-clock {
  -webkit-mask: url("../images/ico/clock.svg?v=2") center / contain no-repeat;
  mask: url("../images/ico/clock.svg?v=2") center / contain no-repeat;
}

.ico-cart {
  width: 22px;
  height: 22px;
  -webkit-mask: url("../images/ico/cart.svg") center / contain no-repeat;
  mask: url("../images/ico/cart.svg") center / contain no-repeat;
}

.ico-max {
  background-color: transparent;
  background-image: url("../images/ico/max.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.ico-vk {
  background-color: transparent;
  background-image: url("../images/ico/vk.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.ico-telegram {
  background-color: transparent;
  background-image: url("../images/ico/telegram.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.icon-chevron-down {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask: url("../images/ico/chevron.svg") center / contain no-repeat;
  mask: url("../images/ico/chevron.svg") center / contain no-repeat;
  transition: transform 0.2s ease;
}

/* ---------- Навигация ---------- */
.dharma-skip-link:focus {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 2000;
  padding: .625rem 1rem;
  border-radius: var(--dharma-radius);
  background: var(--dharma-primary);
  color: var(--clinic-white);
  font-weight: 700;
  text-decoration: none;
}

.dharma-header__topbar-nav .mod-menu {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dharma-header__topbar-nav .mod-menu>li {
  position: relative;
  margin: 0;
}

.dharma-header__topbar-nav .mod-menu>li>a,
.dharma-header__topbar-nav .mod-menu>li>span {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 0;
  font-size: var(--clinic-font-nav);
  color: var(--dharma-ink);
  text-decoration: none;
  letter-spacing: normal;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
}

.dharma-header__topbar-nav .mod-menu>li.active>a,
.dharma-header__topbar-nav .mod-menu>li.active>span,
.dharma-header__topbar-nav .mod-menu>li:hover>a,
.dharma-header__topbar-nav .mod-menu>li:hover>span {
  color: var(--dharma-primary);
}

.dharma-header__topbar-nav .mod-menu>li.parent:has(>.mod-menu__sub)>:is(a, span)::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-inline-start: 6px;
  background-color: currentColor;
  -webkit-mask: url("../images/ico/chevron.svg") center / contain no-repeat;
  mask: url("../images/ico/chevron.svg") center / contain no-repeat;
  pointer-events: none;
}

/* Не дублировать стрелку Joomla у ссылок с подменю. */
.dharma-header__topbar-nav .mod-menu>li>a+.mod-menu__toggle-sub {
  display: none;
}

.dharma-header__topbar-nav .mod-menu .mod-menu__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1030;
  margin: 0;
  min-width: 280px;
  background-color: var(--dharma-surface);
  box-shadow: var(--dharma-shadow-dropdown);
  padding: 1.25rem 2rem;
  border-radius: var(--clinic-radius);
  border-top: 3px solid var(--dharma-primary);
  list-style: none;
}

.dharma-header__topbar-nav .parent:hover>.mod-menu__sub,
.dharma-header__topbar-nav .parent:focus-within>.mod-menu__sub {
  display: block;
  animation: dharmaHeaderDropdownIn .2s ease-out;
}

.dharma-header__topbar-nav .mod-menu .mod-menu__sub>li>:is(a, span) {
  display: block;
  padding: 0.1rem 0;
  font-size: var(--clinic-font-sm);
  color: var(--dharma-ink);
  text-decoration: none;
  cursor: pointer;
}

.dharma-header__topbar-nav .mod-menu .mod-menu__sub a:hover {
  color: var(--dharma-primary);
}

.dharma-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  color: var(--dharma-ink);
  text-decoration: none;
  cursor: pointer;
}

.dharma-brand img {
  display: block;
  width: auto;
  max-width: 140px;
  height: auto;
  margin: 0 12px;
}

.dharma-header__social {
  gap: 0.5rem;
}

.dharma-header__social a {
  font-size: var(--clinic-font-base);
  color: var(--dharma-ink);
  height: 40px;
  width: 40px;
  border-radius: var(--clinic-radius);
  border: 1px solid transparent;
  background: var(--clinic-white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 11px 1px rgba(var(--clinic-muted-rgb), 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  text-decoration: none;
}

.dharma-header__social a:hover,
.dharma-header__social a:focus-visible {
  color: var(--dharma-ink);
  border-color: rgba(var(--dharma-primary-rgb), 0.24);
  box-shadow: 0 0 0 4px rgba(var(--dharma-primary-rgb), 0.08), 0 10px 22px rgba(var(--dharma-ink-rgb), 0.12);
  transform: translateY(-2px) scale(1.04);
}

/* ---------- Корзина: существующие layout overrides RadicalMart ---------- */

.dharma-header__cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: var(--dharma-ink);
  text-decoration: none;
}

.dharma-header__cart-link:hover {
  color: var(--dharma-primary);
}

.dharma-header__cart-link:disabled {
  cursor: default;
}

.dharma-header__cart-badge {
  position: absolute;
  top: 0;
  right: -5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: var(--clinic-radius);
  background-color: var(--dharma-primary);
  color: var(--clinic-white);
  font-size: var(--clinic-font-sm);
  font-weight: 700;
  line-height: 1;
}

.icon-close-bars {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: var(--clinic-radius);
  background-color: var(--dharma-surface-gray);
  color: var(--dharma-ink);
  transition: transform .2s ease, background-color .2s ease;
}

.icon-close-bars:hover {
  background-color: var(--dharma-muted);
  transform: rotate(90deg);
}

.icon-close-bars::before,
.icon-close-bars::after {
  content: '';
  position: absolute;
  width: 55%;
  height: 2px;
  background-color: currentColor;
}

.icon-close-bars::before {
  transform: rotate(45deg);
}

.icon-close-bars::after {
  transform: rotate(-45deg);
}

.cart-offcanvas {
  width: 100%;
  max-width: 26rem;
  transition: transform .3s ease-in-out;
  will-change: transform;
}

.cart-offcanvas__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cart-offcanvas__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  padding: 1.25rem;
  border-bottom: 1px solid var(--dharma-surface-gray);
}

.cart-offcanvas__title {
  display: flex;
  align-items: center;
  gap: .625rem;
  color: var(--dharma-ink);
  font-size: var(--clinic-font-base);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cart-offcanvas__title .ico-cart {
  width: 20px;
  height: 20px;
  color: var(--dharma-primary);
}

.cart-offcanvas__close {
  width: 2.25rem;
  height: 2.25rem;
}

.cart-offcanvas__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: .5rem;
  overflow-y: auto;
  background-color: var(--dharma-surface-gray);
}

.cart-item {
  position: relative;
  display: flex;
  gap: .75rem;
  padding: 1rem;
  margin-bottom: .5rem;
  background-color: var(--dharma-surface);
  border-radius: var(--dharma-radius);
  box-shadow: var(--dharma-shadow-sm);
}

.cart-item:last-child {
  margin-bottom: 0;
}

.cart-item__image {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border: 1px solid var(--dharma-surface-gray);
  border-radius: var(--dharma-radius);
}

.cart-item__image-el {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-item__content {
  flex: 1 1 auto;
  min-width: 0;
}

.cart-item__category {
  display: block;
  margin-bottom: .15rem;
  color: var(--dharma-muted);
  font-size: var(--clinic-font-sm);
  font-weight: 400;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: none;
}

.cart-item__category:hover,
.cart-item__title:hover {
  color: var(--dharma-primary);
}

.cart-item__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--dharma-ink);
  font-size: var(--clinic-font-sm);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.cart-item__extras {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-top: .4rem;
}

.cart-item__extra {
  padding: .15rem .4rem;
  border-radius: var(--clinic-radius);
  background-color: var(--dharma-surface-gray);
  color: var(--dharma-ink);
  font-size: var(--clinic-font-sm);
  line-height: 1.3;
}

.cart-item__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .625rem;
}

.cart-quantity {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--dharma-surface-gray);
  border-radius: var(--dharma-radius);
}

.cart-quantity__button,
.cart-quantity__input {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dharma-ink);
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.cart-quantity__button {
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}

.cart-quantity__button:hover {
  background-color: var(--dharma-primary);
  color: var(--clinic-white);
}

.cart-quantity__input {
  width: 2rem;
  border-right: 1px solid var(--dharma-surface-gray);
  border-left: 1px solid var(--dharma-surface-gray);
  font-size: var(--clinic-font-sm);
  appearance: textfield;
  -moz-appearance: textfield;
}

.cart-quantity__input::-webkit-outer-spin-button,
.cart-quantity__input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

.cart-item__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: var(--dharma-ink);
  line-height: 1.2;
  text-align: right;
}

.cart-item__unit-price {
  margin-bottom: .15rem;
  color: var(--dharma-muted);
  font-size: var(--clinic-font-sm);
  white-space: nowrap;
}

.cart-item__price strong {
  font-size: var(--clinic-font-sm);
}

.cart-item__remove {
  position: absolute;
  top: .625rem;
  right: .625rem;
  width: 1.5rem;
  height: 1.5rem;
}

.cart-offcanvas__footer {
  flex: 0 0 auto;
  padding: 1rem 1.25rem 1.25rem;
  background-color: var(--dharma-surface);
  border-top: 1px solid var(--dharma-surface-gray);
}

.cart-offcanvas__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
  color: var(--dharma-ink);
  font-size: var(--clinic-font-sm);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.cart-offcanvas__total strong {
  font-size: var(--clinic-font-lg);
  letter-spacing: 0;
  text-transform: none;
}

.cart-offcanvas__actions {
  display: flex;
  gap: .625rem;
}

.cart-offcanvas__action {
  flex: 1 1 50%;
}

.cart-offcanvas__empty {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2.5rem 1.25rem;
  color: var(--dharma-muted);
  text-align: center;
}

.cart-offcanvas__empty .ico-cart {
  width: 3rem;
  height: 3rem;
}

.cart-offcanvas__empty p {
  margin: 0;
  color: var(--dharma-ink);
}

@keyframes cart-toast-in {
  from {
    opacity: 0;
    transform: translateX(calc(100% + 1.5rem));
  }

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

@keyframes cart-toast-out {
  to {
    opacity: 0;
    transform: translateX(calc(100% + 1.5rem));
  }
}

@keyframes cart-toast-progress {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

.cart-toast {
  position: fixed;
  z-index: 1090;
  top: 1.5rem;
  right: 1.5rem;
  width: auto;
  left: 1.5rem;
  max-width: 20rem;
  margin-left: auto;
  overflow: hidden;
  background-color: var(--dharma-surface);
  border-radius: var(--dharma-radius);
  box-shadow: var(--dharma-shadow-dropdown);
  animation: cart-toast-in .28s ease-out both;
}

.cart-toast.is-leaving {
  animation: cart-toast-out .22s ease-in both;
}

.cart-toast__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem .75rem;
  background-color: var(--dharma-surface-gray);
  color: var(--dharma-ink);
  font-size: var(--clinic-font-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cart-toast__head .ico-cart {
  width: 16px;
  height: 16px;
  color: var(--dharma-primary);
}

.cart-toast__close {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: auto;
}

.cart-toast__body {
  display: flex;
  gap: .75rem;
  padding: .75rem;
}

.cart-toast__image {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  border: 1px solid var(--dharma-surface-gray);
  border-radius: var(--dharma-radius);
}

.cart-toast__image-el {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-toast__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--dharma-ink);
  font-size: var(--clinic-font-sm);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.cart-toast__content {
  min-width: 0;
  flex: 1 1 auto;
}

.cart-toast__details {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .625rem;
  margin-top: .4rem;
  color: var(--dharma-muted);
  font-size: var(--clinic-font-sm);
  line-height: 1.3;
}

.cart-toast__price {
  color: var(--dharma-primary);
  font-size: var(--clinic-font-sm);
  font-weight: 700;
  white-space: nowrap;
}

.cart-toast__progress {
  height: .2rem;
  background-color: var(--dharma-primary);
  transform-origin: left;
  animation: cart-toast-progress linear both;
}

/* Панели держат место под полосу прокрутки и блокируют фон до закрытия. */
html:has(.offcanvas:is(.dharma-offcanvas, .lowvision-panel, .clinic-search-panel):is(.showing, .show, .hiding)) {
  overflow-y: hidden;
}

.offcanvas:is(.dharma-offcanvas, .lowvision-panel, .clinic-search-panel) {
  transition: transform var(--clinic-panel-duration) ease-in-out !important;
}

.offcanvas:is(.dharma-offcanvas, .lowvision-panel) .offcanvas-body,
.clinic-search-panel .dc-search-panel {
  overscroll-behavior: contain;
}

html:has(.offcanvas:is(.dharma-offcanvas, .lowvision-panel, .clinic-search-panel):is(.showing, .show, .hiding)) .offcanvas-backdrop {
  transition: opacity var(--clinic-panel-duration) ease-in-out !important;
}

/* ---------- Оффканвас-меню (клон модуля "menu" с layout=offcanvas) ---------- */

.dharma-offcanvas {
  --offcanvas-width: 100%;
  background-color: var(--dharma-surface);
  box-shadow: var(--dharma-shadow-dropdown);
}

.dharma-offcanvas .offcanvas-header {
  padding: 1.25rem;
  border-bottom: 1px solid var(--dharma-border);
}

.dharma-offcanvas .offcanvas-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  background-color: var(--dharma-surface-soft);
}

.dharma-offcanvas .mod-menu_offcanvas {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dharma-offcanvas .mod-menu_offcanvas>li {
  position: relative;
  background-color: var(--dharma-surface);
  border-radius: var(--dharma-radius);
  box-shadow: var(--dharma-shadow-sm);
  overflow: hidden;
}

.dharma-offcanvas .mod-menu_offcanvas>li>a,
.dharma-offcanvas .mod-menu_offcanvas>li>span {
  display: block;
  padding: 1rem 2.75rem 1rem 1.1rem;
  color: var(--dharma-ink);
  font-weight: 700;
  font-size: var(--clinic-font-nav);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
}

.dharma-offcanvas .mod-menu_offcanvas>li.active>a,
.dharma-offcanvas .mod-menu_offcanvas>li.active>span,
.dharma-offcanvas .mod-menu_offcanvas>li>a:hover,
.dharma-offcanvas .mod-menu_offcanvas>li>span:hover {
  color: var(--dharma-primary);
}

.dharma-offcanvas .mod-menu__toggle-sub {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.75rem;
  height: 3.4rem;
  border: 0;
  background: none;
  color: var(--dharma-ink);
  cursor: pointer;
}

.dharma-offcanvas .mod-menu__toggle-sub[aria-expanded="true"] .icon-chevron-down {
  transform: rotate(180deg);
}

.dharma-offcanvas .mod-menu .mod-menu__sub {
  margin: 0;
  padding: 0 1.25rem 0.5rem;
  list-style: none;
  background-color: var(--dharma-surface);
}

.dharma-offcanvas .mod-menu .mod-menu__sub>li>a {
  display: block;
  padding: 0.6rem 0.5rem;
  font-size: var(--clinic-font-sm);
  font-weight: 500;
  color: var(--dharma-ink);
  text-decoration: none;
  cursor: pointer;
}

.dharma-offcanvas .mod-menu .mod-menu__sub a:hover {
  color: var(--dharma-primary);
}

.dharma-offcanvas__contacts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1.1rem;
  background-color: var(--dharma-surface);
  border-radius: var(--dharma-radius);
  box-shadow: var(--dharma-shadow-sm);
}

html:not([data-lowvision]) .dharma-offcanvas__contacts {
  background-image:
    radial-gradient(ellipse 105% 95% at 110% 110%,
      rgba(var(--clinic-green-rgb), .09) 0 65%,
      rgba(var(--clinic-green-rgb), .055) 65% 76%,
      rgba(var(--clinic-green-rgb), .028) 76% 88%,
      transparent 88%),
    linear-gradient(150deg, var(--clinic-white) 30%, var(--clinic-hero-mint));
}

.dharma-offcanvas__contacts-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.dharma-offcanvas__contacts-icon-wrap {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--clinic-radius);
  background-color: var(--clinic-white);
}

.dharma-offcanvas__contacts-icon {
  color: var(--dharma-primary);
}

.dharma-offcanvas__contacts-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-left: 1rem;
  padding-left: 1rem;
  padding-top: 0.3rem;
  border-left: 1px dashed var(--dharma-muted);
  font-size: var(--clinic-font-sm);
  line-height: 1.4;
  color: var(--dharma-ink);
}

.dharma-offcanvas__contacts-text a {
  color: var(--dharma-ink);
  text-decoration: none;
  font-weight: 700;
}

.dharma-offcanvas__contacts-text a:hover {
  color: var(--dharma-primary);
}

.dharma-offcanvas__contacts-text a[href^="mailto:"] {
  color: var(--dharma-primary);
}

.dharma-offcanvas__social {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  padding-top: 0.25rem;
}

/* ---------- Остальной контент ---------- */

.dharma-content>.container>.row {
  align-items: start;
}

.dharma-footer {
  margin-top: var(--dharma-section);
  padding-block: 2rem;
  color: var(--clinic-border);
  background: var(--dharma-ink);
}

.dharma-footer a {
  color: inherit;
}

.dharma-footer a:hover,
.dharma-footer a:focus-visible {
  color: var(--dharma-primary);
}

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

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Секции (обёртка модуля html/layouts/chromes/section.php) ---------- */

.dharma-section {
  padding-block: var(--dharma-section);
}

.dharma-section--nopad {
  padding-block: 0;
}

.dharma-section--sm {
  padding-block: calc(var(--dharma-section) * .5);
}

.dharma-section--lg {
  padding-block: calc(var(--dharma-section) * 1.5);
}

.dharma-section--soft {
  background-color: var(--dharma-surface-soft);
}

.dharma-section--gray {
  background-color: var(--dharma-surface-gray);
}

.dharma-section--primary {
  background-color: var(--dharma-primary);
  color: var(--clinic-white);
}

.dharma-section--dark {
  background-color: var(--dharma-ink);
  color: var(--clinic-white);
}

.dharma-section--primary a:not([class]),
.dharma-section--dark a:not([class]) {
  color: inherit;
}

.dharma-section__title {
  margin: 0 0 1.5rem;
  color: inherit;
  font-size: var(--clinic-heading-md);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}

/* ---------- Страница ошибки (error.php) ---------- */

.dharma-error-body {
  min-height: 100vh;
  background: var(--dharma-surface-soft);
}

.dharma-error {
  position: relative;
  display: flex;
  min-height: 100vh;
  align-items: flex-start;
  overflow: hidden;
  padding: 2rem 1rem;
  background:
    radial-gradient(circle at 84% 46%, rgba(var(--dharma-primary-rgb), .08), transparent 30rem),
    linear-gradient(135deg, var(--clinic-white) 0%, var(--dharma-surface-soft) 100%);
  color: var(--dharma-ink);
  isolation: isolate;
}

.dharma-error::before {
  position: absolute;
  z-index: -1;
  top: -24rem;
  right: -15rem;
  width: 26rem;
  height: 26rem;
  border: 1px solid rgba(var(--dharma-primary-rgb), .1);
  border-radius: var(--clinic-radius-round);
  box-shadow: 0 0 0 2rem rgba(var(--dharma-primary-rgb), .035), 0 0 0 4rem rgba(var(--dharma-primary-rgb), .018);
  content: "";
}

.dharma-error__shell {
  position: relative;
  width: 100%;
  max-width: var(--dharma-container);
  margin: 0 auto;
}

.dharma-error__brand {
  display: inline-flex;
  align-items: center;
  margin-bottom: 3rem;
}

.dharma-error__brand img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 3rem;
  object-fit: contain;
}

.dharma-error__layout {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.dharma-error__content {
  max-width: 42rem;
}

.dharma-error__eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--dharma-primary);
  font-size: var(--clinic-font-sm);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.dharma-error__eyebrow span {
  display: block;
  width: 2.75rem;
  height: 3px;
  flex: 0 0 auto;
  background: var(--dharma-primary);
}

.dharma-error h1 {
  max-width: 38rem;
  margin: 1.25rem 0;
  color: var(--dharma-ink);
  font-size: var(--clinic-heading-lg);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: 1;
}

.dharma-error__description {
  max-width: 37rem;
  margin: 0;
  color: var(--dharma-muted);
  font-size: var(--clinic-font-lg);
  line-height: 1.65;
}

.dharma-error__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  margin-top: 2rem;
}

.dharma-error__actions .knopka,
.dharma-error__actions .knopka2 {
  min-width: calc(11rem * var(--clinic-button-scale));
}

.dharma-error__visual {
  position: relative;
  display: grid;
  order: -1;
  min-height: 12rem;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(var(--dharma-primary-rgb), .1);
  border-radius: var(--clinic-radius);
  background: rgba(var(--dharma-primary-rgb), .06);
  box-shadow: 0 1.5rem 3rem rgba(var(--dharma-ink-rgb), .08);
}

.dharma-error__grid {
  position: absolute;
  inset: 0;
  opacity: .6;
  background-image:
    linear-gradient(rgba(var(--clinic-white-rgb), .9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--clinic-white-rgb), .9) 1px, transparent 1px);
  background-size: 2.75rem 2.75rem;
}

.dharma-error__code {
  position: relative;
  color: var(--dharma-primary);
  font-size: var(--clinic-error-code);
  font-weight: 700;
  letter-spacing: -.08em;
  line-height: .8;
}

.dharma-error__debug {
  position: relative;
  width: 100%;
  max-width: var(--dharma-container);
  margin: 2rem auto 0;
  padding: 1rem;
  border: 1px solid rgba(var(--dharma-ink-rgb), .16);
  color: var(--dharma-muted);
  font-size: var(--clinic-font-sm);
}

.dharma-error__debug summary {
  cursor: pointer;
  color: var(--dharma-ink);
  font-weight: 700;
}

/* Хлебные крошки: без плашки, небольшие отступы, разделитель «›», ссылки без подчёркивания */
.dharma-content .mod-breadcrumbs__wrapper {
  margin: 1.25rem 0 1.5rem;
}

.dharma-content .mod-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .15rem 0;
  margin: 0;
  /* Модуль приходит с утилитами px-3 py-2 (они с !important): крошки встают вровень с краем шапки и контента. */
  padding: 0 !important;
  font-size: var(--clinic-font-sm);
  line-height: 1.4;
  color: rgba(var(--dharma-ink-rgb), .65);
  background: none;
  border: 0;
  border-radius: 0;
}

/* Иконку-«маяк» в начале крошек не показываем: первая крошка встаёт вровень с краем. */
.dharma-content .mod-breadcrumbs__divider {
  display: none;
}

.dharma-content .mod-breadcrumbs .breadcrumb-item {
  display: inline-flex;
  align-items: center;
  padding-left: 0;
}

.dharma-content .mod-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
  float: none;
  padding: 0 .6rem;
  color: var(--dharma-muted);
  content: "\203A";
}

.dharma-content .mod-breadcrumbs .breadcrumb-item a {
  color: var(--dharma-primary);
  text-decoration: none;
}

.dharma-content .mod-breadcrumbs .breadcrumb-item a:hover {
  text-decoration: underline;
}

.dharma-content .mod-breadcrumbs .breadcrumb-item.active {
  font-weight: 500;
  color: var(--dharma-ink);
}

/* ---------- Страница врача: баннер с исходной фотографией ---------- */

.clinic-doctor-hero {
  position: relative;
  isolation: isolate;
  padding-block: 2rem 0;
  color: var(--clinic-ink);
}

.clinic-doctor-hero__backdrop {
  position: absolute;
  z-index: -2;
  inset-block: 0;
  inset-inline: calc(50% - 50vw);
  background: linear-gradient(100deg, var(--clinic-white) 25%, var(--clinic-hero-mint));
}

.clinic-doctor-hero__leaves {
  position: absolute;
  z-index: -1;
  inset-inline-start: 35%;
  top: 10%;
  width: 21rem;
  max-width: 55%;
  height: auto;
  stroke: var(--clinic-green);
  opacity: .08;
  stroke-width: 2;
  pointer-events: none;
}

.clinic-doctor-hero .row > * { min-inline-size: 0; }
.clinic-doctor-hero__content { padding-block: 0 2rem; }

.clinic-doctor-hero__eyebrow {
  margin-bottom: 1.5rem;
  color: var(--clinic-deep);
  font-size: var(--clinic-font-sm);
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.clinic-doctor-hero__eyebrow::after {
  content: "";
  display: block;
  width: 3rem;
  height: .25rem;
  margin-top: 1rem;
  border-radius: var(--clinic-radius);
  background: var(--clinic-green);
}

.clinic-doctor-hero h1 {
  max-inline-size: 20ch;
  margin-bottom: 1.25rem;
  font-size: var(--clinic-heading-lg);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.clinic-doctor-hero__position {
  margin-bottom: 1.75rem;
  color: var(--clinic-muted);
  font-size: var(--clinic-font-lg);
}

.clinic-doctor-hero__facts { margin-block: 0 2rem; }
.clinic-doctor-hero__fact {
  position: relative;
  height: 100%;
  padding: 1.125rem .75rem;
  border: 1px solid var(--clinic-border);
  border-radius: var(--clinic-radius);
  background: var(--clinic-white);
}

.clinic-doctor-hero__facts dt {
  margin-bottom: .375rem;
  padding-inline-start: 2.25rem;
  color: var(--clinic-muted);
  font-size: var(--clinic-font-sm);
  font-weight: 400;
}

#dharma_clinic .clinic-doctor-hero__facts .dc-ico {
  position: absolute;
  inset-inline-start: .75rem;
  top: 1.375rem;
  width: 1.5rem;
  height: 1.5rem;
}

.clinic-doctor-hero__facts dd {
  margin: 0;
  padding-inline-start: 2.25rem;
  font-size: var(--clinic-font-base);
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.clinic-doctor-hero__actions > * {
  max-inline-size: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.clinic-doctor-hero__visual { position: relative; align-self: end; }

.clinic-doctor-hero__portrait {
  position: relative;
  max-width: 25rem;
  margin-inline: auto;
}

.clinic-doctor-hero__portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--clinic-radius);
}

.clinic-doctor-hero__reviews {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .875rem 1.25rem;
  background: var(--clinic-white);
  color: var(--clinic-deep);
  font-size: var(--clinic-font-sm);
  text-decoration: none;
  border-radius: var(--clinic-radius);
  border: 1px solid var(--clinic-border);
  transition: background-color .2s ease;
}

.clinic-doctor-hero__reviews:hover { background: var(--clinic-surface); color: var(--clinic-deep); }
.clinic-doctor-hero__reviews:focus-visible { outline: 2px solid var(--clinic-deep); outline-offset: 2px; }

#dharma_clinic .clinic-doctor-hero__reviews .dc-ico {
  width: 1rem;
  height: 1rem;
  background: currentColor;
}

html[data-lowvision] .clinic-doctor-hero__eyebrow { letter-spacing: normal; text-transform: none; }
html:is([data-lv-size="150"], [data-lv-size="200"]) .clinic-doctor-hero h1 {
  font-size: var(--clinic-heading-md);
  letter-spacing: normal;
}
html:is([data-lv-size="150"], [data-lv-size="200"]) .clinic-doctor-hero__reviews { position: static; }

.clinic-slide {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: var(--lv-background, var(--clinic-hero-mint));
  color: var(--lv-text, var(--clinic-hero-ink));
}

.clinic-slide__copy {
  position: relative;
  min-inline-size: 0;
  padding-block: 3rem 2rem;
  overflow-wrap: anywhere;
}

.clinic-slide__eyebrow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .625rem;
  color: var(--lv-text, var(--clinic-hero-ink));
  font-size: var(--clinic-font-sm);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-block: 0 .75rem;
}

.clinic-slide__eyebrow::before {
  content: "";
  inline-size: .55em;
  block-size: .55em;
  margin-block-start: calc((1lh - .55em) / 2);
  border-radius: var(--clinic-radius-round);
  background: var(--lv-link, var(--clinic-hero-accent));
}

.clinic-slide__title {
  margin-block: 0 1rem;
  color: var(--lv-text, var(--clinic-deep));
}

.clinic-slide__title span {
  display: block;
  color: var(--lv-link, var(--clinic-hero-accent));
}

.clinic-slide__description {
  max-inline-size: 44ch;
  margin-block-end: 1.75rem;
  color: var(--lv-text, var(--clinic-ink));
  font-size: var(--clinic-font-lg);
  line-height: 1.5;
}

.clinic-slide__points { margin-block: 2rem 0; gap: 1rem; flex-wrap: wrap; }
.clinic-slide__points li {
  display: flex;
  flex: 1 1 9rem;
  align-items: center;
  gap: .65rem;
  min-inline-size: 0;
  font-size: var(--clinic-font-sm);
  line-height: 1.35;
}

.clinic-slide__points li > span { min-inline-size: 0; }

.clinic-slide__icon {
  inline-size: 2rem;
  block-size: 2rem;
  flex: 0 0 2rem;
  color: var(--lv-link, var(--clinic-hero-accent));
}

.clinic-slide__botanical {
  position: absolute;
  z-index: -1;
  inline-size: 24rem;
  block-size: auto;
  aspect-ratio: 460 / 416;
  inset-block-start: 0;
  inset-inline-end: 1rem;
  opacity: .55;
  pointer-events: none;
}

.clinic-slide__media { position: relative; min-inline-size: 0; margin-block-start: auto; order: 1; }
.clinic-slide__media img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.clinic-slide__curve {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  fill: var(--lv-background, var(--clinic-hero-mint));
  pointer-events: none;
}

.clinic-slide__curve--top { display: block; block-size: 3rem; }
.clinic-slide__curve--side { display: none; block-size: 100%; }
html[data-lowvision] .clinic-slide { background: var(--lv-background); }
html[data-lowvision] .clinic-slide__botanical { display: none; }

.dharma-slider__image {
  display: block;
  width: 100%;
  height: auto;
}

.dharma-slider__content {
  padding-block: 1rem;
  overflow-wrap: anywhere;
}

.dharma-slider__swiper:has(.clinic-slide) .dharma-slider__slide {
  display: flex;
  flex-direction: column;
  block-size: auto;
}

.dharma-slider__swiper { --swiper-wrapper-transition-timing-function: cubic-bezier(.22, .61, .36, 1); }

.dharma-slider__slide > .clinic-slide { flex: 1; }

.dharma-slider__controls {
  display: flex;
  justify-content: flex-end;
  padding-block: .5rem;
  background: var(--lv-background, var(--clinic-hero-mint));
}

html:not([data-lowvision]) .dharma-slider__swiper:has(.clinic-slide__media) .dharma-slider__controls {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  inset-block-end: .75rem;
  max-inline-size: none;
  padding-inline: max(1rem, var(--clinic-page-inset));
  background: transparent;
  pointer-events: none;
}

.dharma-slider__control-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .375rem;
  padding: .375rem .5rem;
  border: 1px solid var(--lv-border, rgba(var(--clinic-white-rgb), .65));
  border-radius: var(--clinic-radius);
  color: var(--lv-text, var(--clinic-deep));
  background: var(--lv-surface, rgba(var(--clinic-white-rgb), .86));
  pointer-events: auto;
}

@supports (backdrop-filter: blur(1px)) {
  html:not([data-lowvision]) .dharma-slider__control-panel {
    background: rgba(var(--clinic-white-rgb), .23);
    backdrop-filter: blur(14px) saturate(1.25);
    box-shadow: 0 .25rem 1rem rgba(var(--clinic-deep-rgb), .12), inset 0 1px rgba(var(--clinic-white-rgb), .55);
  }
}

.dharma-slider__control-panel .knopka-icon {
  --btn-hover-color: var(--lv-text, var(--clinic-deep));
  --btn-hover-bg: var(--lv-background, rgba(var(--clinic-white-rgb), .45));
  --btn-hover-border-color: currentColor;
  --btn-border-color: var(--lv-border, rgba(var(--clinic-deep-rgb), .4));
  color: inherit;
  border-radius: var(--clinic-radius-round);
}

.dharma-slider__control-panel svg { inline-size: 1.125rem; block-size: 1.125rem; }
.dharma-slider__counter { font-size: var(--clinic-font-sm); font-variant-numeric: tabular-nums; }
.dharma-slider__counter:has(+ .dharma-slider__nav-btn--prev) { margin-inline-end: .375rem; }
.dharma-slider__counter-current { font-weight: 700; }

.dharma-slider__swiper .dharma-slider__controls .dharma-slider__pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  inline-size: auto;
}

.dharma-slider__pagination .swiper-pagination-bullet {
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--clinic-radius);
  background: transparent;
  color: inherit;
  opacity: 1;
}

.dharma-slider__pagination .swiper-pagination-bullet::before {
  content: "";
  inline-size: .45rem;
  block-size: .45rem;
  border-radius: var(--clinic-radius-round);
  background: currentColor;
  opacity: .6;
}

.dharma-slider__pagination .swiper-pagination-bullet-active::before { opacity: 1; }
.dharma-slider__controls button:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.dharma-slider__controls[hidden] { display: none; }

/* ---------- Адаптивность: только стандартные брейкпоинты Bootstrap ---------- */
/* Все изменения по ширине добавлять сюда, mobile-first. */

/* sm */
@media (min-width: 576px) {
  :root {
    --dharma-space: 1.5rem;
  }

  .clinic-header__logo img { width: 9rem; }
  .dharma-offcanvas { --offcanvas-width: 24rem; }
}

/* md */
@media (min-width: 768px) {
  :root {
    --clinic-button-scale: 1;
    --clinic-button-padding-block: .75rem;
    --clinic-heading-lg: 3rem;
    --clinic-heading-md: 2.25rem;
    --clinic-error-code: 10rem;
  }

  .clinic-slide__copy { padding-block-start: 2rem; }
  .dharma-error { padding: 3rem 2rem; }
}

/* lg */
@media (min-width: 992px) {
  :root {
    --dharma-space: 2rem;
    --dharma-section: 4rem;
  }

  .clinic-header__contact { padding-inline: 1rem; }
  .clinic-slide > .container > .row { min-block-size: 34rem; }
  .clinic-slide__copy { padding-block: 3rem 4rem; padding-inline-end: 1.5rem; }
  .clinic-slide__media {
    position: absolute;
    z-index: -1;
    inset-block: 0;
    inset-inline: 44% 0;
  }
  .clinic-slide__media img { block-size: 100%; object-position: center; }
  .clinic-slide__curve--top { display: none; }
  .clinic-slide__curve--side { display: block; }
  .clinic-slide__botanical { inset-inline: calc(50% - 13rem) auto; }
  html[data-lowvision] .clinic-slide__copy { width: 100%; padding-block: 1.5rem; }
  html[data-lowvision] .clinic-slide__media { display: none; }
  .dharma-header__topbar-nav .mod-menu { gap: 1.25rem; }
  .clinic-doctor-hero { padding-block: 0; }
  .clinic-doctor-hero__content { position: relative; z-index: 1; padding-block: 3rem; padding-inline-end: 2rem; }
  .clinic-doctor-hero__visual { align-self: stretch; }
  .clinic-doctor-hero__portrait { height: 100%; min-height: 35rem; max-width: none; margin-inline: 0; }
  .clinic-doctor-hero__portrait img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  }
  .clinic-doctor-hero__reviews { position: absolute; inset-inline: 1rem; bottom: 1rem; }
  html[data-lowvision] .clinic-doctor-hero__portrait { min-height: 0; max-width: 25rem; }
  html[data-lowvision] .clinic-doctor-hero__portrait img { position: static; height: auto; clip-path: none; }
  .dharma-error { align-items: center; }
  .dharma-error__brand { margin-bottom: 5rem; }
  .dharma-error__brand img { height: 4rem; }
  .dharma-error__layout {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .dharma-error__visual {
    order: 0;
    min-height: 21rem;
  }
}

/* xl */
@media (min-width: 1200px) {
  :root {
    --dharma-space: 2.5rem;
  }

  .clinic-slide__points li + li { border-inline-start: 1px solid var(--lv-border, var(--clinic-border)); padding-inline-start: 1rem; }
  .clinic-slide__points { flex-wrap: nowrap; }
  html[data-lowvision] .clinic-slide__points { flex-wrap: wrap; }
  .clinic-header__logo img { width: 10rem; }
  .clinic-header__contact { padding-inline: 1.25rem; }
  .dharma-header__topbar-nav .mod-menu { gap: 1.75rem; }
  .dharma-error { padding: 4rem 3rem; }
  .dharma-error::before { width: 40rem; height: 40rem; }
  .dharma-error__layout { gap: 4rem; }
}

/* xxl */
@media (min-width: 1400px) {
  :root {
    --clinic-page-inset: .5em;
    --clinic-container-max: var(--dharma-container);
    --clinic-error-code: 14rem;
  }

  .dharma-error { padding: 6rem 5rem; }
  .dharma-error::before { width: 52rem; height: 52rem; }
  .dharma-error__visual { min-height: 30rem; }
}

/* Системная настройка движения, не брейкпоинт макета. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; --clinic-panel-duration: 0s; }
  .knopka, .knopka2, .ar-arrow::before, .clinic-search-panel .dc-search-all { transition: none; }
  .clinic-doctor-hero__reviews { transition: none; }
  .clinic-header__burger-icon > span { transition: none; }
  .knopka-icon--muted > :is(svg, [class^="ico-"]) { transition: none; }
  .knopka-icon--muted:not(:disabled):hover > :is(svg, [class^="ico-"]) { scale: none; }
  .clinic-header__call .ico-phone { animation: none; }
  .dharma-header__topbar-nav .mod-menu__sub { animation: none; }
}

/* Меню «Услуги»: у пункта есть подпункты второго уровня (группы), их список раскладывается колонками. */
@media (min-width: 992px) {
  /* Панель на всю ширину навигации, а не от края пункта: иначе выходит за окно. */
  .dharma-header__topbar-nav {
    position: relative;
  }

  .dharma-header__topbar-nav .mod-menu>li.parent:has(.mod-menu__sub .mod-menu__sub) {
    position: static;
  }

  .dharma-header__topbar-nav .mod-menu>li.parent:has(.mod-menu__sub .mod-menu__sub)>.mod-menu__sub {
    top: auto;
    right: 0;
    left: 0;
    width: auto;
    padding: 1.5rem 2rem 1.75rem;
  }

  /* Невидимый мостик над панелью: курсор не «теряет» пункт по дороге вниз, пока идёт от пункта к панели. */
  .dharma-header__topbar-nav .mod-menu>li.parent:has(.mod-menu__sub .mod-menu__sub)>.mod-menu__sub::before {
    content: "";
    position: absolute;
    top: -1.25rem;
    right: 0;
    left: 0;
    height: 1.25rem;
  }

  .dharma-header__topbar-nav .mod-menu>li.parent:has(.mod-menu__sub .mod-menu__sub):hover>.mod-menu__sub,
  .dharma-header__topbar-nav .mod-menu>li.parent:has(.mod-menu__sub .mod-menu__sub):focus-within>.mod-menu__sub {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr minmax(7rem, auto);
    gap: 0 2.25rem;
    align-items: start;
  }

  /* Название группы — заголовок столбца (жирным только в мега-меню; в обычном выпадающем списке пункты обычным шрифтом). */
  .dharma-header__topbar-nav .mod-menu>li.parent:has(.mod-menu__sub .mod-menu__sub)>.mod-menu__sub>li.parent>a,
  .dharma-header__topbar-nav .mod-menu>li.parent:has(.mod-menu__sub .mod-menu__sub)>.mod-menu__sub>li:not(.parent)>a {
    font-weight: 700;
    color: var(--dharma-deep, var(--dharma-ink));
  }

  .dharma-header__topbar-nav .mod-menu .mod-menu__sub>li.parent>a {
    margin-bottom: .5rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--dharma-line, rgba(0, 0, 0, .1));
  }

  /* Вложенный список группы показывается сразу, без своей рамки и тени. */
  .dharma-header__topbar-nav .mod-menu .mod-menu__sub .mod-menu__sub {
    position: static;
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    animation: none;
  }

  .dharma-header__topbar-nav .mod-menu .mod-menu__sub .mod-menu__sub>li>a {
    margin-left: -.625rem;
    padding: .3rem .625rem;
    border-radius: .5rem;
    font-weight: 400;
  }

  /* Длинная группа (приёмы врачей) идёт в две колонки. */
  .dharma-header__topbar-nav .mod-menu .mod-menu__sub>li.parent:first-child>.mod-menu__sub {
    columns: 2;
    column-gap: 2rem;
  }

  .dharma-header__topbar-nav .mod-menu .mod-menu__sub .mod-menu__toggle-sub {
    display: none;
  }
}

/* Мобильное меню: стрелка вложенной группы привязана к строке группы, а не к пункту верхнего уровня. */
.dharma-offcanvas .mod-menu .mod-menu__sub>li {
  position: relative;
}

.dharma-offcanvas .mod-menu .mod-menu__sub>li>.mod-menu__toggle-sub {
  top: 0;
  height: 2.75rem;
}

.dharma-offcanvas .mod-menu .mod-menu__sub .mod-menu__sub {
  padding-top: 0;
}

/* Выпадающие списки: при наведении и фокусе пункт подсвечивается плашкой и зеленеет (в том числе заголовки групп). */
@media (min-width: 992px) {
  .dharma-header__topbar-nav .mod-menu .mod-menu__sub a {
    transition: background-color .2s ease, color .2s ease;
  }

  .dharma-header__topbar-nav .mod-menu .mod-menu__sub li a:is(:hover, :focus-visible) {
    background-color: rgba(var(--dharma-primary-rgb), .1);
    color: var(--dharma-primary);
  }

  .dharma-header__topbar-nav .mod-menu .mod-menu__sub>li:not(.parent)>a,
  .dharma-header__topbar-nav .mod-menu .mod-menu__sub .mod-menu__sub a {
    border-radius: .5rem;
  }

  /* Одиночные пункты обычных списков: плашка с небольшими полями, чтобы подсветка не прилипала к тексту. */
  .dharma-header__topbar-nav .mod-menu .mod-menu__sub>li:not(.parent)>a {
    margin-inline: -.625rem;
    padding: .3rem .625rem;
  }

  /* Заголовок группы подсвечивается без плашки: только цвет и нижняя линия. */
  .dharma-header__topbar-nav .mod-menu .mod-menu__sub>li.parent>a:is(:hover, :focus-visible) {
    background-color: transparent;
    border-bottom-color: var(--dharma-primary);
  }
}