/* ГОРЛАБ — слой оформления поверх общего style.css.
   Перекрывает static/css/brand.css (у ДиаЛаба тот пустой), подключается
   последним, поэтому правит только то, что должно отличаться. Разметку не
   меняем: чем меньше переопределённых шаблонов, тем дешевле общий движок.

   Шрифты лежат рядом, а не на CDN: внешние адреса на этом проекте отпадают
   (ТСПУ, 152-ФЗ). Заголовочный — Bebas Neue Book (Dharma Type, SIL OFL 1.1):
   именно этим начертанием отрисованы утверждённые макеты. Не Regular и не
   кириллическая сборка Bebas Neue Cyrillic — обе заметно плотнее. Файл урезан
   до нужных символов. Запасной — Oswald, та же узкая пропорция.
   Montserrat разбит на подмножества cyrillic/latin: браузер тянет нужное. */

@font-face {
  font-family: 'Bebas Neue Book';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bebas-neue-book.f2c759519993.woff2") format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat-400-cyrillic.45ea393f38e4.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/montserrat-400-latin.c154477b9aff.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/montserrat-500-cyrillic.45ea393f38e4.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/montserrat-500-latin.c154477b9aff.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-600-cyrillic.45ea393f38e4.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/montserrat-600-latin.c154477b9aff.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat-700-cyrillic.45ea393f38e4.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/montserrat-700-latin.c154477b9aff.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/oswald-400-cyrillic.95c0aa38a380.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/oswald-400-latin.0243e05f3f8d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/oswald-500-cyrillic.95c0aa38a380.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/oswald-500-latin.0243e05f3f8d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  /* Фирменные цвета ГОРЛАБа вместо фиолетовых ДиаЛаба — этим одним блоком
     перекрашивается почти весь общий style.css */
  --primary: #fe330f;
  --primary-dark: #a81d06;
  --accent: #173d56;         /* второй фирменный, синий */
  --accent-dark: #0f2a3c;    /* он же под курсором и в градиентах */
  --bg: #f4f6f8;
  --text: #10161c;
  --muted: #5b6875;
  --border: #e3e8ed;

  --red: #fe330f;
  --red-ink: #c2270b;        /* красный, читаемый на белом */
  --faint: #93a0ac;
  /* Заголовочный — Bebas Neue Book, как в утверждённых макетах. */
  --display: 'Bebas Neue Book', 'Bebas Neue', 'Oswald', 'PT Sans Narrow', 'Arial Narrow', sans-serif;
  /* Кегль крупного заголовка: баннер главной и имя в кабинете набраны одинаково */
  --gl-display-xl: clamp(2.1rem, 5vw, 4rem);
}

body {
  font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--bg);
}
h1, h2, h3, .h-display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .012em;
  line-height: 1.05;
}
h1 { font-size: var(--fs-xl); }
@media (min-width: 801px) { h1 { font-size: var(--fs-2xl); } }

/* ─── Шапка: красная полоса, светлый текст ─── */
.header {
  background: linear-gradient(160deg, #fe330f 0%, #a81d06 100%);
  border-bottom: 0;
  color: #fff;
}
.header a, .header .phone, .header summary { color: #fff; }
.header a:hover { text-decoration: none; }
.header .logo-img { filter: none; }
.header .icon-btn { color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.26); }
.header .icon-btn:hover { background: rgba(255,255,255,.26); }
.cart-badge { background: #fff; color: var(--red); }

/* Поиск — матовое белое стекло, как в макете */
.header .search input {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(24px) saturate(115%);
  -webkit-backdrop-filter: blur(24px) saturate(115%);
  border: 1px solid rgba(255,255,255,.9);
  color: var(--text);
}
.header .search input::placeholder { color: #55636f; }
.header .search button { background: var(--red); color: #fff; border: 0; font-weight: 600; }

/* Строка меню внутри той же красной полосы */
.nav { border-top: 1px solid rgba(255,255,255,.18); }
.nav a { color: rgba(255,255,255,.94); }
.nav a:hover, .nav a.active { color: #fff; }
.nav a.icon-btn { color: #fff; }

/* Тумблер ИИ-режима на красном: общий фиолетовый теряется */
.ai-toggle .ai-slider { background: rgba(255,255,255,.32); }
.ai-toggle input:checked + .ai-slider { background: #fff; }
.ai-toggle input:checked + .ai-slider::after { background: var(--red); }

/* Кнопки */
.btn { background: var(--red); border-radius: 12px; font-weight: 600; }
.btn:hover { background: var(--primary-dark); }
.btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--text); }
.btn-dark { background: var(--accent); }

/* Карточки: белые с тонкой границей вместо лавандовых */
.card { background: #fff; border: 1px solid var(--border); border-radius: 16px; }

/* ═══ ОБЩИЕ ЭЛЕМЕНТЫ ═══ */

/* Пин региона в шапке: общий красный на красном не виден */
.header .geo-pin { color: #fff; }

/* Ссылки. Общий style.css красит все ссылки в основной цвет — на красном это
   даёт сплошное красное полотно в списках. Названия и пункты меню оставляем
   тёмными, красный держим за ценами, кнопками и текстовыми ссылками. */
.card a, .card-link, .service-row a, .cat-tree a, .lk-order-row a,
.centers-col a, .footer-col a { color: var(--text); }
.cat-tree a.active { color: var(--red-ink); }
main p a, main li a, .breadcrumbs a { color: var(--red-ink); }

/* Цена — заголовочным шрифтом и тёмным: в списке она должна читаться как число,
   а не как ещё одна ссылка */
.price { font-family: var(--display); font-weight: 400; font-size: var(--fs-lg); color: var(--text); letter-spacing: .01em; }
.price-big { font-size: var(--fs-2xl); }
.price-old { font-family: 'Montserrat', sans-serif; color: var(--muted); }
/* Зачёркнутая цена — --muted (5,7:1 на белом), а не --faint (2,7:1): скидку
   должно быть видно и на телефоне на улице. Иерархию держит кегль: новая цена
   набрана Bebas вдвое крупнее. В строке — новая первой, старая мельче справа,
   как в карточках (catalog/_price.html бренда) */
.price .price-old { font-size: var(--fs-sm); margin: 0 0 0 8px; letter-spacing: 0; }
.price .cur { font-family: 'Montserrat', sans-serif; font-size: .55em; margin-left: .18em; }

/* Поля ввода: фокус фирменным красным вместо системной синей рамки */
.form input, .form select, .form textarea,
.corp-field input, .corp-field textarea, .corp-field select,
.bk-filter select, .search input {
  border-radius: 10px;
  border-color: var(--border);
}
.form input:focus, .form select:focus, .form textarea:focus,
.corp-field input:focus, .corp-field textarea:focus, .corp-field select:focus,
.bk-filter select:focus, input[type="search"]:focus, input[type="date"]:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(254,51,15,.13);
}

/* Выпадающие списки: белая карточка, красная подсветка пункта */
.region-picker ul, .user-menu > ul, .nav-dropdown ul, .nav-burger ul {
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 20px 44px -20px rgba(16,22,28,.35);
}
.region-picker li a:hover, .user-menu li a:hover,
.nav-dropdown li a:hover, .nav-burger li a:hover { background: rgba(254,51,15,.08); color: var(--red-ink); }

/* Карточки и панели — единый радиус со скруглениями макета */
.card, .sidebar, .service-main, .service-side, .seo-text, .visit-terms,
.visit-sent, .bk-table, .bk-status, .table { border-radius: 16px; }

/* Таблицы */
.table th { background: #f5f8fa; color: var(--muted); font-weight: 600; }
.table td, .table th { border-bottom-color: var(--border); }

/* Тосты */
.toast { border-radius: 14px; border-color: var(--border); box-shadow: 0 18px 40px -20px rgba(16,22,28,.4); }
.toast-error { border-color: rgba(254,51,15,.4); }

/* Вкладки кабинета: подчёркивание красным. Вкладки входа не трогаем —
   там активная уже белым по красному, и правило перебивало бы её цвет. */
.lk-tab.active { color: var(--red-ink); border-bottom-color: var(--red); }
.lk-tab:hover { color: var(--red-ink); }
.lk-tabs { border-bottom-color: var(--border); }
.login-tabs { background: #fff; border-color: var(--border); border-radius: 12px; }

/* Плашка-подсказка в форме выезда: лавандовая заливка ДиаЛаба не к месту */
.visit-info { background: rgba(254,51,15,.06); border-color: rgba(254,51,15,.22); border-radius: 12px; }

/* Карта: серо-голубая подложка вместо сиреневой */
.cmap { background: #e3eaef; border-radius: 16px; }

/* Подвал — тёмный, как в макете */
.footer { background: #0b0301; border-top: 0; color: rgba(255,255,255,.7); }
/* Логотип на тёмном: делаем сплошным белым. Отдельный файл не заводим,
   иначе пришлось бы переопределять base.html ради одной строки. */
.footer .logo-img { filter: brightness(0) invert(1); }
.footer-col h3 { color: rgba(255,255,255,.45); font-family: 'Montserrat', sans-serif; font-size: var(--fs-xs);
  font-weight: 700; text-transform: uppercase; letter-spacing: .12em; }
.footer-col a, .footer .footer-col a { color: rgba(255,255,255,.7); }
.footer-col a:hover { color: #fff; }
.footer-phone, .footer .footer-phone { color: #fff !important; font-family: var(--display); font-weight: 400; letter-spacing: .02em; }
.footer-brand p, .footer-about-text, .footer .muted, .footer .disclaimer, .footer-offer { color: rgba(255,255,255,.5); }
.footer-cert { color: rgba(255,255,255,.6); }
.footer-cert svg { color: var(--red); }
.footer-about { border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; }

/* ═══ ГЛАВНАЯ ═══ */

/* Первый экран — красная полоса во всю ширину: карусель и поиск на ней.
   Общий style.css делает то же самое белым и только с 701px; здесь полоса
   нужна и на телефоне, поэтому правило вынесено из медиазапроса. */
.home-page { overflow-x: hidden; }
.home-page .home-top {
  position: relative; overflow: hidden;
  margin: calc(var(--gl-air) * -1) calc(50% - 50vw) 0;
  padding: calc(var(--gl-head) + 16px) calc(50vw - 50%) 26px;
  background:
    radial-gradient(85% 70% at 12% -5%, #ff6a3d 0%, transparent 55%),
    radial-gradient(70% 60% at 95% 10%, #c22208 0%, transparent 60%),
    linear-gradient(165deg, #fe330f 0%, #7d1305 100%);
  color: #fff;
}
/* Два размытых пятна поверх заливки, как в макете: тёплое справа сверху и
   синее слева снизу — синий уводит красный от «пожарного» оттенка.
   Синее привязано к левому краю контента (--gl-edge), а не к краю окна:
   иначе на широком мониторе оно уезжает от текста, под который положено. */
:root { --gl-edge: max(16px, calc(50vw - 534px)); }
.home-page .home-top::before,
.home-page .home-top::after { content: ""; position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0; }
.home-page .home-top::before { width: 420px; height: 420px; top: -180px; right: 6%;
  background: #ffcbb8; opacity: .35; filter: blur(60px); }
.home-page .home-top::after { width: 340px; height: 340px; bottom: -170px;
  left: calc(var(--gl-edge) - 170px);
  background: #173d56; opacity: .5; filter: blur(60px); }
/* Содержимое — над пятнами */
.home-page .home-top > * { position: relative; z-index: 1; }
/* На телефоне первый экран короче и уже: пятна меньше и размыты слабее,
   иначе синее почти целиком уходит за левый край и цвет пропадает */
@media (max-width: 700px) {
  .home-page .home-top::before { width: 210px; height: 210px; top: -80px; right: -50px;
    opacity: .4; filter: blur(34px); }
  .home-page .home-top::after { width: 210px; height: 210px; bottom: -80px;
    left: calc(var(--gl-edge) - 105px); opacity: .55; filter: blur(36px); }
}

/* Баннер внутри полосы — без своей заливки и рамки, он и так на красном */
.home-page .hero-slider .slide, .home-page .hero { background: none; padding: 26px 0 10px; }
.home-page .hero-slider .slides { border-radius: 0; }

/* Слайдер занимает всю ширину окна, текст и стрелки остаются на сетке.
   Так круг с инфографикой уходит к самому краю экрана и обрезается только им:
   раньше слайд кончался по контейнеру, и у фигуры была видна прямая граница
   посреди красной зоны. */
.home-page .hero-slider { width: 100vw; margin-left: calc(50% - 50vw); }
.home-page .hero-slider .slides { overflow: hidden; }
.home-page .hero-slider .slide { overflow: visible; }
.home-page .hero h1, .home-page .hero-title { font-family: var(--display); font-weight: 400;
  text-transform: uppercase; font-size: clamp(1.9rem, 5vw, 3.2rem); line-height: 1; max-width: 16ch; }
.home-page .hero p { color: rgba(255,255,255,.92); }
.home-page .hero .btn { background: #fff; color: var(--red); border-radius: 999px; }
.home-page .slider-dots .dot { background: rgba(255,255,255,.42); }
.home-page .slider-dots .dot.active { background: #fff; }
.home-page .slider-arrow { color: #fff; border-color: rgba(255,255,255,.35); }

/* Поиск на матовом белом стекле — то, ради чего и затевалась красная полоса */
.home-page .home-search { margin: 0; }
/* Подзаголовок над поиском — целое предложение: заголовочный шрифт берём,
   капслок нет, иначе на телефоне он растягивается на четыре строки */
.home-page .home-search-title { color: #fff; font-family: var(--display); font-weight: 400;
  text-transform: none; letter-spacing: .005em; font-size: clamp(1.15rem, 2.4vw, 1.7rem); }
.home-page .home-search-field {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(26px) saturate(115%); -webkit-backdrop-filter: blur(26px) saturate(115%);
  border: 1px solid rgba(255,255,255,.9); border-radius: 14px;
  box-shadow: 0 18px 40px -18px rgba(80,12,0,.5);
}
.home-page .home-search-field:focus-within { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.4); }
.home-page .home-search-ai { color: var(--red-ink); border-left-color: rgba(16,22,28,.14); }

/* Плитки действий: белые карточки с красной иконкой */
.home-page .feature-links { margin-top: 28px; }
.feature-card { border-radius: 16px; }
.feature-card svg { color: var(--red); }
.feature-card:hover { border-color: rgba(254,51,15,.5); box-shadow: 0 12px 28px -18px rgba(16,22,28,.35); }

/* Заголовки разделов */
main h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-top: 2.4rem; }
.section-more { color: var(--red-ink); }

/* Плитки категорий */
.cat-card { border-radius: 16px; }
.cat-card:hover { border-color: rgba(254,51,15,.45); }
.cat-card strong { font-size: var(--fs-md); }

/* «в цифрах» — плотный красный вместо полупрозрачного */
.fact { background: linear-gradient(150deg, #fe330f 0%, #9d1a05 100%); border-radius: 16px; }
.fact strong, .fact b { font-family: var(--display); font-weight: 400; }

/* ═══ ФРАНШИЗА (блок только ГОРЛАБа) ═══ */
.franchise {
  margin: 54px 0 0; padding: 0 clamp(20px, 4vw, 48px); border-radius: 26px; overflow: hidden;
  background:
    radial-gradient(75% 90% at 100% 108%, #173d56 0%, rgba(23,61,86,0) 62%),
    radial-gradient(80% 80% at 4% -8%, #ff6a3d 0%, rgba(255,106,61,0) 55%),
    linear-gradient(160deg, #fe330f, #7d1305);
  color: #fff;
}
.franchise-in { display: grid; gap: 28px; padding: 40px 0 44px; }
@media (min-width: 861px) { .franchise-in { grid-template-columns: 1.15fr .85fr; align-items: start; } }
.franchise h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1; margin: 0; color: #fff; }
.franchise h2 i { font-style: normal; color: #ffd9cd; }
.franchise-lead { font-size: var(--fs-md); color: rgba(255,255,255,.92); margin: 14px 0 0; max-width: 46ch; }
.franchise-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 9px; }
/* Тем же белым, что и лид над списком: два оттенка белого рядом читаются
   как случайность, а не как иерархия */
.franchise-list li { color: rgba(255,255,255,.92); line-height: var(--lh-ui); }
.franchise-list li { position: relative; padding-left: 27px; font-size: var(--fs-md); }
.franchise-list li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.75);
  background: no-repeat center/9px 7px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.2 3.6 6.8 9 1.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* ── Баннер франшизы: два пути слева, условия справа (по макету) ──
   Префикс gl-frb-: gl-fr-* занят страницей франшизы, и общие имена там уже
   значат другое */
.gl-frb-ways { display: grid; gap: 12px; margin: 22px 0 0; }
.gl-frb-way { display: flex; gap: 14px; align-items: center;
  border: 1px solid rgba(255,255,255,.32); border-radius: 16px; padding: 15px 17px;
  background: rgba(255,255,255,.07); }
.gl-frb-way-ic { flex: none; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,.42); color: #fff; }
.gl-frb-way-ic svg { width: 25px; height: 25px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.gl-frb-way b { display: block; font-family: var(--display); font-weight: 400;
  text-transform: uppercase; font-size: var(--fs-lg); line-height: 1.05; }
/* Только подпись в текстовой колонке: общий `.gl-frb-way span` цеплял и
   коробку иконки — она получала display:block вместо grid, глиф переставал
   центрироваться, а margin-top сдвигал коробку вниз */
.gl-frb-way > div > span { display: block; margin-top: 5px; font-size: var(--fs-sm);
  color: rgba(255,255,255,.86); line-height: var(--lh-ui); }

.gl-frb-offer { background: #fff; color: var(--text); border-radius: 22px;
  padding: 26px 26px 24px; box-shadow: 0 24px 54px -26px rgba(80,12,0,.6); }
.gl-frb-offer h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: var(--fs-xl); line-height: 1; margin: 0; color: var(--text); }
.gl-frb-pill { display: inline-block; margin: 11px 0 0; padding: 6px 13px; border-radius: 999px;
  background: rgba(254,51,15,.09); color: var(--red-ink);
  font-size: var(--fs-xs); line-height: var(--lh-ui); }
.gl-frb-terms { margin-top: 16px; }
/* Число и подпись — колонками: доли выручки читают сверху вниз, и цифры
   должны стоять на одной вертикали */
.gl-frb-term { display: flex; gap: 14px; align-items: center;
  padding: 15px 0; border-top: 1px solid var(--border); }
.gl-frb-term:first-child { border-top: 0; padding-top: 4px; }
/* min-width держит три числа на одной колонке, чтобы подписи начинались с
   одной вертикали. Мера — по самому широкому, «100%»: он занимает 1,67 своего
   кегля, так что 1.75em хватает с запасом на любом размере. Прежние 2.5em
   были шире нужного на треть и зря отбирали ширину у подписи */
.gl-frb-term > b { flex: none; min-width: 1.75em; font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.25rem); line-height: .95; color: var(--red);
  font-variant-numeric: tabular-nums; }
/* Обозначение рубля — основным шрифтом: Bebas рисует только прописные,
   и «р.» рядом с нулём превращалось в «Р.» */
.gl-frb-cur { font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: .5em; font-weight: 400; }
.gl-frb-term > div > span { display: block; font-size: var(--fs-sm); color: var(--text);
  line-height: var(--lh-ui); }
.gl-frb-term > div > i { display: block; margin-top: 4px; font-style: normal;
  font-size: var(--fs-xs); color: var(--muted); }
.gl-frb-note { margin: 15px 0 0; font-size: var(--fs-xs); color: var(--muted);
  line-height: var(--lh-ui); }
.gl-frb-note-faint { margin-top: 7px; color: var(--faint); }
.gl-frb-cta { display: block; text-align: center; background: var(--red); color: #fff;
  border-radius: 13px; padding: 15px; font-size: var(--fs-md); font-weight: 600; margin-top: 19px; }
.gl-frb-cta:hover { background: var(--primary-dark); color: #fff; text-decoration: none; }
@media (max-width: 560px) {
  .gl-frb-offer { padding: 20px 18px; }
  .gl-frb-term { gap: 12px; }
}

/* Ниже — стили снятого блока с калькулятором (.franchise-nums, .calc*).
   Разметка лежит в brands/gorlab/templates/home_franchise_calc.html и вернётся
   вместе с ней; удалять их нельзя, иначе блок восстановится без вёрстки */
.franchise-nums { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 26px; }
.franchise-nums b { display: block; font-family: var(--display); font-weight: 400; font-size: var(--fs-xl); line-height: 1; }
.franchise-nums span { font-size: var(--fs-sm); color: rgba(255,255,255,.8); }
/* Калькулятор доходности — белое матовое стекло, как строка поиска на первом
   экране: один материал на весь сайт */
.calc {
  background: rgba(255,255,255,.94); color: var(--text); border-radius: 20px; padding: 24px;
  backdrop-filter: blur(26px) saturate(115%); -webkit-backdrop-filter: blur(26px) saturate(115%);
  box-shadow: 0 24px 54px -26px rgba(80,12,0,.6);
}
.calc h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: var(--fs-lg); margin: 0 0 14px; color: var(--text); }
.calc-tabs { display: flex; gap: 7px; margin-bottom: 18px; flex-wrap: wrap; }
.calc-tabs button { font: inherit; font-size: var(--fs-xs); cursor: pointer; border-radius: 999px;
  padding: 8px 15px; border: 1px solid rgba(16,22,28,.16); background: rgba(255,255,255,.7); color: #2f3b47; }
.calc-tabs button:hover { border-color: rgba(254,51,15,.45); color: var(--red-ink); }
.calc-tabs button.on { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }

.calc-slider { display: block; margin-bottom: 16px; }
.calc-label { display: block; font-size: var(--fs-sm); color: var(--muted); margin-bottom: 6px; }
.calc-slider input[type="range"] { width: 100%; margin: 0; accent-color: var(--red); }
.calc-scale { display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; }
.calc-scale b { font-size: var(--fs-sm); color: var(--text); font-variant-numeric: tabular-nums; }

.calc-rows { display: grid; gap: 10px; }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: var(--fs-sm); color: var(--muted); }
.calc-row b { font-size: var(--fs-md); color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-row.big { border-top: 1px solid rgba(16,22,28,.12); margin-top: 4px; padding-top: 12px; }
.calc-row.big b { font-family: var(--display); font-weight: 400; font-size: var(--fs-xl); color: var(--red); }

.calc-disclaimer { margin: 14px 0 0; font-size: var(--fs-xs); color: var(--faint); line-height: var(--lh-ui); }
.calc-cta { display: block; text-align: center; background: var(--red); color: #fff;
  border-radius: 13px; padding: 14px; font-size: var(--fs-md); font-weight: 600; margin-top: 10px; }
.calc-cta:hover { background: var(--primary-dark); color: #fff; text-decoration: none; }
.calc-note { display: block; margin-top: 12px; font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.calc-note a { color: var(--red-ink); }

/* ═══ КАТАЛОГ, КАРТОЧКА, КОРЗИНА ═══ */

/* Заголовки внутри карточки анализа — своя ступень: общий h2 задан для
   заголовков разделов страницы и внутри белой карточки выглядит громко */
.service-main h2, .service-side h2 { font-size: var(--fs-lg); margin-top: 1.8rem; }
.service-main > h2:first-child { margin-top: 0; }
.service-title { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.service-code { color: var(--muted); font-size: var(--fs-sm); }
.service-side .price-big { display: block; margin-bottom: 10px; }
.service-side .btn { display: block; text-align: center; }

/* Боковая панель едет со страницей: описание длинное, цена должна
   оставаться на виду */
@media (min-width: 801px) { .service-side { position: sticky; top: 88px; } }

/* Названия в корзине — тёмные, как в каталоге */
.cart-item-main a, .cart-item-main strong { color: var(--text); }
.cart-item { border-radius: 16px; }
.cart-total .price { font-size: var(--fs-xl); }

/* Оформление заказа */
.checkout-layout .card, .center-select { border-radius: 16px; }
/* Покрытие корзины пунктом: что из заказа здесь возьмут. Зелёный — свой,
   не из палитры бренда: это статус, как у «выезд возможен» в карточке услуги */
.cov { font-size: var(--fs-xs); font-weight: 600; line-height: 1.35; margin-top: 2px; }
.cov-full { color: #1c7a4a; }
.cov-part { color: var(--red-ink); }
.center-option.is-partial { border-color: rgba(254,51,15,.3); }
.gl-sum-warn { color: var(--red-ink); }

.center-option { border-radius: 13px; }
.center-option:hover { border-color: rgba(254,51,15,.45); }
/* Выбранный пункт приёма: общий стиль подсвечивает фоном --bg, у ГОРЛАБа он
   почти белый и выбор перестаёт читаться — подсвечиваем красной рамкой */
.center-option.selected,
.center-option:has(input[name="center"]:checked) {
  background: rgba(254,51,15,.05); box-shadow: 0 0 0 2px var(--red) inset; border-color: var(--red);
}

/* Сводка заказа — белая карточка, едет со страницей: форма длинная,
   сумма и состав должны оставаться перед глазами */
.checkout-layout > aside {
  background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 20px;
  align-self: start;
}
@media (min-width: 801px) { .checkout-layout > aside { position: sticky; top: 88px; } }
.checkout-layout > aside h3 { font-size: var(--fs-lg); margin: 0 0 10px; }
.checkout-layout > aside ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; font-size: var(--fs-sm); }
.checkout-layout > aside li { display: flex; justify-content: space-between; gap: 12px; }
.checkout-layout > aside > p:first-of-type { border-top: 1px solid var(--border); padding-top: 12px; }
.center-select-title { font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: var(--fs-lg); letter-spacing: .01em; margin-bottom: 12px; }

/* ═══ КАРТОЧКА ОФИСА ═══ */

/* Якорное меню: липкое, подсвечивает раздел. На gorlab.ru вместо этого под
   каждым блоком стоит ссылка «назад» — липкая полоса удобнее. */
.office-anchors {
  position: sticky; top: 0; z-index: 20; display: flex; gap: 20px; align-items: center;
  margin: 0 calc(50% - 50vw) 18px; padding: 0 calc(50vw - 50%);
  height: 48px; overflow-x: auto; scrollbar-width: none;
  background: rgba(255,255,255,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.office-anchors::-webkit-scrollbar { display: none; }
.office-anchors a { font-size: var(--fs-sm); color: #3c4854; white-space: nowrap; padding: 4px 0;
  border-bottom: 2px solid transparent; }
.office-anchors a:hover { color: var(--red-ink); border-bottom-color: var(--red); text-decoration: none; }

.office-about { max-width: 70ch; }

/* Специальности — чипами вторым фирменным цветом: красного на странице и так много */
.office-specs { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.office-specs li { font-size: var(--fs-sm); border-radius: 999px; padding: 7px 14px;
  background: rgba(23,61,86,.07); border: 1px solid rgba(23,61,86,.18); color: var(--accent); }

.office-discounts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.office-discounts li { border-radius: 14px; padding: 14px 16px; font-size: var(--fs-sm);
  background: linear-gradient(150deg, rgba(254,51,15,.1), rgba(254,51,15,.03));
  border: 1px solid rgba(254,51,15,.28); }

.office-routes { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 9px; }
.office-route { position: relative; padding-left: 30px; font-size: var(--fs-md); }
.office-route b { font-weight: 600; }
.office-route span { color: var(--muted); }
.office-route::before { position: absolute; left: 0; top: -1px; font-size: var(--fs-md); }
.office-route-walk::before { content: "🚶"; }
.office-route-metro::before { content: "🚇"; }
.office-route-bus::before { content: "🚌"; }
.office-route-car::before { content: "🚗"; }
.office-route-parking::before { content: "🅿️"; }

.office-streets { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-read);
  border-top: 1px solid var(--border); padding-top: 12px; }
.office-streets b { display: block; color: var(--text); font-size: var(--fs-xs); margin-bottom: 3px; }

.office-reviews iframe { width: 100%; height: 420px; border: 1px solid var(--border); border-radius: 16px; background: #fff; }
.office-license { font-size: var(--fs-sm); color: var(--muted); margin-top: 20px; }

/* ═══ СПОСОБ СДАЧИ В ЗАКАЗЕ ═══ */
.order-kind-box { border: 0; padding: 0; margin: 0 0 22px; }
.order-kind-box legend { font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: var(--fs-lg); padding: 0; margin-bottom: 12px; }
.order-kind-opts { display: grid; gap: 11px; }
@media (min-width: 701px) { .order-kind-opts { grid-template-columns: 1fr 1fr; } }
.form .order-kind-opt, .order-kind-opt { display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  background: #fff; border: 1px solid var(--border); border-radius: 15px; padding: 14px 16px; }
.form .order-kind-opt input, .order-kind-opt input { margin: 2px 0 0; width: auto; accent-color: var(--red); flex: none; }
.form .order-kind-opt:has(input:checked), .order-kind-opt:has(input:checked) { border-color: var(--red); box-shadow: 0 0 0 2px var(--red) inset; }
.order-kind-opt.is-off { opacity: .62; cursor: default; }
.order-kind-opt.is-off em { display: block; font-style: normal; font-size: var(--fs-sm); color: var(--red-ink); margin-top: 4px; }
.order-kind-fake { width: 17px; height: 17px; border-radius: 50%; border: 2px solid #c3ccd4; flex: none; margin-top: 2px; }

/* ═══ ЗАПИСЬ К ВРАЧУ ═══ */
.bk-filter span { font-size: var(--fs-xs); letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; }
.bk-filter select, .bk-combo input { border-radius: 12px; }
.bk-period { font-family: var(--display); font-weight: 400; font-size: var(--fs-lg); letter-spacing: .01em; }
.btn-mini { border-radius: 12px; }
.btn-mini:hover { border-color: var(--red); color: var(--red-ink); }

/* Скруглённые углы — но не ценой прокрутки: неделя шире 860 px, и на телефоне
   `overflow: hidden` прятал пятницу–воскресенье без всякой возможности до них
   добраться. Скругление clip'ает и при overflow-x: auto */
.bk-table { border-radius: 16px; overflow-x: auto; }
.bk-head { background: #f5f8fa; }
/* Суббота и воскресенье: первая колонка — врач, дальше дни с понедельника */
.bk-head .bk-cell:nth-child(7), .bk-head .bk-cell:nth-child(8) { color: var(--red-ink); }
.bk-doc-col strong { font-weight: 600; }

/* Разделитель клиники: в общем стиле это заливка основным цветом, у ГОРЛАБа
   она превращается в красную полосу во всю ширину и перекрикивает слоты */
.bk-clinic-sep { background: #eef3f7; color: var(--accent); font-weight: 600;
  font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; }

.bk-chip { border-radius: 9px; padding: 4px 9px; font-weight: 600; }
.bk-chip.free { background: var(--red); }
.bk-chip.free:hover { background: var(--primary-dark); }
.bk-chip.busy { background: #eef1f4; color: #a7b1bb; font-weight: 400; }

/* Карточки врачей в режиме «только свободное время» */
.bk-doc-card { border-radius: 16px; }
.bk-day-label { font-family: var(--display); font-weight: 400; font-size: var(--fs-md); letter-spacing: .01em; }

/* ═══ АДРЕСА ═══ */
.centers-col .card { padding: 16px 18px; gap: 4px; }
.centers-col .card strong { font-size: var(--fs-md); }
.centers-col .card p { margin: 0; }
.centers-col .card .muted { font-size: var(--fs-sm); }
.center-more { display: inline-block; margin-top: 8px; color: var(--red-ink); font-weight: 600; font-size: var(--fs-sm); }
.centers-map-wrap .cmap { border-radius: 16px; }

/* ═══════════════════════════════════════════════════════════════
   ГЛАВНАЯ ГОРЛАБА — своя разметка (brands/gorlab/templates/home.html)
   ═══════════════════════════════════════════════════════════════ */

/* Первый экран: карусель, поиск и плитки на одной красной полосе */
.gl-home .home-top { padding-bottom: 34px; }
.gl-home .hero-slider .slide { padding: 30px var(--gl-edge) 6px; }
.gl-home .hero-content { max-width: 58%; }
/* .hero-title — это <p> у второго и следующих слайдов, поэтому селектор
   должен быть не слабее правила .gl-home .hero p ниже */
.gl-home .hero h1, .gl-home .hero p.hero-title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .012em;
  font-size: var(--gl-display-xl); line-height: .96; margin: 0 0 12px;
  /* 15ch рвало «Хорошее место» между строк; ширина по месту + балансировка строк */
  max-width: min(22ch, 100%); text-wrap: balance;
}
.gl-home .hero p { font-size: var(--fs-md); color: rgba(255,255,255,.92); max-width: 44ch; margin: 0; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.gl-home .hero-btns .btn { border-radius: 999px; background: #fff; color: var(--red); }
.gl-home .hero-btns .btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.55); }
.gl-home .hero-btns .btn-ghost:hover { background: rgba(255,255,255,.14); color: #fff; }
/* Инфографика держится сетки контента: фон тянется во всю ширину, но сама
   фигура целиком внутри колонки — обрезанный край читается как поломка */
/* right отсчитывается от padding-box слайда, а поле у него теперь своё —
   без этого фигура уезжала за колонку контента */
.gl-home .hero-art { width: 36%; right: var(--gl-edge); }

/* Стрелки и точки — слева под баннером, как в макете */
.gl-home .slider-nav { display: flex; align-items: center; gap: 14px;
  margin: 10px 0 0 var(--gl-edge); }
.gl-home .slider-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.34);
  background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; }
.gl-home .slider-arrow:hover { background: rgba(255,255,255,.26); }
.gl-home .slider-arrow svg { width: 15px; height: 15px; }
.gl-home .slider-dots { justify-content: flex-start; gap: 7px; }
.gl-home .slider-dots .dot { width: 9px; height: 9px; background: rgba(255,255,255,.42); }
.gl-home .slider-dots .dot.active { background: #fff; width: 30px; border-radius: 5px; transform: none; }

/* Поиск — матовое белое стекло с кнопкой внутри */
.gl-search { margin-top: 22px; }
@media (min-width: 1180px) {
  .home-page .gl-search { margin-left: -32px; margin-right: -32px; }
  /* Поле выходит за края контейнера, а ответ под ним — нет: иначе заголовок
     «Эти услуги есть у нас» уезжает под край экрана */
  .home-page .gl-search .gl-ai-out { margin-left: 32px; margin-right: 32px; }
}
.gl-search-row { position: relative; display: flex; align-items: center; gap: 12px; border-radius: 16px; padding: 8px 8px 8px 18px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(28px) saturate(115%); -webkit-backdrop-filter: blur(28px) saturate(115%);
  border: 1px solid rgba(255,255,255,.9); box-shadow: 0 20px 44px -20px rgba(80,12,0,.5); }
.gl-search-ico { width: 20px; height: 20px; color: #8b98a4; flex: none; }
.gl-search-row input { flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: var(--fs-md); color: var(--text); padding: 11px 0; }
/* Общее правило подсветки полей рисует кольцо вокруг input — внутри стеклянной
   строки это выглядит рамкой в рамке. Подсвечиваем саму строку. */
.gl-search-row input:focus, .gl-search-row input:focus-visible {
  box-shadow: none; border: 0; outline: none;
}
.gl-search-row:focus-within { box-shadow: 0 0 0 3px rgba(255,255,255,.45), 0 20px 44px -20px rgba(80,12,0,.5); }
.gl-search-row input::placeholder { color: #55636f; }
.gl-search-go { border: 0; background: var(--red); color: #fff; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: var(--fs-md); font-weight: 600; padding: 12px 26px; flex: none; }
.gl-search-go:hover { background: var(--primary-dark); }
.gl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gl-chip { font-size: var(--fs-sm); border-radius: 999px; padding: 7px 14px; color: #fff;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); }
.gl-chip:hover { background: rgba(255,255,255,.28); text-decoration: none; }

/* Плитки действий — стекло на красном */
.gl-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }
.gl-tile { display: flex; align-items: flex-start; gap: 12px; border-radius: 20px; padding: 18px; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); }
.gl-tile:hover { background: rgba(255,255,255,.24); text-decoration: none; }
.gl-tile-ic { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.gl-tile span { display: block; min-width: 0; }
.gl-tile b { display: block; font-size: var(--fs-md); font-weight: 600; }
.gl-tile i { display: block; font-style: normal; font-size: var(--fs-xs); color: rgba(255,255,255,.78); margin-top: 3px; }
.gl-tile-go { width: 17px; height: 17px; margin-left: auto; flex: none; opacity: .65;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Разделы */
.gl-sec { margin-top: 54px; }
.gl-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.gl-sec-head h2 { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
.gl-sec-head a { color: var(--red-ink); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; }

/* Карточки популярных исследований */
.gl-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gl-card { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--border);
  border-radius: 18px; padding: 18px; position: relative; }
.gl-card:hover { border-color: rgba(254,51,15,.4); box-shadow: 0 14px 30px -20px rgba(16,22,28,.35); }
.gl-card-code { font-size: var(--fs-xs); letter-spacing: .13em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.gl-card-name { font-size: var(--fs-md); font-weight: 600; line-height: 1.3; color: var(--text); }
.gl-card-name:hover { text-decoration: none; }
.gl-card-meta { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
.gl-card-price { display: flex; align-items: baseline; gap: 9px; margin-top: auto; padding-top: 8px;
  font-variant-numeric: tabular-nums; }
.gl-card-price b { font-family: var(--display); font-weight: 400; font-size: var(--fs-xl); letter-spacing: .01em; }
.gl-card-price .cur { font-family: 'Montserrat', sans-serif; font-size: .5em; margin-left: .18em; }
.gl-card-price s { font-size: var(--fs-sm); color: var(--muted); }
.gl-card-buy { width: 100%; border: 1px solid rgba(254,51,15,.45); background: rgba(254,51,15,.08);
  color: var(--red-ink); border-radius: 12px; padding: 11px; font: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer; position: relative; z-index: 2; }
.gl-card-buy:hover { background: var(--red); border-color: var(--red); color: #fff; }
/* «В корзине» — фирменный синий с белым текстом: по цвету сразу видно, что
   уже отложено, а что нет. Класс btn-in-cart вешает общий скрипт корзины —
   без него состояние после клика оставалось красным, как «В корзину». */
.gl-card-buy.is-in, .gl-card-buy.btn-in-cart {
  background: var(--accent); border-color: var(--accent); color: #fff; }
.gl-card-buy.is-in:hover, .gl-card-buy.btn-in-cart:hover {
  background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.gl-card .js-cart { margin-top: 2px; }

/* Бегущая строка */
.gl-marquee { margin: 54px calc(50% - 50vw) 0; background: var(--red); color: #fff;
  padding: 13px 0; overflow: hidden; white-space: nowrap; }
.gl-marquee-track { display: inline-flex; will-change: transform;
  /* Сдвиг ровно на ширину одного набора: шов приходится на стык копий и не виден.
     Ширину и время считает скрипт — они зависят от того, что написали в админке. */
  animation: gl-slide var(--gl-marq-time, 26s) linear infinite; }
.gl-marquee-set { display: inline-flex; font-family: var(--display); font-weight: 400;
  font-size: var(--fs-lg); text-transform: uppercase; letter-spacing: .07em; }
.gl-marquee-set span { padding: 0 17px; }
@keyframes gl-slide { to { transform: translateX(calc(var(--gl-marq-width, 50%) * -1)); } }
@media (prefers-reduced-motion: reduce) { .gl-marquee-track { animation: none; } }

/* Категории с иконками */
.gl-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gl-cat { display: flex; flex-direction: column; gap: 9px; background: #fff; border: 1px solid var(--border);
  border-radius: 18px; padding: 20px; color: var(--text); min-height: 168px; }
.gl-cat:hover { border-color: rgba(254,51,15,.45); box-shadow: 0 14px 30px -20px rgba(16,22,28,.35); text-decoration: none; }
.gl-cat-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(254,51,15,.1); border: 1px solid rgba(254,51,15,.28); color: var(--red-ink); }
.gl-cat-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
/* Минимальная ширина колонки `1fr` считается по содержимому, поэтому длинное
   слово перевода («Микроэлементтерге») распирало плитку и страница на телефоне
   ехала вбок. min-width обнуляет этот минимум, перенос — доламывает слово */
.gl-cat { min-width: 0; }
.gl-cat b { font-size: var(--fs-md); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.gl-cat span { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }
.gl-cat i { margin-top: auto; font-style: normal; font-size: var(--fs-xs); color: var(--red-ink); font-weight: 600; }

/* «в цифрах» — тёмная полоса во всю ширину */
.gl-facts-band { margin: 54px calc(50% - 50vw) 0; padding: 0 calc(50vw - 50%);
  background: radial-gradient(62% 78% at 84% 26%, #173d56 0%, rgba(23,61,86,0) 62%),
              radial-gradient(54% 70% at 8% 88%, #5a1607 0%, rgba(90,22,7,0) 58%), #0d0301; color: #fff; }
.gl-facts-in { padding: 48px 0 52px; }
.gl-facts-band h2 { margin: 0 0 20px; color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.5rem); }
.gl-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gl-fact { border-radius: 18px; padding: 24px 22px; border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(150deg, #fe330f 0%, #9d1a05 100%); }
.gl-fact b { display: block; font-family: var(--display); font-weight: 400; font-size: var(--fs-3xl); line-height: .9; }
.gl-fact span { display: block; font-size: var(--fs-sm); color: rgba(255,255,255,.82); margin-top: 8px; }

/* Планшет и телефон */
@media (max-width: 1000px) {
  .gl-cards, .gl-cats, .gl-facts, .gl-tiles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .gl-home .hero-content { max-width: 100%; }
  /* Чипы разделов уходили на три строки и съедали первый экран — лентой вбок */
  .gl-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 12px calc(50% - 50vw) 0; padding: 0 calc(50vw - 50%) 2px; }
  .gl-chips::-webkit-scrollbar { display: none; }
  .gl-chip { flex: none; }
  .gl-home .hero-art { display: none; }
  .gl-search-row { padding-left: 14px; gap: 8px; }
  .gl-search-go { padding: 11px 16px; font-size: var(--fs-sm); }
  .gl-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gl-tile { flex-direction: column; padding: 14px; border-radius: 16px; }
  .gl-tile-go { display: none; }
  .gl-cards, .gl-cats { grid-template-columns: 1fr; }
  .gl-facts { grid-template-columns: 1fr 1fr; }
  .gl-fact b { font-size: var(--fs-2xl); }
  .gl-sec { margin-top: 40px; }
  .gl-sec-head h2 { font-size: var(--fs-lg); }
}

/* ═══ КРАСНАЯ ШАПКА РАЗДЕЛА (каталог, карточка, заказ) ═══ */
.gl-page-head {
  margin: calc(var(--gl-air) * -1) calc(50% - 50vw) 28px; padding: calc(var(--gl-head) + 14px) calc(50vw - 50%) 26px; color: #fff;
  background: radial-gradient(80% 70% at 8% -10%, #ff6a3d 0%, transparent 55%),
              linear-gradient(160deg, #fe330f 0%, #a81d06 100%);
}
.gl-crumbs { font-size: var(--fs-xs); color: rgba(255,255,255,.76); margin-bottom: 8px; }
.gl-crumbs a { color: inherit; }
.gl-page-head h1 { margin: 0; color: #fff; font-size: clamp(1.7rem, 4vw, 2.9rem); }
.gl-page-sub { margin: 6px 0 0; font-size: var(--fs-sm); color: rgba(255,255,255,.92); }
.gl-search-inline { margin-top: 18px; max-width: 760px; }
/* Пояснение над выдачей, когда запрос исправлен: шапка тёмная, поэтому светлое
   на прозрачной подложке, а не привычная жёлтая плашка */
.gl-search-fix {
  margin: 10px 0 0; padding: 8px 12px; max-width: 760px;
  font-size: var(--fs-sm); color: #fff; line-height: 1.4;
  background: rgba(255,255,255,.14); border-radius: 10px;
  border: 1px solid rgba(255,255,255,.22);
}
/* Ссылка на подсказанный запрос: цвет ссылок сайта на красном фоне не читается */
.gl-search-fix a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Текст страницы «Выезд на дом»: условия, ограничения, частые вопросы.
   Белая карточка того же вида, что форма заявки выше; читаемая колонка,
   чтобы длинные ответы не растягивались на всю ширину экрана */
.gl-visit-text { background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 26px 28px; margin-top: 18px; }
.gl-visit-text-in { max-width: 72ch; }
.gl-visit-text h2 { font-size: var(--fs-lg); margin: 26px 0 10px; }
.gl-visit-text h2:first-child { margin-top: 0; }
.gl-visit-text h3 { font-family: 'Montserrat', sans-serif; text-transform: none;
  font-size: var(--fs-md); font-weight: 600; line-height: 1.4; margin: 22px 0 6px; }
.gl-visit-text p { margin: 0 0 10px; line-height: var(--lh-read); }
.gl-visit-text ul, .gl-visit-text ol { margin: 0 0 12px; padding-left: 22px; }
.gl-visit-text li { margin: 4px 0; line-height: var(--lh-read); }
@media (max-width: 640px) { .gl-visit-text { padding: 18px 16px; } }

/* ═══ КАТАЛОГ ═══ */
.gl-cat-layout { display: grid; grid-template-columns: 258px 1fr; gap: 26px; align-items: start; }
.gl-cat-layout > * { min-width: 0; }
.gl-side { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; }
@media (min-width: 801px) { .gl-side { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; } }
.gl-side summary { font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: var(--fs-md); letter-spacing: .01em; }
.gl-cat-tree { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 1px; }
.gl-cat-tree ul { list-style: none; padding-left: 12px; margin: 2px 0 0; }
.gl-cat-tree a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 11px;
  border-radius: 10px; font-size: var(--fs-sm); color: #3c4854; }
.gl-cat-tree a:hover { background: rgba(16,22,28,.045); text-decoration: none; }
.gl-cat-tree a.active { background: rgba(254,51,15,.09); border: 1px solid rgba(254,51,15,.32);
  color: var(--red-ink); font-weight: 600; }
.gl-cat-tree i { font-style: normal; color: var(--faint); font-variant-numeric: tabular-nums; }

/* Раздел дерева: сворачивается, чтобы соседний не уезжал вниз экрана */
/* Общий .cat-details summary гасит pointer-events (там заголовок кликается
   только на телефоне) — вложенным заголовкам разделов клик нужен всегда */
.gl-side .gl-cat-group > summary { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 0; padding: 8px 11px; border-radius: 10px;
  pointer-events: auto; cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: var(--fs-sm); text-transform: none;
  letter-spacing: 0; color: var(--text); list-style: none; }
.gl-side .gl-cat-group > summary::-webkit-details-marker { display: none; }
.gl-side .gl-cat-group > summary::after { content: ''; display: block; width: 7px; height: 7px;
  flex: none; margin: -2px 2px 0 0;
  border-right: 1.8px solid var(--faint); border-bottom: 1.8px solid var(--faint);
  transform: rotate(45deg); transition: transform .15s; }
.gl-side .gl-cat-group[open] > summary::after { margin-top: 2px; transform: rotate(-135deg); }
.gl-side .gl-cat-group > summary:hover { background: rgba(16,22,28,.045); }


.gl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 14px; }
.gl-count { font-size: var(--fs-sm); color: var(--muted); }
.gl-cards-list { grid-template-columns: 1fr 1fr; }
@media (max-width: 1000px) { .gl-cat-layout { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .gl-cards-list { grid-template-columns: 1fr; } }

/* ═══ КАРТОЧКА АНАЛИЗА ═══ */
.gl-code-chip { display: inline-block; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; border-radius: 999px; padding: 5px 12px; margin-bottom: 10px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32); }
.gl-facts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 22px; }
.gl-fact-cell { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px 15px; }
.gl-fact-cell span { display: block; font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.gl-fact-cell b { display: block; font-size: var(--fs-md); font-weight: 600; margin-top: 3px; }

.gl-service .service-side { border-radius: 18px; padding: 22px; }
.gl-buy-price { display: flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums; }
.gl-buy-price b { font-family: var(--display); font-weight: 400; font-size: var(--fs-3xl); line-height: 1; }
.gl-buy-price .cur { font-family: 'Montserrat', sans-serif; font-size: .42em; margin-left: .16em; }
.gl-buy-price s { font-size: var(--fs-md); color: var(--muted); }
/* Услуги нет в прайсе региона: место цены занимает спокойная надпись — не
   пустота и не красная цифра, чтобы карточку не приняли за товар в продаже */
.gl-buy-none {
  font-family: var(--display); font-weight: 400; font-size: var(--fs-xl); line-height: 1.1;
  color: var(--faint);
}
.gl-buy-note { margin: 8px 0 14px; font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--muted); }
.gl-buy-save { display: inline-block; margin-top: 9px; font-size: var(--fs-xs); font-weight: 600;
  border-radius: 999px; padding: 5px 12px; color: var(--red-ink);
  background: rgba(254,51,15,.1); border: 1px solid rgba(254,51,15,.3); }
.gl-buy-btn { display: block; width: 100%; margin-top: 14px; border: 0; cursor: pointer;
  background: var(--red); color: #fff; border-radius: 13px; padding: 14px; font: inherit;
  font-size: var(--fs-md); font-weight: 600; }
.gl-buy-btn:hover { background: var(--primary-dark); }
.gl-buy-btn.is-in, .gl-buy-btn.btn-in-cart { background: var(--accent); border-color: var(--accent); color: #fff; }
.gl-buy-btn.is-in:hover, .gl-buy-btn.btn-in-cart:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.gl-buy-alt { display: block; text-align: center; margin-top: 9px; border: 1px solid var(--border);
  border-radius: 13px; padding: 13px; font-size: var(--fs-sm); color: var(--text); }
.gl-buy-alt:hover { border-color: rgba(254,51,15,.45); color: var(--red-ink); text-decoration: none; }
.gl-buy-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 7px;
  font-size: var(--fs-xs); color: var(--muted); }

/* ═══ КОРЗИНА ═══ */
.gl-cart .cart-item { border-radius: 16px; padding: 16px 18px; }
.gl-cart .cart-item .price { font-size: var(--fs-lg); }
.gl-cart .cart-total { background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 18px 22px; justify-content: space-between; margin-top: 18px; }
.gl-cart .cart-total .price { font-size: var(--fs-xl); }
/* Итог слева, экономия под ним — такой же плашкой, как «Цена снижена» в
   карточке анализа: красный текст без плашки читался как предупреждение */
.gl-cart .cart-total-sum { align-items: flex-start; gap: 8px; }
.gl-cart .cart-saving { font-size: var(--fs-xs); border-radius: 999px; padding: 4px 11px; color: var(--red-ink);
  background: rgba(254,51,15,.1); border: 1px solid rgba(254,51,15,.3); }
.gl-cart .cart-clear { margin-bottom: 14px; }

/* ═══════════════════════════════════════════════════════════════
   ШАПКА ГОРЛАБА — своя разметка (brands/gorlab/templates/base.html)
   ═══════════════════════════════════════════════════════════════ */
/* Шапка лежит поверх красной зоны и своего фона не имеет: градиент первого
   экрана проходит под ней непрерывно, как в макете. Поэтому она fixed, а
   красный блок сам отводит себе место под шапку. */
:root { --gl-head: 116px; --gl-air: 26px; }
.gl-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: none; border: 0;
  transition: background .2s, box-shadow .2s; }
.gl-header .container { transition: none; }
/* Страницы без красной зоны: контент начинается под шапкой. Воздух задаём
   одним правилом — иначе он гуляет от 16 до 44 пикселей в зависимости от того,
   с чего начинается страница: у заголовка свой верхний отступ, у баннера нет. */
body { padding-top: var(--gl-head); }
main.container { padding-top: var(--gl-air); }
/* Красную зону не трогаем: она этим же отступом и гасит воздух */
main.container > :first-child:not(.home-top):not(.gl-page-head):not(.lk-top) { margin-top: 0; }
body:has(.home-top), body:has(.gl-page-head), body:has(.lk-top) { padding-top: 0; }

.gl-util { background: rgba(0,0,0,.22); font-size: var(--fs-xs); }
.gl-util-in { display: flex; align-items: center; justify-content: space-between; height: 40px; gap: 16px; }
.gl-util a, .gl-util summary, .gl-util span { color: rgba(255,255,255,.88); }
.gl-region summary { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: var(--fs-xs); }
.gl-region .geo-pin, .gl-util .lang-globe { color: #fff; }
.gl-region[open] .gl-chev { transform: rotate(180deg); }
/* Язык — рядом с городом, а не посередине полосы: это два соседних выбора
   «где я и на каком языке читаю». space-between растащил бы их по краям,
   поэтому язык забирает свободное место справа от себя */
.gl-util .lang-picker { margin-right: auto; }
.gl-util-right { display: flex; align-items: center; gap: 18px; }
.gl-util-phone { font-weight: 700; font-size: var(--fs-sm); color: #fff !important;
  display: inline-flex; align-items: center; gap: 7px; }
.gl-util-phone-ico { display: none; width: 17px; height: 17px; }
/* Узкая полоса: номер целиком не помещался и переносился на вторую строку,
   поднимая шапку. Остаётся трубка — ссылка и тап-цель те же */
@media (max-width: 560px) {
  .gl-util-phone-txt { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
  .gl-util-phone-ico { display: block; }
  .gl-util-phone { padding: 9px 6px; margin: -9px -6px; }
  .gl-util-right { gap: 12px; }
}
.gl-util-call { font-size: var(--fs-xs); }
.gl-ai { font-size: var(--fs-xs); font-weight: 500; gap: 7px; }
.gl-ai .ai-slider { width: 32px; height: 18px; }

.gl-bar { display: flex; align-items: center; gap: 26px; height: 76px; }
.gl-header .gl-logo { display: flex; color: #fff; --flask: #fff; }
.gl-logo svg { height: 38px; width: auto; display: block; }
.gl-nav { display: flex; align-items: center; gap: 22px; margin: 0 auto; font-size: var(--fs-sm); }
.gl-nav a, .gl-nav summary { color: rgba(255,255,255,.95); font-weight: 500; white-space: nowrap; }
.gl-nav a { padding: 4px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.gl-nav a:hover, .gl-nav a.on { border-bottom-color: #fff; text-decoration: none; }
.gl-nav-more summary { cursor: pointer; }
.gl-acts { display: flex; align-items: center; gap: 10px; }
/* Иконки — ровные круги: общий .icon-btn скругляет на 10px, получались квадратики */
.gl-header .icon-btn { width: 42px; height: 42px; border-radius: 50%; flex: none;
  padding: 0; background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.3); color: #fff; }
.gl-header .icon-btn svg { display: block; }
/* Счётчик корзины сидел на краю и растягивал круг по высоте */
.gl-header .cart-badge { top: -3px; right: -3px; background: #fff; color: var(--red); }
.gl-header .user-menu, .gl-header .user-menu > summary { display: flex; }
.gl-header .user-menu > summary { list-style: none; }
.gl-header .user-menu > summary::-webkit-details-marker { display: none; }
.gl-header .icon-btn:hover { background: rgba(255,255,255,.3); }
.gl-header .icon-btn svg { width: 21px; height: 21px; }
.gl-burger { display: none; }
.gl-burger summary { color: #fff; list-style: none; cursor: pointer; display: flex; }

/* Тронулись с места — шапка становится белой, логотип темнеет, колба краснеет */
.gl-header.is-solid { background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); box-shadow: 0 6px 24px -14px rgba(16,22,28,.35); }
.gl-header.is-solid .gl-util { background: rgba(16,22,28,.05); }
.gl-header.is-solid .gl-util a, .gl-header.is-solid .gl-util summary,
.gl-header.is-solid .gl-util span { color: var(--muted); }
.gl-header.is-solid .gl-region .geo-pin,
.gl-header.is-solid .gl-util .lang-globe { color: var(--red); }
.gl-header.is-solid .gl-util-phone { color: var(--text) !important; }
.gl-header.is-solid .gl-logo { color: #10161c; --flask: var(--red); }
.gl-header.is-solid .gl-nav a, .gl-header.is-solid .gl-nav summary { color: var(--text); }
.gl-header.is-solid .gl-nav a:hover, .gl-header.is-solid .gl-nav a.on { border-bottom-color: var(--red); color: var(--red-ink); }
.gl-header.is-solid .icon-btn { background: rgba(16,22,28,.05); border-color: var(--border); color: var(--text); }
.gl-header.is-solid .icon-btn:hover { background: rgba(254,51,15,.09); color: var(--red-ink); }
.gl-header.is-solid .gl-burger summary { color: var(--text); }
.gl-header.is-solid .cart-badge { background: var(--red); color: #fff; }
.gl-header.is-solid .gl-ai { color: var(--muted); }
.gl-header.is-solid .ai-toggle .ai-slider { background: #c9d2da; }

@media (max-width: 1320px) { .gl-nav { gap: 16px; font-size: var(--fs-sm); } }
@media (max-width: 1180px) { .gl-nav .gl-nav-more { display: none; } }
@media (max-width: 1080px) { .gl-nav a.gl-nav-corp { display: none; } }
@media (max-width: 980px) {
  :root { --gl-head: 100px; --gl-air: 20px; }
  .gl-nav { display: none; }
  .gl-burger { display: block; }
  .gl-bar { height: 60px; gap: 14px; }
  .gl-acts { margin-left: auto; }
  .gl-util-right .gl-ai { display: none; }
}

/* ─── Детали первого экрана по макету ─── */
.gl-eyebrow { display: inline-block; font-size: var(--fs-xs); letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; border-radius: 999px; padding: 7px 16px; margin-bottom: 16px;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.34); }
.gl-art-circle { display: grid; place-items: center; width: 100%; max-width: 300px; aspect-ratio: 1;
  /* Подложка круга в макете синяя, а не чёрная — тот же #173d56, что и пятно слева */
  border-radius: 50%; background: rgba(23,61,86,.38); }
.gl-art-circle svg { width: 62%; height: auto; }
.gl-home .hero-art { display: flex; align-items: center; justify-content: flex-end; }

/* Чипы разделов — внутри строки поиска */
.gl-search-row .gl-chips { display: flex; gap: 7px; flex: none; margin: 0; }
.gl-search-row .gl-chip { background: #fff; border: 1px solid rgba(16,22,28,.12); color: #3c4854;
  font-size: var(--fs-xs); padding: 8px 14px; white-space: nowrap; }
.gl-search-row .gl-chip:hover { border-color: rgba(254,51,15,.45); color: var(--red-ink); }
.gl-search-go { display: inline-flex; align-items: center; gap: 8px; }
.gl-search-go svg { width: 16px; height: 16px; }

/* Плитки: иконка и стрелка сверху, тексты снизу */
.gl-tile { flex-direction: column; align-items: stretch; gap: 26px; min-height: 132px; }
/* .gl-tile span { display: block } из первой версии перебивал flex по
   специфичности — стрелка липла к иконке вместо правого края */
.gl-tile .gl-tile-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.gl-tile-go { margin: 0; }
.gl-tile-txt { display: block; }

@media (max-width: 900px) {
  .gl-search-row .gl-chips { display: none; }
}
.gl-util-call { font-size: var(--fs-xs); }

/* Заголовочный шрифт — для рубрик, а не для названий объектов: имена
   приборов латиницей с цифрами в узком капсе становятся нечитаемыми */
.upsell-card .price { font-size: var(--fs-xl); }
.upsell-card h3 { font-family: 'Montserrat', sans-serif; text-transform: none;
  font-weight: 600; font-size: var(--fs-md); line-height: 1.35; letter-spacing: 0; }
.equip-body h3, .edu-card h3, .news-card h3, .article-card h3, .partner-card h3 {
  font-family: 'Montserrat', sans-serif; font-weight: 600; text-transform: none; letter-spacing: 0;
  line-height: 1.3;
}

/* ─── Врачи и новости на главной (как в макете: две колонки) ─── */
.gl-two { display: grid; gap: 30px; }
/* Колонка не сжимается под ленту внутри, если не снять min-width: auto —
   лента растягивает страницу вбок. Та же ловушка, что была в каталоге. */
.gl-two > * { min-width: 0; }
@media (min-width: 901px) { .gl-two { grid-template-columns: 1.35fr 1fr; align-items: start; } }
.gl-docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
/* Карточка врача — ссылка: нужен display и свой цвет текста, иначе она
   схлопывается в строку и красится в цвет ссылок */
.gl-doc { display: block; color: var(--text); background: #fff; border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden; }
.gl-doc:hover { text-decoration: none; }
.gl-doc:hover { border-color: rgba(254,51,15,.4); box-shadow: 0 14px 30px -20px rgba(16,22,28,.35); }
/* Кадр держим пропорцией, а не фиксированной высотой: карточка на телефоне
   и планшете шире, чем на десктопе, и при жёсткой высоте от портрета
   оставались одни глаза. Снимки студийные, лицо в верхней части — поэтому
   кадрируем от верха, тогда лицо оказывается посередине карточки */
.gl-docs .gl-doc-photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  object-position: 50% top; }
.gl-docs .gl-doc-photo-empty { background: linear-gradient(150deg, #24506b, #0d2334); }
.gl-doc-in { padding: 13px 14px 15px; }
.gl-doc-in b { display: block; font-size: var(--fs-sm); line-height: 1.3; }
.gl-doc-in span { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 5px; line-height: 1.4; }

.gl-news { display: grid; gap: 12px; align-content: start; }
.gl-new { display: block; background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 15px 17px; color: var(--text); }
.gl-new:hover { border-color: rgba(254,51,15,.4); text-decoration: none;
  box-shadow: 0 14px 30px -20px rgba(16,22,28,.35); }
.gl-new b { display: block; font-size: var(--fs-sm); line-height: 1.35; }
.gl-new span { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; line-height: 1.4; }

@media (max-width: 700px) {
  .gl-docs { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   МОБИЛЬНАЯ ГЛАВНАЯ — правила идут после десктопных, чтобы не
   проигрывать им по порядку в каскаде
   ═══════════════════════════════════════════════════════════════ */
/* Иконку категории красило правило .gl-cat span — оно специфичнее */
.gl-cat .gl-cat-ic { color: var(--red-ink); }

@media (max-width: 760px) {
  /* Круг с иллюстрацией на телефоне отнимает пол-экрана у заголовка.
     Правило ниже медиазапроса раньше его возвращало — задаём с запасом. */
  .gl-home .hero-art, .gl-home .gl-art-circle { display: none !important; }
  .gl-home .hero-content { max-width: 100%; }
  .gl-home .hero-btns { gap: 9px; }
  .gl-home .hero-btns .btn { padding: 11px 20px; font-size: var(--fs-md); }

  /* Плитки действий: меньше воздуха внутри */
  .gl-tiles { gap: 9px; margin-top: 20px; }
  .gl-tile { gap: 12px; min-height: 0; padding: 14px; }
  .gl-tile i { font-size: var(--fs-xs); }

  /* Карточки исследований и врачей — лентой вбок, как в макете: в столбик
     четыре карточки занимают четыре экрана */
  /* Лента прокручивается внутри контейнера: приём с выходом за его края
     (margin: 0 calc(50% - 50vw)) добавляет документу горизонтальную
     прокрутку — это ровно тот дефект, который мы недавно чинили */
  .gl-cards-home, .gl-docs {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding-bottom: 4px;
  }
  .gl-cards-home::-webkit-scrollbar, .gl-docs::-webkit-scrollbar { display: none; }
  .gl-cards-home > *, .gl-docs > * { flex: none; width: 72vw; max-width: 260px; scroll-snap-align: start; }

  /* Категории: две колонки без описаний — на телефоне описание раздувает
     плитку до полутора экранов */
  .gl-cats { grid-template-columns: 1fr 1fr; gap: 9px; }
  .gl-cat { min-height: 0; padding: 14px; gap: 7px; }
  .gl-cat > span:not(.gl-cat-ic) { display: none; }   /* прячем описание, но не иконку */
  .gl-cat b { font-size: var(--fs-sm); }
  .gl-cat i { font-size: var(--fs-xs); }
  .gl-cat-ic { width: 34px; height: 34px; border-radius: 11px; }
  .gl-cat-ic svg { width: 17px; height: 17px; }

  /* Разделы плотнее */
  .gl-sec { margin-top: 34px; }
  .gl-sec-head { margin-bottom: 14px; }
  .gl-two { gap: 26px; }
  .gl-marquee { margin-top: 34px; }
  .gl-facts-in { padding: 34px 0 36px; }
  /* Плитки фактов в карточке анализа — по две в ряд, иначе три экрана подряд */
  .gl-facts-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gl-fact-cell { padding: 10px 12px; }
  .gl-service .service-side { padding: 18px; }

  .franchise { padding: 0 16px; border-radius: 20px; }
  .franchise-in { padding: 26px 0 28px; gap: 22px; }
  .calc { padding: 18px; }
  .calc h3 { font-size: var(--fs-lg); }
}

/* ═══ БУРГЕР ═══
   Правило .header a красит ссылки шапки белым — внутри белой панели меню
   пункты становились невидимыми. Панель ещё и уезжала за правый край. */
.gl-header .gl-burger > ul {
  /* fixed относительно окна: кнопка бургера стоит не у края, и панель,
     привязанная к ней, уезжала то вправо, то влево за границу экрана */
  position: fixed; top: calc(var(--gl-head) - 6px); right: 12px; left: auto;
  width: min(320px, calc(100vw - 24px));
  max-height: calc(100vh - var(--gl-head) - 16px); overflow-y: auto;
  padding: 8px; border-radius: 16px; border: 1px solid var(--border);
  box-shadow: 0 24px 54px -24px rgba(16,22,28,.45);
}
.gl-header .gl-burger > ul a { color: var(--text); display: block; padding: 11px 12px;
  border-radius: 10px; font-size: var(--fs-md); }
.gl-header .gl-burger > ul a:hover { background: rgba(254,51,15,.08); color: var(--red-ink); text-decoration: none; }
.gl-header .gl-burger .nav-sub { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }
.gl-header .gl-burger .nav-sub-title { color: var(--faint); padding: 8px 12px 4px;
  font-size: var(--fs-xs); letter-spacing: .12em; }
.gl-header .gl-burger .nav-sub a { padding-left: 12px; }

/* ═══ МОДАЛКА ОБРАТНОГО ЗВОНКА ═══ */
.gl-util-call { font: inherit; font-size: var(--fs-xs); color: rgba(255,255,255,.88);
  background: none; border: 0; cursor: pointer; padding: 0; }
.gl-util-call:hover { color: #fff; }
.gl-header.is-solid .gl-util-call { color: var(--muted); }
.gl-header.is-solid .gl-util-call:hover { color: var(--red-ink); }

.gl-modal { border: 0; padding: 0; border-radius: 20px; width: min(420px, calc(100vw - 24px));
  box-shadow: 0 40px 90px -30px rgba(16,22,28,.5); background: #fff; color: var(--text); }
.gl-modal::backdrop { background: rgba(16,22,28,.55); backdrop-filter: blur(2px); }
.gl-modal-in { padding: 24px; display: grid; gap: 12px; }
.gl-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gl-modal-head h2 { margin: 0; font-size: var(--fs-lg); }
.gl-modal-x { font: inherit; font-size: var(--fs-lg); line-height: 1; background: none; border: 0;
  cursor: pointer; color: var(--faint); padding: 0 4px; }
.gl-modal-x:hover { color: var(--red-ink); }
.gl-modal-sub { margin: -6px 0 4px; font-size: var(--fs-sm); color: var(--muted); }
.gl-field { display: grid; gap: 5px; }
.gl-field span { font-size: var(--fs-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.gl-field input, .gl-field textarea { width: 100%; font: inherit; font-size: var(--fs-md); padding: 11px 13px;
  border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--text); }
.gl-field input:focus, .gl-field textarea:focus { outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(254,51,15,.13); }
.gl-agree { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-xs); color: var(--muted); }
.gl-agree input { margin: 2px 0 0; width: auto; accent-color: var(--red); flex: none; }
.gl-agree a { color: var(--red-ink); }
.gl-modal-err { font-size: var(--fs-sm); color: var(--red-ink); background: rgba(254,51,15,.08);
  border: 1px solid rgba(254,51,15,.3); border-radius: 10px; padding: 9px 12px; }
.gl-modal-send { font: inherit; font-size: var(--fs-md); font-weight: 600; cursor: pointer; border: 0;
  background: var(--red); color: #fff; border-radius: 13px; padding: 13px; }
.gl-modal-send:hover { background: var(--primary-dark); }
.gl-modal-send:disabled { opacity: .6; cursor: default; }
.gl-modal-done { margin: 0; font-size: var(--fs-sm); color: #1c7a4a; background: rgba(28,122,74,.08);
  border: 1px solid rgba(28,122,74,.28); border-radius: 12px; padding: 12px 14px; }

/* ═══ АДРЕСА ═══ */
.centers-col { display: grid; gap: 12px; }
.center-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; }
.center-card:hover { border-color: rgba(254,51,15,.4); box-shadow: 0 14px 30px -20px rgba(16,22,28,.35); }
.center-card b { display: block; font-size: var(--fs-md); }
.center-card .caddr { font-size: var(--fs-sm); margin-top: 3px; }
.center-card .meta { display: grid; gap: 2px; font-size: var(--fs-sm); color: var(--muted); margin-top: 7px; }
.center-card .center-more { display: inline-block; margin-top: 10px; font-size: var(--fs-sm);
  font-weight: 600; color: var(--red-ink); }

.gl-find { display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--border); border-radius: 14px; padding: 11px 15px; margin-bottom: 14px; }
.gl-find svg { width: 19px; height: 19px; color: var(--faint); flex: none; }
.gl-find input { flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: var(--fs-md); color: var(--text); }
.gl-find input:focus { box-shadow: none; }
.gl-find:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgba(254,51,15,.12); }
.gl-find-empty { margin: 0 0 14px; font-size: var(--fs-sm); color: var(--muted); }
.gl-centers .centers-map-wrap { top: calc(var(--gl-head) + 12px); }

/* ═══ КАРТОЧКА ОФИСА: липкая панель с картой ═══ */
.gl-office .office-layout { grid-template-columns: 1fr; }
@media (min-width: 901px) { .gl-office .office-layout { grid-template-columns: 1.25fr 340px; } }
.ocard { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
  box-shadow: 0 22px 46px -30px rgba(16,22,28,.3); align-self: start; }
@media (min-width: 901px) { .ocard { position: sticky; top: calc(var(--gl-head) + 12px); } }
.ocard .cmap { height: 200px; min-height: 0; border-radius: 0; border-bottom: 1px solid var(--border); }
.ocard-in { padding: 16px 18px 18px; display: grid; gap: 5px; }
.ocard-title { font-size: var(--fs-md); font-weight: 600; }
.ocard-metro { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); }
.ocard-metro i { width: 9px; height: 9px; border-radius: 50%; background: #d6083b; flex: none; }
.ocard-line { font-size: var(--fs-sm); color: var(--muted); }
.ocard-tel { font-family: var(--display); font-weight: 400; font-size: var(--fs-lg); letter-spacing: .01em;
  color: var(--text); margin-top: 6px; }
.ocard-tel:hover { color: var(--red-ink); text-decoration: none; }
.ocard-acts { display: grid; gap: 8px; margin-top: 12px; }
.ocard-btn { display: block; text-align: center; background: var(--red); color: #fff;
  border-radius: 12px; padding: 12px; font-size: var(--fs-md); font-weight: 600; }
.ocard-btn:hover { background: var(--primary-dark); color: #fff; text-decoration: none; }
.ocard-btn-line { background: #fff; color: var(--text); border: 1px solid var(--border); }
.ocard-btn-line:hover { background: rgba(254,51,15,.06); color: var(--red-ink); border-color: rgba(254,51,15,.4); }

/* ═══ ПРЕДЗАКАЗ ОФОРМЛЕН ═══ */
.gl-done-card { background: #fff; border: 1px solid var(--border); border-radius: 20px;
  padding: 32px; max-width: 640px; margin: 0 auto; text-align: center; }
.gl-done-tick { width: 58px; height: 58px; border-radius: 50%; background: var(--red); color: #fff;
  display: grid; place-items: center; margin: 0 auto 16px; }
.gl-done-tick svg { width: 28px; height: 28px; }
.gl-done-card h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0; }
.gl-done-lead { margin: 10px auto 0; max-width: 46ch; font-size: var(--fs-md); color: var(--muted); }
.gl-done-facts { display: grid; gap: 10px; margin: 24px 0 0; text-align: left; }
.gl-done-facts > div { display: flex; justify-content: space-between; gap: 14px;
  border-top: 1px solid var(--border); padding-top: 10px; }
.gl-done-facts dt { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.gl-done-facts dd { margin: 0; font-size: var(--fs-md); font-weight: 600; text-align: right; }
.gl-done-facts dd.gl-done-total { font-family: var(--display); font-weight: 400; font-size: var(--fs-lg); color: var(--red); }
.gl-done-acts { display: grid; gap: 9px; margin-top: 24px; }
@media (min-width: 601px) { .gl-done-acts { grid-template-columns: 1fr 1fr; } }
.gl-done-note { margin: 16px 0 0; font-size: var(--fs-xs); color: var(--faint); }

/* ═══ ВЫНОСКА НА КАРТЕ ═══
   Раскладка и цвета — в общем style.css; здесь только фирменный шрифт */
.map-balloon { font-family: 'Montserrat', sans-serif; }
.map-balloon-btn { font-family: 'Montserrat', sans-serif; }

/* ═══ СТРЕЛКА ВЫПАДАЮЩИХ СПИСКОВ ═══
   В общем стиле она фиолетовая и зашита картинкой — перекрашиваем в фирменный */
.form select, .visit-form .corp-field select, .bk-filter select, select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fe330f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ═══ ЗАПИСЬ К ВРАЧУ: фильтры карточками, как в макете ═══ */
.bk-filter { background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 14px; display: block; }
.bk-filter span { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; margin-bottom: 2px; }
.bk-filter select, .bk-filter .bk-combo input {
  border: 0; padding: 0; background-color: transparent; background-position: right 0 center;
  font-size: var(--fs-md); font-weight: 500; color: var(--text); border-radius: 0; width: 100%;
}
.bk-filter select:focus, .bk-filter .bk-combo input:focus { outline: none; box-shadow: none; }
/* Заполненный фильтр подсвечен, как в макете */
.bk-filter:has(select:not([value=""]):not(:invalid)):has(option:checked:not([value=""])),
.bk-filter:has(.bk-combo-clear:not([hidden])) {
  border-color: rgba(254,51,15,.45); box-shadow: 0 0 0 3px rgba(254,51,15,.08);
}
.bk-filter:has(option:checked:not([value=""])) select { color: var(--red-ink); font-weight: 600; }
.bk-combo-clear { color: var(--red-ink); }

/* ═══ ОФОРМЛЕНИЕ ЗАКАЗА ПО МАКЕТУ ═══ */
.gl-order-items { margin-bottom: 22px; }
.gl-order-items h2, .gl-order-h2 { font-size: var(--fs-lg); margin: 0 0 12px; }
.gl-order-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  background: #fff; border: 1px solid var(--border); border-radius: 15px; padding: 14px 16px; margin-bottom: 10px; }
.gl-order-code { display: block; font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; }
.gl-order-line b { display: block; font-size: var(--fs-md); margin-top: 2px; }
.gl-order-meta { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 5px; }
.gl-order-price { font-family: var(--display); font-weight: 400; font-size: var(--fs-lg);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.gl-tag { display: inline-flex; align-items: center; font-style: normal; font-size: var(--fs-xs);
  border-radius: 999px; padding: 3px 9px; border: 1px solid; margin-left: 6px; }
.gl-tag-can { color: #1c7a4a; border-color: rgba(28,122,74,.32); background: rgba(28,122,74,.07); }
.gl-tag-cant { color: #8a6a10; border-color: rgba(138,106,16,.32); background: rgba(138,106,16,.08); }

.gl-fields { display: grid; gap: 11px; grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) { .gl-fields { grid-template-columns: 1fr; } }
.gl-fld { display: grid; gap: 4px; background: #fff; border: 1px solid var(--border);
  border-radius: 12px; padding: 9px 13px; }
.gl-fld-wide { grid-column: 1 / -1; }
.gl-fld > span { font-size: var(--fs-xs); letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; }
.gl-req { color: var(--red); font-style: normal; margin-left: 3px; }
.gl-fld input, .gl-fld select, .gl-fld textarea { width: 100%; border: 0; padding: 0;
  background: transparent; font: inherit; font-size: var(--fs-md); font-weight: 500; color: var(--text); }
.gl-fld select { background-position: right 0 center; padding-right: 20px; }
.gl-fld input:focus, .gl-fld select:focus, .gl-fld textarea:focus { outline: none; box-shadow: none; }
.gl-fld:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgba(254,51,15,.12); }
.gl-checkout .form p { margin: 0; }

/* Плитка поля — грид, и он перебивал бы display:none у [hidden]:
   поля выезда оставались видны при выбранном визите в пункт */
.gl-fld[hidden], .center-select[hidden] { display: none; }

/* Список пунктов рядом с картой: обрывался на половине карточки и читался как
   поломка. Тянем на высоту карты и подсказываем прокрутку затуханием снизу */
.gl-checkout .center-select-layout:not(.no-map) .center-options {
  max-height: 480px;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 34px), transparent);
}
.gl-checkout .center-options::-webkit-scrollbar { width: 6px; }
.gl-checkout .center-options::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.16); border-radius: 3px;
}

/* ═══ ВЫЕЗД НА ДОМ ПО МАКЕТУ ═══
   Карта и стоимость — две карточки рядом, ниже заявка одной карточкой с
   полями-плитками. Раньше карта распирала страницу во всю ширину, а таблица
   висела поверх неё — с макетом это не совпадало. */
.gl-visit-top { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px;
  margin: 26px 0 18px; }
.gl-visit-mapbox { border-radius: 18px; overflow: hidden; border: 1px solid var(--border);
  background: #eef1f4; min-height: 430px; }
.gl-visit-mapbox .cmap, .gl-visit-mapbox .visit-map { height: 430px; width: 100%; border: 0; border-radius: 0; }
.gl-visit-nomap { padding: 24px; }
.gl-visit-terms { background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 20px 22px; align-self: start; }
.gl-visit-terms h2 { font-size: var(--fs-lg); margin: 0 0 14px; }
.gl-visit-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.gl-visit-table th { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; text-align: right; padding: 0 0 8px; }
.gl-visit-table th:first-child { text-align: left; }
.gl-visit-table td { padding: 11px 0; border-top: 1px solid var(--border); text-align: right;
  font-variant-numeric: tabular-nums; }
.gl-visit-table td:first-child { text-align: left; padding-right: 12px; }
.gl-visit-table tbody tr td:nth-child(2) { font-weight: 600; }
.gl-visit-table .visit-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 8px; vertical-align: 1px; }
.gl-visit-note { margin: 12px 0 0; padding: 11px 13px; background: var(--tint);
  border-radius: 12px; font-size: var(--fs-xs); color: var(--muted); line-height: var(--lh-ui); }

.gl-visit-form { background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 24px 26px 26px; margin-bottom: 34px; }
.gl-visit-form > h2 { font-size: var(--fs-lg); margin: 0 0 16px; }
.gl-fields-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gl-visit-form .gl-fld { background: var(--tint); }
.gl-visit-form .gl-fld > span i { color: var(--red); font-style: normal; margin-left: 2px; }
.gl-visit-form .gl-fld textarea { resize: vertical; min-height: 52px; }
.gl-visit-form .date-wrap { position: relative; display: block; }
.gl-visit-hint { margin: 14px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.gl-visit-form .visit-consent { display: flex; gap: 10px; align-items: flex-start;
  margin: 12px 0 18px; font-size: var(--fs-sm); }

@media (max-width: 1000px) {
  .gl-visit-top { grid-template-columns: 1fr; }
  .gl-fields-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .gl-visit-mapbox, .gl-visit-mapbox .visit-map { min-height: 260px; height: 260px; }
  .gl-fields-3 { grid-template-columns: 1fr; }
  .gl-visit-form { padding: 18px 16px 20px; border-radius: 15px; }
  .gl-visit-terms { padding: 16px 17px; border-radius: 15px; }
}

/* ═══ ОФОРМЛЕНИЕ: РАСКЛАДКА ПО МАКЕТУ ═══
   Слева состав, способ сдачи, выбор пункта и данные; справа липкая сводка
   с кнопкой. Раньше сводка была врезкой посреди формы, а кнопка — внизу
   страницы, и итог с кнопкой не были видны одновременно. */
.gl-order-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px;
  align-items: start; margin-bottom: 36px; }
.gl-order-main { min-width: 0; }

.gl-order-line { position: relative; padding-right: 44px; }
.gl-order-info { min-width: 0; }
.gl-order-line b { display: block; font-size: var(--fs-md); }
.gl-order-meta { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 5px; }
.gl-order-meta .gl-order-code { display: inline; margin-right: 4px; }
.gl-order-price em { font-style: normal; font-size: .62em; }
.gl-order-del { position: absolute; right: 12px; top: 18px;
  width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent;
  color: var(--faint); font-size: var(--fs-lg); line-height: 1; cursor: pointer; }
.gl-order-del:hover { background: var(--tint); color: var(--text); }

/* Способ сдачи: плитка с пояснением, как в макете */
.gl-checkout .order-kind-opt em { display: block; margin-top: 5px; font-style: normal;
  font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }

.gl-view-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.gl-view-chip { border: 1px solid var(--border); background: #fff; color: var(--text);
  border-radius: 999px; padding: 8px 18px; font: 600 .84rem 'Montserrat', sans-serif; cursor: pointer; }
.gl-view-chip.is-on { background: #10161c; border-color: #10161c; color: #fff; }
.center-select-layout.is-map .center-options { display: none; }
.center-select-layout.is-map { grid-template-columns: 1fr; }

.gl-home-block { margin: 4px 0 18px; }
.gl-order-consent { margin: 14px 0 0; font-size: var(--fs-sm); color: var(--muted); }

.gl-sum { position: sticky; top: calc(var(--gl-head) + 12px); background: #fff; border: 1px solid var(--border);
  border-radius: 18px; padding: 20px 22px 22px; }
.gl-sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: var(--fs-sm); padding: 7px 0; }
.gl-sum-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Чек на оформлении: экономия отдельной строкой между суммой и итогом */
.gl-sum-saving b { color: var(--red-ink); }
.gl-sum-total { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 14px;
  font-size: var(--fs-md); }
.gl-sum-total b { font-family: var(--display); font-weight: 400; font-size: var(--fs-xl);
  word-spacing: .1em; }  /* в узком Bebas разряды иначе слипаются */
.gl-sum-total b em { font-style: normal; font-size: .55em; }
.gl-sum-btn { width: 100%; margin: 16px 0 14px; }
/* Кэшбэк для гостя: сумма баллов цифрой, под ней вход и обычное оформление.
   Зелёный здесь — статус выгоды, он не спорит с красной кнопкой рядом */
.gl-sum-bonus { display: flex; align-items: center; gap: 11px; margin: 16px 0 12px;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(28,122,74,.08); border: 1px solid rgba(28,122,74,.2); }
.gl-sum-bonus b { font-family: var(--display); font-weight: 400; font-size: var(--fs-xl);
  line-height: 1; color: #1c7a4a; }
.gl-sum-bonus span { font-size: var(--fs-xs); line-height: var(--lh-ui); color: var(--muted); }
a.gl-sum-btn { display: block; text-align: center; margin-bottom: 8px; white-space: normal;
  line-height: 1.25; }
a.gl-sum-btn:hover { color: #fff; text-decoration: none; }
/* Второе действие — ссылкой: две одинаковые кнопки спорили бы за внимание */
.gl-sum-plain { display: block; width: 100%; margin: 0 0 10px; padding: 6px;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: var(--fs-sm);
  font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.gl-sum-plain:hover { color: var(--red-ink); }
.gl-sum-note { margin: 0 0 7px; font-size: var(--fs-sm); color: var(--muted); }
.gl-sum-fine { margin-top: 12px; font-size: var(--fs-xs); color: var(--faint); }
#gl-sum-center { color: var(--text); font-weight: 600; }

@media (max-width: 900px) {
  .gl-order-layout { grid-template-columns: 1fr; }
  .gl-sum { position: static; order: 2; }
}
@media (max-width: 700px) {
  .center-select-layout:not(.no-map) { grid-template-columns: 1fr; }
  .center-select-layout.is-list .center-select-map { display: none; }
  .gl-checkout .center-select-layout:not(.no-map) .center-options { max-height: none; mask-image: none;
    -webkit-mask-image: none; }
}

/* Фильтры на странице адресов — те же чипы, что при выборе пункта в заказе */
.gl-center-filters { flex-wrap: wrap; margin: 12px 0 14px; }

/* ═══ КАРТОЧКА ОФИСА: РАЗДЕЛЫ ОТДЕЛЬНЫМИ КАРТОЧКАМИ ═══ */
.gl-office .office-main { background: none; border: 0; padding: 0; }  /* карточка теперь у каждого раздела */
.gl-office .office-content { background: none; border: 0; padding: 0; display: grid; gap: 16px; }
.gl-office .office-content td { border: 0; padding: 11px 0; }
.gl-osec { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 20px 24px 22px; }
.gl-osec > h3 { font-size: var(--fs-lg); margin: 0 0 14px; }
.gl-osec > h4 { font-size: var(--fs-md); margin: 22px 0 10px; }
.gl-osec > :last-child { margin-bottom: 0; }
.gl-osec .office-hours { width: 100%; border-collapse: collapse; }
.gl-osec .office-hours td { padding: 11px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.gl-osec .office-hours td + td { text-align: right; font-weight: 600; }
.gl-osec .office-hours tr:last-child td { border-bottom: 0; }
.gl-osec .office-specs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 14px; }
.gl-osec .office-specs li { background: var(--tint); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 15px; font-size: var(--fs-sm); }
.gl-osec .btn { margin-top: 12px; }
.gl-odiscounts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.gl-odisc { background: rgba(254,51,15,.06); border: 1px solid rgba(254,51,15,.18);
  border-radius: 14px; padding: 14px 16px; font-size: var(--fs-sm); line-height: 1.45; }
.gl-osec-more { display: inline-block; font-weight: 600; font-size: var(--fs-sm); }
.gl-osec .office-note { display: block; margin-top: 10px; font-style: normal; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 700px) {
  .gl-osec { padding: 16px 17px 18px; border-radius: 15px; }
  .gl-odiscounts { grid-template-columns: 1fr; }
}


/* ═══ ИНФОГРАФИКА БАННЕРА: ПОЯВЛЕНИЕ, ДЫХАНИЕ И ДВИЖЕНИЕ ВНУТРИ КАРТИНКИ ═══
   Появление привязано к активному слайду (класс ставит карусель в home.js),
   дыхание идёт всё время. Движение — только transform и opacity.
   Внутри SVG можно оживить отдельные элементы, поставив им класс:
   gl-drift — медленный дрейф, gl-spin-fast / gl-spin-slow — вращение
   (задайте элементу style="transform-origin: X Y" по центру вращения),
   gl-sway / gl-sway-rev — качание навстречу друг другу. */
:root { --gl-in: cubic-bezier(0.23, 1, 0.32, 1); --gl-soft: cubic-bezier(0.77, 0, 0.175, 1); }

.gl-home .slide.is-active .hero-art { animation: gl-art-in .34s var(--gl-in) both; }
.gl-home .slide.is-active .gl-art-circle svg { animation: gl-art-in .34s var(--gl-in) .08s both; }
@keyframes gl-art-in {
  from { opacity: 0; transform: scale(.94) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.gl-art-circle { animation: gl-breath 7s var(--gl-soft) .6s infinite; }
@keyframes gl-breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

.gl-art-circle .gl-drift { animation: gl-drift 9s var(--gl-soft) infinite; }
@keyframes gl-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-10px, -14px); } }

.gl-art-circle .gl-spin-fast { animation: gl-spin 12s linear .4s infinite; }
.gl-art-circle .gl-spin-slow { animation: gl-spin 72s linear .4s infinite; }
@keyframes gl-spin { to { transform: rotate(360deg); } }

/* Слои качаются навстречу; периоды 9 и 6.5 с не кратны — рисунок не повторяется */
.gl-art-circle .gl-sway, .gl-art-circle .gl-sway-rev { transform-box: fill-box; transform-origin: 50% 50%; }
.gl-art-circle .gl-sway { animation: gl-sway 9s var(--gl-soft) infinite; }
.gl-art-circle .gl-sway-rev { animation: gl-sway-rev 6.5s var(--gl-soft) infinite; }
@keyframes gl-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes gl-sway-rev { 0%, 100% { transform: rotate(5deg) scale(1); }
                         50%      { transform: rotate(-5deg) scale(1.05); } }

@media (prefers-reduced-motion: reduce) {
  /* Остаётся проявление — оно объясняет смену слайда; движение убираем */
  .gl-home .slide.is-active .hero-art,
  .gl-home .slide.is-active .gl-art-circle svg { animation: gl-art-fade .24s ease both; }
  .gl-art-circle, .gl-art-circle .gl-drift, .gl-art-circle .gl-spin-fast,
  .gl-art-circle .gl-spin-slow, .gl-art-circle .gl-sway, .gl-art-circle .gl-sway-rev { animation: none; }
  @keyframes gl-art-fade { from { opacity: 0; } to { opacity: 1; } }
}


/* Служебные и юридические ссылки — строкой под колонками подвала */
.gl-footer-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 18px; margin-top: 22px;
  border-top: 1px solid rgba(255,255,255,.1); font-size: var(--fs-sm); }
.gl-footer-legal a, .footer .gl-footer-legal a { color: rgba(255,255,255,.55); }
.gl-footer-legal a:hover { color: #fff; }
.gl-footer-legal + .container { margin-top: 14px; }   /* дисклеймер не липнет к ссылкам */

/* ═══ АКЦИИ ПО МАКЕТУ ═══
   Карточка начинается с выгоды: «7%», «до 50%» — цифра крупнее заголовка,
   потому что по ней и выбирают. Главное предложение раздела — на две колонки. */
.gl-promo-filters { margin: 22px 0 16px; }
.gl-promos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin-bottom: 36px; }
.gl-promo { display: flex; flex-direction: column; gap: 9px; background: #fff;
  border: 1px solid var(--border); border-radius: 18px; padding: 18px 20px 16px; }
.gl-promo[hidden] { display: none; }
.gl-promo-val { font-family: var(--display); font-weight: 400; font-size: var(--fs-2xl); line-height: .95;
  color: var(--red); }
.gl-promo b { font-size: var(--fs-md); line-height: 1.3; }
.gl-promo-text { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-read); }
.gl-promo-till { margin-top: auto; padding-top: 11px; border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--faint); }
.gl-promo-till a { color: var(--red-ink); font-weight: 600; }

/* Главное предложение: две колонки и фирменный градиент */
.gl-promo.is-wide { grid-column: span 2; border: 0; color: #fff;
  background: linear-gradient(150deg, var(--red) 0%, #9d1a05 100%); }
.gl-promo.is-wide .gl-promo-val { color: #fff; }
.gl-promo.is-wide .gl-promo-text { color: rgba(255,255,255,.92); }
.gl-promo.is-wide .gl-promo-till { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.25); }
.gl-promo.is-wide .gl-promo-till a { color: #fff; text-decoration: underline; }

@media (max-width: 1000px) { .gl-promos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .gl-promos { grid-template-columns: 1fr; }
  .gl-promo.is-wide { grid-column: auto; }
}

/* Карточка-ссылка: у акции со своей страницей кликается вся карточка целиком */
.gl-promo.is-link { text-decoration: none; color: inherit; transition: border-color .15s ease; }
/* Правило is-link идёт позже и его color: inherit перебивал белый цвет широкой
   карточки — заголовок на красном фоне становился чёрным */
.gl-promo.is-wide.is-link { color: #fff; }
.gl-promo.is-link:hover { border-color: var(--red); }
.gl-promo.is-wide.is-link:hover { border-color: transparent; box-shadow: 0 14px 30px -20px rgba(16,22,28,.6); }
.gl-promo-go { color: var(--red-ink); font-weight: 600; }
.gl-promo.is-wide .gl-promo-go { color: #fff; }

/* ═══ СТРАНИЦА АКЦИИ ═══
   Раскладку двух колонок, якорную полосу и белые секции даёт gl-office —
   ровно те же блоки, что на странице пункта приёма. Своего здесь только
   баннер, галерея и мелочи, которых у офиса нет. */

/* Баннер не растягиваем сверх натурального размера: обложки со старого
   сайта бывают 426 px шириной, и на всю колонку они мылятся */
.gl-pbanner { width: fit-content; max-width: 100%; border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden; background: #fff; }
.gl-pbanner img { display: block; width: auto; max-width: 100%; height: auto; }

.gl-plead { font-size: var(--fs-md); line-height: 1.65; margin: 0; }

/* Галерея — сетка миниатюр с подписями. Кадрировать нельзя: в галерее акций
   лежат бланки и схемы, у которых обрезанный край — потерянные данные. */
.gl-pgal { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.gl-pgal figure { margin: 0; }
.gl-pgal a { display: block; border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden; background: #fff; }
.gl-pgal a:hover { border-color: var(--red); }
.gl-pgal img { display: block; width: 100%; height: 190px; object-fit: contain;
  background: #fff; padding: 6px; }
.gl-pgal figcaption { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; margin-top: 7px; }

/* Разделы акции набираются тем же кеглем, что разделы офиса */
.gl-promo-one .gl-osec > h2 { font-size: var(--fs-lg); margin: 0 0 14px; }
.gl-promo-one .promo-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.gl-promo-one .promo-list li { position: relative; padding-left: 26px; line-height: var(--lh-read); }
.gl-promo-one .promo-list li::before { content: ''; position: absolute; left: 0; top: 10px;
  width: 12px; height: 2px; background: var(--red); }
.gl-promo-one .promo-steps { list-style: none; counter-reset: шаг; margin: 0 0 12px; padding: 0;
  display: grid; gap: 11px; }
.gl-promo-one .promo-steps li { counter-increment: шаг; position: relative; padding-left: 38px;
  line-height: var(--lh-read); }
.gl-promo-one .promo-steps li::before { content: counter(шаг); position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--display); font-size: var(--fs-md); color: #fff;
  background: linear-gradient(150deg, var(--red), var(--primary-dark)); }
.gl-promo-one .promo-fine { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-ui); }
.gl-card-ask { font-family: 'Montserrat', sans-serif !important; font-size: var(--fs-sm) !important;
  color: var(--muted); }

.gl-one-more { border-top: 1px solid var(--border); padding-top: 24px; margin: 30px 0 34px; }

/* ═══ ПОДГОТОВКА К АНАЛИЗАМ ═══
   Раздел собран из статей-правил: у каждой секции свой биоматериал, и по
   якорной полосе человек попадает сразу в свой случай. */
.gl-prep-lead { font-size: var(--fs-md); line-height: var(--lh-read); }
.gl-prep-lead p:last-child { margin-bottom: 0; }
/* Перечень видов исследований — служебная строка под заголовком: она объясняет,
   что попадает в этот биоматериал, но спорить с самим текстом не должна */
.gl-prep-kinds { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
.gl-prep-body { font-size: var(--fs-sm); line-height: var(--lh-read); }
.gl-prep-body p { margin: 0 0 10px; }
.gl-prep-body ul, .gl-prep-body ol { margin: 0 0 12px; padding-left: 20px; }
.gl-prep-body li { margin-bottom: 6px; }
.gl-prep-body h3, .gl-prep-body h4 { font-size: var(--fs-md); margin: 18px 0 8px; }
.gl-prep-body > :last-child { margin-bottom: 0; }
.gl-prep-body table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: var(--fs-sm); }
.gl-prep-body td, .gl-prep-body th { border: 1px solid var(--border); padding: 8px 10px;
  text-align: left; vertical-align: top; }

/* На телефоне карточка с кнопками поднимается под шапку: у офиса внизу карта —
   её ищут после текста, — а у акции там кнопка, до которой иначе нужно
   пролистать всю страницу */
@media (max-width: 900px) {
  .gl-promo-one .office-layout { display: flex; flex-direction: column; }
  .gl-promo-one .ocard { order: -1; }
}
@media (max-width: 600px) {
  .gl-pgal { grid-template-columns: 1fr 1fr; gap: 9px; }
  .gl-pgal img { height: 140px; }
}

/* ═══ ВРАЧИ ПО МАКЕТУ ═══ */
.gl-doc-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px;
  margin: 22px 0 16px; }
.gl-doc-empty { margin: 0 0 16px; color: var(--muted); }
.gl-docs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  margin-bottom: 36px; }
.gl-doc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden; }
.gl-doc-card[hidden] { display: none; }
.gl-doc-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: linear-gradient(150deg, #dfe8ee, #b9cbd7); display: grid; place-items: center; }
/* Портретные снимки выше кадра: без absolute картинка распирала карточку
   и накрывала имя врача */
.gl-doc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center top; }
.gl-doc-initials { font-family: var(--display); font-weight: 400; font-size: var(--fs-3xl); color: rgba(23,61,86,.35); }
.gl-doc-photo i { position: absolute; left: 10px; bottom: 9px; font-style: normal; font-size: var(--fs-xs);
  background: rgba(255,255,255,.92); border-radius: 999px; padding: 4px 10px; color: var(--text); }
.gl-doc-body { display: flex; flex-direction: column; gap: 6px; padding: 13px 15px 15px; flex: 1; }
.gl-doc-body b { font-size: var(--fs-sm); line-height: 1.25; }
/* Имя врача — обычным цветом текста: красная в карточке только специальность */
.gl-doc-body b a { color: var(--text) !important; }
.gl-doc-body b a:hover { color: var(--red-ink) !important; }
.gl-doc-spec { font-size: var(--fs-xs); color: var(--red-ink); line-height: 1.35; }
.gl-doc-meta { font-size: var(--fs-xs); color: var(--muted); line-height: 1.4; }
.gl-doc-go { margin-top: auto; padding-top: 12px; }
.gl-doc-go { display: block; }
.gl-doc-card .gl-doc-go { text-align: center; }
.gl-doc-card a.gl-doc-go { margin-top: auto; background: var(--red); color: #fff !important;
  border-radius: 10px; padding: 9px 12px; font-size: var(--fs-sm); font-weight: 600; }
.gl-doc-card a.gl-doc-go:hover { background: var(--primary-dark); text-decoration: none; }

@media (max-width: 1000px) {
  .gl-doc-filters { grid-template-columns: 1fr 1fr; }
  .gl-docs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .gl-doc-filters { grid-template-columns: 1fr; }
  .gl-docs-grid { grid-template-columns: 1fr; }
  /* Карточка занимает всю ширину экрана, и плоский кадр 16:9 срезал
     подбородки: снимки портретные, лицо занимает верхнюю половину.
     Держим ту же пропорцию, что и в остальных карточках врачей */
  .gl-docs-grid .gl-doc-photo { aspect-ratio: 4 / 3; }
}

/* ═══ ПРОГРАММА ЛОЯЛЬНОСТИ ПО МАКЕТУ ═══ */
.gl-loy-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: start;
  margin: 24px 0 18px; }
.gl-loy-hero { background: linear-gradient(160deg, var(--red), #7d1305); color: #fff;
  border-radius: 20px; padding: 28px; }
.gl-loy-big { font-family: var(--display); font-weight: 400; font-size: var(--fs-3xl); line-height: .85;
  display: block; }
.gl-loy-hero p { color: rgba(255,255,255,.92); font-size: var(--fs-md); max-width: 42ch; margin: 14px 0 0; }
.gl-loy-hero .btn { margin-top: 22px; background: #fff; color: var(--red); border-radius: 999px; }
.gl-loy-hero .btn:hover { background: rgba(255,255,255,.88); }
.gl-loy-steps { display: grid; gap: 10px; }
.gl-loy-step { display: flex; gap: 13px; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; padding: 14px 16px; }
.gl-loy-step i { font-style: normal; font-family: var(--display); font-weight: 400; font-size: var(--fs-lg);
  line-height: 1; color: var(--red); }
.gl-loy-step b { display: block; font-size: var(--fs-sm); margin-bottom: 3px; }
.gl-loy-step span { font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
.gl-loy-rules { background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 20px 24px; margin-bottom: 30px; }
.gl-loy-rules h2 { font-size: var(--fs-lg); margin: 0 0 12px; }
.gl-loy-rules ul { margin: 0; padding-left: 20px; display: grid; gap: 8px;
  font-size: var(--fs-sm); color: var(--muted); }
.gl-loy-text { background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 22px 26px 24px; margin-bottom: 34px; }
.gl-loy-text h2 { font-size: var(--fs-lg); margin: 0 0 12px; }
.gl-loy-text p { margin: 0 0 10px; font-size: var(--fs-sm); line-height: var(--lh-read); max-width: 74ch; }
.gl-loy-text > :last-child { margin-bottom: 0; }
@media (max-width: 700px) { .gl-loy-text { padding: 17px 18px 18px; border-radius: 15px; } }
@media (max-width: 900px) { .gl-loy-top { grid-template-columns: 1fr; } }

/* ═══ О КОМПАНИИ ═══
   Раскладка под длинный текст: слева статья в читаемой колонке, справа липкая
   панель. Текст приходит из админки, поэтому типографику задаём тегам, а не
   классам — редактор пишет обычные заголовки, абзацы и списки. */
.gl-ab-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin: 24px 0 18px; }
.gl-ab-fact { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 18px 20px; }
.gl-ab-fact b { display: block; font-family: var(--display); font-weight: 400; font-size: var(--fs-2xl);
  line-height: .9; margin-bottom: 8px; }
.gl-ab-fact span { font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }

.gl-ab-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px;
  align-items: start; margin-bottom: 40px; }

.gl-ab-text { background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 26px 32px 30px; }
.gl-ab-text > :first-child { margin-top: 0; }
.gl-ab-text > :last-child { margin-bottom: 0; }
.gl-ab-text h2 { font-size: var(--fs-lg); line-height: 1.15; margin: 30px 0 12px; max-width: 24ch; }
.gl-ab-text h2:first-child { margin-top: 0; }
.gl-ab-text p { margin: 0 0 14px; font-size: var(--fs-md); line-height: var(--lh-read); color: var(--text);
  max-width: 70ch; }
.gl-ab-text ul { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 8px;
  max-width: 70ch; }
.gl-ab-text li { position: relative; padding-left: 26px; font-size: var(--fs-sm); line-height: var(--lh-read);
  color: var(--muted); }
/* Маркер — фирменная точка вместо серого кружка браузера */
.gl-ab-text li::before { content: ""; position: absolute; left: 8px; top: .6em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--red); }

.gl-ab-side { position: sticky; top: calc(var(--gl-head) + 12px); display: grid; gap: 14px; }
.gl-ab-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 20px 22px; }
.gl-ab-card h2 { font-size: var(--fs-md); margin: 0 0 10px; }
.gl-ab-card p { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-read); }
.gl-ab-card > :last-child { margin-bottom: 0; }
.gl-ab-brands { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.gl-ab-brands span { border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px;
  font-size: var(--fs-xs); }
.gl-ab-note { font-size: var(--fs-sm); }
.gl-ab-lic { display: flex; gap: 10px; align-items: flex-start; background: var(--tint);
  border-radius: 14px; padding: 12px 14px; font-size: var(--fs-sm); color: var(--text);
  line-height: var(--lh-ui); margin: 4px 0 12px; }
.gl-ab-lic svg { width: 19px; height: 19px; flex: none; color: var(--red); margin-top: 1px; }
.gl-ab-links { display: grid; gap: 0; }
.gl-ab-links a { display: block; padding: 11px 0; font-size: var(--fs-sm); font-weight: 600;
  border-top: 1px solid var(--border); }
.gl-ab-links a:first-of-type { border-top: 0; }

@media (max-width: 1000px) {
  .gl-ab-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-ab-layout { grid-template-columns: 1fr; }
  .gl-ab-side { position: static; }
}
@media (max-width: 600px) {
  .gl-ab-facts { grid-template-columns: 1fr; }
  .gl-ab-text { padding: 20px 18px 22px; border-radius: 15px; }
}

/* ═══ СТАТЬИ О ЗДОРОВЬЕ ПО МАКЕТУ ═══ */
.gl-art-find { margin: 24px 0 14px; }
.gl-art-tabs { margin-bottom: 16px; }
.gl-art-empty { margin: 0 0 16px; color: var(--muted); }
.gl-arts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin-bottom: 36px; }
.gl-art { display: flex; flex-direction: column; gap: 8px; background: #fff;
  border: 1px solid var(--border); border-radius: 18px; padding: 17px 19px 16px;
  color: var(--text) !important; }
.gl-art[hidden] { display: none; }
.gl-art:hover { border-color: rgba(254,51,15,.45); text-decoration: none; }
.gl-art-rub { font-size: var(--fs-xs); letter-spacing: .09em; text-transform: uppercase;
  color: var(--red); font-weight: 600; }
.gl-art b { font-size: var(--fs-md); line-height: 1.3; }
.gl-art-sum { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.gl-art-more { margin-top: auto; padding-top: 8px; font-size: var(--fs-sm); color: var(--red-ink);
  font-weight: 600; }
@media (max-width: 1000px) { .gl-arts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .gl-arts { grid-template-columns: 1fr; } }

/* ═══ ОБОРУДОВАНИЕ ═══
   Карточка прибора: фото сверху крупно, под ним название и описание.
   Фото приходят разного размера и с белым фоном — вписываем по contain
   на светлой подложке, чтобы ряд выглядел ровным. */
.gl-equip-intro { max-width: 76ch; margin: 24px 0 22px; }
.gl-equip-intro p { margin: 0 0 12px; font-size: var(--fs-md); line-height: var(--lh-read); color: var(--muted); }
.gl-equip-group + .gl-equip-group { margin-top: 30px; }
.gl-equip-group h2 { font-size: var(--fs-lg); margin: 0 0 14px; }
.gl-equips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  margin-bottom: 38px; }
.gl-equip { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden; }
.gl-equip-photo { aspect-ratio: 4 / 3; background: var(--tint); display: grid; place-items: center;
  padding: 14px; }
.gl-equip-photo img { width: 100%; height: 100%; object-fit: contain; }
.gl-equip-photo svg { width: 64px; height: 64px; color: rgba(23,61,86,.3); }
.gl-equip-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 7px; }
.gl-equip-body h3 { font-size: var(--fs-md); margin: 0; line-height: 1.25; }
.gl-equip-body p { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-read); }
@media (max-width: 1000px) { .gl-equips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .gl-equips { grid-template-columns: 1fr; } }

/* Ссылка из блока франшизы на главной в сам раздел */
/* Тем же белым, что лид и список: проверка типографики требует
   на цветной подложке один оттенок белого на весь описательный текст */
.franchise-more { margin: 18px 0 0; color: rgba(255,255,255,.92); }
.franchise-more a { color: inherit !important; font-weight: 600; font-size: var(--fs-sm);
  border-bottom: 1px solid rgba(255,255,255,.5); padding-bottom: 2px; }
.franchise-more a:hover { border-bottom-color: #fff; text-decoration: none; }

/* ═══ ФРАНШИЗА ПО МАКЕТУ ═══ */
.gl-fr-hero { position: relative; overflow: hidden; isolation: isolate; color: #fff;
  border-radius: 22px; padding: 34px 36px; margin: 24px 0 18px;
  background: linear-gradient(160deg, var(--red), #7d1305); }
.gl-fr-hero > * { position: relative; z-index: 1; }
/* Два слоя размытых пятен идут вразнобой — красный переливается синим */
.gl-fr-hero::before, .gl-fr-hero::after { content: ""; position: absolute; inset: -25%; z-index: 0; }
.gl-fr-hero::before {
  background: radial-gradient(46% 52% at 18% 28%, rgba(23,61,86,.85) 0%, rgba(23,61,86,0) 62%),
              radial-gradient(40% 46% at 78% 72%, rgba(23,61,86,.7) 0%, rgba(23,61,86,0) 60%);
  animation: gl-fr-flow 19s ease-in-out infinite; }
.gl-fr-hero::after {
  background: radial-gradient(38% 44% at 82% 18%, rgba(255,106,61,.6) 0%, rgba(255,106,61,0) 60%),
              radial-gradient(44% 48% at 12% 84%, rgba(120,20,5,.75) 0%, rgba(120,20,5,0) 62%);
  animation: gl-fr-flow 26s ease-in-out -8s infinite reverse; }
@keyframes gl-fr-flow {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(6%, -4%, 0) scale(1.08); }
  66% { transform: translate3d(-5%, 5%, 0) scale(1.04); }
}
.gl-fr-hero h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0; max-width: 22ch; }
.gl-fr-hero p { color: rgba(255,255,255,.92); font-size: var(--fs-md); max-width: 62ch; margin: 14px 0 0; }
.gl-fr-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.gl-fr-num { border: 1px solid rgba(255,255,255,.28); border-radius: 16px; padding: 18px 20px; }
.gl-fr-num b { font-family: var(--display); font-weight: 400; font-size: var(--fs-2xl); line-height: .9; display: block; }
.gl-fr-num i { font-style: normal; display: block; font-size: var(--fs-sm); font-weight: 600; margin: 8px 0 4px; }
.gl-fr-num span { font-size: var(--fs-xs); color: rgba(255,255,255,.82); line-height: 1.45; }
.gl-fr-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.gl-fr-hero .btn { background: #fff; color: var(--red); border-radius: 999px; }
.gl-fr-ghost { background: rgba(255,255,255,.1) !important; color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.8); }

.gl-fr-sec { margin-bottom: 34px; }
.gl-fr-sec > h2 { font-size: var(--fs-lg); margin: 0 0 14px; }
.gl-fr-sub { font-size: var(--fs-lg); margin: 26px 0 12px; }
.gl-fr-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gl-fr-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gl-fr-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 18px 20px; }
.gl-fr-card b { display: block; font-size: var(--fs-md); margin-bottom: 6px; }
.gl-fr-card span { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }
.gl-fr-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px;
  background: rgba(254,51,15,.08); color: var(--red-ink); margin-bottom: 11px; }
.gl-fr-ic svg { width: 21px; height: 21px; }
.gl-fr-card:hover .gl-fr-ic { background: rgba(254,51,15,.14); }
/* Появление ряда, когда он доехал до экрана */
.gl-fr-cards.gl-fr-anim .gl-fr-card { opacity: 0; transform: translateY(14px); }
.gl-fr-cards.seen .gl-fr-card { animation: gl-fr-in .42s cubic-bezier(0.23,1,0.32,1) both;
  animation-delay: calc(var(--i, 0) * 70ms); }
.gl-fr-cards.seen .gl-fr-ic { animation: gl-fr-ic-in .5s cubic-bezier(0.23,1,0.32,1) both;
  animation-delay: calc(var(--i, 0) * 70ms + 120ms); }
@keyframes gl-fr-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes gl-fr-ic-in { from { opacity: 0; transform: scale(.7) rotate(-8deg); } to { opacity: 1; transform: none; } }

.gl-fr-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gl-fr-money div { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 20px 22px; }
.gl-fr-money b { display: block; font-family: var(--display); font-weight: 400; font-size: var(--fs-2xl);
  line-height: .9; color: var(--red); }
.gl-fr-money span { display: block; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; margin-top: 8px; }

.gl-fr-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden; font-size: var(--fs-sm); }
.gl-fr-table th { text-align: left; padding: 13px 18px; font-size: var(--fs-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--border); }
.gl-fr-table th + th, .gl-fr-table td + td { text-align: center; width: 130px; }
.gl-fr-table td { padding: 12px 18px; border-bottom: 1px solid var(--border); }
.gl-fr-table tr:last-child td { border-bottom: 0; }
.gl-fr-table .yes { color: var(--red); font-weight: 700; }
.gl-fr-table .no { color: #c3ccd4; }

.gl-fr-form { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; align-items: start; }
.gl-fr-fields-wrap { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 22px 24px; }
.gl-fr-hint { margin: 14px 0 0; font-size: var(--fs-sm); color: var(--muted); }
/* Общее правило .form input задаёт полям ширину 100% — без явного размера
   галочка согласия растягивалась на всю строку, а текст сжимался в столбик */
.gl-fr-form .visit-consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 18px;
  font-size: var(--fs-sm); line-height: 1.45; }
.gl-fr-form .visit-consent input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px;
  margin: 2px 0 0; padding: 0; }
.gl-fr-form .visit-consent span { flex: 1; color: var(--muted); }
.gl-fr-side { display: grid; gap: 14px; }
.gl-fr-steps { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 20px 22px; }
.gl-fr-steps h3 { margin: 0 0 12px; font-size: var(--fs-md); }
.gl-fr-step { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.gl-fr-step:first-of-type { border-top: 0; }
.gl-fr-step i { font-style: normal; font-family: var(--display); font-weight: 400; font-size: var(--fs-lg);
  line-height: 1; color: var(--red); }
.gl-fr-step b { display: block; font-size: var(--fs-sm); }
.gl-fr-step span { display: block; font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; margin-top: 2px; }
.gl-fr-contact { background: linear-gradient(150deg, #173d56, #0f2a3c); color: #fff;
  border-radius: 18px; padding: 20px 22px; }
.gl-fr-contact b { display: block; font-size: var(--fs-md); margin-bottom: 8px; }
.gl-fr-contact a { display: block; color: #fff !important; font-size: var(--fs-sm); margin-top: 6px; }
.gl-fr-contact span { display: block; margin-top: 10px; font-size: var(--fs-xs); color: rgba(255,255,255,.75); }

@media (prefers-reduced-motion: reduce) {
  .gl-fr-hero::before, .gl-fr-hero::after { animation: none; }
  .gl-fr-cards.gl-fr-anim .gl-fr-card, .gl-fr-cards.seen .gl-fr-card,
  .gl-fr-cards.seen .gl-fr-ic { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 1000px) {
  .gl-fr-cards, .gl-fr-cards-3, .gl-fr-money, .gl-fr-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gl-fr-form { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .gl-fr-hero { padding: 24px 20px; border-radius: 18px; }
  .gl-fr-cards, .gl-fr-cards-3, .gl-fr-money, .gl-fr-nums { grid-template-columns: 1fr; }
  .gl-fr-table th + th, .gl-fr-table td + td { width: 74px; }
  .gl-fr-table th, .gl-fr-table td { padding: 11px 12px; }
}

/* Галерея офиса: снимки разной пропорции, поэтому кадрируем по центру */
.gl-ophotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gl-ophoto { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  background: var(--tint); }
.gl-ophoto img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.gl-ophoto:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .gl-ophotos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .gl-ophotos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ═══ ОТЗЫВЫ ПО МАКЕТУ ═══ */
.gl-rv-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin: 24px 0 16px; }
.gl-rv-stat { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 18px 20px; }
.gl-rv-stat b { display: block; font-family: var(--display); font-weight: 400; font-size: var(--fs-2xl);
  line-height: .9; }
.gl-rv-stat span { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 8px; line-height: 1.4; }
.gl-rv-tabs { margin-bottom: 16px; }
/* Карточки разной высоты: колоночная раскладка кладёт их плотно, без «лесенки» */
.gl-rv-grid { columns: 3; column-gap: 14px; margin-bottom: 22px; }
.gl-rv-card { break-inside: avoid; background: #fff; border: 1px solid var(--border);
  border-radius: 18px; padding: 18px 20px; margin-bottom: 14px; }
.gl-rv-card[hidden] { display: none; }
.gl-rv-stars { color: var(--red); font-size: var(--fs-sm); letter-spacing: 2px; }
.gl-rv-card b { display: block; font-size: var(--fs-md); margin: 8px 0 6px; line-height: 1.3; }
.gl-rv-card p { margin: 0; font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-read); }
/* Подпись автора: кружок с инициалами, имя и кто он. Роль важна — отзыв врача
   весит иначе, чем отзыв пациента, и её видно раньше, чем дочитан текст */
.gl-rv-who { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.gl-rv-ava { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid;
  place-items: center; font-family: var(--display); font-size: var(--fs-md); color: #fff;
  background: linear-gradient(150deg, var(--primary), var(--primary-dark)); }
.gl-rv-name { display: grid; gap: 1px; min-width: 0; }
.gl-rv-name b { display: block; font-size: var(--fs-sm); margin: 0; line-height: 1.25; }
.gl-rv-name i { font-style: normal; font-size: var(--fs-xs); color: var(--muted); line-height: 1.3; }

.gl-rv-meta { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--faint); }
.gl-rv-meta i { font-style: normal; background: rgba(254,51,15,.08); color: var(--red-ink);
  border-radius: 999px; padding: 4px 10px; margin-right: 4px; }
.gl-rv-cta { display: flex; gap: 16px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; background: linear-gradient(150deg, #173d56, #0f2a3c); color: #fff;
  border-radius: 18px; padding: 22px 26px; margin-bottom: 20px; }
.gl-rv-cta b { display: block; font-size: var(--fs-md); }
.gl-rv-cta span { font-size: var(--fs-sm); color: rgba(255,255,255,.78); }
.gl-rv-acts { display: flex; gap: 12px; flex-wrap: wrap; }
.gl-rv-cta .btn { background: #fff; color: var(--red); border-radius: 999px; }
.gl-rv-ghost { background: rgba(255,255,255,.1) !important; color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.7); }
.gl-rv-form { background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 22px 24px; margin-bottom: 34px; }
.gl-rv-form[hidden] { display: none; }
.gl-rv-hint { margin: 14px 0 16px; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 1000px) { .gl-rv-grid { columns: 2; } .gl-rv-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {
  .gl-rv-grid { columns: 1; }
  .gl-rv-top { grid-template-columns: 1fr; }
  .gl-rv-cta { padding: 18px 18px; }
}

/* ═══ КАРТОЧКА ВРАЧА ПО МАКЕТУ ═══ */
.gl-dr-hero { display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; gap: 20px;
  align-items: start; margin: 24px 0 34px; }
.gl-dr-photo { border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 4;
  background: linear-gradient(150deg, #dfe8ee, #b9cbd7); display: grid; place-items: center; }
.gl-dr-photo img { width: 100%; height: 100%; object-fit: cover; }
.gl-dr-photo span { font-family: var(--display); font-weight: 400; font-size: var(--fs-3xl);
  color: rgba(23,61,86,.35); }
.gl-dr-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.gl-dr-tags span { background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px; font-size: var(--fs-sm); }
.gl-dr-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  margin-bottom: 14px; }
.gl-dr-fact { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px 15px; }
.gl-dr-fact i { font-style: normal; display: block; font-size: var(--fs-xs); letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); }
.gl-dr-fact b { display: block; font-size: var(--fs-sm); margin-top: 4px; }
.gl-dr-block { background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 18px 22px; margin-top: 14px; }
.gl-dr-block h2 { font-size: var(--fs-md); margin: 0 0 10px; }
/* Описание приходит из МИС готовой разметкой — типографику задаём тегам */
.gl-dr-about ul { margin: 0 0 10px; padding-left: 20px; display: grid; gap: 6px; }
.gl-dr-about li { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-read); }
.gl-dr-about p { margin: 0 0 10px; font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-read); }
.gl-dr-about > :last-child { margin-bottom: 0; }
.gl-dr-offices { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: var(--fs-sm);
  color: var(--muted); line-height: 1.5; }
.gl-dr-side { display: grid; gap: 14px; position: sticky; top: calc(var(--gl-head) + 12px); }
.gl-dr-book { background: linear-gradient(150deg, var(--red), #9d1a05); color: #fff;
  border-radius: 18px; padding: 20px 22px; }
.gl-dr-book b { display: block; font-size: var(--fs-md); margin-bottom: 6px; }
.gl-dr-book span { display: block; font-size: var(--fs-sm); color: rgba(255,255,255,.85); line-height: 1.5; }
.gl-dr-book .btn { display: block; text-align: center; margin-top: 16px; background: #fff;
  color: var(--red); border-radius: 999px; }
.gl-dr-price { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 18px 20px; }
.gl-dr-price h2 { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 10px; }
.gl-dr-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0;
  border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.gl-dr-row:first-of-type { border-top: 0; }
.gl-dr-row b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.gl-dr-more a { font-weight: 600; font-size: var(--fs-sm); }
.gl-dr-others { margin-bottom: 36px; }
.gl-dr-others h2 { font-size: var(--fs-lg); margin: 0 0 14px; }

@media (max-width: 1000px) {
  .gl-dr-hero { grid-template-columns: 200px minmax(0, 1fr); }
  .gl-dr-side { grid-column: 1 / -1; position: static; }
}
@media (max-width: 620px) {
  .gl-dr-hero { grid-template-columns: 1fr; }
  .gl-dr-photo { aspect-ratio: 4 / 3; }
  .gl-dr-facts { grid-template-columns: 1fr; }
}

/* ═══ ПЕРЕКЛЮЧАТЕЛЬ «ЗАПИСЬ / ВРАЧ» ═══
   Стоит в строке с заголовком раздела: два пути к одному действию. */
.gl-head-row { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 22px; flex-wrap: wrap; }
.gl-head-row > div { flex: 1 1 380px; min-width: 0; }
/* Подзаголовок не должен распирать строку до переноса переключателя */
.gl-head-row .gl-page-sub { max-width: 62ch; }
.gl-head-row .gl-page-sub { margin-bottom: 0; }
.gl-sw2 { display: inline-flex; flex: none; padding: 4px; border-radius: 999px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); }
.gl-sw2 a, .gl-page-head .gl-sw2 a { display: block; padding: 9px 22px; border-radius: 999px;
  font-size: var(--fs-sm); font-weight: 600; color: rgba(255,255,255,.85) !important; white-space: nowrap; }
.gl-sw2 a:hover { color: #fff !important; text-decoration: none; }
.gl-sw2 a.is-on, .gl-page-head .gl-sw2 a.is-on { background: #fff; color: var(--red) !important; }
@media (max-width: 700px) {
  .gl-head-row { gap: 14px; }
  .gl-sw2 { width: 100%; }
  .gl-sw2 a { flex: 1; text-align: center; padding: 9px 12px; }
}


/* На телефоне тап-цели не ниже 44px: 38px — уже промахи по кнопке */
@media (max-width: 700px) {
  .gl-sw2 a { padding: 12px 12px; }
  .gl-doc-card a.gl-doc-go { padding: 12px; }
  .gl-view-chip { padding: 10px 16px; }
  .bk-toolbar .btn-mini, .btn-mini { padding: 10px 12px; }
  /* Полосу не растим, а цель расширяем: отрицательный внешний отступ гасит
     прибавку по высоте, палец попадает по 36px вместо 31 */
  .gl-util-call { padding: 9px 6px; margin: -9px -6px; }
}


/* ─── Избранное: подгонка под карточки каталога ─── */
/* Место под сердечко: без отступа длинное название заезжает под кнопку */
.gl-card.has-fav .gl-card-name { padding-right: 32px; }
.fav-card { border-radius: 18px; }
.fav-card:hover { border-color: rgba(254, 51, 15, .4); box-shadow: 0 14px 30px -20px rgba(16, 22, 28, .35); }
.fav-price b { font-family: var(--display); font-weight: 400; font-size: var(--fs-xl); letter-spacing: .01em; }
.fav-price .cur { font-family: 'Montserrat', sans-serif; }
.fav-buy { border-color: rgba(254, 51, 15, .45); background: rgba(254, 51, 15, .08); color: var(--red-ink); }
.fav-buy:hover { background: var(--red); border-color: var(--red); color: #fff; }
.fav-heart.is-on button { border-color: rgba(254, 51, 15, .35); background: rgba(254, 51, 15, .1); }
.fav-empty { border-radius: 18px; }
.lk-tab i { font-style: normal; font-size: var(--fs-xs); font-weight: 700; color: var(--muted);
  background: var(--border); border-radius: 999px; padding: 2px 7px; margin-left: 4px; }


/* ─── Кабинет с лояльностью: фирменный градиент и стекло ─── */
/* Красная зона кабинета — во всю ширину окна и под шапкой, как первый экран
   главной: шапка лежит поверх без своего фона, градиент проходит под ней
   непрерывно. Поля по бокам повторяют контейнер, поэтому контент остаётся
   на общей сетке. */
.lk-loyalty .lk-top {
  position: relative; overflow: hidden; border-radius: 0;
  margin: calc(var(--gl-air) * -1) calc(50% - 50vw) 30px;
  padding: calc(var(--gl-head) + 30px) calc(50vw - 50%) 40px;
  background: radial-gradient(85% 70% at 12% -5%, #ff6a3d 0%, transparent 55%),
              radial-gradient(70% 60% at 95% 10%, #c22208 0%, transparent 60%),
              linear-gradient(165deg, #fe330f 0%, #7d1305 100%);
}
/* Те же размытые пятна, что на главной: тёплое справа сверху, синее у левого
   края контента — синий уводит красный от «пожарного» оттенка */
.lk-loyalty .lk-top::before,
.lk-loyalty .lk-top::after { content: ""; position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0; }
.lk-loyalty .lk-top::before { width: 420px; height: 420px; top: -190px; right: 6%;
  background: radial-gradient(circle, rgba(255,138,90,.55) 0%, rgba(255,138,90,0) 70%); }
.lk-loyalty .lk-top::after { width: 360px; height: 360px; bottom: -180px; left: calc(var(--gl-edge) - 120px);
  background: radial-gradient(circle, rgba(23,61,86,.65) 0%, rgba(23,61,86,0) 70%); }
.lk-loyalty .lk-top > * { position: relative; z-index: 1; }
/* clip, а не hidden: overflow-x: hidden на body делает его скролл-контейнером,
   и страница перестаёт прокручиваться скриптом — переход к уровням не работал */
.lk-loyalty { overflow-x: clip; }
.lk-glass-row > div { backdrop-filter: blur(26px) saturate(115%);
  -webkit-backdrop-filter: blur(26px) saturate(115%);
  box-shadow: 0 18px 40px -22px rgba(16, 22, 28, .55), inset 0 1px 0 rgba(255, 255, 255, .35); }
.lk-name, .lk-glass-row b, .lvd-name, .lvd-sum, .lvd-count {
  font-family: var(--display); font-weight: 400; letter-spacing: .01em; }
.lk-name, .lvd-name { text-transform: none; }   /* «Доктор Хаус» — имя собственное */
/* Имя пациента — тем же кеглем, что заголовок баннера главной */
.lk-loyalty .lk-name { font-size: var(--gl-display-xl); line-height: .96; }
.lk-status { background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3); }
.good, .market-orders li, .lk-soon { border-radius: 18px; }

.lvl-fill { background: linear-gradient(90deg, var(--red), #ff6a3d); }

/* Лента уровней: тёплая подсветка сверху, как в макете */
.lvd { background: radial-gradient(70% 70% at 50% 0%, #ffe3d9 0%, rgba(255, 227, 217, 0) 62%),
       linear-gradient(160deg, #f7f8fa 0%, #e9edf1 100%); }
.lvd-fill { background: linear-gradient(90deg, var(--red), #ff6a3d); }

/* Переход «в уровни» по якорю: шапка фиксированная, поэтому блоку нужен
   собственный отступ прокрутки — иначе заголовок уезжает под неё */
.lvl-pane, .lk-main { scroll-margin-top: calc(var(--gl-head) + 18px); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Анкета кабинета повторяет графы предзаказа один в один */
.lk-fld > span { color: var(--faint); }
.lk-fld:focus-within { border-color: var(--red); box-shadow: 0 0 0 3px rgba(254, 51, 15, .12); }
.lk-fld select { background-position: right 0 center; padding-right: 20px;
  background-repeat: no-repeat; }


/* ─── Кабинет: меню стеклом, лента уровней во всю ширину (макет) ───────── */
:root {
  --lk-menu: 226px;                          /* ширина стеклянной панели меню */
  --lk-gap: 56px;                            /* зазор между меню и колонкой контента */
  --lk-edge: var(--gl-edge);                 /* правое поле — как у контента сайта */
  --lk-edge-l: calc(var(--gl-edge) * .8);    /* слева поле уже: панель и так тяжёлая */
}

/* Стекло: высокая доля белого, сильное размытие и светлая рамка — сквозь него
   видно размытые соседние уровни, но текст остаётся читаемым */
.lk-loyalty .lk-menu {
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 22px 46px -30px rgba(16, 22, 28, .5), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.lk-loyalty .lk-menu a { border-radius: 12px; }
.lk-loyalty .lk-menu a:hover { background: rgba(255, 255, 255, .55); }
.lk-loyalty .lk-menu a.on { background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 22px -18px rgba(16, 22, 28, .6); }
.lk-loyalty .lk-menu a i { background: rgba(16, 22, 28, .08); }
.lk-loyalty .lk-exit { border-radius: 12px; }
.lk-loyalty .lk-exit:hover { background: rgba(255, 255, 255, .55); }

/* Фон ленты — тёплая подсветка сверху, как в макете */
.lvd { background:
  radial-gradient(56% 70% at 50% 0%, #ffe3d9 0%, rgba(255, 227, 217, 0) 60%),
  linear-gradient(160deg, #f7f8fa 0%, #e8ecf0 100%); }

@media (max-width: 1000px) {
  /* Тот же фон, что у ленты: на телефоне он поднят до красной зоны */
  .lk-loyalty.lvl-screen .lk-layout { background:
    radial-gradient(56% 70% at 50% 0%, #ffe3d9 0%, rgba(255, 227, 217, 0) 60%),
    linear-gradient(160deg, #f7f8fa 0%, #e8ecf0 100%); }
}

/* ═══ ЛЕНДИНГ УСЛУГИ ═══
   Страница, которая объясняет группу услуг целиком: ЭКГ, сертификаты, SPERO.
   Своей вёрстки здесь минимум — шапка, блоки и полоса внизу; карточки услуг,
   якорная полоса и красная шапка берутся те же, что в каталоге. */
.gl-lnd-hero { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: center; }
.gl-lnd-hero-text { min-width: 0; }
.gl-lnd-hero .gl-page-sub { max-width: 62ch; }
.gl-lnd-art { justify-self: end; }

/* Плашки шапки: те же полупрозрачные пилюли, что «эйбрау» на главной */
.gl-lnd-facts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.gl-lnd-fact { font-size: var(--fs-xs); font-weight: 600; border-radius: 999px; padding: 7px 15px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32); }

.gl-lnd-sec { margin-top: 30px; }
.gl-lnd-sec > h2 { font-size: var(--fs-lg); margin: 0 0 14px; }
.gl-lnd-note { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--faint); }

/* Карточки услуг шире каталожных: здесь их 2–6, и в каждой есть описание */
.gl-lnd-cards { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
/* Описания услуг в прайсе разной длины: без ограничения одна карточка вырастает
   вдвое и ряд разъезжается. Четыре строки — столько же, сколько в макете */
.gl-lnd-card-text { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-read);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }

/* «С чем вы пришли»: красная черта слева отделяет ситуацию от услуги */
.gl-lnd-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.gl-lnd-case { background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: 14px; padding: 15px 17px; }
.gl-lnd-case b { display: block; font-size: var(--fs-md); margin-bottom: 6px; }
.gl-lnd-case span { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-read); }

/* Шаги нумерует шаблон: порядок задаётся полем «Порядок», а не переписыванием цифр */
.gl-lnd-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 14px; }
.gl-lnd-step { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 15px 17px; }
.gl-lnd-step i { display: block; font-style: normal; font-family: var(--display); font-size: var(--fs-xl);
  line-height: 1; color: var(--primary); margin-bottom: 7px; }
.gl-lnd-step b { display: block; font-size: var(--fs-sm); margin-bottom: 4px; }
.gl-lnd-step span { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-read); }

.gl-lnd-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.gl-lnd-list { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; }
.gl-lnd-list h3 { font-family: 'Montserrat', sans-serif; text-transform: none; font-weight: 600;
  font-size: var(--fs-md); line-height: 1.4; margin: 0 0 10px; }
.gl-lnd-list ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.gl-lnd-list li { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-read); }

.gl-lnd-tiles { display: flex; flex-wrap: wrap; gap: 9px; }
.gl-lnd-tile { background: #fff; border: 1px solid var(--border); border-radius: 11px;
  padding: 11px 15px; font-size: var(--fs-sm); font-weight: 500; }

/* Полоса внизу — вторым фирменным: красного на странице уже достаточно */
.gl-lnd-cta { margin-top: 30px; background: var(--accent); color: #fff; border-radius: 18px;
  padding: 22px 26px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.gl-lnd-cta b { display: block; font-family: var(--display); font-weight: 400; font-size: var(--fs-xl);
  line-height: 1.1; }
.gl-lnd-cta span { display: block; margin-top: 5px; font-size: var(--fs-sm);
  color: rgba(255,255,255,.86); max-width: 62ch; line-height: var(--lh-read); }
.gl-lnd-cta .btn { margin-left: auto; background: #fff; color: var(--red-ink); border-color: #fff; }
.gl-lnd-cta .btn:hover { background: rgba(255,255,255,.9); color: var(--red-ink); }

@media (max-width: 860px) {
  .gl-lnd-hero { grid-template-columns: 1fr; }
  /* Круг остаётся, но уступает место тексту: на телефоне первый экран короче */
  .gl-lnd-art { justify-self: start; max-width: 190px; margin-top: 6px; }
  .gl-lnd-cta .btn { margin-left: 0; }
}

/* ── Движение внутри рисунка лендинга ──────────────────────────────────
   Круг дышит сам (.gl-art-circle), здесь оживают элементы внутри SVG.
   Периоды не кратны друг другу, поэтому рисунок не повторяется. */

/* ЭКГ: линия прорисовывается слева направо, сердце бьётся в своём ритме */
.ln-ecg-line { stroke-dasharray: 260; stroke-dashoffset: 260;
  animation: ln-ecg-run 3.4s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes ln-ecg-run {
  0%   { stroke-dashoffset: 260; }
  55%  { stroke-dashoffset: 0; }
  85%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.ln-ecg-heart { transform-box: fill-box; transform-origin: 50% 50%;
  animation: ln-heartbeat 1.15s ease-in-out infinite; }
@keyframes ln-heartbeat { 0%, 62%, 100% { transform: scale(1); } 12% { transform: scale(1.14); }
                          28% { transform: scale(1.04); } 40% { transform: scale(1.1); } }

/* Сертификат: карта качается, по ней проходит блик, искры дрейфуют */
.ln-gift-card { transform-box: fill-box; transform-origin: 50% 50%;
  animation: ln-gift-tilt 6.5s var(--gl-soft) infinite; }
@keyframes ln-gift-tilt { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
.ln-gift-glare { animation: ln-glare 4.2s cubic-bezier(.4, 0, .2, 1) 1s infinite; }
@keyframes ln-glare { 0%, 62% { transform: translateX(-70px); opacity: 0; }
                      70% { opacity: .9; } 88%, 100% { transform: translateX(80px); opacity: 0; } }
.ln-gift-spark { animation: ln-spark 9s var(--gl-soft) infinite; }
.ln-gift-spark:nth-of-type(2) { animation-duration: 7.5s; animation-delay: .8s; }
.ln-gift-spark:nth-of-type(3) { animation-duration: 11s; animation-delay: .3s; }
@keyframes ln-spark { 0%, 100% { transform: translate(0, 0); opacity: .5; }
                      50% { transform: translate(-9px, -13px); opacity: 1; } }

/* Скрининг: десять направлений загораются по кругу, кольцо медленно вращается */
.ln-scr-ring { transform-box: fill-box; transform-origin: 50% 50%;
  animation: gl-spin 72s linear infinite; }
.ln-scr-arc { opacity: .22; animation: ln-arc-glow 5s ease-in-out infinite; }
.ln-scr-arc:nth-of-type(1) { animation-delay: 0s; }
.ln-scr-arc:nth-of-type(2) { animation-delay: .18s; }
.ln-scr-arc:nth-of-type(3) { animation-delay: .36s; }
.ln-scr-arc:nth-of-type(4) { animation-delay: .54s; }
.ln-scr-arc:nth-of-type(5) { animation-delay: .72s; }
.ln-scr-arc:nth-of-type(6) { animation-delay: .9s; }
.ln-scr-arc:nth-of-type(7) { animation-delay: 1.08s; }
.ln-scr-arc:nth-of-type(8) { animation-delay: 1.26s; }
.ln-scr-arc:nth-of-type(9) { animation-delay: 1.44s; }
.ln-scr-arc:nth-of-type(10) { animation-delay: 1.62s; }
@keyframes ln-arc-glow { 0%, 70%, 100% { opacity: .22; } 22% { opacity: 1; } }
.ln-scr-drop { transform-box: fill-box; transform-origin: 50% 55%;
  animation: ln-drop-pulse 3.6s var(--gl-soft) infinite; }
@keyframes ln-drop-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  .ln-ecg-line, .ln-ecg-heart, .ln-gift-card, .ln-gift-glare, .ln-gift-spark,
  .ln-scr-ring, .ln-scr-arc, .ln-scr-drop { animation: none; }
  .ln-ecg-line { stroke-dashoffset: 0; }
  .ln-scr-arc { opacity: .85; }
}

/* ═══ БАННЕР СЕРТИФИКАТА В ПОПУЛЯРНЫХ ═══
   Последняя карточка блока на главной ведёт на страницу сертификатов.
   Второй фирменный цвет: красный на этом экране занят кнопками «В корзину»,
   и баннер того же цвета спорил бы с ними за внимание. Слои — фон, свет,
   кант — лежат под содержимым, поэтому текст читается на любой фазе. */
.gl-gift {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  border-radius: 18px; padding: 18px 18px 20px; color: #fff;
  background: radial-gradient(85% 75% at 88% -15%, #2b6a8f 0%, transparent 60%),
              linear-gradient(158deg, var(--accent) 0%, var(--accent-dark) 100%);
  /* Фаска металлической плашки: светлая грань сверху, тень снизу */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .3),
              inset 1px 0 0 rgba(255, 255, 255, .08), inset -1px 0 0 rgba(0, 0, 0, .18);
}
.gl-gift:hover { text-decoration: none; }
.gl-gift-title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: var(--fs-2xl); line-height: .98; letter-spacing: .01em; color: #fff;
}
.gl-gift-text { font-size: var(--fs-xs); line-height: var(--lh-read); color: rgba(255, 255, 255, .84); }
.gl-gift-btn {
  margin-top: auto; border-radius: 11px; padding: 10px 12px; text-align: center;
  font-size: var(--fs-sm); font-weight: 600; background: var(--primary); color: #fff;
}

/* Ленты подарочной упаковки: качаются и меняют плотность.
   Периоды 11 и 8,5 с не кратны — рисунок не повторяется */
.gl-gift-band { position: absolute; inset: 0; z-index: -1; pointer-events: none; color: #fff; }
.gl-gift-band i { position: absolute; background: currentColor; opacity: .1; }
.gl-gift-band .v { top: -20%; bottom: -20%; left: 62%; width: 26px; animation: gl-gift-v 11s var(--gl-soft) infinite; }
.gl-gift-band .h { left: -20%; right: -20%; top: 58%; height: 26px; animation: gl-gift-h 8.5s var(--gl-soft) infinite; }
@keyframes gl-gift-v {
  0%, 100% { transform: rotate(9deg) translateX(0); opacity: .1; }
  50%      { transform: rotate(12deg) translateX(-10px); opacity: .16; }
}
@keyframes gl-gift-h {
  0%, 100% { transform: rotate(-4deg) translateY(0); opacity: .09; }
  50%      { transform: rotate(-6deg) translateY(8px); opacity: .14; }
}

/* Свет в самом градиенте: два пятна перетекают по карточке и меняют яркость,
   поэтому фон бликует сам, без пролетающей полосы */
.gl-gift-glow { position: absolute; inset: -30%; z-index: -1; pointer-events: none; }
.gl-gift-glow i { position: absolute; inset: 0; display: block; }
.gl-gift-glow .top {
  background: radial-gradient(closest-side, rgba(130, 210, 255, .28), rgba(130, 210, 255, 0) 70%);
  animation: gl-gift-glow-top 14s var(--gl-soft) infinite;
}
.gl-gift-glow .bot {
  background: radial-gradient(closest-side, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%);
  animation: gl-gift-glow-bot 9.5s var(--gl-soft) .8s infinite;
}
@keyframes gl-gift-glow-top {
  0%, 100% { transform: translate(22%, -18%) scale(.95); opacity: .6; }
  45%      { transform: translate(8%, -6%) scale(1.05); opacity: 1; }
}
@keyframes gl-gift-glow-bot {
  0%, 100% { transform: translate(-20%, 22%) scale(.9); opacity: .35; }
  50%      { transform: translate(-8%, 12%) scale(1); opacity: .75; }
}

/* Искра по контуру: конический градиент крутится, маска оставляет от него
   рамку в 1,2 px. Где mask-composite не поддержан, канта просто не будет —
   фаска и фон останутся на месте */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .gl-gift-edge {
    position: absolute; inset: 0; z-index: 1; border-radius: inherit; overflow: hidden;
    padding: 1.2px; pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
  }
  .gl-gift-edge i {
    position: absolute; left: 50%; top: 50%; width: 190%; aspect-ratio: 1;
    transform: translate(-50%, -50%) rotate(0deg);
    /* Два отсвета: яркий и слабый с противоположной стороны — на металле грань
       ловит свет сразу с двух сторон */
    background: conic-gradient(from 0deg,
      rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 30deg,
      rgba(190, 235, 255, .7) 42deg, rgba(255, 255, 255, 1) 48deg,
      rgba(160, 215, 250, .45) 56deg, rgba(255, 255, 255, 0) 74deg,
      rgba(255, 255, 255, 0) 205deg,
      rgba(190, 230, 255, .32) 222deg, rgba(255, 255, 255, .42) 228deg,
      rgba(255, 255, 255, 0) 246deg,
      rgba(255, 255, 255, 0) 360deg);
    animation: gl-gift-edge 9s linear infinite;
  }
  @keyframes gl-gift-edge { to { transform: translate(-50%, -50%) rotate(360deg); } }
}

@media (prefers-reduced-motion: reduce) {
  .gl-gift-band i, .gl-gift-glow i, .gl-gift-edge i { animation: none; }
  /* Без движения кант остаётся ровной гранью, а не застывшей искрой */
  .gl-gift-edge i { background: linear-gradient(160deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .06)); }
}

/* На телефоне карточки едут каруселью, и до восьмой долистывают немногие:
   баннер встаёт вторым — сразу за самым ходовым анализом */
@media (max-width: 760px) {
  .gl-cards-home > * { order: 3; }
  .gl-cards-home > .gl-card:first-child { order: 1; }
  .gl-cards-home > .gl-gift { order: 2; }
}

/* ═══ ИИ-КОНСУЛЬТАНТ В СТРОКЕ ПОИСКА ═══
   Плашка «ИИ» стоит в поле рядом с «Найти». Включённый режим показывает искра
   по канту: синий ведёт, красный поддерживает — режим виден, но остаётся
   в семье бренда. Цвета ИИ живут только здесь и в палитру бренда не лезут. */
.gl-search-row { --ai-1: #2f6bff; --ai-2: #6aa8ff; --ai-3: #8a5cf6; }

/* Плашка ИИ и кнопка отправки — одна группа: высоты у них разные, и по
   отдельности они вставали бы по краям поля, а не друг против друга */
.gl-search-actions { flex: none; display: inline-flex; align-items: center; gap: 8px; }
/* Иконки в кнопке нужны только на телефоне, на десктопе кнопка со словом */
.gl-go-find, .gl-go-send { display: none; }

.gl-ai-btn {
  flex: none; display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 0; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--text);
  background: #fff; border-radius: 12px; padding: 9px 13px 9px 10px; line-height: 1;
  box-shadow: 0 2px 8px -4px rgba(16, 22, 28, .5);
}
/* Иконка — фирменным синим, а не синим ИИ: в покое плашка часть сайта,
   и «свой» цвет ей идёт больше. Цвета ИИ остаются включённому режиму */
.gl-ai-btn svg { width: 20px; height: 20px; flex: none; color: var(--accent); }
.gl-ai-btn:hover { box-shadow: 0 6px 14px -6px rgba(47, 107, 255, .6); }
.gl-ai-btn.is-on { color: #fff; background: linear-gradient(135deg, var(--ai-1), var(--ai-3) 62%, var(--primary)); }
.gl-ai-btn.is-on svg { color: #fff; }

/* Кант: маска оставляет от вращающегося градиента рамку в 2,5 px.
   Виден только во включённом режиме */
.gl-ai-edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
.gl-search-row.gl-ai-on .gl-ai-edge { opacity: 1; }
.gl-search-row.gl-ai-on {
  box-shadow: 0 0 0 3px rgba(47, 107, 255, .3), 0 0 28px -2px rgba(47, 107, 255, .45),
              0 20px 44px -20px rgba(24, 20, 70, .6);
}
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .gl-ai-edge {
    overflow: hidden; padding: 2.5px;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
  }
  .gl-ai-edge i {
    position: absolute; left: 50%; top: 50%; width: 240%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: conic-gradient(from 0deg,
      rgba(47, 107, 255, .28) 0deg, rgba(47, 107, 255, .28) 16deg,
      rgba(47, 107, 255, 1) 44deg, rgba(106, 168, 255, 1) 56deg,
      rgba(138, 92, 246, .95) 70deg, rgba(254, 51, 15, .8) 82deg,
      rgba(47, 107, 255, .28) 104deg, rgba(47, 107, 255, .28) 360deg);
    animation: gl-ai-edge 2.6s linear infinite;
  }
  @keyframes gl-ai-edge { to { transform: translate(-50%, -50%) rotate(360deg); } }
}

/* Поле-textarea: одна строка в обычном виде, растёт под длинный вопрос */
.gl-search-row textarea {
  flex: 1; min-width: 0; border: 0; background: none; outline: none; resize: none;
  font: inherit; font-size: var(--fs-md); color: var(--text); padding: 11px 0;
  line-height: 1.4; overflow-y: auto; max-height: 40vh;
}
.gl-search-row textarea::placeholder { color: #55636f; }
/* Пустое поле — ровно одна строка: подсказка не переносится, и поиск не выглядит
   двухэтажным до того, как человек что-то напечатал */
.gl-search-row textarea:placeholder-shown {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Длинный вопрос: кнопки прижимаются к низу, а не висят посреди текста */
.gl-search-row.gl-ai-tall { align-items: flex-end; }
.gl-search-row.gl-ai-tall .gl-search-ico { margin-bottom: 12px; }
.gl-search-row.gl-ai-busy { opacity: .85; }

/* ── Ответ и услуги под ним ── */
/* Снизу отступ такой же, как сверху: без него ответ слипался с каталогом,
   который идёт следом */
.gl-ai-out { display: grid; gap: 12px; margin: 16px 0 26px; }
.gl-ai-q {
  justify-self: end; max-width: 70%; background: var(--accent); color: #fff;
  border-radius: 16px 16px 4px 16px; padding: 11px 15px; font-size: var(--fs-sm);
}
.gl-ai-answer {
  position: relative; overflow: hidden; background: #fff; border: 1px solid var(--border);
  border-radius: 16px; padding: 18px 20px; display: grid; gap: 10px;
}
/* Полоса цвета ИИ сверху: карточка ответа — не ещё одна карточка каталога */
.gl-ai-answer::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--ai-1, #2f6bff), #6aa8ff 30%, #8a5cf6 62%, var(--primary));
}
.gl-ai-head {
  display: flex; align-items: center; gap: 9px; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #2f6bff;
}
.gl-ai-text { font-size: var(--fs-sm); line-height: var(--lh-read); color: var(--text); }
.gl-ai-text p { margin: 0 0 10px; }
.gl-ai-text ul, .gl-ai-text ol { margin: 0 0 10px; padding-left: 22px; }
.gl-ai-text li { margin: 4px 0; }
.gl-ai-text h1, .gl-ai-text h2, .gl-ai-text h3 { font-size: var(--fs-md); margin: 14px 0 8px; }
.gl-ai-text table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.gl-ai-text th, .gl-ai-text td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; }
.gl-ai-text > :last-child { margin-bottom: 0; }
.gl-ai-note { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--faint); }
.gl-ai-wait { margin: 0; font-size: var(--fs-sm); color: var(--muted); }
.gl-ai-fail .gl-ai-head { color: var(--red-ink); }

/* Три точки ожидания: ответ идёт до минуты, и это должно быть видно */
.gl-ai-dots { display: inline-flex; gap: 5px; margin-left: auto; }
.gl-ai-dots i { width: 6px; height: 6px; border-radius: 50%; background: #2f6bff; opacity: .35;
  animation: gl-ai-dots 1.2s ease-in-out infinite; }
.gl-ai-dots i:nth-child(2) { animation-delay: .16s; }
.gl-ai-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes gl-ai-dots {
  0%, 100% { opacity: .3; transform: translateY(0); }
  45%      { opacity: 1; transform: translateY(-3px); }
}

/* Прошлые реплики разговора: та же карточка, но приглушённая — видно, что
   это уже отвеченное, а свежий ответ внизу */
.gl-ai-answer.is-past { opacity: .72; }
.gl-ai-answer.is-past .gl-ai-text { font-size: var(--fs-xs); }

/* ── Ответ человека: варианты кнопками и поле рядом ──
   Кнопки приходят от агента (quick_answers) и бывают не всегда, поле — всегда:
   выбрать из предложенного получается не в каждом разговоре */
.gl-ai-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-ai-chip {
  border: 1px solid rgba(47, 107, 255, .35); background: rgba(47, 107, 255, .06);
  color: #2f6bff; border-radius: 999px; padding: 8px 14px; font: inherit;
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer; text-align: left;
}
.gl-ai-chip:hover { background: #2f6bff; border-color: #2f6bff; color: #fff; }
.gl-ai-reply {
  display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1.5px solid rgba(47, 107, 255, .38); border-radius: 14px; padding: 5px 5px 5px 14px;
}
.gl-ai-reply-mark {
  flex: none; display: inline-flex; align-items: center; gap: 6px; color: #2f6bff;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.gl-ai-reply-mark svg { width: 16px; height: 16px; }
.gl-ai-reply input {
  flex: 1; min-width: 0; border: 0; background: none; font: inherit;
  font-size: var(--fs-sm); color: var(--text); padding: 10px 0;
}
.gl-ai-reply input:focus { outline: none; }
.gl-ai-send {
  flex: none; width: 38px; height: 38px; border: 0; border-radius: 11px; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #2f6bff, #8a5cf6);
}
.gl-ai-send svg { width: 18px; height: 18px; }

.gl-ai-found { display: grid; gap: 10px; }
.gl-ai-found h3 { margin: 6px 0 0; font-size: var(--fs-lg); }
.gl-ai-row {
  display: flex; align-items: center; gap: 16px; background: #fff;
  border: 1px solid rgba(47, 107, 255, .34); box-shadow: 0 0 0 3px rgba(47, 107, 255, .07);
  border-radius: 14px; padding: 14px 16px;
}
.gl-ai-row-left { flex: 1; min-width: 0; display: grid; gap: 4px; }
.gl-ai-code { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.gl-ai-code b { color: #2f6bff; }
.gl-ai-name { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; color: var(--text); }
.gl-ai-meta { font-size: var(--fs-xs); color: var(--muted); }
/* Цвет задаём явно: блок ответа на главной лежит в красной шапке, где текст
   белый, и цена наследовала белый — на белой карточке её просто не было видно */
.gl-ai-price { flex: none; font-family: var(--display); font-size: var(--fs-xl); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text); }
.gl-ai-price i { font-style: normal; font-family: 'Montserrat', sans-serif; font-size: var(--fs-xs); }
.gl-ai-buy {
  flex: none; border: 1px solid rgba(254, 51, 15, .35); background: rgba(254, 51, 15, .07);
  color: var(--red-ink); border-radius: 11px; padding: 9px 14px; font: inherit;
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
}
/* «В корзине» — фирменный синий, как в карточках каталога: по цвету видно,
   что уже отложено. Класс btn-in-cart вешает общий скрипт корзины */
.gl-ai-buy.is-in, .gl-ai-buy.btn-in-cart {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.gl-ai-buy.is-in:hover, .gl-ai-buy.btn-in-cart:hover {
  background: var(--accent-dark); border-color: var(--accent-dark); color: #fff;
}
.gl-ai-ask { font-family: 'Montserrat', sans-serif; font-size: var(--fs-sm); color: var(--muted); }
.gl-ai-all { justify-self: start; }

/* Свободное время под ответом: врач, офис и его окна. Кнопка ведёт на нашу
   страницу записи с этим временем — записывается человек сам, из формы */
.gl-ai-slots { display: grid; gap: 10px; }
.gl-ai-slots h3 { margin: 6px 0 0; font-size: var(--fs-lg); }
.gl-ai-slot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; background: #fff;
  border: 1px solid rgba(47, 107, 255, .34); box-shadow: 0 0 0 3px rgba(47, 107, 255, .07);
  border-radius: 14px; padding: 14px 16px;
}
.gl-ai-slot-who { flex: 1 1 220px; min-width: 0; display: grid; gap: 3px; }
.gl-ai-slot-who b { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; color: var(--text); }
.gl-ai-slot-who small { font-size: var(--fs-xs); color: var(--muted); }
.gl-ai-day { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.gl-ai-day b {
  font-size: var(--fs-xs); font-weight: 600; color: var(--faint);
  margin-right: 2px; white-space: nowrap;
}
.gl-ai-time {
  border: 1px solid rgba(47, 107, 255, .35); background: rgba(47, 107, 255, .07);
  color: #2f6bff; border-radius: 10px; padding: 8px 12px; font-size: var(--fs-sm);
  font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gl-ai-time:hover { background: #2f6bff; border-color: #2f6bff; color: #fff; }
/* Оговорка лежит не на карточке, а прямо на фоне — а он на главной красный.
   Серый по красному не читается, поэтому у неё своя светлая подложка */
.gl-ai-slots .gl-ai-note {
  background: rgba(255, 255, 255, .92); border-radius: 10px; padding: 8px 12px;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .gl-ai-edge i, .gl-ai-dots i { animation: none; }
}
@media (max-width: 760px) {
  .gl-ai-btn { padding: 8px 10px 8px 8px; font-size: var(--fs-xs); }
  .gl-ai-btn svg { width: 18px; height: 18px; }
  .gl-ai-q { max-width: 88%; }
  /* Длинный вопрос: кнопки уходят под текст, иначе ему остаётся полоска
     в два слова — на макете это было видно яснее всего */
  .gl-search-row.gl-ai-tall { flex-wrap: wrap; align-items: flex-start; }
  .gl-search-row.gl-ai-tall textarea { flex: 1 1 auto; }
  .gl-search-row.gl-ai-tall .gl-ai-edge { position: absolute; }
  .gl-search-row.gl-ai-tall .gl-search-actions { order: 2; width: 100%; justify-content: space-between; }
  .gl-search-row.gl-ai-tall::after { content: ""; flex: 1 0 100%; height: 0; order: 1; }
  /* Метка «ИИ» в поле ответа уступает место подсказке: на 375 px каждое слово
     в строке отнимает место, а режим и так понятен — поле внутри карточки */
  .gl-ai-reply-mark { display: none; }
  .gl-ai-reply { padding-left: 12px; }
  /* Палец, а не курсор: 38 px для касания мало, берём привычные 44 */
  .gl-ai-send { width: 44px; height: 44px; }
  /* Карточка услуги: имя во всю ширину, цена и кнопка под ним */
  .gl-ai-row { flex-wrap: wrap; gap: 10px; }
  .gl-ai-row-left { flex: 1 1 100%; }
  .gl-ai-price { margin-right: auto; }
}

/* ── Поиск на телефоне: подписи в кнопках уступают место вопросу ──
   На 375 px каждое слово в кнопке отнимает у вопроса строку, поэтому «Найти»
   становится лупой, «Спросить» — стрелкой отправки, а лупа слева уходит:
   поиск и так понятен по подсказке в поле. */
@media (max-width: 760px) {
  .gl-search-row .gl-search-ico { display: none; }
  .gl-search-row { padding-left: 14px; }
  .gl-search-go {
    padding: 0; width: 44px; height: 44px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .gl-search-go-txt, .gl-go-arrow { display: none; }
  .gl-search-go svg { width: 20px; height: 20px; }
  .gl-go-find { display: block; }
  .gl-search-row.gl-ai-on .gl-go-find { display: none; }
  .gl-search-row.gl-ai-on .gl-go-send { display: block; }
}


/* Показ пароля (js/password-toggle.js): «глаз» внутри поля справа */
.gl-pass { position: relative; display: block; }
.gl-pass input { padding-right: 46px; }
.gl-pass-eye {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted);
  cursor: pointer; padding: 0;
}
.gl-pass-eye:hover { color: var(--red); background: rgba(254, 51, 15, .06); }
.gl-pass-eye:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; color: var(--red); }

/* Согласие в форме входа — в фирменных цветах, как в остальных формах */
.form .form-consent { color: var(--muted); }
.form .form-consent input { accent-color: var(--red); }
.form .form-consent a { color: var(--red-ink); }

/* Результаты анализов — скругления как у остальных карточек кабинета */
.lk-result, .lk-res-connect { border-radius: 18px; }