/* ========================================================================== */
/* === SM Design Tokens (site-wide) ======================================== */
/* Привязка к палитре Astra с безопасными фолбэками.                        */
/* ========================================================================== */

:root{
  /* Бренд */
  --sm-brand:            var(--ast-global-color-0, #025BD6);
  --sm-brand-alt:        var(--ast-global-color-1, #00BCD1);
  --sm-on-brand:         var(--ast-global-color-4, #FFFFFF); /* текст на брендовом фоне */

  /* Текстовые */
  --sm-headline:         var(--ast-global-color-2, #0B0B0B); /* заголовки */
  --sm-text:             var(--ast-global-color-3, #0B0B0B); /* основной текст */
  --sm-muted:            var(--ast-global-color-7, #7E8AA3); /* приглушённый/лейблы */

  /* Поверхности */
  --sm-surface:          var(--ast-global-color-4, #FFFFFF); /* белый фон */
  --sm-surface-2:        var(--ast-global-color-5, #F7FBFF); /* вторичная поверхность */
  --sm-surface-subtle:   var(--ast-global-color-6, #ECF2F8); /* более тёмная поверхность */

  /* Бордеры/разделители */
  --sm-border:           var(--ast-global-color-5, #F7FBFF);

  /* Дополнительные/акцентные */
  --sm-accent:           var(--ast-global-color-8, #A7CDFC);

  /* Вспомогательные */
  --sm-rating:           #ffcc00;
  --sm-shadow:           rgba(0,0,0,.08);

  /* ── Дополнительная палитра SM (редактор Gutenberg) ───────────────────── */
  --sm-palette-banner:   var(--sm-banner-hex,  #025BD6); /* Цвет фона первого блока */
  --sm-palette-rating:   var(--sm-rating-hex,  #ffcc00);
  --sm-palette-link:     var(--sm-link-hex,    #0b65e0);
  --sm-palette-border:   var(--sm-border-hex,  #ECF2F8);
  --sm-palette-quote:    var(--sm-quote-hex,   #A7CDFC);
  --sm-palette-danger:   var(--sm-danger-hex,  #E64D4D); /* Цвет для негативных элементов */

  /* === Радиусы (scale) === */
  --sm-radius-xs: 4px;
  --sm-radius-s:  8px;
  --sm-radius-m:  12px;
  --sm-radius-l:  16px;
  --sm-radius-xl: 20px;
  --sm-radius-2xl:24px;
  --sm-radius-round: 9999px; /* для «пилюль» и кружков */
  /* responsive alias */
  --sm-radius-card: var(--sm-radius-xl); /* Десктоп: 20px */

  /* === Тени (scale) === */
  --sm-shadow-s: 0 4px 10px rgba(0,0,0,.06);
  --sm-shadow-m: 0 8px 20px rgba(0,0,0,.08);
  --sm-shadow-l: 0 14px 24px rgba(0,0,0,.08);

  /* === Переопределяем тени Гутенберга === */
  --wp--preset--shadow--natural: var(--sm-shadow-s);
  --wp--preset--shadow--deep:    var(--sm-shadow-m);
  --wp--preset--shadow--sharp:   var(--sm-shadow-l);  
}


/* Astra брейкпоинт мобилы: 544px — мобильная коррекция радиуса карточек */
@media (max-width: 544px){
  :root{
    --sm-radius-card: var(--sm-radius-l); /* Мобильная версия: 16px */
  }
}


/* ========================================================================== */
/* === Типографические утилиты ============================================= */
/* ========================================================================== */

/* Малый служебный заголовок (для подписей) */
.sm-smalltitle{
  font-weight:400;
  line-height:1.4;
}
@media (min-width:922px){ .sm-smalltitle{ font-size:14px; } } /* desktop */
@media (max-width:544px){ .sm-smalltitle{ font-size:12px; } } /* mobile */

.sm-smalltitle-mob{
  font-weight:400;
  line-height:1.4;
}
@media (max-width:544px){ .sm-smalltitle-mob{ font-size:14px; } } /* mobile */



/* Обычный текст */
.sm-normal{
  font-weight: 400;
  line-height: 1.65;
}
@media (min-width: 922px){
  .sm-normal{ font-size: 18px; }
}
@media (max-width: 544px){
  .sm-normal{ font-size: 16px; }
}

/* Малый служебный заголовок (для подписей) */
.sm-mediumsmalltitle{
  font-weight:400;
  line-height:1.4;
}
@media (min-width:922px){ .sm-mediumsmalltitle{ font-size:16px; } } /* desktop */
@media (max-width:544px){ .sm-mediumsmalltitle{ font-size:14px; } } /* mobile */



/* Дополнительные Псевдозаголовки */

.sm-h2-title{
  font-weight:500;
  line-height:1.2;
  /*margin-bottom: 24px !important;*/
}
@media (min-width:922px){ .sm-h2-title{ font-size:36px; } } /* desktop */
@media (max-width:544px){ .sm-h2-title{ font-size:22px; } } /* mobile */

.sm-h3-title{
  font-weight:500;
  line-height:1.2;
  /*margin-bottom: 24px !important;*/
}
@media (min-width:922px){ .sm-h3-title{ font-size:25px; } } /* desktop */
@media (max-width:544px){ .sm-h3-title{ font-size:20px; } } /* mobile */

.sm-h4-title{
  font-weight:500;
  line-height:1.2;
  /*margin-bottom: 24px !important;*/
}
@media (min-width:922px){ .sm-h4-title{ font-size:20px; } } /* desktop */
@media (max-width:544px){ .sm-h4-title{ font-size:18px; } } /* mobile */

.sm-h5-title{
  font-weight:500;
  line-height:1.1;
  /*margin-bottom: 24px !important;*/
}
@media (min-width:922px){ .sm-h5-title{ font-size:18px; } } /* desktop */
@media (max-width:544px){ .sm-h5-title{ font-size:16px; } } /* mobile */

.sm-h6-title{
  font-weight:400;
  line-height:1.1;
  /*margin-bottom: 24px !important;*/
}
@media (min-width:922px){ .sm-h6-title{ font-size:18px; } } /* desktop */
@media (max-width:544px){ .sm-h6-title{ font-size:16px; } } /* mobile */




/* Быстрый помощник для заголовочных ссылок */
.sm-color-headline{ color: var(--sm-headline); }




/* ===== DSM Gutenberg utilities ============================================
 * Breakpoints (Astra): tablet ≤ 921px; mobile ≤ 544px
 * Prefix: dsm-gut-
 * ======================================================================== */

/* 1) Кнопка «во всю ширину» только на мобильном
   Применять класс на самом блоке "Кнопка" (wp-block-button) ИЛИ на ссылке. */
@media (max-width: 544px){
  /* если класс на контейнере кнопки */
  .dsm-gut-btn-full-m.wp-block-button{
    /* внутри .wp-block-buttons это flex-айтем → растягиваем до 100% строки */
    flex: 1 1 100%;
  }
  /* растягиваем саму ссылку и центрируем контент */
  .dsm-gut-btn-full-m.wp-block-button > .wp-block-button__link,
  .dsm-gut-btn-full-m.wp-block-button__link{
    display: flex;                /* надёжней, чем inline-block */
    width: 100%;
    justify-content: center;
    text-align: center;           /* на случай многострочного текста */
  }
}

/* 2) Универсальные внутренние отступы для контейнеров/групп */

/*Вариант А: desktop 24px, mobile 16px */
.dsm-gut-pad-24-16{ padding: 24px !important; }
@media (max-width: 544px){
  .dsm-gut-pad-24-16{ padding: 16px; }
}

/* Вариант Б: desktop 48px, mobile 16px */
.dsm-gut-pad-48-16{ padding: 48px !important; }
@media (max-width: 544px){
  .dsm-gut-pad-48-16{ padding: 16px !important; }
}

/* Вариант В: Блоки главная страница desktop 64px, mobile 16px */
.dsm-gut-pad-64-16{ padding: 64px 64px !important; }
@media (max-width: 544px){
  .dsm-gut-pad-64-16{ padding: 32px 16px !important; }
}


/* Адаптивные колонки для списка с классом .sm-list-two-columns */
@media (min-width: 544px) {
  .sm-list-two-columns {
    column-count: 2;
    column-gap: 2em;
  } 
  .sm-list-two-columns li {
    break-inside: avoid;
    padding-bottom: 1em; 
  }
}

/* Переопределяем только мобильный паддинг */

@media (max-width: 544px){
  .dsm-gut-pad-mob-16{ padding: 16px !important; }
}

@media (max-width: 544px){
  .dsm-gut-pad-mob-24{ padding: 24px !important; }
}

@media (max-width: 544px){
  .dsm-gut-pad-mob-32-16{ padding: 32px 16px !important; }
}






/* ========================================================================== */
/* === Link utilities (глобальное управление подчёркиванием) =============== */
/* 1) Отключили underline в Астре — здесь даём чёткие утилиты.               */
/* 2) Убрано дублирование старых блоков .sm-link-clean.                      */
/* ========================================================================== */

/* 1) Чистые ссылки (без подчёркивания) */
.sm-link-clean,
.sm-link-clean:link,
.sm-link-clean:visited,
.sm-clean-links a {
  color: inherit;
  text-decoration: none;
}
.sm-link-clean:hover,
.sm-link-clean:focus,
.sm-clean-links a:hover,
.sm-clean-links a:focus {
  color: inherit;
  text-decoration: none;
  outline: none;
}

/* 2) Ссылки с подчёркиванием (используйте точечно — например, в прайсе) */
.sm-link-underline,
.sm-links-underline a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: .08em;
}
.sm-link-underline:hover,
.sm-links-underline a:hover {
  text-decoration-color: var(--sm-brand);
}

/* 3) Доступность: чёткий фокус */
a:focus-visible {
  outline: 2px solid var(--sm-brand);
  outline-offset: 2px;
}


/* 4) Черный цвет при наведении подчеркивание */
/* 1. Стиль для всех состояний (обычное, посещенное) - цвет и без подчеркивания */
.dsm-gut-text-decoration-underline a,
.dsm-gut-text-decoration-underline a:link,
.dsm-gut-text-decoration-underline a:visited {
  color: var(--sm-text) !important; /* Устанавливаем цвет и гарантируем переопределение */
  text-decoration: none !important; /* Удаляем подчеркивание и гарантируем переопределение */
}

/* 2. Стиль при наведении и фокусе - цвет и с подчеркиванием */
.dsm-gut-text-decoration-underline a:hover,
.dsm-gut-text-decoration-underline a:focus {
  color: var(--sm-text) !important; /* Оставляем тот же цвет */
  text-decoration: underline !important; /* Добавляем подчеркивание */
  outline: none; /* Рекомендуется для :focus, чтобы убрать стандартную обводку, если она мешает */
}




/* ========================================================================== */
/* === Глобальные мобильные переопределения ================================= */
/* ========================================================================== */

@media (max-width: 921px) {
  #primary, #secondary {
    padding: 0;
    margin: 0;
  }
  /* Узкие отступы контейнера в мобильной версии */
  .site-content .ast-container{ padding-left:16px; padding-right:16px; }
}


/* === Глобально: переопределяем вертикальные отступы у #primary === */
.ast-plain-container.ast-no-sidebar #primary{
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}
@media (min-width: 1200px){
  .ast-plain-container.ast-no-sidebar #primary{
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
}





/* ========================================================================== */
/* === Яндекс Карты на сайте ================================================ */
/* ========================================================================== */

/* Установите нужные переменные на родительском элементе, если они нужны */
.sm-map-wrap {   
    border-radius: 20px; 
    overflow: hidden; /* Обрезаем iframe по скругленным углам */
}
/* Примените ширину и высоту непосредственно к iframe */
.sm-map-frame {
    width: 100% !important; 
    height: 400px !important; /* Указываем точную высоту */
    display: block; /* Убедитесь, что это блочный элемент */
}




/* ========================================================================== */
/* === Header ============================================================== */
/* ========================================================================== */

/* Хлебные крошки: горизонтальный свайп без лишних полос прокрутки */
.ast-breadcrumbs-inner{
  display:block;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;                 /* не даём появляться вертикальному скроллу */
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x: contain;    /* не «протаскиваем» страницу при свайпе */
  scrollbar-width:none;
  -ms-overflow-style:none;
  /* комфорт свайпа — только на мобильных, чтобы не «гулял» контейнер на десктопе */
  padding-inline:15px;
  margin-inline:-15px;
}
@media (min-width: 922px){
  .ast-breadcrumbs-inner{
    padding-inline:0;
    margin-inline:0;
  }
}
/* скрываем скроллбар в WebKit */
.ast-breadcrumbs-inner::-webkit-scrollbar{ display:none; }

/* Содержимое крошек — в одну строку; ширина по содержимому */
#ast-breadcrumbs-yoast{
  white-space:nowrap;
  width:max-content;
  display:inline-block;              /* fallback для браузеров без max-content */
  margin:0; padding:0;
}
/* на случай, если Yoast оборачивает куски в span — не переносим */
#ast-breadcrumbs-yoast span{ display:inline; }

/* Отступ снизу у хлебных крошек (глобально) */
.ast-breadcrumbs-wrapper{
  margin:0 0 16px 0 !important;
}
@media (min-width:1200px){
  .ast-breadcrumbs-wrapper{ margin-bottom:24px !important; }
}


/* Single Service: отступ СВЕРХУ перед хлебными крошками */
.single-service .ast-article-single > .ast-breadcrumbs-wrapper{
  margin-top: 24px !important;
}
/* Мобильный отсутуп */
@media (max-width: 921px){
  .single-service .ast-article-single > .ast-breadcrumbs-wrapper{
    margin-top: 24px !important;
  }
}




/* ===== Тень для всего хедера (десктоп + мобилка), без CLS ===== */
:root{
  /* Подправишь эти значения под себя */
  --sm-header-shadow: 0 8px 24px rgba(0, 0, 0, .04);
  --sm-header-shadow-sticky: 0 12px 24px rgba(0, 0, 0, .04);
}

/* База: одна тень на весь header-блок */
#masthead{
  position: relative;                 /* чтобы тень корректно рисовалась поверх контента */
  box-shadow: var(--sm-header-shadow);
  background: var(--ast-global-color-5, #fff); /* на всякий случай, чтобы тень не "просвечивала" */
}

/* Усиливаем/сохраняем тень в sticky-состоянии (разные классы Astra) */
.site-header.ast-sticky-shrunk #masthead,
body.ast-sticky-header-active #masthead,
.ast-primary-header-bar.ast-sticky-active{
  box-shadow: var(--sm-header-shadow-sticky);
}

/* Мобильный header (офканвас) – тот же эффект */
#ast-mobile-header .ast-primary-header-bar{
  box-shadow: var(--sm-header-shadow);
}
#ast-mobile-header .ast-primary-header-bar.ast-sticky-active{
  box-shadow: var(--sm-header-shadow-sticky);
}

/* Если заметишь мерцание тени при прилипаниях — можно добавить, иначе не нужно */
@media (prefers-reduced-motion: no-preference){
  .ast-primary-header-bar.ast-sticky-active{ will-change: box-shadow; }
}




/* === Убираем отсутп слева у меню Только десктоп-хедер === */
#ast-desktop-header #ast-hf-menu-1 > li:first-child { 
  margin-left: 0 !important;           /* если Astra добавляет интервалы через margin */
}
#ast-desktop-header #ast-hf-menu-1 > li:first-child > a.menu-link {
  padding-left: 0 !important;          /* если отступ задаётся паддингом ссылки */
}



/* === Убираем левый паддинг у первого элемента в левой секции === 
#ast-desktop-header .site-header-section-left > *:first-child {
  padding-left: 0 !important;
}
*/
/* === Убираем левый паддинг у всего элемента в левой секции === */
#ast-desktop-header .site-header-section>* {padding-left: 0 !important;}
/* Для (Above Header)
#ast-desktop-header .site-header-above-section-left > *:first-child {
  padding-left: 0 !important;
}
*/
/* Для мобильного меню
@media (max-width: 921px) {
  #ast-mobile-header .site-header-section-left > *:first-child {
    padding-left: 0 !important;
  }
}
*/


/*=== Кнопка иконка телефон для мобильного меню ===*/
/* контейнер виджета (как раньше) */
#sm-mob-contacts{ display:flex; align-items:center; }
#sm-mob-contacts > p{ display:flex; align-items:center; margin:0; line-height:1; }

/* ссылка-кнопка */
.sm-mob-ico-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; border:0; background:transparent; cursor:pointer;
  vertical-align:middle; line-height:1; color:var(--sm-brand); /* цвет иконки по умолчанию */
  text-decoration:none; transition: color .15s ease;
}
.sm-mob-ico-btn:active .sm-mob-ico-bg{ transform: translateY(1px); }

/* круглая «таблетка» 40×40, контур — бренд */
.sm-mob-ico-bg{
  width:40px;
  height:40px;
  padding:10px;
  border-radius:50%;
  background: transparent;             /* было #fff */
  border:1px solid var(--sm-brand);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .15s ease, border-color .15s ease, transform .06s linear;
}

/* hover / focus: фон = бренд, иконка = on-brand, контур остаётся бренд */
.sm-mob-ico-btn:hover .sm-mob-ico-bg,
.sm-mob-ico-btn:focus-visible .sm-mob-ico-bg{
  background: var(--sm-brand) !important;
  border-color: var(--sm-brand);
}
.sm-mob-ico-btn:hover,
.sm-mob-ico-btn:focus-visible{
  color: var(--sm-on-brand);
}

/* SVG 24×24 (иконка наследует currentColor) */
.sm-mob-ico-svg{ width:24px; height:24px; display:block; }

/* опционально: лёгкий focus ring поверх бренда */
.sm-mob-ico-btn:focus-visible .sm-mob-ico-bg{
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}



/* ====================================================================*/

/* ====== Off-canvas меню мобильное меню гамбургер =================== */

/* ====================================================================*/

/* === Off-canvas меню: шапка и кнопка закрытия ====================== */
.ast-mobile-popup-drawer .ast-mobile-popup-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--sm-border-subtle, rgba(0, 0, 0, 0.06));
}
/* Текст "Меню сайта" слева */
.ast-mobile-popup-drawer .ast-mobile-popup-header::before{
  content: "Меню сайта";
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}
/* Кнопка закрытия справа, без лишнего воздуха */
.ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close{
  background: transparent;
  padding: 8px;
  box-shadow: none;
}
/* Увеличиваем сам крестик до 24×24 px */
.ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close .ast-svg-iconset svg{
  width: 24px;
  height: 24px;
  display: block;
}
/* === Off-canvas меню: убрать стрелку в подменю ====================== */
/* В подменю стрелка перед текстом не нужна */
.ast-mobile-popup-drawer .main-header-bar-navigation .sub-menu .ast-icon.icon-arrow{
  display: none !important;
}


/* === Off-canvas меню: позиция стрелки .ast-menu-toggle =============== */
@media (max-width: 921px){
  .ast-mobile-popup-drawer 
  .ast-builder-menu-mobile 
  .main-navigation 
  .menu-item.menu-item-has-children > .ast-menu-toggle{
    right: 16px; /* как у крестика закрытия */
  }
}



/* ========================================================================== */
/* === Footer ============================================================== */
/* ========================================================================== */

.sm-footer-privacy-policy a {
  color: var(--sm-accent) !important;
  transition: color 0.3s !important;
}
.sm-footer-privacy-policy a:hover {
  color: var(--sm-surface) !important;
}
.sm-footer-bottom .wp-block-button__link:hover {
  color: var(--sm-brand) !important;
  border-color: var(--sm-border)  !important;
  background-color: var(--sm-surface-2) !important;
}

/* Имеются противопоказания — шрифт побольше на мобилке */
@media (max-width: 920px) {
  .sm-warning-med-org { font-size: 18px !important; }
}

/* Скругление нижнего футера */
@media (max-width: 920px) {
  .site-below-footer-wrap { border-radius: 10px 10px 0 0; }
}

/* Отступы заголовка футера */
@media (max-width: 920px) {
  .dsm-footer-title{ margin: 2em 0 0 0; }
}


/* ========================================================================== */
/* === Белый текст + иконки в списках (общая утилита) ====================== */
/* ========================================================================== */

.dsm-text-white { color: var(--sm-on-brand); }
.dsm-text-white.stk-block-icon-list .stk-block-icon-list__ul .stk-block-icon-list-item .stk-block-icon-list-item__content .stk--svg-wrapper .stk--inner-svg svg {
  fill: var(--sm-on-brand);
  color: var(--sm-on-brand);
}





/* ========================================================================== */
/* === Общие стили для блоков ============================================== */
/* ========================================================================== */

/* Общее скругление блоков контейнеров */
.dsm-block { border-radius: 24px; }
@media (max-width: 920px) { .dsm-block { border-radius: 16px; } }

/* Общее скругление блоков контейнеров */
.dsm-border-radius { border-radius: 20px; }
@media (max-width: 920px) { .dsm-border-radius { border-radius: 20px; } }

/* Кнопка (моб.) */
@media (max-width: 920px) {
  .dsm-botton {
    margin-right: 24px;
    margin-left: 24px;
    padding-top: 40px;
  }
}

/* Скругление только на мобильном на десктопе опции настройщика */
@media (max-width: 920px) {
  .dsm-border-radius-mob {
    border-radius: 20px !important;
  }
}



/* Изменение размера иконки и отступа на мобильном изображение с классом sm-icon-quote */
@media (max-width: 921px) {
  .sm-icon-quote img {
    width: 100px !important;
    height: auto !important;
  }
  .wp-block-image.sm-icon-quote {
    margin-bottom: 16px !important;
    margin-block-end: 16px !important; /* на случай логических свойств в теме */
  }
}


/* === Универсальный моб. размер для изображений в блоке «Изображение» === */
/* 
.wp-block-image.dsm-mobile-img-150 img{
  height: auto;
  max-width: 100%;
}
*/

/* Мобильный ≤544px: принудительно уменьшаем <img>, даже если у него есть inline style */
@media (max-width: 544px){
  .wp-block-image.dsm-mobile-img-150 img{
    width: 150px !important; 
    height: auto !important;
    max-width: 100% !important;    
  } 
}

/* изменяем ценрирование 
  .wp-block-image.dsm-mobile-img-150 { text-align: center; }
*/



/* Удаляем маргин снизу в мобильной версии */
@media (max-width: 544px) {
    .dsm-gut-margin-bottom-0 {
        margin-bottom: 0px !important;
    }
}


/* Gutenberg текст <p> Плашка-лейбл не на всю ширину */
.sm-gut-lable{
  display: inline-flex;            /* вместо block */
  align-items: center;
  width: -moz-fit-content;         /* Firefox */
  width: fit-content;              /* авто по контенту */
  max-width: 100%;                 /* не вылезать из колонки */
  box-sizing: border-box;
  margin: 0;                       /* убираем лишние отступы абзаца */
  border-style: solid;             /* на случай, если тема сбрасывает */
}








/* ========================================================================== */
/* === HERO (первый блок услуги) =========================================== */
/* ========================================================================== */

.dsm-block-hero-first{
  position: relative;
  display: flex;
  gap: 0;
  margin: 50px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
  --hero-overflow-top: 50px; /* высота «выпрыгивания» вверх */
}

/* фон и радиус на псевдоэлементе */
.dsm-block-hero-first::before{
  content:"";
  position:absolute; inset:0;
  background: var(--sm-banner-hex) !important;
  border-radius:20px;
  z-index:0; pointer-events:none;
}

/* окно сверху, клип по остальным краям (десктоп/планшет) */
.dsm-block-hero-first{
  -webkit-clip-path: inset(calc(0px - var(--hero-overflow-top)) 0 0 0 round 20px);
          clip-path: inset(calc(0px - var(--hero-overflow-top)) 0 0 0 round 20px);
}

/* колонки над фоном */
.dsm-block-hero-first > .wp-block-column{ position:relative; z-index:1; }

/* левая колонка */
.dsm-block-hero-first > .wp-block-column:first-child{
  flex:0 0 60%; max-width:60%;
  padding:54px 0 54px 54px !important;
  display:flex; flex-direction:column; justify-content:center; text-align:left;
}
.dsm-block-hero-first > .wp-block-column:first-child h1,
.dsm-block-hero-first > .wp-block-column:first-child p{
  color: var(--sm-on-brand) !important;
}

/* правая колонка: прижимаем контент вниз и даём опору для absolute */
.dsm-block-hero-first > .wp-block-column:last-child{
  flex:0 0 40%; max-width:40%;
  margin:0 !important;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  position:relative; /* опорный контекст для figure */
}



/* === MOBILE/TABLET (до 921px): поток + aspect-ratio (нулевой CLS) === */
@media (max-width: 921px){
  .dsm-block-hero-first{
    flex-direction:column !important;
    gap:16px;
  }
  .dsm-block-hero-first > .wp-block-column{
    flex:0 0 100% !important; max-width:100% !important; width:100% !important;
  }
  .dsm-block-hero-first > .wp-block-column:first-child{ padding:24px !important; }
  .dsm-block-hero-first > .wp-block-column:last-child{ padding-right:0 !important; }

  .dsm-block-hero-first > .wp-block-column:last-child figure.wp-block-image{
    position:relative;
    isolation:isolate;
    overflow:visible !important;
    margin:calc(0px - var(--hero-overflow-top)) 0 0 0 !important;
    width:100%;
    line-height:0; margin-block-end:0 !important;
    aspect-ratio: var(--sm-hero-ar, 1/1);
    min-height: clamp(280px, 40vw, 640px);
    display:block; z-index:3;
  }
  .dsm-block-hero-first > .wp-block-column:last-child figure.wp-block-image img{
    display:block; width:100% !important; max-width:100% !important; height:auto !important;
    object-fit:contain; object-position:center bottom;
    vertical-align:bottom; border-radius:0; position:relative; z-index:4;
  }
}

/* === DESKTOP (от 922px): фигура прибита к низу === */
@media (min-width: 922px){
  .dsm-block-hero-first > .wp-block-column:last-child figure.wp-block-image{
    position:absolute; /* вынимаем из потока и прибиваем к низу */
    left: clamp(12px, 2vw, 24px);
    right: clamp(12px, 2vw, 24px);
    bottom: 0; top: auto;
    margin:0 !important; line-height:0; margin-block-end:0 !important;
    width:auto; aspect-ratio:auto; min-height:0; display:block; z-index:3;
  }
  .dsm-block-hero-first > .wp-block-column:last-child figure.wp-block-image img{
    display:block; width:100% !important; height:auto !important;
    object-fit:contain; object-position:center bottom;
    vertical-align:bottom; border-radius:0; position:relative; z-index:4;
    transform: translateX(-8px); /* ваш лёгкий сдвиг */
  }
}

/* градиент снизу вверх 100px (без rgba) */
.dsm-block-hero-first > .wp-block-column:last-child figure.wp-block-image::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:100px;
  background: linear-gradient(to top, var(--sm-banner-hex) 0%, transparent 100%);
  pointer-events:none; z-index:5;
}

/* мобильные кнопки */
.dsm-block-hero-first > .wp-block-column:last-child .wp-block-buttons.uag-hide-desktop{ width:100%; }
.dsm-block-hero-first > .wp-block-column:last-child .wp-block-buttons.uag-hide-desktop .wp-block-button{ width:100%; }
.dsm-block-hero-first > .wp-block-column:last-child .wp-block-buttons.uag-hide-desktop .wp-block-button .wp-block-button__link{
  display:block; width:100%; text-align:center;
}
.dsm-block-hero-first.has-background{ padding:0 !important; }

/* самый малый брейкпоинт */
@media (max-width: 544px){
  .dsm-block-hero-first{
    margin-top:0 !important;
    gap:1px !important;
    -webkit-clip-path: inset(0 0 0 0 round 20px);
            clip-path: inset(0 0 0 0 round 20px);
  }
  .dsm-block-hero-first > .wp-block-column:first-child{
    padding:16px !important; padding-bottom:0 !important; margin-bottom:0 !important;
  }
  .dsm-block-hero-first > .wp-block-column:last-child .wp-block-buttons{ padding:0 14px 24px; }
}

/* === HERO: минимальная высота левой колонки на десктопе === */
@media (min-width: 922px){
  .dsm-block-hero-first{ align-items: stretch; }
  .dsm-block-hero-first > .wp-block-column:first-child{
    min-height: 440px;
  }
}



/* ========================================================================== */
/* === HERO (первый блок Доктора) — .dsm-block-hero-first-doc =============== */
/* ========================================================================== */


/* ==========================================================================
  Настройка через переменные (без «подстраховок»):
     --doc-hero-radius        скругление контейнера (def: 20px)
     --doc-hero-overflow-top  вылет картинки вверх на десктопе (def: 50px)
     --doc-hero-img-shift-x   сдвиг картинки по оси X на десктопе (def: 0px)
     --doc-hero-gradient-h    высота нижнего градиента (def: 100px)
   ========================================================================== */

.dsm-block-hero-first-doc{
  --doc-hero-radius: 20px;
  --doc-hero-overflow-top: 50px;
  --doc-hero-img-shift-x: 0px;
  --doc-hero-gradient-h: 100px;

  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  /* margin задаётся из редактора */
  padding: 0 !important;
  /* background: var(--sm-brand) !important;    ← если нужно брать цвет из Гутенберга — закомментируй эту строку */
  border-radius: var(--doc-hero-radius) !important;
  overflow: visible !important; /* разрешаем «вылет» изображения вверх */
}

/* Колонки */
.dsm-hero-doc__col1,
.dsm-hero-doc__col2{
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

/* Левая колонка — 60% */
.dsm-hero-doc__col1{
  flex: 0 0 60%;
  max-width: 60%;
  padding: 54px 0 54px 54px !important; /* top 54 / right 0 / bottom 54 / left 54 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

/* Правая колонка — 40% */
.dsm-hero-doc__col2{
  flex: 0 0 40%;
  max-width: 40%;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* на десктопе «сажаем» медиа к низу */
  align-items: center;
}

/* Медиа-обёртка (можно дать figure.dsm-hero-doc__media) */
.dsm-hero-doc__media{
  width: 100%;
  margin: 0 !important;
  line-height: 0;
  display: block;
  position: relative;
  isolation: isolate; /* опорный контекст для градиента */
}

/* Fallback: обычная figure внутри правой колонки */
.dsm-hero-doc__col2 figure.wp-block-image{
  width: 100%;
  margin: 0 !important;
  line-height: 0;
  display: block;
  position: relative;
  isolation: isolate;
}

/* Картинка */
.dsm-hero-doc__media img,
.dsm-hero-doc__col2 figure.wp-block-image img{
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
  object-position: center bottom;
  vertical-align: bottom;
  border-radius: 0;
}

/* Нижний градиент поверх картинки — цвет = var(--sm-brand) 
.dsm-hero-doc__media::after,
.dsm-hero-doc__col2 figure.wp-block-image::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--doc-hero-gradient-h);
  background: linear-gradient(to top, var(--sm-brand) 0%, transparent 100%);
  pointer-events: none;
  z-index: 2; 
}

Нижний градиент поверх картинки скругление градиента 
.dsm-block-hero-first-doc .sm-grad-bottom::after {    
    border-radius: 20px;
}*/

/* Нижний градиент поверх картинки — скругление только снизу и по переменной радиуса */
.dsm-block-hero-first-doc .sm-grad-bottom::after{
  border-radius: 0 0 var(--doc-hero-radius) var(--doc-hero-radius);
}

/* Градиент: берём плагинный .sm-grad-bottom, только высоту (цвет — по умолчанию из плагина)
   Если когда-нибудь нужно форсировать цвет темой — раскомментируй строку ниже. */
.dsm-block-hero-first-doc .dsm-hero-doc__col2 .sm-grad-bottom{
  --sm-grad-h: var(--doc-hero-gradient-h);
  /* --sm-grad-color: var(--sm-brand); */
}



/* ===== Tablet/Mobile (≤921px) ===== */
@media (max-width: 921px){
  .dsm-block-hero-first-doc{
    flex-direction: column !important;
    gap: 16px;
  }
  .dsm-hero-doc__col1,
  .dsm-hero-doc__col2{
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Отступы на мобиле */
  .dsm-hero-doc__col1{ padding: 16px 16px 0 16px !important; }
  .dsm-hero-doc__col2{ padding: 0 !important; }

  /* Резерв высоты под медиа во имя нулевого CLS */
  .dsm-hero-doc__media,
  .dsm-hero-doc__col2 figure.wp-block-image{
    aspect-ratio: var(--sm-hero-ar, 1/1);
    min-height: clamp(280px, 40vw, 640px);
  }
}

/* ===== Desktop (≥922px) ===== */
@media (min-width: 922px){
  .dsm-hero-doc__col1{ min-height: 440px; } /* держим блок по высоте */

  /* Поднимаем медиа над верхней кромкой фона */
  .dsm-hero-doc__media,
  .dsm-hero-doc__col2 figure.wp-block-image{
    margin-top: calc(-1 * var(--doc-hero-overflow-top)) !important;
  }

  /* Опциональный сдвиг картинки по оси X */
  .dsm-hero-doc__media img,
  .dsm-hero-doc__col2 figure.wp-block-image img{
    transform: translateX(var(--doc-hero-img-shift-x));
  }
}

/* Мобильные кнопки (если используешь uag-hide-desktop) */
.dsm-block-hero-first-doc .wp-block-buttons.uag-hide-desktop{ width: 100%; }
.dsm-block-hero-first-doc .wp-block-buttons.uag-hide-desktop .wp-block-button{ width: 100%; }
.dsm-block-hero-first-doc .wp-block-buttons.uag-hide-desktop .wp-block-button .wp-block-button__link{
  display: block; width: 100%; text-align: center;
}

/* Убить мобильный margin-bottom у колонок только внутри хиро-доктора */
@media (max-width: 544px){
  .dsm-block-hero-first-doc.wp-block-columns{ gap: 0 !important; }
  .dsm-block-hero-first-doc.wp-block-columns > .wp-block-column{ margin: 0 !important; }
  .dsm-block-hero-first-doc.wp-block-columns > .wp-block-column:not(:last-child){
    margin-bottom: 0 !important;
  }
}


/* ===== Fix: «вылет» картинки поверх верхней кромки на десктопе ===== */
@media (min-width: 922px){
  .dsm-block-hero-first-doc .dsm-hero-doc__col2 > figure.wp-block-image,
  .dsm-block-hero-first-doc .dsm-hero-doc__col2 > figure.sm-grad-bottom{
    /* перебиваем инлайн margin-top:0 */
    margin-top: calc(-1 * var(--doc-hero-overflow-top)) !important;
    margin-block-start: calc(-1 * var(--doc-hero-overflow-top)) !important;
    position: relative;
    z-index: 3; /* поверх фона блока */
  }
}


/* ===== ? Градиент: берём плагинный .sm-grad-bottom, только высоту ===== */
.dsm-block-hero-first-doc .dsm-hero-doc__col2 .sm-grad-bottom{
  --sm-grad-h: var(--doc-hero-gradient-h);
  /* Если нужно форсировать цвет градиента темой — раскомментируй: */
  /* --sm-grad-color: var(--sm-brand); */
}

/* На всякий случай — не даём блоку клиповать содержимое */
.dsm-block-hero-first-doc{ overflow: visible !important; }




/* ========================================================================== */
/* === Астра блог ===================== */
/* ========================================================================== */


/* Фильтры в архиве: нормализуем отступы */
.ast-post-filter ul[role="list"]{
  margin: 0 0 32px 0;   /* нижний 32px */
  /*margin-left: 0;   */    /* перекрываем возможные -12px */
  /*margin-right: 0;  */    /* перекрываем возможные -12px */
  padding-left: 0;      /* убираем стандартный отступ списка */
  list-style: none;     /* на всякий случай */
}

@media (max-width: 544px){
  .ast-post-filter ul[role="list"]{
    margin: 0 0 16px 0;
  }
}




/* ========================================================================== */
/* === Плагин для слабовидящих ============================================= */
/* ========================================================================== */

.smvi-activator-text.my-text{
  --smvi-text-border: var(--sm-accent) !important;
  --smvi-text-color:  var(--sm-accent) !important;
  --smvi-text-pad-x: 28px !important;
}
#block-39 { display:flex; align-items:center; }
#block-39 > p { display:flex; align-items:center; margin:0; line-height:1; }


/* ========================================================================== */
/* === Архивы/Пагинация/Фильтры/Load More (общие) ========================== */
/* ========================================================================== */

.sm-archive-pagination{
  display:flex;
  justify-content:center;
  margin-top:24px;
}
.sm-archive-pagination .page-numbers{
  display:inline-block;
  margin:0 6px;
  padding:8px 12px;
  border-radius:8px;
  text-decoration:none;
}
.sm-archive-pagination .page-numbers.current{
  background: var(--sm-brand);
  color:var(--sm-on-brand);
}
.sm-archive-pagination .page-numbers:hover{
  background: rgba(0,0,0,.06);
}

/* Обёртка кнопки догрузки */
.sm-loadmore-wrap{
  display:flex;
  justify-content:center;
  margin-top:48px;
}
/* База кнопок */
.sm-btn{
  display:inline-block;
  border:1px solid transparent;
  border-radius:999px;
  font-weight:500;
  line-height:1.3;
  text-align:center;
  cursor:pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.sm-loadmore-wrap button.sm-btn--loadmore:is(:hover,:focus,:focus-visible){
  background: var(--sm-on-brand) !important;
  background-color: var(--sm-on-brand) !important;
  border-color: var(--sm-brand) !important;
  color: var(--sm-brand) !important;
  outline:none;
}
.sm-loadmore-wrap button.sm-btn--loadmore.is-loading{
  opacity:.75; pointer-events:none; cursor:progress;
}


/* ========================================================================== */
/* === Архив Прайса (Price) ================================================ */
/* ========================================================================== */

/*
.sm-archive-title {
  margin:0 0 32px;
  color:var(--sm-headline);
  font-size:clamp(20px,2.5vw,24px);
  font-weight:700;
}
*/


/* Базовый контейнер фильтров */
.sm-filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 32px; }
.sm-filter-btn { border:1px solid var(--sm-surface-subtle); background:#fff; padding:8px 12px; border-radius:999px; cursor:pointer; }
.sm-filter-btn.is-active { background:var(--sm-brand-weak, #f4f7ff); border-color:var(--sm-brand, #2a66ff); }

/* Секция «Вид услуг» */
.sm-price-section {
  width:100%;
  padding:24px 32px;
  box-shadow: 0 8px 24px var(--sm-shadow);
  border-radius: 20px;
  background: var(--sm-surface, #fff);
  margin:0 0 24px;
}
.sm-price-h2 {
  color:var(--sm-headline);
  margin:0 0 24px;
  font-size:clamp(18px,2.2vw,22px);
  font-weight:700;
}
@media (max-width: 544px) {
  .sm-price-section { padding:16px 14px; }
  .sm-price-h2 { margin-bottom:18px; }
}
.sm-price-h3 {
  color:var(--sm-headline);
  margin:14px 0;
  font-size:clamp(16px,2vw,18px);
  font-weight:600;
}
@media (max-width: 544px) { .sm-price-h3 { margin:8px 0; } }

/* Карточка прайса */
.sm-price-card { margin:0 !important; padding:10px 0; border-top:1px solid var(--sm-surface-subtle); border-bottom:none; }
.sm-price-card:last-child{ border-bottom:1px solid var(--sm-surface-subtle); }
.sm-price-card__row { display:flex; align-items:center; justify-content:space-between; gap:4px; }
.sm-price-card__left { width:76%; }
.sm-price-card__right{ width:24%; text-align:right; }
@media (max-width: 544px) {
  .sm-price-card__left { width:70%; }
  .sm-price-card__right{ width:30%; }
}
.sm-price-card__title { margin:0 0 4px; }
.sm-price-card__texttitle,
.sm-price-card__link {
  font-size:18px; line-height:1.65; font-weight:400; color:var(--sm-text); text-decoration:none;
}
@media (max-width: 544px) {
  .sm-price-card__texttitle,
  .sm-price-card__link { font-size:14px; line-height:1.25; }
}
.sm-price-card__link:hover { color:var(--sm-brand); }
.sm-price-card__desc { color:var(--sm-muted); font-size:14px; line-height:1.25; }
@media (max-width: 544px) { .sm-price-card__desc { font-size:12px; line-height:1.25; } }
.sm-price-card__cost { font-size:20px; font-weight:500; line-height:1.65; color:var(--sm-text); }
@media (max-width: 544px) { .sm-price-card__cost { font-size:14px; line-height:1.25; } }
.sm-price-card__old { color:var(--sm-muted); font-size:14px; line-height:1.5; margin-top:4px; }
.sm-price-card__old.is-striked { text-decoration: line-through; }
@media (max-width: 544px) { .sm-price-card__old { font-size:12px; line-height:1.25; } }
.sm-price-card__sale {
  display:inline-block; margin-top:4px; font-size:12px; font-weight:600; line-height:1.25;
  color:var(--sm-text); background:var(--sm-rating); padding:4px 8px; border-radius:999px;
}
@media (max-width: 544px) { .sm-price-card__sale { font-size:11px; line-height:1.25; padding:4px 4px; } }

/* Микро-правки отступов внутри описаний (AJAX/архив) */
.post-type-archive-price .sm-price-card__desc p{ margin: 0 !important; }
.post-type-archive-price .sm-price-card__desc > * + *{ margin-top: 6px; }
.post-type-archive-price .sm-price-card__desc > :last-child{ margin-bottom: 0 !important; }

/* Фильтры в стиле Акций — строго в скоупе архива цен */
.post-type-archive-price .sm-filters--prices{
  display:flex; flex-wrap:wrap; gap:14px 12px; margin-bottom:32px;
}
.post-type-archive-price .sm-filters--prices .sm-filter-btn{
  all: unset;
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 24px;
  border-radius:999px;
  border:1px solid var(--sm-surface-subtle);
  background:var(--sm-surface-subtle);
  color:var(--sm-text);
  cursor:pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.post-type-archive-price .sm-filters--prices .sm-filter-btn:hover{
  border-color:var(--sm-muted);
  background:var(--sm-muted);
  color:var(--sm-on-brand);
}
.post-type-archive-price .sm-filters--prices .sm-filter-btn.is-active{
  border-color:var(--sm-brand);
  background:var(--sm-brand);
  color:var(--sm-on-brand);
}
@media (max-width:544px){
  .post-type-archive-price .sm-filters--prices .sm-filter-btn{ padding:8px 12px; }
}
/* Кнопка догрузки в скоупе */
.post-type-archive-price .sm-loadmore-wrap .sm-btn--loadmore{ position:relative; }



/* ========================================================================== */
/* === SM Teasers (CPT) ==================================================== */
/* ========================================================================== */

.entry-content .sm-teasers,
.site-main .sm-teasers{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 32px;
  width: 100%;
  background: var(--sm-surface);
  overflow: visible;
  text-align: left;
}
@media (max-width: 921px){
  .entry-content .sm-teasers,
  .site-main .sm-teasers{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 544px){
  .entry-content .sm-teasers,
  .site-main .sm-teasers{
    grid-template-columns: 1fr;
  }
}

/* Карточка тизера */
.sm-teaser{
  position: relative;
  width: 100%;
  background: var(--sm-teaser-bg, var(--sm-surface-subtle));
  border-radius: 20px;
  padding: 24px;
  padding-top: 84px; /* 60 (внутри круга) + 24 зазор */
  color: var(--sm-text);
  box-sizing: border-box;
  overflow: visible;
}
@media (max-width: 544px){
  .sm-teaser{
    padding: 20px;
    padding-top: 76px; /* 60 + 16 */
  }
}

/* Бейдж: 100x100, круг, бордер 12px var(--sm-surface) */
.sm-teaser__badge{
  position: absolute; top: -40px; left: 24px;
  width: 100px; height: 100px;
  border-radius: 9999px;
  background: var(--sm-teaser-bg, var(--sm-surface-subtle));
  border: 12px solid var(--sm-surface);
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
@media (max-width: 544px){ .sm-teaser__badge{ left: 20px; } }
.sm-teaser__badge img,
.sm-teaser__badge svg{
  width: 40px; height: 40px; display: block; object-fit: contain;
}

/* Типографика тизеров */
.sm-teaser__title{
  margin: 0 0 8px 0;
  font-size: 18px; font-weight: 500; line-height: 1.6; color: var(--sm-headline);
}
.sm-teaser__text{
  margin: 0;
  font-size: 18px; font-weight: 400; line-height: 1.6; color: var(--sm-text);
}
@media (max-width: 544px){
  .sm-teaser__title{ font-size: 16px; }
  .sm-teaser__text{ font-size: 16px; }
}


/* ========================================================================== */
/* === Шорткод «Отзывы» — embed режим (ссылки выключены) =================== */
/* ========================================================================== */

.sm-reviews--embed .sm-review-card a {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}
.sm-reviews--embed .sm-review-card a:hover {
  color: inherit;
  text-decoration: none;
}
/* Для span/div, которые рендерим вместо ссылок */
.is-nolink {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}
.is-nolink:hover {
  color: inherit;
  text-decoration: none;
}


/* ========================================================================== */
/* === Case detail: текстовый блок (Gutenberg Group) ======================= */
/*  Исправлено имя класса: .sm-case-page-text-group (было другое).    */
/* ========================================================================== */

.sm-case-page-text-group{
  /* инлайн-стили Гутенберга перебиваем явно */
  padding: 32px !important;
  border-radius: 20px !important; /* на всякий */
}
/* Мобилка ≤544px */
@media (max-width:544px){
  .sm-case-detail-page-text-block{
    padding: 16px !important;
  }
}


/* ========================================================================== */
/* === Case detail: блок с изображениями и подписями ======================= */
/* ========================================================================== */

.wp-block-columns.sm-case-detail-page-image-block .wp-block-image,
.wp-block-columns.sm-case-detail-page-image-block figure{
  margin: 0 !important; /* страхуемся от дефолтов Гутенберга/темы */
}
/* Убираем нижний отступ у подписи (и на десктопе, и на мобиле) */
.wp-block-columns.sm-case-detail-page-image-block .wp-block-image figcaption,
.wp-block-columns.sm-case-detail-page-image-block .wp-element-caption{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}



/* ===== Gutenberg List: цвет маркера по классу ============================ */
/* База: ничего не меняем, только даём переменную для цвета маркера */
.wp-block-list.sm-gut-list,
.sm-gut-list{
  --sm-list-marker: currentColor; /* по умолчанию как текст */
}

/* Пресеты */
.wp-block-list.sm-gut-list-red,
.sm-gut-list-red{ --sm-list-marker: #cf2e2e; }

.wp-block-list.sm-gut-list-blue,
.sm-gut-list-blue{ --sm-list-marker: #025BD6; }

/* Применяем цвет только к маркеру (поддерживает ul/ol) */
.wp-block-list.sm-gut-list-red li::marker,
.sm-gut-list-red li::marker,
.wp-block-list.sm-gut-list-blue li::marker,
.sm-gut-list-blue li::marker{
  color: var(--sm-list-marker);
}



/* ===== Ordered List → number BADGE (фиксированный блок слева) ============= */
/* База: выключаем стандартный маркер, но НЕ трогаем нативную нумерацию —
   будем выводить её через counter(list-item), чтобы работали start/reversed/value */

ol.wp-block-list.sm-ol-badge,
ol.sm-ol-badge,
ol.wp-block-list.sm-ol-badge-invert,
ol.sm-ol-badge-invert{
  list-style: none;
  /* ВАЖНО: НЕ делаем counter-reset здесь — оставляем нативный счётчик браузера */
  /*margin: 0;*/
  padding-left: 0;
}

/* Переменные геометрии и отступов */
ol.sm-ol-badge,
ol.sm-ol-badge-invert{
  --sm-ol-badge-size: 44px;     /* сторона квадрата бейджа */
  --sm-ol-badge-gap:  24px;     /* зазор между бейджем и текстом */
  --sm-ol-badge-radius: 50px;    /* 0 — строгий квадрат; можно изменить при желании */
}

/* Интервал между пунктами */
ol.sm-ol-badge > li + li,
ol.sm-ol-badge-invert > li + li{
  margin-top: 24px;
}

/* Пункт: место слева под бейдж фикс. ширины */
ol.sm-ol-badge > li,
ol.sm-ol-badge-invert > li{
  position: relative;
  padding-left: calc(var(--sm-ol-badge-size) + var(--sm-ol-badge-gap));
  min-height: var(--sm-ol-badge-size);
}

/* Бейдж с номером — берём НОМЕР из нативного счётчика list-item:
   он учитывает <ol start="…">, <ol reversed>, <li value="…"> */
ol.sm-ol-badge > li::before,
ol.sm-ol-badge-invert > li::before{
  content: counter(list-item);
  position: absolute;
  left: 0;
  top: 0;

  width: var(--sm-ol-badge-size);
  height: var(--sm-ol-badge-size);
  border-radius: var(--sm-ol-badge-radius);

  display: flex;
  align-items: center;
  justify-content: center;

  line-height: 1;
  font-variant-numeric: tabular-nums;

  /* Цвета бейджа — «жёстко», чтобы не перебивались цветами ссылок из блока */
  background: var(--sm-ol-badge-bg) !important;
  color: var(--sm-ol-badge-color) !important;
}

/* ===== Цветовые пресеты =================================================== */
ol.sm-ol-badge{
  --sm-ol-badge-bg:    #025BD6;  /* фон */
  --sm-ol-badge-color: #FFFFFF;  /* цифра */
}
ol.sm-ol-badge-invert{
  --sm-ol-badge-bg:    #FFFFFF;
  --sm-ol-badge-color: #025BD6;
}

/* Внутренний контент <li> (текст/ссылки/иконки) — не трогаем */




/* ===== Gutenberg List: стилизация для образования Дата - Текст - Описание   ==== */
/*  (.sm-block-list-main-education) - (.sm-block-list-date)
 * Код изолирован и не повлияет на другие списки на сайте. 
 */

/* 1. Обнуляем стили для основного контейнера и всех вложенных списков.
 * Повышенная специфичность для переопределения стилей темы.
 */
.sm-block-list-main-education.wp-block-list,
.sm-block-list-main-education .wp-block-list {
  list-style: none; /* Убираем маркеры (точки) */
  margin: 0;        /* Убираем внешние отступы */
  padding: 0 !important;       /* Убираем внутренние отступы */
}

/* 2. Добавляем отступ между основными пунктами (годами) для визуального разделения */
.sm-block-list-main-education > li {
  margin-bottom: 1.5em; /* Расстояние между блоками с годами */
}
.sm-block-list-main-education > li:last-child {
  margin-bottom: 0; /* Убираем отступ у последнего элемента */
}

/* 3. Стилизуем ТОЛЬКО год (strong). Размер шрифта теперь управляется классом .sm-h3-title в HTML. */
.sm-block-list-date > strong {
  display: block; /* Чтобы отступ margin-bottom сработал */
  font-weight: 500;   /* Насыщенное начертание */
  line-height: 1.2;
  margin-bottom: 0.5em; /* Отступ от года до описания курсов */
}

/* 4. Сбрасываем размер шрифта для вложенного списка */
.sm-block-list-main-education .sm-block-list-date > ul {
    font-size: 1rem !important; /* ГАРАНТИРУЕТ СБРОС */
    line-height: 1.5;   
    font-weight: 400;    
}

/* Мобилка ≤544px */
@media (max-width:544px){
  .sm-block-list-main-education .sm-block-list-date > ul {
    font-size: 16px !important; /* ГАРАНТИРУЕТ СБРОС на мобильном*/
    line-height: 1.5;     
  }
}


/* 5. Добавляем небольшой отступ между названием курса и его описанием */
.sm-block-list-main-education .sm-block-list-date > ul > li {
    margin-bottom: 0.25em;    
    padding: 0 !important;
}


/* === Список без маркера === */





/* === Шорткод Prise цены на главной === */
/* === Заголовок группы цен на главной (ссылка) ==================== */
.sm-prices-home__heading{
  color: var(--sm-on-brand) !important;
  margin: 0 0 12px 0; /* можно убрать, если уже задано выше */
}

.sm-prices-home__heading > a.sm-price-term-link:link,
.sm-prices-home__heading > a.sm-price-term-link:visited{
  color: var(--sm-on-brand) !important;
  text-decoration: none !important;
}

.sm-prices-home__heading > a.sm-price-term-link:hover,
.sm-prices-home__heading > a.sm-price-term-link:focus,
.sm-prices-home__heading > a.sm-price-term-link:active,
.sm-prices-home__heading > a.sm-price-term-link:focus-visible{
  color: var(--sm-surface) !important;
  text-decoration: underline !important;
}

/* Только для шорткода на главной:
   у карточек — ТОЛЬКО нижний бордер; у последней карточки — нет бордера */
.sm-price-section--home .sm-price-card{
  border-top: 0 !important;
  border-bottom: 1px solid var(--sm-surface-subtle) !important;
  margin: 0 !important;
  padding: 10px 0; /* оставить как у вас */
}

/* последняя карточка в группе — без нижней линии */
.sm-price-section--home .sm-price-card:last-of-type{
  border-bottom: 0 !important;
}


/* == Карта Яндекс на сайте в iframe == */
/* Карта: скругление и нулевой CLS */
.sm-map-wrap{
  border-radius: var(--r, 20px);
  overflow: hidden;                /* важное: именно на обёртке */
  background: var(--sm-surface, #f6f8fb);
}

/* Размер без скачков верстки */
.sm-map-frame{
  display:block; width:100%;
  height: var(--h, 400px);
  border:0;
}

/* Красиво тянем по пропорциям, если браузер умеет */
@supports (aspect-ratio: 16/9){
  .sm-map-frame{ aspect-ratio: 16 / 9; height:auto; }
}




/* === SM Carousel для шорткодов: фикс кнопок/стрелок (оверрайд) === */


/* По умолчанию: контролы сверху справа (но НЕ для варианта bottom-mobile) */
.sm-carousel:not(.sm-carousel--controls-bottom-mobile) .sm-carousel__controls{
  display:flex !important;
  gap:12px !important;
  justify-content:flex-end !important;
  align-items:center !important;
  margin:12px 0 12px 0 !important;  
}


  /* Антиклип: даём «воздух» контейнеру, чтобы hover/translateY не обрезался */
  .sm-carousel:not(.sm-carousel--controls-overlay){
    padding-top:8px !important;
    overflow:visible !important; /* страховка от клипа */
  }

  /* Если используешь overlay — чуть опусти контролы ИЛИ убери подпрыгивание */
  .sm-carousel.sm-carousel--controls-overlay .sm-carousel__controls{
    top:12px !important; 
  }
  .sm-carousel.sm-carousel--controls-overlay .sm-carousel__btn:hover{
    transform:none !important; /* чтобы не «выпрыгивало» в зону клипа */
  }


/* Круглая кнопка 40x40, брендовые цвета */
.sm-carousel .sm-carousel__btn{
  -webkit-appearance:none !important;
  appearance:none !important;
  border:0 !important;
  width:40px !important; height:40px !important; flex:0 0 40px !important;
  padding:0 !important; border-radius:9999px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  line-height:1 !important;
  background: var(--sm-carousel-btn-bg, var(--sm-brand, #2563eb)) !important;
  color: var(--sm-carousel-btn-color, #fff) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.08) !important;
  cursor:pointer !important; text-decoration:none !important;
  transition: transform .12s ease, background-color .15s ease, color .15s ease !important;
}
.sm-carousel .sm-carousel__btn:hover{
  background: var(--sm-carousel-btn-bg-hover, var(--sm-brand-alt, var(--sm-brand, #2563eb))) !important;
  color: var(--sm-carousel-btn-color-hover, var(--sm-carousel-btn-color, #fff)) !important;
  transform:translateY(-1px) !important;
}
.sm-carousel .sm-carousel__btn[disabled]{
  background: var(--sm-carousel-btn-bg-disabled, #f1f5f9) !important;
  color: var(--sm-carousel-btn-color-disabled, #64748b) !important;
  box-shadow:none !important; cursor:not-allowed !important; transform:none !important;
}

/* Стрелка берёт цвет текста кнопки */
.sm-carousel .sm-carousel__btn svg{
  width:20px !important; height:20px !important; display:block !important;
}
.sm-carousel .sm-carousel__btn svg path{ fill: currentColor !important; }

/* ── Мобильный вариант: кнопки снизу и по центру ──
   Добавь на контейнер класс .sm-carousel--controls-bottom-mobile */
@media (max-width:544px){
  .sm-carousel.sm-carousel--controls-bottom-mobile{
    display:flex !important;
    flex-direction:column !important;
  }
  .sm-carousel.sm-carousel--controls-bottom-mobile .sm-carousel__viewport{
    order:1 !important;
  }
  .sm-carousel.sm-carousel--controls-bottom-mobile .sm-carousel__controls{
    order:2 !important;
    margin:12px 0 12px 0 !important;
    justify-content:center !important;
    position:static !important; /* на случай overlay */
  }
  .sm-carousel.sm-carousel--controls-bottom-mobile.sm-carousel--controls-overlay .sm-carousel__controls{
    position:static !important; top:auto !important; right:auto !important;
  }
}



/* === Desktop-guard для Astra меню: не даём ему "падать" в колонку до JS === */
/*
@media (min-width: 922px){
*/
  /* 1) На десктопе всегда строкой, даже если на body есть .ast-header-break-point
        и даже если у UL висят .ast-flex / .stack-on-mobile */
/*
  ul.main-header-menu.ast-flex,
  ul.main-header-menu.ast-flex.stack-on-mobile,
  .ast-header-break-point ul.main-header-menu.ast-flex,
  .ast-header-break-point ul.main-header-menu.ast-flex.stack-on-mobile {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
*/
  /* 2) Пункты не переносятся, высоту шапки не растягивают */
/*
  .main-header-menu > li {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
  }
*/
  /* 3) Нав бар не "прыгает" из-за расчётов высоты */
/*
  .main-header-bar {
*/
    /* Подставь фактическую высоту своей шапки, если нужно (например, 40px/80px) */
/*
    min-height: var(--ast-main-header-height, 40px) !important;
  }
}
*/

/* === Header height guard (Astra) для Astra меню: не даём ему "падать" в колонку до JS === */
/* Подогнать под настройки костомайзера в Astra */
:root{
  --sm-above-h-desktop: 81px;  /* высота верхней полосы на десктопе */
  --sm-above-h-mobile:  0px;   /* если «верхняя полоса» отключена на мобилке — оставь 0 */
  --sm-main-h-desktop:  61px;  /* высота основной полосы на десктопе */
  --sm-main-h-mobile:   61px;  /* высота основной полосы на мобилке */
}

/* ДЕСКТОП: фиксируем минимальные высоты баров, чтобы исключить прыжки */
@media (min-width:922px){
  #ast-desktop-header .ast-above-header-bar{
    min-height: var(--sm-above-h-desktop) !important;
  }
  #ast-desktop-header .ast-primary-header-bar,
  #ast-desktop-header .main-header-bar{
    min-height: var(--sm-main-h-desktop) !important;
  }

  /* (из прежнего Desktop-guard) меню всегда в строку, чтобы не «падало» в колонку */
  ul.main-header-menu.ast-flex,
  ul.main-header-menu.ast-flex.stack-on-mobile,
  .ast-header-break-point ul.main-header-menu.ast-flex,
  .ast-header-break-point ul.main-header-menu.ast-flex.stack-on-mobile{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
  }
  .main-header-menu > li{
    display:inline-flex !important;
    align-items:center !important;
    white-space:nowrap !important;
  }
}

/* МОБИЛКА: даём предсказуемую высоту мобильного бара */
@media (max-width:921px){
  #ast-mobile-header .ast-above-header-bar{
    min-height: var(--sm-above-h-mobile) !important;
  }
  #ast-mobile-header .ast-primary-header-bar,
  #ast-mobile-header .main-header-bar{
    min-height: var(--sm-main-h-mobile) !important;
  }
}



/* ==================================================================================== */
/* === Astra Sticky Header: показывать виджет и кнопку только в прикреплённом меню === */
/* Что прячем/показываем: 
   1) виджет с иконкой (header-widget-4)
   2) правая кнопка "Записаться" (ast-header-button-1)
   Только для десктопа.
*/
@media (min-width: 922px){

  /* БАЗА: скрыть в обычном (не sticky) состоянии, но сохранить место, чтобы не было CLS */
  .ast-primary-header-bar 
    .header-widget-area[data-section="sidebar-widgets-header-widget-4"],
  .ast-primary-header-bar 
    .ast-header-button-1{
    visibility: hidden;      /* места столько же, но элемента «не видно» */
    opacity: 0;              /* плавное появление при липком состоянии */
    pointer-events: none;    /* не кликается/не фокусируется */
    transition: opacity .2s ease;
  }
  /* ПОКАЗЫВАТЬ, когда полоса стала липкой.
     Astra использует разные классы в зависимости от настроек/версии,
     поэтому учитываем несколько вариантов сразу. */
  .ast-primary-header-bar.ast-sticky-active 
    .header-widget-area[data-section="sidebar-widgets-header-widget-4"],
  .ast-primary-header-bar.ast-sticky-active 
    .ast-header-button-1,

  .main-header-bar.ast-sticky-active 
    .header-widget-area[data-section="sidebar-widgets-header-widget-4"],
  .main-header-bar.ast-sticky-active 
    .ast-header-button-1,

  #masthead.ast-sticky-shrunk 
    .header-widget-area[data-section="sidebar-widgets-header-widget-4"],
  #masthead.ast-sticky-shrunk 
    .ast-header-button-1,

  .site-header.ast-sticky-shrunk 
    .header-widget-area[data-section="sidebar-widgets-header-widget-4"],
  .site-header.ast-sticky-shrunk 
    .ast-header-button-1,

  /* В ряде сборок состояние проставляется на body/html */
  body.ast-sticky-header-active 
    .ast-primary-header-bar .header-widget-area[data-section="sidebar-widgets-header-widget-4"],
  body.ast-sticky-header-active 
    .ast-primary-header-bar .ast-header-button-1{

    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  /* Опционально: полностью скрываем элементы. Контролируем сдвиг  ⇒ min-height guard должен быть включен. */  
  .ast-primary-header-bar 
    .header-widget-area[data-section="sidebar-widgets-header-widget-4"],
  .ast-primary-header-bar 
    .ast-header-button-1{
    display: none;
  }
  .ast-primary-header-bar.ast-sticky-active 
    .header-widget-area[data-section="sidebar-widgets-header-widget-4"],
  .ast-primary-header-bar.ast-sticky-active 
    .ast-header-button-1,
  .main-header-bar.ast-sticky-active 
    .header-widget-area[data-section="sidebar-widgets-header-widget-4"],
  .main-header-bar.ast-sticky-active 
    .ast-header-button-1{ 
    display: block; 
  }
  
}
/* Уважение reduce-motion: убираем анимацию для пользователей, кто её отключает */
@media (prefers-reduced-motion: reduce){
  @media (min-width: 922px){
    .ast-primary-header-bar 
      .header-widget-area[data-section="sidebar-widgets-header-widget-4"],
    .ast-primary-header-bar 
      .ast-header-button-1{
      transition: none;
    }
  }
}






/* === Врачи (шорткод): убираем тень у карточек === */

/* === Врачи (шорткод): бордер вместо тени === */
.sm-carousel--doctors .sm-doctor-card,
.sm-carousel--doctors .ast-article-single,
.sm-doctors-grid .sm-doctor-card,
.sm-doctors-grid .ast-article-single{
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border: 1px solid var(--sm-surface-subtle); 
}

/* на hover/фокус — без тени, бордер остаётся */
.sm-carousel--doctors .sm-doctor-card:hover,
.sm-carousel--doctors .ast-article-single:hover,
.sm-carousel--doctors .sm-doctor-card:focus-within,
.sm-carousel--doctors .ast-article-single:focus-within,
.sm-doctors-grid .sm-doctor-card:hover,
.sm-doctors-grid .ast-article-single:hover,
.sm-doctors-grid .sm-doctor-card:focus-within,
.sm-doctors-grid .ast-article-single:focus-within{
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  border-color: var(--sm-on-brand); 
}




/* === ЕДИНЫЕ ВНЕШНИЕ ОТСТУПЫ ДЛЯ CORE-БЛОКОВ =========================
   top = 0, bottom = 12px (mobile) / 16px (tablet+desktop)
====================================================================== */

/* Мобайл по умолчанию */
:root{ --sm-block-gap: 12px; }

/* Планшет+десктоп ≥545px (под Astra) */
@media (min-width: 545px){
  :root{ --sm-block-gap: 16px; }
}

/* Все дети потоковых контейнеров, КРОМЕ spacer */
.entry-content :where(.is-layout-constrained,.is-layout-flow) > :not(.wp-block-spacer){
  margin-block-start: 0;
  margin-block-end: var(--sm-block-gap);
}

/* Фолбэк: если блок не попал в потоковый контейнер */
.entry-content > [class^="wp-block-"]:not(.wp-block-spacer){
  margin-top: 0;
  margin-bottom: var(--sm-block-gap);
}

/* === Spacer ======================================================== */
/* По умолчанию spacer ведёт себя как в ядре (высота из inline), только без внешних margin */
.entry-content .wp-block-spacer{ margin: 0; }

/* Вариант: только экземпляры с классом sm-spacer-64 */
.entry-content .wp-block-spacer.sm-spacer-64{ height: 20px !important; }
@media (min-width:545px){
  .entry-content .wp-block-spacer.sm-spacer-64{ height: 48px !important; }
}


/* === Стилизация core block таблицы закругленные углы использовать класс .sm-table-style для обчной таблицы и .sm-table-style-stripes для таблицы полосами =============== */

/* === TABLE: круглые углы + цельная рамка (класс на FIGURE) === */
.wp-block-table.sm-table-style{
  position: relative;
  overflow-x: auto;
  border-radius: 20px;
  margin-bottom: 0;
}
.wp-block-table.sm-table-style::before{
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 20px;
  border: 1px solid var(--sm-muted); /* цвет рамки */
  z-index: 1;
  pointer-events: none; /* важно: рамка не перекрывает клики и фокус */
}
.wp-block-table.sm-table-style table{
  width: 100%;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 20px;
  background-clip: padding-box; /* фон аккуратно обрезается по радиусу */
}
.wp-block-table.sm-table-style table th,
.wp-block-table.sm-table-style table td{
  border: 1px solid var(--sm-muted) !important; /* цвет внутренних линий */
  border-left: 0 !important;
  border-top: 0 !important;
  padding: 12px 14px;
}
.wp-block-table.sm-table-style table tr > *:last-child{ border-right: 0 !important; }
.wp-block-table.sm-table-style table tbody tr:last-child > *{ border-bottom: 0 !important; }

/* === TABLE STRIPES: «капсулы» по строкам (класс на FIGURE) === */
.wp-block-table.is-style-stripes.sm-table-style-stripes{
  overflow-x: auto;
  margin-bottom: 0;
}
.wp-block-table.is-style-stripes.sm-table-style-stripes table{
  width: 100%;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 4px !important; /* зазор 4px между строками */
  background: transparent !important;
}
.wp-block-table.is-style-stripes.sm-table-style-stripes tbody tr{
  background: transparent !important; /* глушим фон на <tr> от core */
}
.wp-block-table.is-style-stripes.sm-table-style-stripes tbody td{
  border: 0 !important;
  padding: 12px 14px;
  background: transparent;
}
.wp-block-table.is-style-stripes.sm-table-style-stripes tbody tr:nth-child(odd) > td{
  background-color: var(--sm-surface-subtle) !important; /* цвет «зебры» */
}
.wp-block-table.is-style-stripes.sm-table-style-stripes tbody tr > td:first-child{
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.wp-block-table.is-style-stripes.sm-table-style-stripes tbody tr > td:last-child{
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.wp-block-table.is-style-stripes.sm-table-style-stripes thead th{
  background: transparent !important;
  border: 0 !important;
}