/* Start:/bitrix/templates/franchise/css/fonts.css?17921797205882*/
/* ============================================================
   Шрифты сайта — со своего сервера, без обращений к Google Fonts.
   Путь: /local/templates/{ШАБЛОН}/css/fonts.css — подключается в header.php первым.
   Файлы — /local/templates/{ШАБЛОН}/fonts/*.woff2.

   Onest (заголовки) и Golos Text (текст) — вариативные шрифты: один файл на набор символов содержит все
   начертания (Onest 100–900, Golos Text 400–900).
   Наборы и их диапазоны символов (unicode-range) те же, что отдаёт Google Fonts; браузер загружает только
   те файлы, символы которых есть на странице: кириллица и латиница (цифры, знаки) нужны всегда,
   «latin-ext» — ради знака рубля, «symbols» — ради стрелок в ссылках. Два файла кириллицы header.php
   загружает заранее (preload), чтобы текст сразу появлялся своим шрифтом.
   Оба шрифта распространяются по лицензии SIL Open Font License 1.1 (fonts/OFL-Onest.txt, fonts/OFL-GolosText.txt):
   размещать их на своём сервере можно. Файлы взяты из пакетов @fontsource-variable/onest 5.3.1 и
   @fontsource-variable/golos-text 5.3.0.
   ============================================================ */
/* Onest — cyrillic-ext */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('/bitrix/templates/franchise/css/../fonts/onest-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
/* Onest — cyrillic */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('/bitrix/templates/franchise/css/../fonts/onest-cyrillic.woff2') format('woff2');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
/* Onest — symbols */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('/bitrix/templates/franchise/css/../fonts/onest-symbols.woff2') format('woff2');
    unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF; }
/* Onest — latin-ext */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('/bitrix/templates/franchise/css/../fonts/onest-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* Onest — latin */
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('/bitrix/templates/franchise/css/../fonts/onest-latin.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; }
/* Golos Text — cyrillic-ext */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap;
    src: url('/bitrix/templates/franchise/css/../fonts/golos-text-cyrillic-ext.woff2') format('woff2');
    unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
/* Golos Text — cyrillic */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap;
    src: url('/bitrix/templates/franchise/css/../fonts/golos-text-cyrillic.woff2') format('woff2');
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
/* Golos Text — latin-ext */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap;
    src: url('/bitrix/templates/franchise/css/../fonts/golos-text-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
/* Golos Text — latin */
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap;
    src: url('/bitrix/templates/franchise/css/../fonts/golos-text-latin.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; }

/* End */


/* Start:/bitrix/templates/franchise/css/layout.css?179217972139454*/
/* ============================================================
   Шапка + подвал (site-wide). Здесь же — общие токены.
   Путь: /local/templates/{ШАБЛОН}/css/layout.css
   ============================================================ */
:root {
    /* Цвета — как в логотипе «Франчайз Центр»: синий (--green, --green-deep — историческое название переменной),
       янтарный акцент (--amber), тёмно-синий текст (--ink). Поменять гамму сайта — поменять значения здесь. */
    --ink:        #1a2b4a;
    --ink-soft:   #4a5a78;
    --muted:      #7a8499;
    --line:       #e6e9f0;
    --bg:         #f3f3f4;   /* фон страниц и плашек: с версии 109 нейтральный светло-серый (был серо-голубой #f5f7fa) */
    --surface:    #ffffff;
    --green:      #1b6ae5;
    --green-deep: #0d4ba0;
    --amber:      #f59e0b;
    /* Кнопки: основной цвет — тёмно-синий логотипа, при наведении темнее. Все классы кнопок (.hm-btn, .svc-btn,
       .tf-btn, .bl-btn, а с версии 107 и кнопка карточки .fr-cta, кнопки окна заявки, сравнения, кабинета) берут
       цвет отсюда — поменять цвет кнопок на сайте = поменять две строки. */
    --btn:        #0d4ba0;
    --btn-deep:   #083a80;
    --btn-shadow: rgba(13, 75, 160, .30);
    --radius:     16px;
    --shadow:     0 6px 24px rgba(26, 43, 74, .07);
    --shadow-h:   0 14px 38px rgba(26, 43, 74, .14);
    --font-d:     'Onest', system-ui, sans-serif;
    --font-b:     'Golos Text', system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-b); color: var(--ink); background: var(--bg); }
a { color: inherit; }

/* ---------------- ИКОНКИ ---------------- */
/* Набор App\Site\Icons: линия в цвет текста и одна янтарная точка-«узел», как в логотипе. Цвет иконки — color
   родителя; цвет точки — переменная --ic-accent. */
.ic { display: inline-block; flex: 0 0 auto; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic .ic-a { fill: var(--ic-accent, var(--amber)); stroke: none; }
.ic .ic-as { stroke: var(--ic-accent, var(--amber)); }
.ic .ic-d { fill: currentColor; stroke: none; }

/* ---------------- КНОПКИ С ИКОНКАМИ ---------------- */
/* Иконка набора внутри любой кнопки сайта: стоит слева от текста (Icons::svg('search', 19)). На синей кнопке
   янтарный узел чуть светлее, чтобы читался. Модификатор --arrow: иконка-стрелка справа, при наведении едет
   вправо — для ссылок-переходов («Смотреть каталог», «Подробнее»). */
.hm-btn, .svc-btn, .tf-btn, .bl-btn { gap: 9px; }
.hm-btn .ic, .svc-btn .ic, .tf-btn .ic, .bl-btn .ic { width: 19px; height: 19px; margin-left: -4px; }
.tf-btn .ic { width: 17px; height: 17px; }
.hm-btn--accent .ic, .svc-btn--accent .ic, .tf-btn--accent .ic, .bl-btn .ic, .frd-contact__dark .ic,
.hm-btn--ghost:hover .ic, .svc-btn--ghost:hover .ic, .tf-btn:hover .ic { --ic-accent: #ffc857; }   /* контурная под курсором залита — узел как на синей */
.btn--arrow .ic { margin-left: 0; margin-right: -6px; transition: transform .2s ease; }
.btn--arrow:hover .ic { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .btn--arrow .ic { transition: none; } }
/* плитка-подложка под иконкой: карточки услуг и возможностей, подборки на главной, контакты.
   Значение, вписанное вручную (эмодзи), встаёт в ту же плитку. */
.ic-plate, .svc-card__ico, .svc-hub__ico, .hm-aud__ico, .info-contact__ico {
    width: 56px; height: 56px; flex: 0 0 56px; border-radius: 16px; display: grid; place-items: center;
    background: rgba(27,106,229,.09); color: var(--green-deep); font-size: 26px; line-height: 1; }
/* иконка на плитке — 36 px (сам рисунок занимает около 26 px); линия тоньше, чем у мелкой иконки, чтобы рисунок не тяжелел */
.ic-plate .ic, .svc-card__ico .ic, .svc-hub__ico .ic, .hm-aud__ico .ic, .info-contact__ico .ic { width: 36px; height: 36px; stroke-width: 1.35; }
/* Только боковые поля — не «padding: 0 20px». Верхний и нижний отступ задаёт класс страницы на том же
   элементе (.svc, .info, .bl-page, .pers, .srch, …), а стили шаблона Битрикс выводит ПОСЛЕ стилей страницы:
   общее сокращённое правило обнуляло эти отступы — хлебные крошки прилипали к меню, контент — к подвалу. */
.st-wrap { max-width: 1200px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.st-content { min-height: 50vh; }

/* ---------------- ШАПКА ---------------- */
.st-header { background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 50; }

.st-topbar { background: var(--ink); color: #c9d2e0; font-size: 13px; }
.st-topbar__in { display: flex; align-items: center; justify-content: space-between; height: 40px; }
.st-city { opacity: .85; }
.st-topbar__right { display: flex; align-items: center; gap: 22px; }
.st-topbar a { color: #c9d2e0; text-decoration: none; }
.st-topbar a:hover { color: #fff; }
.st-tel { font-weight: 600; color: #fff !important; }
.st-util { display: inline-flex; align-items: center; gap: 6px; }
.st-util__c { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--green); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }

.st-main__in { display: flex; align-items: center; gap: 24px; height: 76px; }
.st-logo { font-family: var(--font-d); font-weight: 800; font-size: 24px; letter-spacing: -.02em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.st-logo span { color: var(--green); }
.st-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.st-logo img { display: block; height: 48px; width: auto; }
.st-search { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; background: #f1f3f7; border: 1px solid transparent; border-radius: 12px; padding: 0 6px 0 16px; max-width: 560px; }
.st-search:focus-within { background: #fff; border-color: var(--green); }
/* min-width: 0 у формы и у поля — иначе они не сжимаются уже «естественной» ширины поля и на экране 320px растягивают страницу */
.st-search input { flex: 1 1 auto; min-width: 0; border: 0; background: none; font-family: inherit; font-size: 15px; padding: 13px 0; outline: none; color: var(--ink); }
.st-search button { border: 0; background: var(--green); color: #fff; width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; cursor: pointer; }
.st-search button:hover { background: var(--green-deep); }
.st-cta { font-family: var(--font-d); font-weight: 700; font-size: 14px; color: var(--green-deep); border: 1.5px solid rgba(27,106,229,.4); border-radius: 10px; padding: 11px 18px; text-decoration: none; white-space: nowrap; }
.st-cta:hover { background: var(--btn); color: #fff; border-color: var(--btn); }
.st-burger { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; align-items: center; justify-content: center; }
.st-burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s; }

/* навигация */
.st-nav { border-top: 1px solid var(--line); }
.st-nav__in { display: flex; align-items: stretch; gap: 4px; }
.st-nav__item { position: relative; }
/* Ссылка «Войти/Кабинет» в меню — только для мобильного. У неё два класса (.st-nav__link и этот),
   и правило .st-nav__link ниже возвращало ей display — на десктопе в меню был лишний пункт. */
.st-nav__item--mob, .st-nav__link.st-nav__item--mob { display: none; }
/* «Разместить франшизу» в меню под «бургером» — только до 900 px: на широком экране та же ссылка стоит кнопкой
   в шапке (.st-cta), а на узком она скрыта. Отдельный класс, а не .st-cta: правила компактной шапки (css/ux.css)
   на кнопку в меню действовать не должны. */
.st-nav__cta { display: none; }
.st-nav__link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-d); font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; padding: 14px 16px; }
.st-nav__link:hover { color: var(--green-deep); }
/* текущий раздел (класс ставит шаблон меню) */
.st-nav__link.is-active { color: var(--green-deep); }
.st-nav__item--mega > .st-nav__link svg { transition: transform .2s; }
.st-nav__item--mega:hover > .st-nav__link svg { transform: rotate(180deg); }

/* кнопка «раскрыть категории» рядом с «Каталогом» — только на телефоне (на компьютере меню открывается наведением) */
.st-nav__tog { display: none; }

/* меню категорий: слева основные категории, справа — подкатегории той, на которую навели.
   Разметка — components/bitrix/menu/top_horizontal/template.php, поведение — js/layout.js */
.st-cat { display: none; position: absolute; left: 0; top: 100%; z-index: 60; }
.st-nav__item--mega:hover > .st-cat,
.st-nav__item--mega:focus-within > .st-cat { display: block; }
.st-cat__list { position: relative; list-style: none; margin: 0; padding: 8px 0 10px; width: 300px; background: var(--surface);
    border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; box-shadow: var(--shadow-h); }
/* у пункта нет своего position: панель подкатегорий встаёт вровень с верхом всего списка */
.st-cat__item { display: flex; align-items: stretch; }
.st-cat__link { flex: 1 1 auto; min-width: 0; padding: 8px 8px 8px 20px; font-size: 15px; line-height: 1.35; color: var(--ink); text-decoration: none; }
.st-cat__item:not(.st-cat__item--sub) > .st-cat__link { padding-right: 20px; }
.st-cat__item.is-current > .st-cat__link { color: var(--green-deep); font-weight: 600; }
.st-cat__link:hover, .st-cat__item.is-active > .st-cat__link { background: #eef3fd; color: var(--green-deep); }
.st-cat__tog { flex: 0 0 34px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.st-cat__item.is-active > .st-cat__tog { background: #eef3fd; color: var(--green-deep); }
.st-cat__link:focus-visible, .st-cat__tog:focus-visible, .st-cat__sublink:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

.st-cat__sub { display: none; position: absolute; left: 100%; top: 0; min-height: 100%; width: 270px; padding: 14px 24px 18px; background: var(--surface);
    border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 0; box-shadow: var(--shadow-h); }
.st-cat__sub--c2 { width: 500px; }
.st-cat__sub--c3 { width: 730px; }
.st-cat__item.is-active > .st-cat__sub { display: block; }
/* без скрипта подкатегории открываются простым наведением (скрипт добавляет задержку, чтобы панель не «соскакивала») */
.st-cat:not(.st-cat--js) .st-cat__item:hover > .st-cat__sub { display: block; }
.st-cat__cols { column-gap: 28px; }
.st-cat__sub--c2 .st-cat__cols { columns: 2; }
.st-cat__sub--c3 .st-cat__cols { columns: 3; }
.st-cat__sublink { display: block; padding: 6px 0; font-size: 15px; line-height: 1.35; color: var(--ink-soft); text-decoration: none; break-inside: avoid; -webkit-column-break-inside: avoid; }
.st-cat__sublink:hover, .st-cat__sublink[aria-current] { color: var(--green-deep); }
.st-cat__sublink--all { font-family: var(--font-d); font-weight: 700; color: var(--ink); padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }

/* подкатегорий нет вовсе — один список; длинный раскладываем в колонки */
.st-cat--f2 .st-cat__list { width: 560px; columns: 2; column-gap: 0; }
.st-cat--f3 .st-cat__list { width: 820px; columns: 3; column-gap: 0; }
.st-cat--flat .st-cat__item { break-inside: avoid; }

/* на небольших экранах три колонки не помещаются рядом со списком — оставляем две */
@media (max-width: 1120px) {
    .st-cat__sub--c3 { width: 500px; }
    .st-cat__sub--c3 .st-cat__cols { columns: 2; }
    .st-cat--f3 .st-cat__list { width: 560px; columns: 2; }
}

/* меню услуг под пунктом «Услуги»: две колонки — главные направления и остальные услуги.
   Разметка — components/bitrix/menu/top_horizontal/template.php, список услуг — App\Site\Services.
   Пункт «Услуги» стоит ближе к правому краю, поэтому панель привязана не к пункту, а к правому краю
   строки меню: от пункта она вылезала бы за край экрана. */
.st-nav__in { position: relative; }
.st-nav__item--svc { position: static; }
.st-svc { display: none; position: absolute; right: 20px; top: 100%; z-index: 60; width: 660px; max-width: calc(100% - 40px); padding: 12px 12px 0;
    background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; box-shadow: var(--shadow-h); }
.st-nav__item--svc:hover > .st-svc,
.st-nav__item--svc:focus-within > .st-svc { display: block; }
.st-nav__item--svc.is-closed > .st-svc { display: none; }                 /* закрыли клавишей Esc (js/layout.js) */
.st-nav__item--mega.is-closed > .st-cat { display: none; }                /* версия 169: то же у «Каталога» */
.st-svc__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; }
.st-svc__col, .st-svc__sub { list-style: none; margin: 0; padding: 0; }
.st-svc__link { display: block; padding: 9px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.st-svc__link b { display: block; font-family: var(--font-d); font-weight: 700; font-size: 15px; line-height: 1.3; }
.st-svc__link span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.st-svc__link[aria-current] { background: #eef3fd; }
.st-svc__link[aria-current] b { color: var(--green-deep); }
/* услуги того же направления — ссылки помельче под основной */
.st-svc__sub { margin: 2px 0 6px 14px; padding-left: 8px; border-left: 2px solid var(--line); }
.st-svc__sublink { display: block; padding: 6px 10px; border-radius: 8px; font-size: 14px; line-height: 1.35; color: var(--ink-soft); text-decoration: none; }
.st-svc__sublink[aria-current] { background: #eef3fd; color: var(--green-deep); }
.st-svc__all { display: block; margin: 10px -12px 0; padding: 12px 24px; border-top: 1px solid var(--line); border-radius: 0 0 13px 13px;
    font-family: var(--font-d); font-weight: 700; font-size: 14px; color: var(--green-deep); text-decoration: none; }
/* подсветка под курсором — только там, где есть курсор: на сенсорном экране она «залипала» бы на пункте после касания */
@media (hover: hover) {
    .st-svc__link:hover, .st-svc__sublink:hover { background: #eef3fd; }
    .st-svc__link:hover b, .st-svc__sublink:hover { color: var(--green-deep); }
    .st-svc__all:hover { background: #f5f8fe; }
}
.st-svc__link:focus-visible, .st-svc__sublink:focus-visible, .st-svc__all:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

/* ---------------- ПОДВАЛ ---------------- */
.st-footer { background: var(--ink); color: #aeb8c9; margin-top: 64px; }
@media (max-width: 560px) { .st-footer { margin-top: 40px; } }   /* версия 179: на телефоне 64 px + нижний отступ страницы давали пустую полосу перед подвалом */
.st-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; padding: 52px 20px 40px; }
.st-footer a { color: #aeb8c9; text-decoration: none; }
.st-footer a:hover { color: #fff; }
.st-logo--f { color: #fff; }
.st-footer__desc { font-size: 14px; line-height: 1.6; margin: 14px 0 18px; max-width: 320px; }
.st-tel--f { display: block; color: #fff; font-family: var(--font-d); font-weight: 700; font-size: 18px; margin-bottom: 4px; }
/* график приёма звонков под телефоном (contacts.work_hours) */
.st-footer__hours { font-size: 13px; color: #8f9bb0; margin: 0 0 8px; }
.st-footer__mail { font-size: 14px; }
.st-footer__col { display: flex; flex-direction: column; gap: 10px; }
.st-footer__h { font-family: var(--font-d); font-weight: 700; color: #fff; font-size: 15px; margin-bottom: 4px; }
.st-footer__col a { font-size: 14px; }
/* второй заголовок в той же колонке (услуги: «Франчайзерам» / «Покупателям») */
.st-footer__h--next { margin-top: 12px; }
.st-footer__all { color: var(--green) !important; }
.st-footer__bottom { border-top: 1px solid rgba(255,255,255,.08); }
.st-footer__bottom-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; font-size: 13px; flex-wrap: wrap; }
.st-footer__legal { display: inline-flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
/* версия 136: под копирайтом — реквизиты (название, ИНН, ОГРН); длинное название переносится, а не растягивает строку */
.st-footer__copy { display: inline-flex; flex-direction: column; gap: 4px; min-width: 0; }
.st-footer__req { overflow-wrap: anywhere; }
.st-18 { border: 1px solid rgba(255,255,255,.3); border-radius: 6px; padding: 1px 6px; font-size: 12px; }

/* ---------------- адаптив ---------------- */
@media (max-width: 1000px) {
    .st-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
    .st-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .st-cta { display: none; }
    .st-burger { display: flex; }
    .st-search { order: 3; flex-basis: 100%; max-width: none; }
    /* боковые поля сохраняем (раньше padding: 14px 0 обнулял поля .st-wrap — логотип и поиск упирались в край экрана) */
    .st-main__in { flex-wrap: wrap; height: auto; padding: 14px 20px; gap: 14px; }
    .st-burger { margin-left: auto; }
    .st-nav { display: none; border-top: 1px solid var(--line); }
    .st-nav.is-open { display: block; }
    .st-nav__in { flex-direction: column; gap: 0; }
    .st-nav__item { border-bottom: 1px solid var(--line); }
    .st-nav__item--mob, .st-nav__link.st-nav__item--mob { display: block; }
    .st-nav__link { padding: 14px 0; }
    .st-nav__cta { display: block; margin: 12px 0 18px; padding: 13px 18px; text-align: center; font-family: var(--font-d); font-weight: 700; font-size: 15px;
        line-height: 1.25; color: var(--green-deep); background: #eef4ff; border: 1.5px solid rgba(27,106,229,.4); border-radius: 10px; text-decoration: none; }
    .st-nav__cta:active { background: var(--green); border-color: var(--green); color: #fff; }
    .st-nav__cta:focus-visible { outline: 3px solid rgba(27,106,229,.35); outline-offset: 2px; }
    /* меню категорий на телефоне: «Каталог» — ссылка на весь каталог, категории раскрывает стрелка рядом; подкатегории — стрелка у категории */
    .st-nav__item--mega { display: flex; flex-wrap: wrap; align-items: stretch; }
    .st-nav__item--mega > .st-nav__link { flex: 1 1 auto; }
    .st-nav__item--mega > .st-nav__link .st-nav__chev { display: none; }
    .st-nav__tog { flex: 0 0 48px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
    .st-nav__tog svg { transition: transform .2s; }
    .st-nav__item--mega.is-open > .st-nav__tog svg { transform: rotate(180deg); }
    .st-nav__item--mega > .st-cat { flex: 0 0 100%; }
    .st-cat, .st-nav__item--mega:hover > .st-cat, .st-nav__item--mega:focus-within > .st-cat { display: none; position: static; }
    .st-nav__item--mega.is-open > .st-cat { display: block; }
    .st-cat__list, .st-cat--f2 .st-cat__list, .st-cat--f3 .st-cat__list { width: auto; columns: auto; padding: 0 0 10px; border: 0; border-radius: 0; box-shadow: none; }
    .st-cat__item { flex-wrap: wrap; }
    .st-cat__link { padding: 11px 8px 11px 12px; }
    .st-cat__tog { flex-basis: 48px; min-height: 44px; }
    .st-cat__tog svg { transition: transform .2s; }
    .st-cat__item.is-active > .st-cat__tog svg { transform: rotate(90deg); }
    .st-cat__sub, .st-cat__sub--c2, .st-cat__sub--c3 { position: static; flex: 0 0 100%; width: auto; min-height: 0; padding: 2px 0 10px 26px; border: 0; border-radius: 0; box-shadow: none; }
    .st-cat:not(.st-cat--js) .st-cat__item:hover > .st-cat__sub { display: none; }
    .st-cat__sub--c2 .st-cat__cols, .st-cat__sub--c3 .st-cat__cols { columns: auto; }
    .st-cat__sublink { padding: 9px 0; }
    .st-cat__sublink--all { border: 0; margin: 0; padding-bottom: 9px; }
    /* меню услуг на телефоне: «Услуги» — ссылка на витрину, список раскрывает стрелка рядом; колонки — друг под другом */
    .st-nav__item--mega > .st-svc { flex: 0 0 100%; }
    .st-svc, .st-nav__item--svc:hover > .st-svc, .st-nav__item--svc:focus-within > .st-svc { display: none; position: static; width: auto; max-width: none; padding: 0 0 10px; border: 0; border-radius: 0; box-shadow: none; }
    .st-nav__item--svc.is-open > .st-svc { display: block; }
    .st-svc__cols { grid-template-columns: minmax(0, 1fr); }
    .st-svc__link { padding: 10px 8px 10px 12px; border-radius: 8px; }
    .st-svc__sub { margin-left: 12px; }
    .st-svc__sublink { padding: 9px 10px; }
    .st-svc__all { margin: 4px 0 0; padding: 11px 12px; border-top: 0; border-radius: 8px; }
}
@media (max-width: 700px) {
    .st-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .st-main .st-logo img { height: 40px; }
    /* верхняя полоса фиксированной высоты: телефон не переносим; «Войти/Кабинет» есть в меню под «бургером» */
    .st-tel { white-space: nowrap; }
    .st-login { display: none; }
}
/* Телефон: четыре столбца ссылок подвала свёрнуты, раздел раскрывается нажатием на заголовок (js/layout.js ставит
   столбцам класс is-collapsed; без скриптов все ссылки видны). Раньше подвал занимал полтора экрана. */
@media (max-width: 560px) {
    .st-footer__grid { grid-template-columns: 1fr; gap: 0; padding-top: 36px; padding-bottom: 20px; }
    .st-footer__brand { margin-bottom: 22px; }
    .st-footer__col { gap: 0; border-top: 1px solid rgba(255,255,255,.10); }
    .st-footer__col:last-child { border-bottom: 1px solid rgba(255,255,255,.10); }
    .st-footer__col .st-footer__h { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 14px 0; }
    .st-footer__col a { padding: 7px 0; }
    .st-footer__col a:last-child { padding-bottom: 16px; }
    .st-footer__col .st-footer__h[role="button"] { cursor: pointer; }
    .st-footer__col .st-footer__h[role="button"]::after { content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid #aeb8c9; border-bottom: 2px solid #aeb8c9;
        transform: rotate(-135deg); transition: transform .15s ease; }
    .st-footer__col.is-collapsed .st-footer__h[role="button"]::after { transform: rotate(45deg) translate(-2px, -2px); }
    .st-footer__col.is-collapsed a { display: none; }
    .st-footer__col .st-footer__h:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
}
@media (max-width: 480px) {
    .st-footer__grid { grid-template-columns: 1fr; }
    .st-topbar__right { gap: 14px; }
    .st-city { display: none; }
}
@media (max-width: 400px) {
    /* телефон + «Сравнение» + «Избранное» словами не помещаются в 320–400px и давали горизонтальную прокрутку:
       вместо слов — значки (те же, что на карточках), счётчики остаются; текст ссылок доступен скринридеру */
    .st-util { font-size: 0; gap: 3px; }
    .st-util::before { font-size: 15px; line-height: 1; }
    .st-util[href="/compare/"]::before { content: '⇄'; }
    .st-util[href="/favorites/"]::before { content: '♡'; }
}

/* ловушка для ботов в формах заявок: поле есть в разметке, но человеку не видно и недоступно с клавиатуры */
/* галочки согласий в формах (App\Site\Consent): вид подписи задаёт сама форма, здесь — только раскладка */
.cs { display: grid; gap: 8px; text-align: left; }
.cs label { cursor: pointer; }
.cs a { color: var(--green-deep); }
.cs__note { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.hp-field { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   ШАПКА ВЕРСИИ 99
   Строка с поиском — для покупателя: поиск во всю ширину, «Сравнение» и «Избранное» значками (.st-acts), одна
   кнопка «Подобрать франшизу» (.st-cta). «Разместить франшизу» — ссылка в верхней полосе (.st-place), на телефоне —
   кнопка в меню (.st-nav__cta). У пунктов меню иконки (.st-nav__ico), справа в строке меню — быстрые отборы
   (.st-nav__quick, от 1200 px). Блок стоит в конце файла и уточняет правила выше; правила для узких экранов
   повторены здесь же, иначе их перебили бы общие правила этого блока.
   ============================================================ */

/* --- верхняя полоса --- */
.st-util--mob { display: none; }                                   /* на широком экране — значки в строке поиска */
.st-place { display: inline-flex; align-items: center; gap: 7px; color: #fff !important; font-weight: 600; }
.st-place__for { color: #c9d2e0; font-weight: 400; }
.st-place svg { color: var(--amber); transition: transform .15s ease; }
.st-place:hover svg { transform: translateX(3px); }
.st-login { display: inline-flex; align-items: center; gap: 7px; }

/* --- строка с поиском --- */
.st-search { max-width: none; }
.st-search button { background: transparent; color: var(--ink); }
.st-search button:hover { background: rgba(26, 43, 74, .08); }
.st-search:focus-within button { color: var(--green-deep); }
.st-acts { display: flex; align-items: stretch; gap: 2px; flex: 0 0 auto; }
.st-act { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 76px; padding: 5px 4px;
    border-radius: 10px; color: var(--ink-soft); font-size: 12px; line-height: 1.2; text-decoration: none; }
.st-act:hover { background: #eef3fd; color: var(--green-deep); }
.st-act:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.st-act .st-util__c { position: absolute; top: 0; left: calc(50% + 6px); }
.st-act .st-util__c.is-zero { display: none; }                     /* пустой счётчик не показываем; класс ведёт js/wishlist.js */
.st-cta { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: #fff; background: var(--green-deep); border: 1.5px solid var(--green-deep);
    border-radius: 12px; padding: 11px 18px 11px 14px; transition: background .15s ease, border-color .15s ease; }
.st-cta:hover { background: #093a7d; border-color: #093a7d; color: #fff; }
.st-cta:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* --- строка меню --- */
.st-nav__in { gap: 2px; }
.st-nav__link { gap: 8px; padding: 14px 12px; }
.st-nav__ico { display: inline-flex; flex: 0 0 auto; }
.st-nav__link.is-active { box-shadow: inset 0 -3px 0 var(--amber); }
/* стрелка «Каталога» и «Услуг» поворачивается при наведении — иконка пункта остаётся на месте */
.st-nav__item--mega > .st-nav__link .st-nav__ico svg,
.st-nav__item--mega:hover > .st-nav__link .st-nav__ico svg { transform: none; transition: none; }
.st-nav__item--cta { display: none; }                              /* «Подобрать франшизу» на широком экране — кнопка шапки */
.st-nav__quick { display: none; }
.st-nav__chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid #dfe4ee; border-radius: 16px;
    font-family: var(--font-b); font-size: 13.5px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; }
.st-nav__chip:hover { border-color: var(--green); color: var(--green-deep); }
.st-nav__chip:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.st-nav__chip.is-off { visibility: hidden; }                        /* не поместился — ставит js/layout.js */
@media (min-width: 901px) {
    /* Пунктов больше, чем помещается в строку: название пункта не рвётся на две строки, а лишние пункты целиком
       переходят на вторую строку меню. */
    .st-nav__in { flex-wrap: wrap; }
    .st-nav__link { white-space: nowrap; }
}
@media (min-width: 901px) and (max-width: 1040px) {
    /* Версия 102: с пунктом «Бизнес-идеи» в строке семь пунктов. На узком экране компьютера и планшете они
       помещаются в одну строку без иконок — так меню не переносится на второй ряд. */
    .st-nav__ico { display: none; }
    .st-nav__link { padding-left: 11px; padding-right: 11px; }
}
@media (min-width: 1041px) {
    /* Версия 102: пункты стоят чуть плотнее (поля 10 px вместо 12) — справа остаётся место для двух быстрых отборов. */
    .st-nav__in { gap: 0; }
    .st-nav__link { padding-left: 10px; padding-right: 10px; }
}
@media (min-width: 1200px) {
    /* Отборы занимают место, оставшееся после пунктов меню, и прижаты вправо. Не поместившийся отбор уходит на
       вторую строку блока, а она обрезана — меню при этом не сжимается и не переносится. Поля в 4 px — чтобы не
       обрезалась рамка фокуса. */
    .st-nav__quick { display: flex; flex: 1 1 0; min-width: 0; flex-wrap: wrap; justify-content: flex-end; align-content: flex-start; align-self: center;
        gap: 12px 8px; height: 40px; padding: 4px 3px; margin-right: -3px; box-sizing: border-box; overflow: hidden; }
}

/* --- телефон и планшет: до 900 px --- */
.st-burger span { transition: transform .2s ease, opacity .15s ease; }
.st-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.st-burger.is-active span:nth-child(2) { opacity: 0; }
.st-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
    .st-util--mob { display: inline-flex; }
    .st-place { display: none; }
    .st-acts { display: none; }
    .st-cta { display: none; }
    .st-nav__in { gap: 0; }
    .st-nav__item--cta { display: block; }                          /* здесь «Подобрать франшизу» — строка меню */
    /* строка меню: иконка на плашке, название, у «Каталога» и «Услуг» — стрелка справа */
    .st-nav__link { gap: 14px; padding: 10px 0; min-height: 56px; box-sizing: border-box; font-size: 16px; }
    .st-nav__link.is-active { box-shadow: none; }
    .st-nav__ico { width: 36px; height: 36px; border-radius: 10px; background: #eef3fd; color: var(--green-deep); align-items: center; justify-content: center; }
    .st-nav__link.is-active .st-nav__ico { background: var(--green); color: #fff; }
    .st-nav__ico--plain { background: #f1f3f7; color: var(--ink-soft); }
    /* строка нажимается по всей ширине, а не только по иконке и названию (у «Каталога» и «Услуг» справа стрелка) */
    .st-nav__item:not(.st-nav__item--mega) > .st-nav__link { display: flex; }
    .st-nav__link.st-nav__item--mob { display: flex; align-items: center; }
    .st-nav__cta { display: flex; align-items: center; justify-content: center; gap: 10px; }
}
@media (max-width: 560px) {
    .st-login { display: none; }                                    /* «Войти» есть в меню под «бургером» */
}
@media (prefers-reduced-motion: reduce) {
    .st-burger span, .st-place svg { transition: none; }
}


/* ============================================================
   ВЕРСИЯ 165: СТРОКА МЕНЮ СИНЕЙ ПОЛОСОЙ (.st-header--navdark, header.nav_dark в site.config.php)
   Только на компьютере (от 901 px): на телефоне меню под «бургером» остаётся светлым списком. Пункты — белые, под
   курсором — светлая плашка; у «Каталога» плашка всегда: с него начинается выбор. Текущий раздел (версия 169) — белая
   плашка с синим текстом. Выпадающие меню категорий и услуг — прежние, белые, прямо под полосой.
   ============================================================ */
:root { --nav-bg: #0d4ba0; }
@media (min-width: 901px) {
    .st-header--navdark { border-bottom: 0; }                       /* под синей полосой светлая черта не нужна */
    .st-header--navdark .st-nav { background: var(--nav-bg); border-top: 0; }
    .st-header--navdark .st-nav__link { color: #fff; margin: 6px 0; padding-top: 8px; padding-bottom: 8px; border-radius: 9px;
        transition: background .15s ease, color .15s ease; }
    .st-header--navdark .st-nav__link:hover,
    .st-header--navdark .st-nav__item--mega:hover > .st-nav__link,
    .st-header--navdark .st-nav__item--mega:focus-within > .st-nav__link { color: #fff; background: rgba(255,255,255,.14); }
    .st-header--navdark .st-nav__link.is-active { color: #fff; background: rgba(255,255,255,.2); box-shadow: none; }
    .st-header--navdark .st-nav__link:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
    /* «Каталог» — первый пункт с меню категорий */
    .st-header--navdark .st-nav__item--mega:not(.st-nav__item--svc) > .st-nav__link:not(.is-active) { background: rgba(255,255,255,.16); }
    .st-header--navdark .st-nav__item--mega:not(.st-nav__item--svc):hover > .st-nav__link,
    .st-header--navdark .st-nav__item--mega:not(.st-nav__item--svc):focus-within > .st-nav__link,
    .st-header--navdark .st-nav__item--mega:not(.st-nav__item--svc) > .st-nav__link.is-active { background: rgba(255,255,255,.26); }
    .st-header--navdark .st-nav .ic { --ic-accent: #ffc857; }
    /* Версия 169: текущий раздел — белая плашка с синим текстом. Полупрозрачные плашки у текущего раздела, у «Каталога»
       и под курсором были почти одного цвета: на странице услуг с курсором над «Блогом» подсвечивались три пункта, и
       понять, где вы, было нельзя. Теперь полупрозрачная плашка — только у «Каталога» и под курсором. */
    .st-header--navdark .st-nav__link.is-active,
    .st-header--navdark .st-nav__link.is-active:hover,
    .st-header--navdark .st-nav__item--mega:hover > .st-nav__link.is-active,
    .st-header--navdark .st-nav__item--mega:focus-within > .st-nav__link.is-active,
    .st-header--navdark .st-nav__item--mega:not(.st-nav__item--svc) > .st-nav__link.is-active { color: var(--nav-bg); background: #fff; }
    .st-header--navdark .st-nav__link.is-active:focus-visible { outline-offset: 2px; }
    /* быстрые отборы справа в полосе (header.quick_links_on) */
    .st-header--navdark .st-nav__chip { border-color: rgba(255,255,255,.4); color: #fff; }
    .st-header--navdark .st-nav__chip:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; }
    .st-header--navdark .st-nav__chip:focus-visible { outline-color: #fff; }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
    .st-header--navdark .st-nav__link { transition: none; }
}

/* End */


/* Start:/bitrix/templates/franchise/css/ux.css?179217972139635*/
/* ============================================================
   Общие мелочи интерфейса (подключается глобально, header.php):
   подписи и ошибки полей форм (js/forms.js), уведомления, закреплённая компактная шапка и кнопка «Наверх»
   (js/ux.js), блок «Вы смотрели» (js/ux.js), подсказки поиска (js/suggest.js).
   Путь: /local/templates/{ШАБЛОН}/css/ux.css. На общих токенах layout.css.
   ============================================================ */

/* ---------------- ФОРМЫ: подпись над полем, ошибка под ним ---------------- */
/* align-content: соседнее поле в строке не растягивается, когда под этим появилась подсказка или ошибка */
.fx-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.fx-label { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.fx-label small { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.fx-label small::before { content: '· '; }
/* пояснение под полем (например, зачем нужен e-mail в заявке на размещение) */
.fx-hint { display: block; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.fx-err { display: block; font-size: 13px; line-height: 1.4; color: #b42318; }
.fx-err[hidden] { display: none; }
.fx-err::before { content: ''; display: inline-block; width: 14px; height: 14px; margin: -2px 6px 0 0; vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23d92d20'/%3E%3Cpath d='M8 4.3v4.6' stroke='%23fff' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.5' r='1' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat; }
/* ошибка у галочки согласия — под подписью, на уровне её текста */
.cs > .fx-err { margin: -4px 0 2px 25px; }
form input.is-invalid, form textarea.is-invalid, form select.is-invalid,
form input.is-invalid:focus, form textarea.is-invalid:focus, form select.is-invalid:focus { border-color: #d92d20; background-color: #fffafa; }
input[type="checkbox"].is-invalid, input[type="radio"].is-invalid { outline: 2px solid #d92d20; outline-offset: 1px; }
/* общая строка над кнопкой: ошибка, которую не к чему привязать (сервер недоступен, лимит заявок) */
.fx-status { margin: 0; padding: 10px 14px; border-radius: 10px; background: #fef3f2; color: #b42318; font-size: 14px; line-height: 1.45; }
.fx-status[hidden] { display: none; }
/* поля формы «заявка всем» из каталога: имя и телефон в одну строку */
.pk-form__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.pk-form .fx-label, .frd-form .fx-label { font-size: 12.5px; }
@media (max-width: 560px) { .pk-form__row { grid-template-columns: minmax(0, 1fr); } }

/* контакты из прошлой заявки подставлены (js/forms.js): строка «Подставили… · Очистить» над полями */
.fx-remembered { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; padding: 8px 12px; border-radius: 10px;
    background: rgba(27, 106, 229, .07); color: var(--ink-soft); font-size: 13px; line-height: 1.4; }
.fx-remembered__clear { font: inherit; font-weight: 600; color: var(--green-deep); background: none; border: 0; padding: 0; cursor: pointer;
    text-decoration: underline; text-decoration-color: rgba(13, 75, 160, .35); text-underline-offset: 2px; }
.fx-remembered__clear:hover { text-decoration-color: currentColor; }
.fx-remembered__clear:focus-visible { outline: 2px solid rgba(27, 106, 229, .5); outline-offset: 2px; border-radius: 3px; }

/* «Что будет после заявки» под кнопкой отправки (App\Site\LeadSteps): три шага; в широкой форме — в строку */
.ls { container-type: inline-size; min-width: 0; }
.ls[hidden] { display: none; }
.ls__h { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ls__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; counter-reset: ls; }
.ls__list li { counter-increment: ls; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; align-items: start;
    font-size: 13px; line-height: 1.4; color: var(--ink-soft); text-align: left; }
.ls__list li::before { content: counter(ls); width: 20px; height: 20px; margin-top: -1px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(27, 106, 229, .1); color: var(--green-deep); font-family: var(--font-d); font-size: 11px; font-weight: 700; line-height: 1; }
/* последний пункт — не шаг, а обещание: галочка вместо номера */
.ls__list li:last-child::before { content: ''; background: #e9f8ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.4 5.2-5.4' fill='none' stroke='%23079455' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
@container (min-width: 520px) {
    .ls__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
}

/* ---------------- УВЕДОМЛЕНИЯ ---------------- */
.fx-toasts { position: fixed; left: 50%; bottom: calc(16px + var(--fx-lift, 0px) + var(--ck-lift, 0px)); transform: translateX(-50%); z-index: 950;
    width: max-content; max-width: calc(100vw - 24px); pointer-events: none; }
.fx-toast { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding: 12px 8px 12px 18px; border-radius: 14px;
    background: var(--ink); color: #fff; box-shadow: 0 16px 44px rgba(26, 43, 74, .32); font-family: var(--font-b); font-size: 14.5px; line-height: 1.4;
    pointer-events: auto; animation: fxIn .18s ease; }
.fx-toast.is-out { opacity: 0; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }
.fx-toast--warn { background: #7a2e0e; }
.fx-toast__text { flex: 1 1 auto; min-width: 0; }
.fx-toast__btn { flex: 0 0 auto; font: inherit; font-family: var(--font-d); font-weight: 700; font-size: 14px; color: #9ec5ff; background: none; border: 0;
    padding: 6px 8px; border-radius: 8px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.fx-toast--warn .fx-toast__btn { color: #ffd4a8; }
.fx-toast__btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.fx-toast__close { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px;
    background: none; color: #aeb8c9; cursor: pointer; }
.fx-toast__close:hover { background: rgba(255,255,255,.1); color: #fff; }
.fx-toast__btn:focus-visible, .fx-toast__close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
@keyframes fxIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* уведомление встаёт над панелью «Выбрано франшиз» и над кнопкой заявки внизу экрана */
html.pk-has-bar { --fx-lift: 72px; }
/* полоса «Отправить заявку выбранным» на странице сравнения (css/wishlist.css, .ml-bar) */
html.ml-has-bar { --fx-lift: 74px; --fx-top-lift: 66px; }
@media (max-width: 900px) { html.frd-has-mcta { --fx-lift: 66px; } html.frd-has-mcta.pk-has-bar { --fx-lift: 140px; } }
@media (max-width: 560px) {
    .fx-toasts { left: 8px; right: 8px; bottom: calc(8px + var(--fx-lift, 0px) + var(--ck-lift, 0px)); transform: none; width: auto; max-width: none; }
    .fx-toast { padding: 10px 6px 10px 14px; font-size: 14px; }
    html.pk-has-bar { --fx-lift: 76px; }
    html.ml-has-bar { --fx-lift: 66px; }
}

/* ---------------- ЗАКРЕПЛЁННАЯ КОМПАКТНАЯ ШАПКА ---------------- */
/* js/ux.js: шапка ушла за край — is-fixed (закреплена и спрятана), прокрутка вверх — is-shown (выезжает).
   На месте шапки — пустой блок .st-header__spacer её высоты: страница не прыгает. */
.st-header.is-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 700; transform: translateY(-100%); visibility: hidden;
    box-shadow: 0 8px 26px rgba(26, 43, 74, .12); transition: transform .22s ease, visibility 0s linear .22s; }
.st-header.is-fixed.is-shown { transform: none; visibility: visible; transition: transform .22s ease, visibility 0s; }
.st-header.is-instant { transition: none !important; }
.st-header.is-fixed .st-topbar { display: none; }
.st-header.is-fixed .st-main__in { height: 60px; gap: 18px; }
.st-header.is-fixed .st-logo img { height: 36px; }
.st-header.is-fixed .st-search input { padding-top: 9px; padding-bottom: 9px; }
.st-header.is-fixed .st-search button { width: 36px; height: 36px; }
.st-header.is-fixed .st-cta { padding: 8px 14px 8px 12px; }
/* .st-mini — значки шапки до версии 99: если header.php ещё прежний, а стили уже новые, значки не показываем */
.st-mini { display: none; }
/* сравнение и избранное (.st-acts, css/layout.css) в компактной шапке — значками без подписей, счётчик рядом со значком */
.st-header.is-fixed .st-acts { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.st-header.is-fixed .st-act { flex-direction: row; min-width: 0; height: 40px; padding: 0 8px; gap: 4px; }
.st-header.is-fixed .st-act__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.st-header.is-fixed .st-act .st-util__c { position: static; font-size: 11px; }
/* строка меню на компьютере в компактной шапке не нужна — разделы есть в меню под логотипом на полной */
@media (min-width: 901px) { .st-header.is-fixed .st-nav { display: none; } }
@media (max-width: 900px) {
    /* телефон: одна строка — поиск и «бургер»; меню раскрывается под ней и листается само */
    .st-header.is-fixed .st-main__in { flex-wrap: nowrap; height: 60px; padding-top: 8px; padding-bottom: 8px; gap: 10px; }
    .st-header.is-fixed .st-logo { display: none; }
    .st-header.is-fixed .st-search { order: 0; flex: 1 1 auto; }
    .st-header.is-fixed .st-burger { margin-left: 0; }
    .st-header.is-fixed .st-nav.is-open { max-height: calc(100vh - 60px); max-height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 560px) { .st-header.is-fixed .st-acts { display: none; } }
/* Липкие блоки страниц (фильтр каталога, меню разделов франшизы, колонка под формой, оглавление статьи) встают под
   шапку, пока она видна: их отступ сверху в своих файлах стилей считается от переменной --st-top (ставит js/ux.js). */
@media (prefers-reduced-motion: reduce) {
    .st-header.is-fixed, .st-header.is-fixed.is-shown { transition: none; }
    .fx-toast { animation: none; }
}

/* ---------------- КНОПКА «НАВЕРХ» ---------------- */
.fx-top { position: fixed; right: 20px; bottom: calc(20px + var(--fx-top-lift, 0px) + var(--ck-lift, 0px)); z-index: 850; width: 48px; height: 48px; display: grid; place-items: center;
    padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--green-deep); cursor: pointer;
    box-shadow: 0 10px 28px rgba(26, 43, 74, .18); transition: transform .15s ease, background .15s ease; }
.fx-top[hidden] { display: none; }
.fx-top:hover { background: var(--btn); color: #fff; border-color: var(--btn); transform: translateY(-2px); }
.fx-top:focus-visible { outline: 3px solid rgba(27, 106, 229, .4); outline-offset: 2px; }
@media (max-width: 900px) {
    .fx-top { right: 12px; bottom: calc(16px + var(--fx-top-lift, 0px) + var(--ck-lift, 0px)); width: 44px; height: 44px; }
    html.frd-has-mcta { --fx-top-lift: 66px; }
}
@media (max-width: 560px) {
    html.pk-has-bar { --fx-top-lift: 72px; }
    html.frd-has-mcta.pk-has-bar { --fx-top-lift: 140px; }
    /* на телефоне уведомление во всю ширину — кнопка на это время уходит */
    html.fx-has-toast .fx-top { display: none; }
}

/* ---------------- «ВЫ СМОТРЕЛИ» ---------------- */
.rv { margin-top: 40px; }
.rv[hidden] { display: none; }
.rv__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.rv__h { font-family: var(--font-d); font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.01em; margin: 0; color: var(--ink); }
.rv__clear { font: inherit; font-size: 14px; color: var(--muted); background: none; border: 0; padding: 4px 0; cursor: pointer; }
.rv__clear:hover { color: var(--green-deep); }
.rv__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rv__item { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; text-decoration: none; color: var(--ink); transition: border-color .15s ease, box-shadow .15s ease; }
.rv__item:hover { border-color: rgba(27,106,229,.4); box-shadow: var(--shadow); }
.rv__item:focus-visible { outline: 3px solid rgba(27,106,229,.35); outline-offset: 2px; }
.rv__logo { flex: 0 0 64px; width: 64px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: #f3f5f9; overflow: hidden; }
.rv__logo img { display: block; max-width: 60px; max-height: 40px; width: auto; height: auto; object-fit: contain; }
.rv__ph { font-family: var(--font-d); font-weight: 800; font-size: 18px; color: var(--muted); }
.rv__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rv__name { font-family: var(--font-d); font-weight: 700; font-size: 14.5px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rv__meta { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* больше четырёх — показываем первые четыре; на узком экране список листается вбок */
.rv__list > :nth-child(n+5) { display: none; }
@media (max-width: 900px) {
    /* версия 179: scroll-padding — иначе первая карточка «прилипала» к краю экрана, а не к полю страницы (привязка
       прокрутки ровняет карточку по краю области прокрутки, поле не считая); справа — растворение, видно, что лента листается */
    .rv__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px; margin: 0 -20px; padding: 2px 20px 8px; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), rgba(0,0,0,0) 100%);
        mask-image: linear-gradient(90deg, #000 calc(100% - 44px), rgba(0,0,0,0) 100%); }
    .rv__list::-webkit-scrollbar { display: none; }
    .rv__list > :nth-child(n+5) { display: flex; }
    .rv__item { flex: 0 0 248px; scroll-snap-align: start; }
}
/* версия 179, телефон: не лента вбок (вторая карточка выглядела обрезанной), а список во всю ширину — до четырёх строк,
   как на компьютере; поля, прокрутка и растворение ленты сняты */
@media (max-width: 560px) {
    .rv { margin-top: 32px; }
    .rv__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
    .rv__list > :nth-child(n+5) { display: none; }
    .rv__item { flex: none; padding: 10px 12px; }
    .rv__meta { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* ---------------- ПОДСКАЗКИ ПОИСКА ---------------- */
.has-sg { position: relative; }
.sg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 80; max-height: min(460px, 70vh); overflow-y: auto; overscroll-behavior: contain;
    padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-h); text-align: left; }
.sg[hidden] { display: none; }
.sg__h { padding: 10px 12px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sg__note { margin: 4px 6px 2px; padding: 8px 10px; border-radius: 10px; background: #f5f8fe; font-size: 13px; color: var(--ink-soft); }
.sg__item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.sg__item.is-active, .sg__all.is-active { background: #eef3fd; }
.sg__logo { flex: 0 0 48px; width: 48px; height: 34px; display: grid; place-items: center; border-radius: 7px; background: #f3f5f9; overflow: hidden;
    font-family: var(--font-d); font-weight: 800; color: var(--muted); }
.sg__logo img { display: block; max-width: 44px; max-height: 30px; width: auto; height: auto; object-fit: contain; }
.sg__ico { flex: 0 0 48px; width: 48px; height: 34px; display: grid; place-items: center; border-radius: 7px; background: rgba(27,106,229,.09); color: var(--green-deep); }
.sg__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sg__name { font-size: 15px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg__name mark { background: none; color: var(--green-deep); font-weight: 800; }
.sg__meta { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg__empty { padding: 12px; font-size: 14px; color: var(--ink-soft); }
.sg__all { display: block; margin-top: 4px; padding: 11px 12px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px;
    font-family: var(--font-d); font-weight: 700; font-size: 14px; color: var(--green-deep); text-decoration: none; }
.has-sg.is-loading button[type="submit"] { opacity: .75; }
@media (max-width: 560px) { .sg { max-height: 60vh; } .sg__item { padding: 9px 8px; } }

/* ---------------- УВЕДОМЛЕНИЕ О COOKIE (версия 138, include/cookie_bar.php) ----------------
   Стоит у нижнего края над закреплёнными полосами заявки (--fx-lift); пока открыто, уведомления и кнопка «Наверх»
   поднимаются на --ck-lift. Один раз на браузер; в печати не выводится. */
html.ck-has-bar { --ck-lift: 72px; }
.ck { position: fixed; left: 0; right: 0; bottom: var(--fx-lift, 0px); z-index: 940; padding: 0 12px 12px; pointer-events: none; animation: fxIn .22s ease; }
.ck[hidden] { display: none; }
.ck.is-out { opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.ck__in { pointer-events: auto; margin: 0 auto; max-width: 860px; display: flex; align-items: center; gap: 12px 16px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 12px 16px; box-shadow: 0 12px 36px rgba(26, 43, 74, .18); }
.ck__ico { flex: 0 0 auto; display: inline-flex; color: var(--green-deep); }
.ck__text { flex: 1 1 auto; margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.ck__text a { color: var(--green-deep); }
.ck__btn { flex: 0 0 auto; font-family: var(--font-d); font-weight: 700; font-size: 14px; color: #fff; background: var(--btn); border: 1.5px solid var(--btn); border-radius: 10px; padding: 10px 18px; cursor: pointer; transition: .15s; }
.ck__btn:hover { background: var(--btn-deep); border-color: var(--btn-deep); }
.ck__btn:focus-visible { outline: 3px solid rgba(27, 106, 229, .4); outline-offset: 2px; }
@media (max-width: 560px) {
    html.ck-has-bar { --ck-lift: 148px; }
    .ck { padding: 0 8px 8px; }
    .ck__in { flex-wrap: wrap; padding: 12px 14px; gap: 8px 12px; }
    .ck__ico { display: none; }
    .ck__text { flex-basis: 100%; font-size: 13.5px; }
    .ck__btn { width: 100%; }
}
@media print { .ck { display: none; } }

/* ---------------- ПОДЕЛИТЬСЯ (версия 139, include/share.php + js/share.js) ----------------
   bar — строка с подписями (под статьёй, в карточке франшизы на телефоне); compact — кнопка, раскрывающая ряд.
   Иконки — знаки набора сайта (или официальные логотипы из images/social/, тогда .soc-img). */
.sh { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.sh--bar { margin: 22px 0 4px; }
.sh__label { color: var(--muted); font-size: 14px; margin-right: 2px; }
.sh__row { display: flex; flex-wrap: wrap; gap: 8px; }
.sh__row[hidden] { display: none; }
.sh__btn, .sh__toggle { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-d); font-weight: 600; font-size: 13.5px; line-height: 1;
    color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px 9px 11px; text-decoration: none; cursor: pointer; transition: .15s; }
.sh__btn:hover, .sh__toggle:hover { border-color: var(--green); color: var(--green-deep); }
.sh__btn:focus-visible, .sh__toggle:focus-visible { outline: 3px solid rgba(27, 106, 229, .35); outline-offset: 2px; }
.sh__btn .ic, .sh__toggle .ic { flex: 0 0 auto; }
.sh__btn[hidden] { display: none; }
.sh__btn--native { background: var(--btn); border-color: var(--btn); color: #fff; }
.sh__btn--native:hover { background: var(--btn-deep); border-color: var(--btn-deep); color: #fff; }
.sh__btn--native .ic { --ic-accent: #ffd27a; }
.soc-img { display: block; width: 18px; height: 18px; object-fit: contain; }
.sh--compact { position: relative; }
.sh--compact .sh__row { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px; box-shadow: var(--shadow-h); min-width: 240px; }
.sh--compact .sh__btn { width: 100%; justify-content: flex-start; border-radius: 10px; }
@media (max-width: 560px) {
    .sh__btn span { font-size: 13px; }
    .sh--compact .sh__row { left: auto; right: 0; }
}

/* ---------------- МЫ В СОЦСЕТЯХ / НАПИСАТЬ В МЕССЕНДЖЕРЕ (App\Site\Social) ----------------
   .soc — ряд круглых кнопок с названиями (подвал — тёмный фон, /contacts/ — светлый). */
.soc { display: flex; flex-wrap: wrap; gap: 8px; }
.soc__h { font-family: var(--font-d); font-weight: 700; font-size: 14px; margin: 18px 0 10px; }
.soc__a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-d); font-weight: 600; font-size: 13.5px; line-height: 1;
    color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px 9px 10px; text-decoration: none; transition: .15s; }
.soc__a:hover { border-color: var(--green); color: var(--green-deep); transform: translateY(-1px); }
.soc__a .ic { flex: 0 0 auto; }
.soc__a .soc-img { width: 20px; height: 20px; }
/* в подвале — на тёмном фоне */
.st-footer .soc__h { color: #fff; margin-top: 16px; }
.st-footer .soc__a { color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.st-footer .soc__a:hover { color: #fff; border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .12); }
.st-footer .soc__a .ic { --ic-accent: #ffd27a; }
/* «Поделиться» в карточке франшизы: в боковой колонке — строкой на всю ширину под «К сравнению / В избранное» */
.frd-contact__acts .sh--compact { flex: 1 1 100%; }
.frd-contact__acts .sh__toggle { width: 100%; justify-content: center; border-radius: 12px; padding: 11px 8px; font-size: 13.5px; }
.frd-contact__acts .sh--compact .sh__row { left: 0; right: 0; min-width: 0; }

/* ---------------- ПОДПИСКА НА РАССЫЛКУ (версия 140, include/subscribe_form.php) ----------------
   card — блок с заголовком, имя + e-mail, галочки, кнопка (страницы для франчайзеров, /subscribe/);
   inline — строка e-mail + кнопка и галочки под ней (подвал, тёмный фон). */
.nl--card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow); max-width: 760px; }
.nl__head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.nl__ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--bg); color: var(--green-deep); }
.nl__ico--ok { background: #e9f7ef; color: #17693a; }
.nl__h { font-family: var(--font-d); font-weight: 800; font-size: clamp(19px, 2.2vw, 24px); letter-spacing: -.01em; margin: 0 0 6px; color: var(--ink); }
.nl__h--sm { font-size: 14px; font-weight: 700; margin: 18px 0 8px; }
.nl__text { margin: 0; color: var(--ink-soft); line-height: 1.55; font-size: 14.5px; }
.nl__form { display: grid; gap: 14px; }
.nl__row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; }
.nl__input { font-family: inherit; font-size: 15px; color: var(--ink); width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fbfcfe; outline: none; transition: .15s; }
.nl__input:focus { border-color: var(--green); background: #fff; }
.nl__btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-d); font-weight: 700; font-size: 15px; color: #fff; background: var(--btn); border: 1.5px solid var(--btn); border-radius: 12px; padding: 12px 22px; cursor: pointer; transition: .15s; white-space: nowrap; }
.nl__btn:hover { background: var(--btn-deep); border-color: var(--btn-deep); }
.nl__btn:disabled { opacity: .6; cursor: default; }
.nl__btn .ic { --ic-accent: #ffd27a; }
.nl__acts { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.nl__note { font-size: 13px; color: var(--muted); }
.nl__cs { display: grid; gap: 8px; }
.nl__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.5; }
.nl__consent input { margin-top: 2px; flex: 0 0 auto; }
.nl__consent a { color: var(--green-deep); }
/* версия 175: строка о капче, когда значок в углу скрыт (App\Franchise\Captcha::notice) — во всю ширину, и в полосе подвала */
.nl__cs .nl__cap { grid-column: 1 / -1; }
.st-footer .nl__cs .nl__cap { color: rgba(255, 255, 255, .6); }
.st-footer .nl__cs .nl__cap a { color: #fff; }
.nl__status { margin: 0; }
.nl__done { display: flex; gap: 14px; align-items: flex-start; }
.nl__done b { display: block; font-family: var(--font-d); font-size: 17px; margin: 6px 0 4px; }
.nl__done p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.nl__done[hidden] { display: none; }
.nl__form[hidden] { display: none; }
/* подпись-плейсхолдер в строчной форме: подпись поля скрыта визуально, но читается экранным диктором */
.nl__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nl--inline .nl__form { gap: 10px; }
.nl__line { display: flex; gap: 8px; }
.nl__grow { flex: 1 1 auto; min-width: 0; }
.nl--inline .nl__input { padding: 10px 12px; font-size: 14px; }
.nl--inline .nl__btn { padding: 10px 14px; font-size: 14px; border-radius: 10px; }
.nl--inline .nl__consent { font-size: 12.5px; }
@media (max-width: 560px) {
    .nl--card { padding: 20px; }
    .nl__row { grid-template-columns: 1fr; }
    .nl__acts .nl__btn { width: 100%; justify-content: center; }
}
/* подвал: тёмный фон */
.st-footer .nl__h--sm { color: #fff; }
.st-footer .nl__input { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
.st-footer .nl__input::placeholder { color: rgba(255, 255, 255, .55); }
.st-footer .nl__input:focus { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }
.st-footer .nl__consent { color: rgba(255, 255, 255, .7); }
.st-footer .nl__consent a { color: #fff; }
.st-footer .nl__done b, .st-footer .nl__done p { color: #fff; }
.st-footer .nl--inline .nl__btn span { display: none; }
.st-footer .nl--inline .nl__btn { padding: 10px 12px; }
.st-footer .nl__status { background: rgba(255, 255, 255, .1); color: #ffd27a; }
/* страница /subscribe/ */
.nl-page__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 8px 0 18px; }
.nl-page__grid .nl--card { max-width: none; }
@media (max-width: 900px) { .nl-page__grid { grid-template-columns: 1fr; } }
.nl-result { display: flex; gap: 14px; align-items: flex-start; background: #e9f7ef; color: #17693a; border-radius: 14px; padding: 16px 18px; margin: 0 0 26px; max-width: 760px; }
.nl-result p { margin: 0; line-height: 1.55; color: var(--ink); }
.nl-result--warn { background: #fff4e0; color: #9a5b00; }
/* галочка подписки в формах заявок франчайзеров */
.svc-consent--nl { color: var(--ink-soft); }
/* универсальная подписка (версия 141): выбор «что присылать» ярлыками (стили .by-chip — buyer.css, здесь свои на случай страниц без него) */
.nl__who { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nl__who legend { padding: 0; flex-basis: 100%; margin-bottom: 2px; }
.nl__chip { position: relative; cursor: pointer; }
.nl__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.nl__chip span { display: inline-block; font-family: var(--font-d); font-weight: 600; font-size: 13.5px; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; transition: .15s; }
.nl__chip:hover span { border-color: var(--green); color: var(--green-deep); }
.nl__chip input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.nl__chip input:focus-visible + span { outline: 3px solid rgba(27, 106, 229, .35); outline-offset: 2px; }
.st-footer .nl__chip span { color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.st-footer .nl__chip input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }

/* ---- ПОДПИСКА: полоса подвала (версия 152, $nlVariant = 'band', footer.php) ----
   Раньше форма стояла в столбце «Франчайзерам» шириной ~200 px: столбец растягивался на пол-экрана, кнопки выбора шли
   друг под другом, согласия — по слову в строке, ссылки «согласие» были крупнее текста (правило ссылок столбца),
   подпись «Что присылать» — тёмная на тёмном. Теперь — полоса на всю ширину под столбцами: левая часть ровно по
   ширине столбца с логотипом (5 столбцов подвала 1.6fr + 4 × 1fr, промежутки 32 px), правая — от столбца «Каталог». */
.st-footer__nl { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 30px; }
.nl--band { display: grid; grid-template-columns: calc((100% - 128px) * 1.6 / 5.6) minmax(0, 1fr); gap: 18px 32px; align-items: start; }
.nl--band .nl__head { margin: 0; gap: 14px; }
.nl--band .nl__ico { width: 42px; height: 42px; border-radius: 12px; }
.nl--band .nl__h { font-size: 17px; line-height: 1.3; margin: 0 0 6px; }
.nl--band .nl__text { font-size: 13.5px; line-height: 1.55; max-width: 340px; }
.nl--band .nl__form { gap: 14px; }
.nl--band .nl__line { display: flex; gap: 8px; max-width: 560px; }
.nl--band .nl__input { padding: 11px 14px; font-size: 14.5px; }
.nl--band .nl__btn { padding: 11px 20px; font-size: 14.5px; border-radius: 10px; }
.nl--band .nl__cs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; max-width: 760px; }
.nl--band .nl__consent { font-size: 12.5px; }
.nl--band .nl__done { grid-column: 2; }
.nl--band .nl__done p { max-width: 560px; }
.nl--band .nl__status { max-width: 560px; }
/* тёмный фон подвала */
.st-footer .nl--band .nl__ico { background: rgba(255, 255, 255, .07); color: #fff; }
.st-footer .nl--band .nl__ico .ic { --ic-accent: #ffd27a; }
.st-footer .nl--band .nl__h { color: #fff; }
.st-footer .nl--band .nl__text { color: #aeb8c9; }
.st-footer .nl__who legend { color: rgba(255, 255, 255, .6); font-size: 12.5px; }
.st-footer .nl__chip:hover span { color: #fff; border-color: rgba(255, 255, 255, .45); }
.st-footer .nl__chip input:focus-visible + span { outline-color: rgba(255, 255, 255, .6); }
.st-footer .nl__btn { background: var(--green); border-color: var(--green); }
.st-footer .nl__btn:hover { background: #3a82f0; border-color: #3a82f0; }
.st-footer .nl__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.st-footer .nl__consent input { accent-color: var(--green); width: 16px; height: 16px; margin: 1px 0 0; }
.st-footer .nl__consent a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 2px; }
.st-footer .nl__consent a:hover { text-decoration-color: #fff; }
.st-footer .nl__done .nl__ico--ok { background: rgba(46, 204, 113, .16); color: #7fe0a6; }
.st-footer .nl__done p { color: #aeb8c9; }
/* 701–1000 px: в подвале 3 столбца, «Компания» стоит в ряду одна — подписка занимает два свободных столбца рядом с ней */
@media (max-width: 1000px) {
    .st-footer__nl { grid-column: 2 / -1; border-top: 0; padding-top: 0; }
    .nl--band { grid-template-columns: minmax(0, 1fr); }
    .nl--band .nl__done { grid-column: auto; }
    .nl--band .nl__text { max-width: 560px; }
}
@media (max-width: 700px) {
    .st-footer__nl { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 28px; }
    .nl--band .nl__cs { grid-template-columns: minmax(0, 1fr); }
}
/* телефон: полоса идёт под свёрнутыми разделами подвала, у последнего уже есть нижняя линия */
@media (max-width: 560px) {
    .st-footer__nl { border-top: 0; padding-top: 26px; }
}
@media (max-width: 400px) {
    .nl--band .nl__btn { padding: 11px 14px; }
    .nl--band .nl__input { min-width: 0; }
}
/* версия 179: на экране 320–360 px поле e-mail рядом с кнопкой сжималось до ~100 px — кнопка под полем, во всю ширину */
@media (max-width: 360px) {
    .nl--band .nl__line { flex-wrap: wrap; }
    .nl--band .nl__line .nl__input { flex: 1 1 100%; }
    .nl--band .nl__line .nl__btn { flex: 1 1 100%; justify-content: center; }
}

/* «Подробнее о цифрах» (версия 161): ссылка под цифрами портала и окно с инфографикой — на компьютере горизонтальная
   картинка, на телефоне, телефоне боком и планшете стоя — вертикальная (<picture>, App\Site\PortalStats::moreDialog;
   тот же запрос, что PortalStats::IG_MEDIA) */
.ps-more { white-space: nowrap; font-weight: 600; color: var(--btn, #0d4ba0); text-decoration: none; }
.ps-more::after { content: '\00a0→'; }
.ps-more:hover, .ps-more:focus-visible { text-decoration: underline; }
.ps-ig:not([open]) { display: none; }                 /* браузеры без <dialog> не прячут его сами */
.ps-ig { box-sizing: border-box; width: min(1600px, calc(100vw - 48px), calc((100vh - 48px - 60px) * 16 / 9)); max-width: none; max-height: calc(100vh - 48px);
    margin: auto; padding: 0; border: 0; border-radius: 16px; background: #eef1f6; color: var(--ink, #1a2b4a);
    overflow: auto; overscroll-behavior: contain; box-shadow: 0 30px 80px rgba(10, 22, 48, .45); }
@supports (height: 100dvh) {
    .ps-ig { width: min(1600px, calc(100vw - 48px), calc((100dvh - 48px - 60px) * 16 / 9)); max-height: calc(100dvh - 48px); }
}
.ps-ig--tall { width: min(560px, calc(100vw - 48px)); }   /* загружена только вертикальная — узкое окно и на компьютере */
.ps-ig::backdrop { background: rgba(10, 22, 48, .72); }
.ps-ig__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 16px; height: 60px; padding: 0 10px 0 20px;
    background: #fff; border-bottom: 1px solid var(--line, #e6e9f0); }
.ps-ig__bar b { flex: 1 1 auto; min-width: 0; font-family: var(--font-d, sans-serif); font-weight: 700; font-size: 16px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-ig__bar form { margin: 0; flex: 0 0 auto; }
.ps-ig__open { flex: 0 0 auto; font-size: 14px; color: var(--btn, #0d4ba0); text-decoration: none; white-space: nowrap; }
.ps-ig__open:hover { text-decoration: underline; }
.ps-ig__x { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 10px;
    background: var(--bg, #f3f3f4); color: var(--ink, #1a2b4a); font: 400 26px/1 sans-serif; cursor: pointer; }
.ps-ig__x:hover, .ps-ig__x:focus-visible { background: #e6e9f0; }
.ps-ig__body img { display: block; width: 100%; height: auto; }
.ps-ig--tall .ps-ig__body img, .ps-ig__body picture { margin: 0 auto; }
@media (max-width: 900px), (max-height: 500px) {
    .ps-ig, .ps-ig[open] { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border-radius: 0; }
    .ps-ig__body img { max-width: 520px; margin: 0 auto; }   /* телефон боком, планшет — не растягивать вертикальную картинку */
    .ps-ig--wideonly .ps-ig__body img { max-width: none; }  /* вертикальной нет — горизонтальная во всю ширину */
    .ps-ig__open { display: none; }
}

/* End */


/* Start:/bitrix/templates/franchise/css/wishlist.css?179217972115504*/
/* ============================================================
   Избранное + Сравнение.
   Путь: /local/templates/{ШАБЛОН}/css/wishlist.css
   На общих токенах layout.css. Подключается глобально (кнопки на карточках) + на страницах списков.
   ============================================================ */

/* счётчики в шапке — приглушаем нули */
.st-util__c.is-zero { opacity: .5; }

/* кнопки действий на карточке франшизы */
.fr-card { position: relative; }
.fr-card__acts { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 3; }
.fr-act { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
    padding: 0; transition: .15s; backdrop-filter: blur(2px); }
.fr-act:hover { border-color: var(--green); background: #fff; }
.fr-act__i { font-size: 16px; line-height: 1; color: var(--muted); }
.fr-act__i--cmp { font-size: 15px; }
.fr-act.is-active { background: var(--green); border-color: var(--green); }
.fr-act.is-active .fr-act__i { color: #fff; }
/* метка «Проверено» (.fr-card__badge, home.css) расположена под этими кнопками */

/* кнопки на детальной карточке */
.frd-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.frd-act { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-d); font-weight: 600; font-size: 14px;
    color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; cursor: pointer; transition: .15s; }
.frd-act:hover { border-color: var(--green); color: var(--green-deep); }
.frd-act .fr-act__i { font-size: 16px; }
.frd-act.is-active { background: var(--green); border-color: var(--green); color: #fff; }
.frd-act.is-active .fr-act__i { color: #fff; }

/* ---------------- ОБЩЕЕ ДЛЯ СТРАНИЦ СПИСКОВ ---------------- */
.wl { font-family: var(--font-b); color: var(--ink); padding: 26px 20px 72px; }
.wl-bc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.wl-bc a { color: var(--muted); text-decoration: none; }
.wl-bc a:hover { color: var(--green-deep); }
.wl-bc span { color: var(--muted); }   /* разделитель «/» — того же цвета, что в каталоге (раньше был почти не виден) */
.wl-bc b { color: var(--ink); font-weight: 600; }

.wl-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.wl-h1 { font-family: var(--font-d); font-weight: 800; font-size: clamp(24px, 3vw, 38px); letter-spacing: -.02em; margin: 0; }
.wl-clear { font-family: var(--font-d); font-weight: 600; font-size: 14px; color: var(--ink-soft);
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 16px; cursor: pointer; transition: .15s; }
.wl-clear:hover { border-color: #e11d48; color: #e11d48; }

.wl-empty { text-align: center; color: var(--ink-soft); background: var(--surface);
    border: 1px dashed var(--line); border-radius: var(--radius); padding: 48px 24px; }
.wl-empty__sub { color: var(--muted); font-size: 14px; margin-top: 8px; }
.wl-empty a { color: var(--green-deep); }

/* ссылка-обёртка карточки в избранном (карточка строится из fr-card) */
.wl-cardlink { display: block; text-decoration: none; color: inherit; }

/* ---------------- ТАБЛИЦА СРАВНЕНИЯ ---------------- */
.wl-cmp__wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.wl-cmp { width: 100%; border-collapse: collapse; min-width: 520px; }
.wl-cmp th, .wl-cmp td { padding: 16px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; font-size: 15px; }
.wl-cmp tr:last-child td { border-bottom: none; }
.wl-cmp__rowh { text-align: left; color: var(--muted); font-size: 13px; font-weight: 600; background: var(--bg);
    position: sticky; left: 0; white-space: nowrap; }
.wl-cmp thead th { background: var(--bg); position: relative; min-width: 160px; }
.wl-cmp thead a { text-decoration: none; color: var(--ink); display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
/* Рамка логотипа. Размеры картинки заданы в px, а не в «100%»: в grid-рамке проценты считались от высоты
   самой картинки, и квадратный логотип вылезал из рамки на название франшизы. Высота 56px — как у заглушки
   с первой буквой (.fr-card__logo-ph): раньше она тоже была выше рамки и стояла вплотную к названию. */
.wl-cmp__logo { flex: 0 0 auto; width: 64px; height: 56px; display: flex; align-items: center; justify-content: center; }
.wl-cmp__logo img { display: block; width: auto; height: auto; max-width: 64px; max-height: 56px; object-fit: contain; }
.wl-cmp__name { font-family: var(--font-d); font-weight: 700; font-size: 14px; line-height: 1.2; }
.wl-cmp__rm { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 6px;
    border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; }
.wl-cmp__rm:hover { border-color: #e11d48; color: #e11d48; }
.wl-cmp td b, .wl-cmp__name { color: var(--ink); }
.wl-yes { color: var(--green-deep); font-weight: 600; }

@media (max-width: 560px) {
    .wl { padding: 20px 16px 56px; }
    .fr-act { width: 32px; height: 32px; }
}

/* Сравнение на телефоне. Таблица с колонкой подписей слева показывала одну франшизу — остальные были за краем
   экрана. Здесь подпись показателя стоит строкой над значениями, а значения делят ширину поровну (--n колонок,
   число ставит js/wishlist.js): две–три франшизы видны сразу, четвёртая открывается прокруткой вбок. */
@media (max-width: 700px) {
    .wl-cmp { display: block; min-width: 0; }
    .wl-cmp thead, .wl-cmp tbody { display: block; }
    .wl-cmp tr { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(104px, 1fr)); }
    .wl-cmp th, .wl-cmp td { padding: 10px 8px 12px; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
    .wl-cmp thead th { min-width: 0; padding-top: 34px; }
    .wl-cmp thead th.wl-cmp__rowh { display: none; }
    .wl-cmp td.wl-cmp__rowh { grid-column: 1 / -1; padding: 8px 12px 0; border-bottom: 0; background: none; font-size: 12px; text-align: left; }
    .wl-cmp td.wl-cmp__rowh:empty { display: none; }
    .wl-cmp tbody tr { border-bottom: 1px solid var(--line); }
    .wl-cmp tbody tr:last-child { border-bottom: 0; }
    .wl-cmp tbody td { border-bottom: 0; }
    .wl-cmp__logo { width: 56px; height: 44px; }
    .wl-cmp__logo img { max-width: 56px; max-height: 44px; }
    .wl-cmp__name { font-size: 13px; }
    .wl-cmp__rm { width: 28px; height: 28px; top: 4px; right: 4px; }
}

/* сравнение: расширенные строки (данные приходят с сервера) */
.wl-cmp__sub { color: var(--muted); font-weight: 500; font-size: 13px; }
.wl-cmp__more { color: var(--green-deep); font-weight: 600; text-decoration: none; white-space: nowrap; }
.wl-cmp__more:hover { text-decoration: underline; }
/* последняя строка сравнения: заявка этой франшизе (окно — js/cards.js) и «Подробнее» */
.wl-cmp__acts { display: grid; gap: 10px; justify-items: center; }
.wl-cmp__lead { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 230px; min-height: 42px; box-sizing: border-box;
    padding: 9px 14px; border-radius: 10px; background: var(--btn); color: #fff; font-family: var(--font-d); font-weight: 700; font-size: 14px;
    line-height: 1.25; text-align: center; text-decoration: none; transition: background .15s ease; }
.wl-cmp__lead:hover { background: var(--btn-deep); color: #fff; }
.wl-cmp__lead:focus-visible { outline: 3px solid rgba(27, 106, 229, .45); outline-offset: 2px; }
.wl-cmp__lead-s { display: none; }
@media (max-width: 700px) {
    .wl-cmp__acts { gap: 8px; }
    .wl-cmp__lead { min-height: 38px; padding: 8px 6px; font-size: 13.5px; }
    .wl-cmp__lead-l { display: none; }
    .wl-cmp__lead-s { display: inline; }
}

/* полоса «Отправить заявку выбранным (N)» внизу экрана, пока форма ниже (сравнение; js/multilead.js) */
.ml-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: 16px;
    width: max-content; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 10px 10px 10px 18px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 14px 44px rgba(26, 43, 74, .22); animation: mlUp .22s ease; }
.ml-bar[hidden] { display: none; }
@keyframes mlUp { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.ml-bar__text { font-size: 14px; line-height: 1.35; color: var(--ink-soft); }
.ml-bar__go { flex: 0 0 auto; font: inherit; font-family: var(--font-d); font-weight: 700; font-size: 15px; color: #fff; background: var(--btn);
    border: 0; border-radius: 10px; padding: 12px 20px; cursor: pointer; white-space: nowrap; transition: background .15s ease; }
.ml-bar__go:hover { background: var(--btn-deep); }
.ml-bar__go:focus-visible { outline: 3px solid rgba(27, 106, 229, .45); outline-offset: 2px; }
@media (max-width: 640px) {
    .ml-bar { left: 8px; right: 8px; bottom: 8px; width: auto; transform: none; max-width: none; padding: 8px; animation: none; }
    .ml-bar__text { display: none; }
    .ml-bar__go { flex: 1 1 auto; padding: 13px 16px; }
}
@media (prefers-reduced-motion: reduce) { .ml-bar { animation: none; } }

/* форма «Отправить заявку сразу всем» (избранное / сравнение) */
.wl-lead { margin-top: 40px; padding: 26px 26px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); max-width: 760px; }
.wl-lead__h { font-family: var(--font-d); font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.01em; margin: 0 0 6px; color: var(--ink); }
.wl-lead__sub { color: var(--ink-soft); margin: 0 0 18px; line-height: 1.55; }
.wl-lead__list { margin: 0 0 16px; }
.wl-lead__label { font-family: var(--font-d); font-weight: 600; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.wl-lead__item { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; line-height: 1.35; }
.wl-lead__item input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--green); }
.wl-lead__item span { font-weight: 600; color: var(--ink); }
.wl-lead__note { margin: 8px 0 0; font-size: 14px; color: #b45309; }
.wl-lead .svc-form__submit:disabled { opacity: .55; cursor: not-allowed; }
/* поля формы (обёртка нужна раскладке в две колонки ниже) — тот же шаг, что у .svc-form */
.wl-lead__fields { display: grid; gap: 14px; min-width: 0; }
/* Широкий экран: блок во всю ширину страницы, слева список «Кому отправить», справа поля. Раньше блок был узким и
   стоял у левого края — под таблицей сравнения оставалась пустая правая половина. */
@media (min-width: 900px) {
    .wl-lead { max-width: none; }
    .wl-lead .svc-form { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 40px; align-items: start; }
    .wl-lead .svc-form > .wl-lead__list { margin: 0; }
}
@media (max-width: 560px) { .wl-lead { padding: 20px 16px 22px; } }

/* франшиза заявок не принимает (тип карточки): в списке «Кому отправить» она есть, но отметить её нельзя */
.wl-lead__item--off { cursor: default; }
.wl-lead__item--off span { color: var(--muted); font-weight: 500; }
.wl-lead__item--off i { font-style: normal; font-size: 13px; color: var(--muted); }

/* Сравнение: переключатель «Только различия» и отметка лучшего значения в строке (js/wishlist.js) */
.wl-cmp__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; margin: 0 0 14px; }
.wl-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--font-d); font-weight: 600; font-size: 15px; color: var(--ink); }
.wl-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.wl-switch__ui { position: relative; flex: 0 0 auto; width: 40px; height: 24px; border-radius: 12px; background: #cfd6e3; transition: background .15s ease; }
.wl-switch__ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(26, 43, 74, .25); transition: transform .15s ease; }
.wl-switch input:checked + .wl-switch__ui { background: var(--green); }
.wl-switch input:checked + .wl-switch__ui::after { transform: translateX(16px); }
.wl-switch input:focus-visible + .wl-switch__ui { outline: 3px solid rgba(27, 106, 229, .35); outline-offset: 2px; }
.wl-cmp__legend { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.wl-cmp__legend i { width: 14px; height: 14px; border-radius: 4px; background: #e3f6ea; border: 1px solid #9bd8b2; }
.wl-cmp__note { margin: -4px 0 14px; font-size: 14px; color: var(--ink-soft); }
.wl-cmp__note[hidden] { display: none; }
.wl-cmp__wrap.is-diff tr.is-same { display: none; }
.wl-cmp td.is-best { background: #e9f8ef; color: #05603a; font-weight: 700; }
.wl-cmp td.is-best::before { content: ''; display: inline-block; width: 14px; height: 14px; margin: -2px 6px 0 0; vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%2312b76a'/%3E%3Cpath d='M4.6 8.3l2.2 2.2 4.6-4.8' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.wl-cmp__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 700px) {
    .wl-cmp td.is-best::before { width: 12px; height: 12px; margin-right: 4px; }
    .wl-cmp__bar { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { .wl-switch__ui, .wl-switch__ui::after { transition: none; } }

/* End */


/* Start:/bitrix/templates/franchise/css/pick.css?17921797216104*/
/* Общая заявка нескольким франшизам: плавающая панель и окно с формой.
   Путь: /local/templates/{ШАБЛОН}/css/pick.css — подключается глобально (header.php).
   Разметка — include/pick_bar.php, логика — js/cards.js. Галочка в карточке — css/home.css (.fr-cta). */

/* ---------- панель «Выбрано франшиз: N» ---------- */
.pk-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: 14px;
    max-width: calc(100vw - 24px); padding: 10px 12px 10px 14px; background: var(--surface, #fff); border: 1px solid var(--line, #e6e9f0); border-radius: 16px;
    box-shadow: 0 14px 44px rgba(26, 43, 74, .22); font-family: var(--font-b, system-ui, sans-serif); color: var(--ink, #1a2b4a); animation: pkUp .22s ease; }
.pk-bar[hidden] { display: none; }
@keyframes pkUp { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.pk-bar__reset { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: none;
    color: var(--ink-soft, #4a5a78); cursor: pointer; }
.pk-bar__reset:hover { background: var(--bg, #f5f7fa); color: var(--ink, #1a2b4a); }
.pk-bar__text { font-size: 14px; line-height: 1.35; white-space: nowrap; }
.pk-bar__text b { font-family: var(--font-d, inherit); font-weight: 700; }
.pk-bar__lim { color: var(--muted, #7a8499); transition: color .2s ease; }
.pk-bar__sep { font-style: normal; }
.pk-bar__lim.is-warn { color: #b42318; font-weight: 600; }
.pk-bar__send { flex: 0 0 auto; font: inherit; font-family: var(--font-d, inherit); font-weight: 700; font-size: 15px; color: #fff; background: #d9480f; border: 0;
    border-radius: 10px; padding: 11px 20px; cursor: pointer; transition: background .15s ease; }
.pk-bar__send:hover { background: #c2410c; }
.pk-bar__reset:focus-visible, .pk-bar__send:focus-visible, .pk-modal__close:focus-visible, .pk-submit:focus-visible { outline: 3px solid rgba(27, 106, 229, .45); outline-offset: 2px; }
/* панель не закрывает конец страницы */
.pk-has-bar body { padding-bottom: 84px; }

/* ---------- окно с формой ---------- */
.pk-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 12px 24px; overflow-y: auto;
    background: rgba(12, 16, 26, .66); font-family: var(--font-b, system-ui, sans-serif); color: var(--ink, #1a2b4a); -webkit-overflow-scrolling: touch; }
.pk-modal[hidden] { display: none; }
.pk-modal__win { position: relative; width: 100%; max-width: 500px; background: var(--surface, #fff); border-radius: 16px; padding: 28px 24px 24px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .35); animation: pkIn .2s ease; }
@keyframes pkIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pk-modal__close { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px;
    background: none; color: var(--ink, #1a2b4a); cursor: pointer; }
.pk-modal__close:hover { background: var(--bg, #f5f7fa); }
.pk-modal__h { font-family: var(--font-d, inherit); font-weight: 800; font-size: 22px; letter-spacing: -.01em; text-align: center; margin: 0 28px 18px; }

.pk-form { display: grid; gap: 12px; }
.pk-form[hidden], .pk-ok[hidden] { display: none; }
.pk-list { display: grid; gap: 6px; max-height: 176px; overflow-y: auto; padding: 12px 14px; background: var(--bg, #f5f7fa); border-radius: 12px; }
.pk-list__label { font-size: 13px; color: var(--muted, #7a8499); }
.pk-list__item { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; font-weight: 600; line-height: 1.35; cursor: pointer; }
.pk-list__item input { flex: 0 0 auto; width: 17px; height: 17px; margin: 2px 0 0; accent-color: #d9480f; }
.pk-input { font: inherit; font-size: 15px; color: var(--ink, #1a2b4a); width: 100%; box-sizing: border-box; background: #f8fafc; border: 1px solid var(--line, #e6e9f0);
    border-radius: 10px; padding: 13px 14px; outline: none; transition: border-color .15s ease, background .15s ease; }
.pk-input:focus { border-color: var(--green, #1b6ae5); background: #fff; }
textarea.pk-input { resize: vertical; min-height: 78px; line-height: 1.45; }
.pk-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted, #7a8499); line-height: 1.5; cursor: pointer; }
.pk-consent input { flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0; }
.pk-consent a { color: var(--green-deep, #0d4ba0); }
.pk-submit { font: inherit; font-family: var(--font-d, inherit); font-weight: 700; font-size: 16px; color: #fff; background: var(--btn, #0d4ba0); border: 0; border-radius: 12px;
    padding: 14px 18px; width: 100%; cursor: pointer; transition: background .15s ease; }
.pk-submit:hover { background: var(--btn-deep, #083a80); }
.pk-submit:disabled { opacity: .55; cursor: not-allowed; }
.pk-status { margin: 0; font-size: 14px; color: #b42318; text-align: center; }
.pk-status[hidden] { display: none; }
.pk-ok { text-align: center; display: grid; gap: 12px; padding: 8px 0 0; }
.pk-ok p { margin: 0; color: var(--ink-soft, #4a5a78); }
.pk-ok .pk-ok__h { font-family: var(--font-d, inherit); font-weight: 700; font-size: 20px; color: var(--ink, #1a2b4a); }

@media (max-width: 560px) {
    .pk-bar { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; gap: 8px; padding: 8px; animation: none; }
    .pk-bar__text { flex: 1 1 auto; white-space: normal; font-size: 13px; }
    .pk-bar__lim { display: block; }
    .pk-bar__sep { display: none; }
    .pk-bar__send { padding: 11px 16px; }
    .pk-modal { padding: 12px 8px; }
    .pk-modal__win { padding: 24px 16px 18px; }
    .pk-modal__h { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .pk-bar, .pk-modal__win { animation: none; } }

/* End */


/* Start:/bitrix/templates/franchise/template_styles.css?1792179720305*/
/* Базовый стиль шаблона. Основные стили подключаются через SetAdditionalCSS:
   layout.css (шапка/подвал, токены) — в header.php,
   home.css / catalog.css / franchise.css — на соответствующих страницах. */

/* End */
/* /bitrix/templates/franchise/css/fonts.css?17921797205882 */
/* /bitrix/templates/franchise/css/layout.css?179217972139454 */
/* /bitrix/templates/franchise/css/ux.css?179217972139635 */
/* /bitrix/templates/franchise/css/wishlist.css?179217972115504 */
/* /bitrix/templates/franchise/css/pick.css?17921797216104 */
/* /bitrix/templates/franchise/template_styles.css?1792179720305 */