/* home.css — Version: 1.19.1
   Секциите на началната страница — пренесени от _not_for_git/preview/home-redesign.html.
   Оформлението (колони, отстояния, ширина) живее в контролите на Elementor; тук стои само
   това, което Elementor не изразява: вътрешността на картите, hover ефектите и местата,
   където глобалният Kit бие стила (затова !important, както в hero.css и header-menu.css). */

/* ── Общи за секциите ─────────────────────────────────────────────────── */
.mk-sec .eyebrow, .mk-sec-head .eyebrow { font-size: 15px !important; font-weight: 700 !important; letter-spacing: .08em !important;
          text-transform: uppercase !important; color: #F37B1F !important; margin: 0 0 10px !important; }
.mk-sec-head { text-align: center !important; }
.mk-sec-head .elementor-heading-title { color: #362A4B !important; }
.mk-sec-head h2.elementor-heading-title { font-size: 30px !important; line-height: 1.25 !important; font-weight: 700 !important; margin: 0 0 12px !important; }
.mk-sec-head .mk-lead { font-size: 16px !important; line-height: 1.65 !important; color: #6B5D82 !important; max-width: 62ch !important; margin: 0 auto !important; }
.mk-sec .elementor-heading-title { margin: 0 !important; }

/* Цялата карта е кликаема: истинският линк в нея (заглавие или CTA) се разтяга върху
   кутията с псевдо-елемент. Elementor не дава линк на секция, а празен бутон-наслагване
   изобщо не се рендира — затова този модел, който пази един смислен линк за четци и SEO. */
.mk-stretch a::after, .mk-stretch .elementor-button::after {
          content: "" !important; position: absolute !important; inset: 0 !important; z-index: 4 !important; }
.mk-stretch a, .mk-stretch .elementor-button { position: static !important; }
/* Псевдо-елементът се закача за най-близкия позициониран предшественик. Контейнерът,
   колоната и джаджата на Elementor са `position:relative` по подразбиране — затова
   покритието спираше до заглавието. Вътре в картите тези нива стават статични, а самата
   карта остава единственият позициониран предшественик. */
.dir-card .elementor-container, .dir-card .elementor-column, .dir-card .elementor-widget-wrap, .dir-card .elementor-widget,
.cc-card .elementor-container, .cc-card .elementor-column, .cc-card .elementor-widget-wrap, .cc-card .elementor-widget,
.proc-card .elementor-container, .proc-card .elementor-column, .proc-card .elementor-widget-wrap, .proc-card .elementor-widget,
.news-card .elementor-container, .news-card .elementor-column, .news-card .elementor-widget-wrap, .news-card .elementor-widget,
.story-card .elementor-container, .story-card .elementor-column, .story-card .elementor-widget-wrap, .story-card .elementor-widget
          { position: static !important; }
.dir-card, .cc-card, .proc-card, .news-card, .story-card { isolation: isolate !important; }

/* ── Хедърът стои над цялото съдържание ───────────────────────────────────
   Коренът на хедъра е `position:static; z-index:auto`, тоест при sticky всяка секция
   със собствен z-index се качва върху менюто. Вместо да гоня отделните случаи, хедърът
   получава свой стек най-отгоре, а съдържанието се държи под него. */
header.elementor-location-header { position: relative !important; z-index: 1000 !important; }
header.elementor-location-header .elementor-sticky--active { z-index: 1000 !important; }

/* ── Общо: външната колона на секциите не стеснява съдържанието ───────────
   `.elementor-element-populated` носи 10px padding по подразбиране и картите губеха
   по 10px от всяка страна спрямо заглавния блок. */
.mk-sec > .elementor-container > .elementor-column > .elementor-element-populated,
.mk-help > .elementor-container > .elementor-column > .elementor-element-populated,
.mk-process > .elementor-container > .elementor-column > .elementor-element-populated,
.mk-stories > .elementor-container > .elementor-column > .elementor-element-populated { padding: 0 !important; }

/* ── Помощен селектор (4 карти под hero) ──────────────────────────────── */
.mk-help { margin-top: -45px !important; position: relative !important; z-index: 1 !important; }
/* Разстоянието между картите е 18px (както в мокъпа), получено с margin върху самата
   карта и изнасяне на контейнера с толкова, че външните ръбове да останат наравно
   със заглавния блок. */
.mk-help .elementor-inner-section > .elementor-container { margin: 0 -9px !important; width: calc(100% + 18px) !important; max-width: none !important; }
/* Същото нулиране като при картите от решетките — иначе разтегнатият линк на icon-box-а
   покрива само джаджата, не цялата карта. */
.mk-help .help-card .elementor-widget, .mk-help .help-card .elementor-widget-container { position: static !important; }
.mk-help .help-card > .elementor-element-populated { background: #fff !important; border-radius: 3px !important;
          margin: 0 9px !important;
          padding: 26px 22px !important; box-shadow: 0 9px 20px rgba(54,42,75,.14) !important;
          border: 1px solid #F0EAF7 !important; transition: transform .18s ease, box-shadow .18s ease !important;
          position: relative !important; }
.mk-help .help-card:hover > .elementor-element-populated { transform: translateY(-4px) !important; box-shadow: 0 11px 24px rgba(54,42,75,.2) !important; }
/* Плочката е с фиксирана ширина, тоест `text-align: center` на обвивката не я
   мести — центрира се само с автоматично поле отстрани, както и текстът под нея. */
.mk-help .elementor-icon-box-icon { width: 46px !important; height: 46px !important; border-radius: 2px !important;
          background: #F4EEFA !important; display: flex !important; align-items: center !important; justify-content: center !important;
          margin: 0 auto 16px !important; }
.mk-help .elementor-icon { color: #69528E !important; font-size: 22px !important; }
.mk-help .elementor-icon-box-title { font-size: 18px !important; margin: 0 0 6px !important; color: #362A4B !important; font-weight: 700 !important; }
.mk-help .elementor-icon-box-description { font-size: 13.5px !important; color: #7B6B93 !important; margin: 0 !important; line-height: 1.5 !important; }

/* ── Направления ──────────────────────────────────────────────────────── */
.dir-card { position: relative !important; border-radius: 0 !important; overflow: hidden !important;
          height: 220px !important; background-color: #69528E !important; display: flex !important;
          align-items: flex-end !important; padding: 20px !important; color: #fff !important;
          transition: box-shadow .3s ease !important; }
/* Снимката и градиентът лягат под текста с отрицателен z-index — така заглавието остава
   статично и разтегнатият линк покрива цялата карта. Картата е собствен стек (isolate),
   затова отрицателните слоеве не потъват зад фона ѝ. */
.dir-card::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: -1 !important;
          background: linear-gradient(180deg, rgba(105,82,142,.15), rgba(54,42,75,.88)) !important; }
.dir-card:hover { box-shadow: 0 8px 17px rgba(54,42,75,.3) !important; transform: scale(1.03) !important; }
/* Секцията е картата; вътрешните нива на Elementor трябва да я напълнят по височина,
   иначе снимката (абсолютна спрямо секцията) няма кутия, която да покрие. */
.dir-card > .elementor-container, .dir-card > .elementor-container > .elementor-column,
.dir-card > .elementor-container > .elementor-column > .elementor-widget-wrap {
          height: 100% !important; min-height: 0 !important; width: 100% !important;
          padding: 0 !important; align-items: flex-end !important; align-content: flex-end !important; }
.dir-card .elementor-widget-image { position: absolute !important; inset: 0 !important; z-index: -2 !important; }
.dir-card .elementor-widget-image, .dir-card .elementor-widget-image .elementor-widget-container,
.dir-card .elementor-widget-image figure, .dir-card .elementor-widget-image img { width: 100% !important; height: 100% !important; margin: 0 !important; }
.dir-card .elementor-widget-image img { object-fit: cover !important; transform: scale(1) !important; transition: transform .5s ease !important; }

.dir-card .dir-title { align-self: flex-end !important; }
.dir-card .dir-title .elementor-heading-title { font-size: 18px !important; font-weight: 700 !important;
          line-height: 1.3 !important; color: #fff !important; }
.mk-more .elementor-button { background: transparent !important; color: #69528E !important; font-size: 18.6px !important;
          font-weight: 700 !important; border: 0 !important; border-bottom: 2px solid #C9BBD8 !important;
          border-radius: 0 !important; padding: 0 0 4px !important; }
.mk-more .elementor-button:hover { border-bottom-color: #69528E !important; }

/* ── Контур, който се дорисува при hover (събития и процедури) ─────────
   Превюто ползва четири отделни <i> елемента. Тук същите четири линии се правят от
   псевдо-елементите на секцията и на нейния контейнер — без четири празни джаджи,
   които биха затрупали редакторa. */
.cc-card, .proc-card { position: relative !important; }
.cc-card::before, .cc-card::after,
.cc-card > .elementor-container::before, .cc-card > .elementor-container::after,
.proc-card::before, .proc-card::after,
.proc-card > .elementor-container::before, .proc-card > .elementor-container::after {
          content: "" !important; position: absolute !important; display: block !important;
          background: #69528E !important; z-index: 3 !important; pointer-events: none !important; }
.cc-card::before, .proc-card::before { top: 0 !important; left: 0 !important; width: 100% !important; height: 1px !important;
          transform-origin: left center !important; transform: scaleX(.08) !important; transition: transform .08s ease !important; }
.cc-card::after, .proc-card::after { top: 0 !important; right: 0 !important; width: 1px !important; height: 100% !important;
          transform-origin: top center !important; transform: scaleY(0) !important; transition: transform .08s ease .08s !important; }
.cc-card > .elementor-container::before, .proc-card > .elementor-container::before { bottom: 0 !important; right: 0 !important;
          width: 100% !important; height: 1px !important; transform-origin: right center !important; transform: scaleX(0) !important;
          transition: transform .08s ease .16s !important; }
.cc-card > .elementor-container::after, .proc-card > .elementor-container::after { top: 0 !important; left: 0 !important;
          width: 1px !important; height: 100% !important; transform-origin: top center !important; transform: scaleY(.08) !important;
          transition: transform .08s ease .24s !important; }
.cc-card:hover::before, .proc-card:hover::before,
.cc-card:hover > .elementor-container::before, .proc-card:hover > .elementor-container::before { transform: scaleX(1) !important; }
.cc-card:hover::after, .proc-card:hover::after,
.cc-card:hover > .elementor-container::after, .proc-card:hover > .elementor-container::after { transform: scaleY(1) !important; }

/* ── Събития (гостуващи специалисти) ──────────────────────────────────── */
.cc-card { background: #F7F4FA !important; border-radius: 0 !important; padding: 22px !important;
          border: 1px solid #EEE6F5 !important; cursor: pointer !important;
          transition: transform .25s ease, box-shadow .25s ease !important; }
.cc-card:hover { transform: scale(1.025) !important; box-shadow: 0 7px 16px rgba(54,42,75,.12) !important; }
.cc-card > .elementor-container { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 14px !important; }
/* Кръгът стои на обвивката, не на самата снимка: изображенията са 299×230 (не квадрат),
   затова радиус върху тях даваше елипса. Обвивката е фиксиран квадрат 120×120 с
   `overflow:hidden`, а снимката го запълва с `cover`. */
.cc-card .cc-photo { flex: 0 0 120px !important; width: 120px !important; max-width: 120px !important; }
.cc-card .cc-photo .elementor-widget-image, .cc-card .cc-photo .elementor-widget-container,
.cc-card .cc-photo figure, .cc-card .cc-photo .elementor-image {
          width: 120px !important; height: 120px !important; min-width: 120px !important; min-height: 120px !important;
          max-width: 120px !important; max-height: 120px !important; aspect-ratio: 1 / 1 !important;
          box-sizing: border-box !important; flex: 0 0 120px !important; margin: 0 !important; padding: 0 !important;
          border-radius: 50% !important; overflow: hidden !important; display: block !important;
          background: linear-gradient(180deg, #7A63A0 0%, #69528E 100%) !important; }
/* Портретът е прозрачен PNG — отдолу ляга лилавото на сайта, за да не се вижда фонът
   на картата през лекаря. `object-position: top` пази главата в кадър при изрязването. */
.cc-card .cc-photo img { width: 100% !important; height: 100% !important; max-width: none !important;
          border-radius: 0 !important; object-fit: cover !important; object-position: 50% 18% !important;
          display: block !important; transition: transform .3s ease !important; }
.cc-card .cc-photo .elementor-widget-container { border: 2px solid #fff !important;
          box-shadow: 0 1px 4px rgba(78,61,107,.12) !important; }

.cc-card .cc-body { flex: 1 1 auto !important; min-width: 0 !important; }
.cc-card .cc-tag .elementor-heading-title { font-size: 11.5px !important; font-weight: 700 !important; color: #F37B1F !important;
          text-transform: uppercase !important; letter-spacing: .05em !important; }
.cc-card .cc-title .elementor-heading-title { font-size: 15px !important; margin: 10px 0 0 !important; line-height: 1.4 !important;
          color: #362A4B !important; font-weight: 600 !important; }

/* ── Как протича процесът ─────────────────────────────────────────────── */
.mk-process { background: #F7F4FA !important; }
.mk-process .step { text-align: center !important; }
/* Иконите са <img> към SVG файл в темата (сменяеми от Elementor). Цветът им е зададен
   във файла — за разлика от превюто, където са inline и CSS ги оцветява при hover. */
.mk-process .step-ic img { width: 108.8px !important; height: 108.8px !important; margin: 0 auto 10px !important;
          display: block !important; transition: transform .2s ease !important; }
.mk-process .step:hover .step-ic img { transform: scale(1.06) !important; }
.mk-process .step-num .elementor-heading-title { width: 40px !important; height: 40px !important; border-radius: 50% !important;
          background: #69528E !important; color: #fff !important; font-weight: 700 !important; font-size: 22.5px !important;
          display: flex !important; align-items: center !important; justify-content: center !important;
          margin: 0 auto 12px !important; transition: background .2s ease !important; }
.mk-process .step-txt { font-size: 15px !important; line-height: 1.45 !important; color: #6B5D82 !important;
          transition: transform .2s ease, color .2s ease !important; }
.mk-process .step:hover .step-num .elementor-heading-title { background: #FF1A4B !important; }
.mk-process .step:hover .step-txt { transform: scale(1.15) !important; color: #FF1A4B !important; }

/* ── Защо Медикъл Караджъ (показатели) ────────────────────────────────── */
.mk-stat > .elementor-element-populated { aspect-ratio: 1 / 1 !important; display: flex !important; flex-direction: column !important;
          align-items: center !important; justify-content: center !important; padding: 14px !important;
          border-radius: 3px !important; background: #FBF9FD !important; border: 1px solid #F0EAF7 !important;
          transition: border-color .2s ease !important; }
.mk-stat:hover > .elementor-element-populated { border-color: #FF1A4B !important; }
.mk-stat .stat-num .elementor-heading-title { font-size: 51px !important; color: #69528E !important; font-weight: 800 !important;
          line-height: 1.1 !important; transition: color .2s ease !important; }
.mk-stat .stat-txt { font-size: 19.5px !important; color: #7B6B93 !important; text-align: center !important;
          transition: color .2s ease !important; }
.mk-stat:hover .stat-num .elementor-heading-title, .mk-stat:hover .stat-txt { color: #FF1A4B !important; }

/* ── Процедури ────────────────────────────────────────────────────────── */
.proc-card { height: 100% !important; min-height: 184px !important; border: 1px solid #EEE6F5 !important; border-radius: 0 !important; overflow: hidden !important;
          background: #fff !important; transition: transform .18s ease, box-shadow .18s ease !important; }
.proc-card:hover { transform: scale(1.02) !important; box-shadow: 0 9px 20px rgba(54,42,75,.12) !important; }
.proc-card > .elementor-container { display: flex !important; flex-direction: row !important; align-items: stretch !important; }
.proc-card .proc-img { flex: 0 0 248px !important; width: 248px !important; overflow: hidden !important;
          display: flex !important; align-items: center !important; justify-content: flex-end !important; }
.proc-card .proc-img > .elementor-element-populated, .proc-card .proc-img .elementor-widget-image,
.proc-card .proc-img .elementor-widget-container, .proc-card .proc-img figure { height: 100% !important; margin: 0 !important; padding: 0 !important; }
.proc-card .proc-img img { width: 100% !important; height: 100% !important; max-width: none !important;
          object-fit: cover !important; object-position: 100% center !important; display: block !important; }
.proc-card .proc-body > .elementor-element-populated { padding: 22px 28px !important; display: flex !important;
          flex-direction: column !important; justify-content: center !important; }
.proc-card .proc-title .elementor-heading-title { font-size: 18px !important; margin: 0 0 5px !important; color: #362A4B !important; font-weight: 700 !important; }
.proc-card .proc-sub { font-size: 13px !important; color: #7B6B93 !important; line-height: 1.55 !important; max-width: 52ch !important; }
.proc-card .proc-cta .elementor-button { background: transparent !important; border: 0 !important; padding: 0 !important;
          margin-top: 14px !important; font-size: 12.5px !important; font-weight: 600 !important; color: #FF1A4B !important; }
.proc-card .proc-cta .elementor-button:hover { color: #E5133F !important; }
.mk-disclaimer { margin-top: 26px !important; font-size: 12px !important; color: #9C8DB0 !important; text-align: center !important;
          max-width: 62ch !important; margin-left: auto !important; margin-right: auto !important; }

/* ── Най-нови теми ────────────────────────────────────────────────────── */
.news-card { background: #fff !important; border: 1px solid #EEE6F5 !important; border-radius: 0 !important;
          overflow: hidden !important; position: relative !important; transition: border-color .25s ease, transform .18s ease, box-shadow .18s ease !important; }
.news-card:hover { border-color: #69528E !important; transform: scale(1.025) !important; box-shadow: 0 8px 17px rgba(54,42,75,.12) !important; }
/* Снимката излиза в съотношението, в което е качена. Досега кутията беше
   190px висока с `cover` — режеше точно там, където е същината: лице,
   глава, надпис. Карти с различно висока снимка са цената; решетката ги
   изравнява по най-високата. */
.news-card .news-img img { width: 100% !important; max-width: 100% !important; height: auto !important;
          object-fit: fill !important; display: block !important; margin: 0 !important;
          transition: transform .5s ease !important; }

.news-card .news-img .elementor-widget-container, .news-card .news-img figure { margin: 0 !important; line-height: 0 !important; overflow: hidden !important; }
.news-card .news-body > .elementor-element-populated { padding: 0 0 22px !important; }
.news-card .news-date, .news-card .news-title { padding: 0 22px !important; }
.news-card .news-date { padding-top: 18px !important; }
.news-card .news-date .elementor-heading-title { font-size: 11.5px !important; font-weight: 700 !important; color: #F37B1F !important;
          text-transform: uppercase !important; letter-spacing: .05em !important; }
.news-card .news-title .elementor-heading-title { font-size: 15px !important; line-height: 1.4 !important; color: #362A4B !important;
          font-weight: 600 !important; margin: 8px 0 0 !important; }

/* ── Пациентски истории ───────────────────────────────────────────────── */
/* Страницата тръгва с бяло: карти и истории са на бял фон, тонираното
   започва чак от „Как работим". */
.mk-stories { background: #fff !important; }
.story-card { background: #fff !important; border-radius: 0 !important; border: 1px solid #EEE6F5 !important;
          overflow: hidden !important; position: relative !important; transition: border-color .25s ease !important; }
.story-card:hover { border-color: #69528E !important; transform: scale(1.02) !important; box-shadow: 0 9px 20px rgba(54,42,75,.12) !important; }
.story-card > .elementor-container > .elementor-column > .elementor-element-populated { padding: 0 26px 26px !important; }
.story-card .story-photo { margin: 0 -26px 16px !important; }
.story-card .story-photo img { width: calc(100% + 52px) !important; max-width: calc(100% + 52px) !important; height: auto !important; display: block !important; }
.story-card .story-quote { font-size: 15px !important; line-height: 1.46 !important; color: #4E3D6B !important; margin: 0 0 14px !important; }
.story-card .story-who .elementor-heading-title { font-size: 15px !important; color: #4E3D6B !important; font-weight: 600 !important;
          line-height: 1.35 !important; }

/* ── Разделител между секции ──────────────────────────────────────────── */
.mk-divider .elementor-divider { padding-block: 0 !important; }
.mk-divider .elementor-divider-separator { border-top-color: #E7DFF0 !important; }
.mk-divider .elementor-icon, .mk-divider .elementor-divider__element { color: #C9BBD8 !important; }

/* ── Финален CTA (във футера) ─────────────────────────────────────────── */
.mk-final { background: #362A4B !important; color: #fff !important; }
.mk-final .elementor-heading-title { color: #fff !important; }
.mk-final .final-h2 .elementor-heading-title { font-size: 30px !important; line-height: 1.25 !important; font-weight: 700 !important; }
.mk-final .final-label .elementor-heading-title { font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important;
          letter-spacing: .06em !important; margin: 0 0 10px !important; }
.mk-final .final-rep-text { font-size: 12.5px !important; line-height: 1.6 !important; color: #fff !important; max-width: 32ch !important; margin: 0 0 16px !important; }
.mk-final .final-lead { font-size: 16px !important; line-height: 1.65 !important; color: #C9BBDD !important; margin: 0 auto 26px !important; }
.mk-final .btn-light .elementor-button { background: transparent !important; color: #fff !important;
          border: 1.5px solid rgba(255,255,255,.55) !important; border-radius: 3px !important;
          padding: 12px 22px !important; font-size: 14px !important; font-weight: 600 !important; }
.mk-final .btn-light .elementor-button:hover { background: rgba(255,255,255,.1) !important; border-color: #fff !important; }
.mk-final .btn-primary .elementor-button { background: #FF1A4B !important; color: #fff !important; border: 0 !important;
          border-radius: 3px !important; padding: 14px 26px !important; font-size: 15px !important; font-weight: 600 !important; }
.mk-final .btn-primary .elementor-button:hover { background: #E5133F !important; }
.mk-final .final-social .elementor-social-icon { background: transparent !important; border: 1.5px solid rgba(255,255,255,.35) !important;
          width: 47px !important; height: 47px !important; color: #fff !important; }
.mk-final .final-social .elementor-social-icon:hover { background: rgba(255,255,255,.12) !important; border-color: #fff !important; }
.mk-final .final-social .elementor-icon { font-size: 21px !important; }

/* ── Subfooter ────────────────────────────────────────────────────────── */
.mk-subfooter { background: #281F38 !important; color: #B6A6CE !important; font-size: 12.5px !important; }
.mk-subfooter .elementor-heading-title, .mk-subfooter .elementor-icon-list-text { color: #B6A6CE !important; font-size: 12.5px !important; }
.mk-subfooter a:hover .elementor-icon-list-text { color: #fff !important; }
.mk-subfooter .elementor-icon-list-items { display: flex !important; gap: 22px !important; flex-wrap: wrap !important; justify-content: flex-end !important; }
.mk-subfooter .elementor-icon-list-item { margin: 0 !important; }

/* ── Бебета и брояч: сегашните секции, прибрани в новия нюанс ─────────── */
.mk-babies { background: #F7F4FA !important; }
.mk-babies > .elementor-container > .elementor-column > .elementor-element-populated > .elementor-section:first-child .elementor-heading-title { color: #362A4B !important; }
.mk-counters .elementor-image-box-title, .mk-counters .elementor-image-box-description { color: #fff !important; }

@media (max-width: 900px) {
  .mk-help { margin-top: 0 !important; }
  .proc-card > .elementor-container { flex-direction: column !important; }
  .proc-card .proc-img { flex: 0 0 auto !important; width: 100% !important; }
}

/* Една анимация за всички карти: цялата карта се увеличава леко, вместо отделни
   части вътре в нея да се движат независимо. */
.dir-card, .cc-card, .proc-card, .news-card, .story-card {
          transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
          will-change: transform !important; }

.news-card .news-cta .elementor-button { background: transparent !important; border: 0 !important; padding: 0 !important;
          margin-top: 12px !important; font-size: 13px !important; font-weight: 600 !important; color: #FF1A4B !important; }
.news-card .news-cta { padding: 0 22px !important; }

/* Бебетата вече са самостоятелен тип — връзката е текстова, както при другите секции.
   Лентата с връзката и разделителят под нея лежат върху същия светъл фон; иначе между
   двете лилави секции оставаше бяла ивица. Връзката се вдига плътно до бележката. */
.mk-babies-bar, .mk-divider-tint { background: #F7F4FA !important; }
.mk-babies > .elementor-container > .elementor-column > .elementor-element-populated { padding-bottom: 0 !important; }
.mk-babies-bar .mk-more { margin-top: -34px !important; }

.mk-sec .elementor-widget-loop-grid .e-loop-item { height: 100% !important; }

/* ── бебеброячът: в рамките на платното ──────────────────────────────
   Лентата минаваше от ръб до ръб и беше висока колкото половин екран —
   заемаше повече място от дяловете със съдържание над и под нея. Сега
   стои в ширината на останалите дялове.

   Неподвижната кутия с ръчно написаното число отпадна; на нейно място е
   хиро блокът от „Важно за инвитро“ — същите loop шаблони, същият жив
   брояч. Остава само рамката, която кутията държеше. */
.mk-bb-hero {
	max-width: 1300px !important;
	margin: 0 auto !important;
	border-radius: 2px !important;
	overflow: hidden !important;
}

/* Фонът е този на старата кутия, не на инвитро хирото: двата хиро блока на
   страницата трябва да се различават по снимка. Два класа бият единия в
   `landing.css` независимо от реда, в който се зареждат файловете. */
.mk-bb-hero.mk-ivf-hero {
	background-image: url('../../uploads/2016/09/iscare_banner.jpg') !important;
	background-position: center center !important;
}

/* ── същият блок, но по-нисък ────────────────────────────────────────
   На входната страница банерът е самостоятелен дял и заема цял екран. Тук
   е един от многото и трябва да се побере между съседите си, затова пада с
   40% на височина, а кутията с числото — с 30%.

   `landing.css` се зарежда СЛЕД `home.css` (и зависи от него), затова при
   равна специфичност печели той. Всяко правило тук носи трети клас. */

/* Поздравителният текст отпада: на началната блокът е витрина, не разказ.
   Текстът е в шаблон 31743, който се споделя с инвитро страницата — затова
   пада по клас, а не от шаблона. */
.mk-bb-hero.mk-ivf-hero .mk-ivf-note { display: none !important; }

/* 696 → 418. Стойността стои на две места: на контейнера (от `hero.css`) и
   на дясната колона (от `landing.css`). Разминат ли се, по-високата печели
   и смаляването не се вижда. */
.mk-bb-hero.hero > .elementor-container,
.mk-bb-hero.mk-ivf-hero .mk-ivf-right,
.mk-bb-hero.mk-ivf-hero .mk-ivf-right > .elementor-widget-wrap { min-height: 418px !important; }

/* Воалът на `.hero::before` е линеен: плътен отляво, прозрачен отдясно —
   мярка за хирото горе, където текстът лежи върху снимка на лекар. Тук
   лявата му страна покриваше майката и разсичаше банера на две. На негово
   място идва равномерно затъмняване: тъмното лилаво на темата на 20%, по
   цялата площ, колкото да се държи белият текст. */
.mk-bb-hero.hero::before {
	background: rgba( 54, 42, 75, .2 ) !important;
}

/* Двете части стоят в центъра по вертикала. Фиксираната линия отгоре беше
   нужна, докато панелът носеше текст с различна дължина; след като той
   отпадна, съдържанието е с постоянна височина и центърът е устойчив. */
.mk-bb-hero.mk-ivf-hero .hero-left > .elementor-widget-wrap {
	justify-content: center !important;
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}

/* ── двата бокса в центъра по хоризонтала ────────────────────────────
   Колоните са 58/42 — дял от платното, не от съдържанието. Лявата заемаше
   754 при 714 текст, дясната 546 при 308 кутия, затова групата седеше
   изместена надясно: отляво оставаха 385 празни, отдясно 227.

   Колоните се свиват до това, което носят, и контейнерът ги събира в
   средата. Разстоянието между тях е изрично, не остатък от процентите. */
.mk-bb-hero.mk-ivf-hero > .elementor-container {
	justify-content: center !important;
	gap: 44px !important;
}

.mk-bb-hero.mk-ivf-hero > .elementor-container > .elementor-column {
	width: auto !important;
	max-width: none !important;
	flex: 0 0 auto !important;
}

/* Колоната оставаше 799 при съдържание под 300 и центърът излизаше крив.
   Две неща я държаха разпъната: Elementor реди джаджите в ред (`row`) и
   дава на всяка `width: 100%`. Затова само `align-items` не стига —
   посоката минава на колона, а джаджите получават своята ширина.
   Подравняването е по десния ръб, в посоката, в която текстът се чете. */
.mk-bb-hero.mk-ivf-hero .hero-left > .elementor-widget-wrap,
.mk-bb-hero.mk-ivf-hero .hero-text-panel .elementor-widget-wrap {
	flex-direction: column !important;
	align-items: flex-end !important;
}

.mk-bb-hero.mk-ivf-hero .hero-left > .elementor-widget-wrap > .elementor-widget,
.mk-bb-hero.mk-ivf-hero .hero-text-panel .elementor-widget-wrap > .elementor-widget,
.mk-bb-hero.mk-ivf-hero .hero-text-panel .elementor-widget-wrap > .elementor-section {
	width: auto !important;
	max-width: 100% !important;
}

/* Бутоните са двойка и остават рамо до рамо — колонната посока важи за
   нивата над тях, не за самия ред. */
.mk-bb-hero.mk-ivf-hero .cta-row .elementor-widget-wrap {
	flex-direction: row !important;
	align-items: center !important;
}

/* ── въздухът в лявата колона ────────────────────────────────────────
   Височината на банера я определя тази колона, не кутията: при 478 тя
   беше с 60 по-висока от целта. Шрифтовете и бутоните остават както са —
   свиват се само разстоянията, всяко с толкова, колкото му е в повече.
   Измерено преди: надпис 64 + 12, име 59, бутони 42 + 10, после 20, после
   лейбъл 22 + 10, после списък 152, отдолу 32. */
.mk-bb-hero.mk-ivf-hero .hero-text-panel .eyebrow { margin-bottom: 6px !important; }
.mk-bb-hero.mk-ivf-hero .hero-text-panel .cta-row { margin-bottom: 0 !important; }
.mk-bb-hero.mk-ivf-hero .hero-left > .elementor-widget-wrap > .elementor-widget:first-child { margin-bottom: 12px !important; }
.mk-bb-hero.mk-ivf-hero .hero-list-label { margin-bottom: 6px !important; }

/* Резервът от 152 е мярка за хирото горе, където редовете носят и дата.
   Тук те са само с име и заемат 121; 124 държи същата защита срещу
   подскачане при идването на шрифта, без да разтяга банера. */
.mk-bb-hero.mk-ivf-hero .hero-list { min-height: 124px !important; }

/* Името се сменя с всеки слайд. Запазеният ред го държи на една линия и
   не оставя всичко под него да слиза с един ред при по-дълго име. */
.mk-bb-hero.mk-ivf-hero .mk-ivf-name .elementor-widget-container { min-height: 30px !important; }

/* Кутията с числото: 440 → 308, и всичко в нея в същото съотношение. */
.mk-bb-hero.mk-ivf-hero .mk-ivf-counter {
	width: 308px !important;
	height: 308px !important;
	padding: 34px !important;
	border-width: 8px !important;
	box-shadow: 0 18px 38px rgba( 54, 42, 75, .5 ) !important;
}

.mk-bb-hero.mk-ivf-hero .mk-ivf-counter::before {
	inset: 9px !important;
	border-width: 2px !important;
}

.mk-bb-hero.mk-ivf-hero .mk-ivf-counter-num { font-size: 78px !important; }
.mk-bb-hero.mk-ivf-hero .mk-ivf-counter-t   { font-size: 21px !important; margin-top: 4px !important; }
.mk-bb-hero.mk-ivf-hero .mk-ivf-counter-s   { font-size: 13px !important; margin-top: 3px !important; }

/* ── разделителите между дялове с един и същ фон ────────────────────
   Правилото: разделител има само там, където фонът не се сменя. Числата
   са различни, защото горният дял свършва с различно нещо и носи свой
   отстъп — измерено при 1440px: 102,5 след брояча, 209,1 след блока с
   показателите. Изравняват се към 108 от двете страни. */
.mk-babies .mk-div-top { margin-top: -30px !important; }
/* Отдолу остава 123px вместо 108: три стойности на `margin-bottom` (93, 78,
   63) дадоха едно и също разстояние, тоест то идва от друго място — най-
   вероятно от подредбата на колоната, не от полето на разделителя.
   Оставено на 108 като при останалите; да се огледа с инспектор. */
.mk-sec.mk-home-sep-wide .mk-div-top { margin: -137px 0 108px !important; }

/* Картите и историите са едно начало на страницата: между тях няма черта
   и разстоянието е малко — дъното на картите почти опира заглавието. */
.mk-stories > .elementor-container > .elementor-column > .elementor-element-populated { padding-top: 34px !important; }

/* ── редуване на фоновете от историите надолу ───────────────────────
   Правило на оператора: от „Тук са вашите истории" нататък цветовете се
   редуват. Щом се редуват, разделител не трябва — смяната на фона дели
   сама. Единственият останал разделител е за телефон, между историите и
   събитията: там и двата дяла са бели.

   бял      истории
   тониран  как работим
   бял      бебеброяч + лентата му
   тониран  реални показатели
   бял      процедури
   тониран  направления
   бял      актуално
*/
.mk-babies,
.mk-babies-bar,
.mk-sec-proc { background: #fff !important; }

.mk-sec-stats,
.mk-sec-dirs { background: #F7F4FA !important; }

.mk-sec-news { background: #fff !important; }

/* Броячът е на бяло — тонираната подложка под кутията отпада. */
.mk-divider-tint { background: #fff !important; }

/* Броячът стоеше с 26px отгоре и отдолу, докато всички останали дялове са
   със 72. Броячът и лентата с бутона са един дял, разделен на две секции:
   горното поле е на първата, долното — на втората. */
.mk-babies > .elementor-container > .elementor-column > .elementor-element-populated {
	/* 56, не 72: вътрешната секция носи още 16 отгоре. */
	padding-top: 56px !important;
	padding-bottom: 0 !important;
}

.mk-babies-bar > .elementor-container > .elementor-column > .elementor-element-populated {
	padding-top: 0 !important;
	/* 48, не 72: бутонът е вдигнат с 34 и носи собствен отстъп. */
	padding-bottom: 48px !important;
}

/* Заглавието на подканата накрая нямаше свое правило и вземаше 1.17em от
   набора на Elementor — 18.72. Равнява се по стълбицата на витрините. */
.mk-final h3, .mk-final .elementor-heading-title { font-size: 18px !important; }

/* Заглавие вътре в текстова джаджа: наборът на Elementor му дава 1.17em
   (18.72) и то излиза извън стълбицата. Приравнява се към заглавие на карта. */
.mk-sec .elementor-widget-text-editor h3,
.mk-sec .elementor-widget-text-editor h4,
.mk-babies .elementor-widget-text-editor h3 { font-size: 18px !important; }

/* Линкът към архива стоеше залепен за решетката — 20px от последната карта.
   Въздухът е удвоен. Полето е `padding`, не `margin`: решетката над линка носи
   свои 20px отдолу и два съседни вертикални margin-а се сливат в един — с
   margin разстоянието оставаше 20. */
.mk-more { padding-top: 20px !important; }

/* Началната без банер: първият дял поема въздуха, който банерът държеше.
   Иначе картите опират в хедъра — горният им ръб излизаше над долния му
   ръб. Класът идва от `mk-side-queries.php`.

   Числото е сметнато, не избрано: картите имат собствен отстъп в решетката,
   затова подложката на дяла е по-голяма от видимия въздух. 115 дава 70 между
   хедъра и белия ръб на картата — колкото е навсякъде другаде. */
.mk-no-hero [data-elementor-type="wp-page"] > .elementor-section:first-of-type {
	padding-top: 115px !important;
}

/* ══ ТЕЛЕФОН: блокът с бебетата ════════════════════════════════════════
   `landing.css` връща подравняването вляво под 1024px, но правилата тук
   носят три класа и го надвиваха — текстът оставаше опрян вдясно, където
   вече няма какво да опира.

   Кутията с числото също: при 390px широк екран квадрат от 420 изяжда
   всичко. Смалява се до 230 и всичко в нея — в същото съотношение. */
@media (max-width: 767px) {

	.mk-bb-hero.mk-ivf-hero > .elementor-container {
		flex-direction: column !important;
		gap: 24px !important;
	}

	.mk-bb-hero.mk-ivf-hero > .elementor-container > .elementor-column {
		width: 100% !important;
	}

	.mk-bb-hero.mk-ivf-hero .hero-left,
	.mk-bb-hero.mk-ivf-hero .hero-left > .elementor-widget-wrap {
		width: 100% !important;
		max-width: 100% !important;
	}

	.mk-bb-hero.mk-ivf-hero .hero-left > .elementor-widget-wrap,
	.mk-bb-hero.mk-ivf-hero .hero-text-panel .elementor-widget-wrap {
		align-items: flex-start !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.mk-bb-hero.mk-ivf-hero .hero-left,
	.mk-bb-hero.mk-ivf-hero .hero-text-panel,
	.mk-bb-hero.mk-ivf-hero .hero-list-label,
	.mk-bb-hero.mk-ivf-hero .mk-ivf-name .elementor-heading-title { text-align: left !important; }

	.mk-bb-hero.mk-ivf-hero .mk-ivf-counter {
		width: 230px !important;
		height: 230px !important;
		max-width: 230px !important;
		padding: 24px !important;
		border-width: 6px !important;
	}

	.mk-bb-hero.mk-ivf-hero .mk-ivf-counter::before { inset: 7px !important; border-width: 2px !important; }
	.mk-bb-hero.mk-ivf-hero .mk-ivf-counter-num { font-size: 56px !important; }
	.mk-bb-hero.mk-ivf-hero .mk-ivf-counter-t   { font-size: 16px !important; }
	.mk-bb-hero.mk-ivf-hero .mk-ivf-counter-s   { font-size: 11px !important; }

	/* Кутията стои пръв — числото е същината на дяла. */
	.mk-bb-hero.mk-ivf-hero .mk-bb-right { order: -1 !important; }

	.mk-bb-hero.mk-ivf-hero > .elementor-container > .elementor-column > .elementor-element-populated {
		padding: 26px 18px !important;
	}
}

/* Редът в списъка е вложена секция: `text-align` не го мести, защото
   подредбата е flex на `.elementor-container` едно ниво по-навътре.
   Без това трите имена тръгваха от различни точки. */
@media (max-width: 767px) {

	.mk-bb-hero.mk-ivf-hero .hero-list-item > .elementor-container,
	.mk-bb-hero.mk-ivf-hero .hero-list-item .elementor-widget-wrap {
		justify-content: flex-start !important;
	}

	.mk-bb-hero.mk-ivf-hero .hero-list-item {
		text-align: left !important;
		border-right: 0 !important;
		border-left: 2px solid rgba( 255, 255, 255, .15 ) !important;
		padding: 7px 0 7px 14px !important;
	}

	.mk-bb-hero.mk-ivf-hero .hero-list-item.active { border-left-color: #F37B1F !important; }

	/* 418 е височината на целия банер на широк екран — там двете колони
	   стоят една до друга и се подпират на един център. В колона това
	   оставя 188 празни над и под кутията, затова пада и от колоната,
	   не само от обвивката вътре. */
	.mk-bb-hero.mk-ivf-hero .mk-bb-right,
	.mk-bb-hero.mk-ivf-hero .mk-bb-right > .elementor-widget-wrap,
	.mk-bb-hero.hero > .elementor-container {
		min-height: 0 !important;
		margin: 0 !important;
	}

	.mk-bb-hero.mk-ivf-hero .mk-bb-right > .elementor-widget-wrap,
	.mk-bb-hero.mk-ivf-hero .hero-left > .elementor-widget-wrap {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

/* ── таблет: подравняването вляво важи и тук ────────────────────────
   Колоните се разделят под 768; между 768 и 1024 те още стоят една до
   друга, но текстът вече няма какво да опира отдясно — кутията с
   числото е далеч. Имената в списъка излизаха от три различни точки. */
@media (min-width: 768px) and (max-width: 1024px) {

	.mk-bb-hero.mk-ivf-hero .hero-left > .elementor-widget-wrap,
	.mk-bb-hero.mk-ivf-hero .hero-text-panel .elementor-widget-wrap { align-items: flex-start !important; }

	.mk-bb-hero.mk-ivf-hero .hero-left,
	.mk-bb-hero.mk-ivf-hero .hero-text-panel,
	.mk-bb-hero.mk-ivf-hero .hero-list-label,
	.mk-bb-hero.mk-ivf-hero .mk-ivf-name .elementor-heading-title { text-align: left !important; }

	.mk-bb-hero.mk-ivf-hero .hero-list-item > .elementor-container,
	.mk-bb-hero.mk-ivf-hero .hero-list-item .elementor-widget-wrap { justify-content: flex-start !important; }

	.mk-bb-hero.mk-ivf-hero .hero-list-item {
		text-align: left !important;
		border-right: 0 !important;
		border-left: 2px solid rgba( 255, 255, 255, .15 ) !important;
		padding: 7px 0 7px 14px !important;
	}

	.mk-bb-hero.mk-ivf-hero .hero-list-item.active { border-left-color: #F37B1F !important; }
}